reneco-hierarchized-picker 0.3.7 → 0.3.9

package/dist/cjs/loader.cjs.js

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

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

@@ -17777,47 +17777,41 @@ var lodash = createCommonjsModule(function (module, exports) {
 
 var browser = XMLHttpRequest;
 
-const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--mui-typography-tree-font-size, 14px) !important;font-weight:var(--mui-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(--mui-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--mui-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(--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(--mui-palette-background-light, #e8a86c);display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background: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(--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(--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(--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(--mui-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color: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(--mui-palette-background-light, var(--ion-color-light, #FAFAFA))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color: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(--mui-palette-primary-light) !important;color: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(--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-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(--mui-typography-body-font-size, 14px) !important;font-weight:var(--mui-typography-body-font-weight, 400) !important}reneco-hierarchized-picker .hierarchized-picker-search input{width:90%;color:var(--mui-palette-font-color, var(--ion-color-light-tint, #fff)) !important}reneco-hierarchized-picker .hierarchized-picker-search{background-color: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 .hierarchized-picker-tree-area{width:333px !important;padding-top:48px}reneco-hierarchized-picker .hierarchized-picker-modal-area{background-color: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(--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(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;border-color:var(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--ion-color-background, var(--mui-palette-background-default, rgba(221, 169, 37, 0.18)));border:none !important;border-radius:4px}reneco-hierarchized-picker #searchInTree:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}.hierarchized-picker-raw-tree-area.readonly li.treejs-node{cursor:initial;pointer-events:none}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--ion-color-primary, var(--mui-palette-primary-main, #d58433));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--mui-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
+const 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-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 .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 #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}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}.hierarchized-picker-raw-tree-area.readonly li.treejs-node{cursor:initial;pointer-events:none}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
 
 const waitBeforeTriggerSearch = 1000;
 const defaultLanguage = 'en';
-// const defaultPickerTheme = {
-//   palette: {
-//     primary: {
-//       main: '#d58433',
-//     },
-//     background: {
-//       default: '#dda9252e',
-//       light: '#e8a86c',
-//     },
-//   },
-//   typography: {
-//     body: {
-//       fontSize: '14px',
-//       fontWeight: '400',
-//     },
-//   },
-// };
 const defaultPickerTheme = {
   palette: {
     primary: {
-      main: '#009688',
-      light: '#B2DFDB',
+      // slider color?
+      main: '#888',
+      // selected node?
+      light: '#888',
+      // font for selected node?
       contrastText: '#000',
     },
     background: {
-      default: '#222',
-      light: '#444',
-      main: '#222',
-      dark: '#000'
+      // opened parent bg?
+      default: '#ccc',
+      // closed parent bg?
+      // + search input bg in input mode?
+      light: '#eee',
+      // nothing?
+      main: '#000',
+      // background modale?
+      dark: '#fff'
     },
     text: {
-      primary: "#fff"
+      // font default? 
+      primary: "#000"
     }
   },
   typography: {
     body: {
+      // font size default?
       fontSize: '14px',
+      // font weight default?
       fontWeight: '400',
     },
   },
@@ -17839,10 +17833,13 @@ const HierarchizedPickerComponent = class {
     this.valueChange = index.createEvent(this, "valueChange", 7);
     this.itemDropped = index.createEvent(this, "itemDropped", 7);
     this.itemContextMenuItemClick = index.createEvent(this, "itemContextMenuItemClick", 7);
+    this.searchResult = index.createEvent(this, "searchResult", 7);
     this.canload = true; // Determines wether the component may be loaded
     this.ready = false; // State to determine if all the elements of the component have been loaded
     this.searchToDisplay = 0; // Counter to trigger the research on proper time
     this.ignoreOptionsChanges = true; // Determines wether the options @Prop under @Watch will be ignored (to avoid circular calls)
+    this.realSearchResultData = {}; // Contains the last search's result's data that will be returned
+    this.lastSearchMatchCounter = 0; // Counter of number of matches for last search
     this.setValueOnClick = true; // Tells wether we edit the picker value on click in the tree
     this.mylog = console.log; // Custom log function for debug purposes
     // Used to control wether we're draging over the same node, prevents the same event to be called multiple times
@@ -17866,6 +17863,7 @@ const HierarchizedPickerComponent = class {
     this.displayedValue = undefined;
     this.value = [];
     this.shownTree = false;
+    this.searchResultData = {};
     this.hasFocus = undefined;
     this.errorToLog = '';
   }
@@ -17897,6 +17895,23 @@ const HierarchizedPickerComponent = class {
     }
     this.setNewOption(this.theOptions);
   }
+  getSearchResultWithCounter(searchResult) {
+    return { data: searchResult, matches: this.lastSearchMatchCounter };
+  }
+  searchResultDataChange(newValue, oldValue) {
+    if (newValue && newValue != oldValue) {
+      if (newValue === null || newValue === void 0 ? void 0 : newValue.value) {
+        this.realSearchResultData = this.getSearchResultWithCounter(newValue);
+        this.searchResult.emit(this.realSearchResultData);
+      }
+      else {
+        this.realSearchResultData = {};
+      }
+    }
+  }
+  getSearchResult() {
+    return Promise.resolve(this.getSearchResultWithCounter(this.searchResultData));
+  }
   logError(messageToLog) {
     try {
       console.error('--- Hierarchized picker ' + this.componentID + ' ERROR ---', messageToLog);
@@ -18235,17 +18250,17 @@ const HierarchizedPickerComponent = class {
       event.preventDefault();
     });
     const docstyle = document.documentElement.style;
-    docstyle.setProperty('--mui-palette-primary-main', ((_a = this.theOptions.theme) === null || _a === void 0 ? void 0 : _a.palette.primary.main) || defaultPickerTheme.palette.primary.main);
-    docstyle.setProperty('--mui-palette-primary-light', ((_b = this.theOptions.theme) === null || _b === void 0 ? void 0 : _b.palette.primary.light) || defaultPickerTheme.palette.primary.light);
-    docstyle.setProperty('--mui-palette-primary-contrastText', ((_c = this.theOptions.theme) === null || _c === void 0 ? void 0 : _c.palette.primary.contrastText) || defaultPickerTheme.palette.primary.contrastText);
-    docstyle.setProperty('--mui-palette-background-default', ((_d = this.theOptions.theme) === null || _d === void 0 ? void 0 : _d.palette.background.default) || defaultPickerTheme.palette.background.default);
-    docstyle.setProperty('--mui-palette-background-light', ((_e = this.theOptions.theme) === null || _e === void 0 ? void 0 : _e.palette.background.light) || defaultPickerTheme.palette.background.light);
-    docstyle.setProperty('--mui-palette-background-dark', ((_f = this.theOptions.theme) === null || _f === void 0 ? void 0 : _f.palette.background.dark) || defaultPickerTheme.palette.background.dark);
-    docstyle.setProperty('--mui-typography-body-font-size', ((_g = this.theOptions.theme) === null || _g === void 0 ? void 0 : _g.typography.body.fontSize) || defaultPickerTheme.typography.body.fontSize);
-    docstyle.setProperty('--mui-typography-tree-font-size', ((_h = this.theOptions.theme) === null || _h === void 0 ? void 0 : _h.typography.body.fontSize) || defaultPickerTheme.typography.body.fontSize);
-    docstyle.setProperty('--mui-typography-body-font-weight', ((_j = this.theOptions.theme) === null || _j === void 0 ? void 0 : _j.typography.body.fontWeight) || defaultPickerTheme.typography.body.fontWeight);
-    docstyle.setProperty('--mui-typography-tree-font-weight', ((_k = this.theOptions.theme) === null || _k === void 0 ? void 0 : _k.typography.body.fontWeight) || defaultPickerTheme.typography.body.fontWeight);
-    docstyle.setProperty('--mui-palette-font-color', ((_l = this.theOptions.theme) === null || _l === void 0 ? void 0 : _l.palette.text.primary) || defaultPickerTheme.palette.text.primary);
+    docstyle.setProperty('--hpicker-theme-palette-primary-main', ((_a = this.theOptions.theme) === null || _a === void 0 ? void 0 : _a.palette.primary.main) || defaultPickerTheme.palette.primary.main);
+    docstyle.setProperty('--hpicker-theme-palette-primary-light', ((_b = this.theOptions.theme) === null || _b === void 0 ? void 0 : _b.palette.primary.light) || defaultPickerTheme.palette.primary.light);
+    docstyle.setProperty('--hpicker-theme-palette-primary-contrastText', ((_c = this.theOptions.theme) === null || _c === void 0 ? void 0 : _c.palette.primary.contrastText) || defaultPickerTheme.palette.primary.contrastText);
+    docstyle.setProperty('--hpicker-theme-palette-background-default', ((_d = this.theOptions.theme) === null || _d === void 0 ? void 0 : _d.palette.background.default) || defaultPickerTheme.palette.background.default);
+    docstyle.setProperty('--hpicker-theme-palette-background-light', ((_e = this.theOptions.theme) === null || _e === void 0 ? void 0 : _e.palette.background.light) || defaultPickerTheme.palette.background.light);
+    docstyle.setProperty('--hpicker-theme-palette-background-dark', ((_f = this.theOptions.theme) === null || _f === void 0 ? void 0 : _f.palette.background.dark) || defaultPickerTheme.palette.background.dark);
+    docstyle.setProperty('--hpicker-theme-typography-body-font-size', ((_g = this.theOptions.theme) === null || _g === void 0 ? void 0 : _g.typography.body.fontSize) || defaultPickerTheme.typography.body.fontSize);
+    docstyle.setProperty('--hpicker-theme-typography-tree-font-size', ((_h = this.theOptions.theme) === null || _h === void 0 ? void 0 : _h.typography.body.fontSize) || defaultPickerTheme.typography.body.fontSize);
+    docstyle.setProperty('--hpicker-theme-typography-body-font-weight', ((_j = this.theOptions.theme) === null || _j === void 0 ? void 0 : _j.typography.body.fontWeight) || defaultPickerTheme.typography.body.fontWeight);
+    docstyle.setProperty('--hpicker-theme-typography-tree-font-weight', ((_k = this.theOptions.theme) === null || _k === void 0 ? void 0 : _k.typography.body.fontWeight) || defaultPickerTheme.typography.body.fontWeight);
+    docstyle.setProperty('--hpicker-theme-palette-font-color', ((_l = this.theOptions.theme) === null || _l === void 0 ? void 0 : _l.palette.text.primary) || defaultPickerTheme.palette.text.primary);
   }
   async componentWillLoad() {
     this.isDisabled = this.disabled;
@@ -18479,18 +18494,25 @@ const HierarchizedPickerComponent = class {
           that.mylog('XHR ONLOAD', e, xhr.statusText);
           if (xhr.readyState === 4) {
             if (xhr.status === 200) {
-              that.mylog('XHR 200', JSON.parse(xhr.responseText));
+              const parsedResult = JSON.parse(xhr.responseText);
+              that.mylog('XHR 200', parsedResult);
               if (that.rawData) {
-                that.rawData = that.searchAndMergeDataClassification(that.rawData, JSON.parse(xhr.responseText));
+                that.rawData = that.searchAndMergeDataClassification(that.rawData, parsedResult);
               }
               else {
-                that.rawData = JSON.parse(xhr.responseText);
+                that.rawData = parsedResult;
               }
-              resolve(JSON.parse(xhr.responseText));
+              resolve(parsedResult);
               if (init) {
                 that.formatDefaultValue();
                 that.showSelectedNodes();
               }
+              if (options.search) {
+                that.searchResultData = parsedResult;
+              }
+              else {
+                that.searchResultData = {};
+              }
               that.ready = true;
             }
             else {
@@ -18532,14 +18554,21 @@ const HierarchizedPickerComponent = class {
             this.mylog('getDataFromSource XHR ONLOAD', e, xhr.statusText);
             if (xhr.readyState === 4) {
               if (xhr.status === 200) {
-                this.mylog('getDataFromSource XHR 200', JSON.parse(xhr.responseText));
+                const parsedResult = JSON.parse(xhr.responseText);
+                this.mylog('getDataFromSource XHR 200', parsedResult);
                 if (this.rawData) {
-                  this.rawData = this.searchAndMergeData(this.rawData, JSON.parse(xhr.responseText));
+                  this.rawData = this.searchAndMergeData(this.rawData, parsedResult);
+                }
+                else {
+                  this.rawData = parsedResult;
+                }
+                resolve(parsedResult);
+                if (options.searchedValue) {
+                  this.searchResultData = parsedResult;
                 }
                 else {
-                  this.rawData = JSON.parse(xhr.responseText);
+                  this.searchResultData = {};
                 }
-                resolve(JSON.parse(xhr.responseText));
                 this.ready = true;
               }
               else {
@@ -18746,6 +18775,9 @@ const HierarchizedPickerComponent = class {
     }
   }
   triggerTreeDisplay(dataToLoad, searched) {
+    if (searched) {
+      this.lastSearchMatchCounter = 0;
+    }
     if (this.theOptions.origin == 'thesaurus') {
       this.translateDataFromThesaurus(dataToLoad, searched);
     }
@@ -18827,6 +18859,9 @@ const HierarchizedPickerComponent = class {
             const matched = searchValue(objToPush, false);
             objToPush.isDesaturated = !matched;
             objToPush.searchMatch = searchValue(objToPush, true);
+            if (objToPush.searchMatch) {
+              this.lastSearchMatchCounter = this.lastSearchMatchCounter + 1;
+            }
             pushMe = matched || this.theOptions.searchResultPresentsUnMatched;
           }
           else {
@@ -18880,6 +18915,9 @@ const HierarchizedPickerComponent = class {
             const matched = searchValue(objToPush, false);
             objToPush.isDesaturated = !matched;
             objToPush.searchMatch = searchValue(objToPush, true);
+            if (objToPush.searchMatch) {
+              this.lastSearchMatchCounter = this.lastSearchMatchCounter + 1;
+            }
             pushMe = matched || this.theOptions.searchResultPresentsUnMatched;
           }
           else {
@@ -18933,6 +18971,9 @@ const HierarchizedPickerComponent = class {
             const matched = searchValue(objToPush, false);
             objToPush.isDesaturated = !matched;
             objToPush.searchMatch = searchValue(objToPush, true);
+            if (objToPush.searchMatch) {
+              that.lastSearchMatchCounter = that.lastSearchMatchCounter + 1;
+            }
             pushMe = matched || that.theOptions.searchResultPresentsUnMatched;
           }
           else {
@@ -19401,6 +19442,8 @@ const HierarchizedPickerComponent = class {
       else {
         this.translateDataForTree(this.rawData);
       }
+      //Reset searched data
+      this.searchResultData = {};
       //Reset autocomplete
       this.displayAutocompleteWithResults(null, '');
       //Recheck previously selected fields ?
@@ -19683,6 +19726,7 @@ const HierarchizedPickerComponent = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "searchResultData": ["searchResultDataChange"],
     "errorToLog": ["logError"],
     "newoptions": ["setNewOptions"],
     "newfilter": ["setNewFilter"],

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

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

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

@@ -33,8 +33,8 @@ reneco-hierarchized-picker .scrollable {
 reneco-hierarchized-picker .treejs {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    font-size: var(--mui-typography-tree-font-size, 14px) !important;
-    font-weight: var(--mui-typography-tree-font-weight, 400) !important;
+    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 {
@@ -86,10 +86,10 @@ reneco-hierarchized-picker .treejs {
     transition: border-color 150ms;
   }
   reneco-hierarchized-picker .treejs .treejs-switcher:hover:before {
-    border-top: 4px solid var(--mui-palette-font-color);
+    border-top: 4px solid var(--hpicker-theme-palette-font-color);
   }
   reneco-hierarchized-picker .treejs-node__checked > .treejs-switcher:before {
-    border-top: 4px solid var(--mui-palette-primary-contrastText) !important;
+    border-top: 4px solid var(--hpicker-theme-palette-primary-contrastText) !important;
   }
   reneco-hierarchized-picker .treejs .treejs-node__close > .treejs-switcher {
     -webkit-transform: rotate(-90deg);
@@ -146,7 +146,7 @@ reneco-hierarchized-picker .treejs {
     transform: rotate(45deg);
   }
   reneco-hierarchized-picker .treejs .treejs-node__halfchecked {
-    background-color: var(--mui-palette-background-default, #e8a86c);
+    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;
@@ -203,14 +203,14 @@ reneco-hierarchized-picker .treejs {
     font-weight: bolder;
   }
   reneco-hierarchized-picker .treejs .dragging {
-    background: var(--mui-palette-background-light, #e8a86c);
+    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(--mui-palette-background-light, #e8a86c);
+    background: var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));
   }
   reneco-hierarchized-picker .treejs .dragover-over::after {
     content: "";
@@ -220,7 +220,7 @@ reneco-hierarchized-picker .treejs {
     position: absolute;
     top: 0;
     left: 0;
-    background: var(--mui-palette-primary-main, #d58433);
+    background: var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433));
   }
   reneco-hierarchized-picker .treejs .dragover-before::after {
     content: "";
@@ -230,7 +230,7 @@ reneco-hierarchized-picker .treejs {
     position: absolute;
     top: 0;
     left: 0;
-    background: var(--mui-palette-primary-main, #d58433);
+    background: var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433));
   }
   reneco-hierarchized-picker .treejs .dragover-after::after {
     content: "";
@@ -240,7 +240,7 @@ reneco-hierarchized-picker .treejs {
     position: absolute;
     bottom: 0;
     left: 0;
-    background: var(--mui-palette-primary-main, #d58433);
+    background: var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433));
   }
 
 
@@ -263,13 +263,13 @@ reneco-hierarchized-picker ul.treejs-nodes:first-child {
     padding-left: 0px !important;
     margin-top: 0px !important;
     margin-left: 0px !important;
-    background-color: var(--mui-palette-background-dark);
+    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(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF));
+    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 {
@@ -286,10 +286,10 @@ reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close u
 }
 
 reneco-hierarchized-picker li.treejs-node__close {
-    background-color: var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA));
+    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(--mui-palette-background-default, #e8a86c);
+    background-color: var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));
     padding-bottom: 0px !important;
 }
 
@@ -306,8 +306,8 @@ reneco-hierarchized-picker ul li:last-child {
 }
 
 reneco-hierarchized-picker li.treejs-node__checked {
-    background-color: var(--mui-palette-primary-light) !important;
-    color : var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000))!important;
+    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 {
@@ -322,7 +322,7 @@ reneco-hierarchized-picker .treejs-node.readonly_node {
 
 reneco-hierarchized-picker .treejs-node:not(.readonly_node) {
     user-select: none;
-    color: var(--mui-palette-font-color, black);
+    color: var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black));
 }
 
 reneco-hierarchized-picker .hierarchized-picker-container{
@@ -366,17 +366,17 @@ reneco-hierarchized-picker .hierarchized-picker-input input, reneco-hierarchized
   background: transparent;
   outline: none;
 
-  font-size: var(--mui-typography-body-font-size, 14px) !important;
-  font-weight: var(--mui-typography-body-font-weight, 400) !important;
+  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(--mui-palette-font-color, var(--ion-color-light-tint, #fff)) !important;
+  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(--mui-palette-background-light, var(--ion-color-medium-tint, #E0E0E0));
+  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;
@@ -390,7 +390,7 @@ reneco-hierarchized-picker .hierarchized-picker-tree-area{
 }
 
 reneco-hierarchized-picker .hierarchized-picker-modal-area{
-  background-color: var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)) !important;
+  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;
@@ -441,7 +441,7 @@ reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{
 
 /* ICON DROPDOWN */
 reneco-hierarchized-picker .treejs .treejs-switcher:before {
-  border-top : 4px solid var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212));
+  border-top : 4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)));
 }
 
 /* ICON CHECK BOX */
@@ -449,14 +449,14 @@ reneco-hierarchized-picker .treejs .treejs-checkbox:before {
     box-shadow: none !important;
 }
 reneco-hierarchized-picker .treejs .treejs-node__checked > .treejs-checkbox:before, reneco-hierarchized-picker .treejs .treejs-node__halfchecked > .treejs-checkbox:before {
-    background-color: var(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;
-    border-color: var(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;
+    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;
     box-shadow: none !important;
 }
 
 reneco-hierarchized-picker #searchInTree {
     padding: 8.5px 8px;
-    background: var(--ion-color-background, var(--mui-palette-background-default, rgba(221, 169, 37, 0.18)));
+    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;
 }
@@ -506,7 +506,7 @@ reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--ion-color-primary, var(--mui-palette-primary-main, #d58433));
+    background: var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));
     width: 8px;
     margin: 5px;
     border-radius: 5px;
@@ -534,7 +534,7 @@ reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node {
   }
 
   [class$="-dark"] reneco-hierarchized-picker li.treejs-node__checked {
-    background-color: var(--ion-color-background, var(--mui-palette-background-default, rgba(221, 169, 37, 0.18)));
+    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;
   }