reneco-hierarchized-picker 0.4.3-beta.9 → 0.5.0

package/dist/collection/components/search-input/search-input.js

@@ -31,9 +31,7 @@ export class SearchInput {
   render() {
     return (h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      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",
-      //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
-      placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
+      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", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
   }
   static get is() { return "search-input"; }
   static get originalStyleUrls() {

package/dist/collection/components/treejs/index.js

@@ -188,49 +188,6 @@ Tree.prototype.bindEvent = function (ele) {
     else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
       this.onSwitcherClick(target);
     }
-    const hasUndefinedchild = e.target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && e.target.parentNode.querySelectorAll('ul').length == 0;
-    //CUSTOM
-    const childspans = Array.prototype.slice.call(e.target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
-      return ele.parentNode.parentNode.parentNode === e.target.parentNode;
-    });
-    let undefinedChildren = [];
-    //This may be a problem the day a node value is "undefined"
-    undefinedChildren = childspans.filter(ele => {
-      return ele.textContent === 'undefined';
-    });
-    // If the user clicked on an unloaded node
-    if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
-      // Clear the subnode HTML
-      if (undefinedChildren.length > 0) {
-        e.target.parentNode.querySelector('ul').innerHTML = '';
-      }
-      // If source is webservice (it shouldn't be something else)
-      if (this.options.parentApi.theOptions.source == 'webservice') {
-        if (this.options.parentApi.theOptions.origin == 'classification') {
-          const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
-          const contextualApiURL = this.options.parentApi.getContextualApiURL();
-          // WS Call
-          this.options.rawDataManager
-            .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-        else {
-          // WS Call
-          this.options.rawDataManager
-            .getFromSource(this.options.parentApi.theOptions.url, {
-            StartNodeID: target.parentNode.nodeId,
-            lng: this.options.parentApi.theOptions.options.lng,
-            IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
-          }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-      }
-      this.onSwitcherClick(target);
-    }
   }, false);
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
@@ -239,8 +196,6 @@ Tree.prototype.onItemClick = async function (id, rightclick = false) {
     return;
   const pickerValue = await this.options.parentApi.getValue();
   if (!rightclick || !pickerValue || pickerValue.nodeid != id) {
-    if (!this.options.parentApi.theOptions.multiple)
-      this.emptyNodesCheckStatus();
     this.options.parentApi.setNodeAsSelected(id, this, true);
   }
 };
@@ -367,6 +322,48 @@ Tree.prototype.markWillUpdateNode = function (node) {
   this.willUpdateNodesById[node.id] = node;
 };
 Tree.prototype.onSwitcherClick = function (target) {
+  const hasUndefinedchild = target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && target.parentNode.querySelectorAll('ul').length == 0;
+  //CUSTOM
+  const childspans = Array.prototype.slice.call(target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
+    return ele.parentNode.parentNode.parentNode === target.parentNode;
+  });
+  let undefinedChildren = [];
+  //This may be a problem the day a node value is "undefined"
+  undefinedChildren = childspans.filter(ele => {
+    return ele.textContent === 'undefined';
+  });
+  // If the user clicked on an unloaded node
+  if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
+    // Clear the subnode HTML
+    if (undefinedChildren.length > 0) {
+      target.parentNode.querySelector('ul').innerHTML = '';
+    }
+    // If source is webservice (it shouldn't be something else)
+    if (this.options.parentApi.theOptions.source == 'webservice') {
+      if (this.options.parentApi.theOptions.origin == 'classification') {
+        const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
+        const contextualApiURL = this.options.parentApi.getContextualApiURL();
+        // WS Call
+        this.options.rawDataManager
+          .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+      else {
+        // WS Call
+        this.options.rawDataManager
+          .getFromSource(this.options.parentApi.theOptions.url, {
+          StartNodeID: target.parentNode.nodeId,
+          lng: this.options.parentApi.theOptions.options.lng,
+          IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
+        }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+    }
+  }
   const liEle = target.parentNode;
   const ele = liEle.lastChild;
   const height = ele.scrollHeight;
@@ -404,6 +401,9 @@ Tree.prototype.onSwitcherClick = function (target) {
       },
     });
   }
+  return new Promise((resolve) => {
+    resolve(this);
+  });
 };
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;
@@ -536,11 +536,10 @@ Tree.prototype.createLiEle = function (node, closed) {
   else {
     li.classList.add('treejs-placeholder');
   }
-  if (!this.options.parentApi || (this.options.parentApi && this.options.parentApi.theOptions.multiple)) {
-    const checkbox = document.createElement('span');
-    checkbox.classList.add('treejs-checkbox');
-    li.appendChild(checkbox);
-  }
+  const checkbox = document.createElement('span');
+  checkbox.classList.add('treejs-checkbox');
+  checkbox.style.display = ((!this.options.parentApi || (this.options.parentApi && this.options.parentApi.theOptions.multiple)) ? "inline-block" : "none");
+  li.appendChild(checkbox);
   const label = document.createElement('span');
   label.classList.add('treejs-label');
   const text = document.createTextNode(node.text);

package/dist/collection/core/options-manager.js

@@ -11,10 +11,12 @@ export class OptionsManager {
       showAutocomplete: false,
       openTreeWhenLoaded: false,
       displayRootNode: false,
+      keyboardNavigation: false,
       dragAndDropEnabled: false,
       errorsInInput: true,
       isFullpath: true,
       defaultValue: [],
+      defaultValueIsFullpath: false,
     };
     const validatedOptions = Object.assign(Object.assign({}, defaults), options);
     // Validate specific fields

package/dist/collection/features/events/focus-handlers.js

@@ -1,3 +1,4 @@
+import { setupKeyboardNavigation } from '../../features/keyboard-navigation/keyboard-navigation';
 // Utility functions
 export function isInsidePicker(component, target) {
   return target !== null && component.el.contains(target);
@@ -36,17 +37,17 @@ export function handleFocusEvent(component, type) {
   }
 }
 export function manageFocusOut(component, event) {
-  const relatedTarget = event.relatedTarget;
-  if (!isInsidePicker(component, relatedTarget)) {
-    setTimeout(() => {
-      if (!isInsidePicker(component, document.activeElement)) {
-        handleFocusEvent(component, 'hide');
-      }
-    }, 100);
-  }
-  else {
-    handleFocusEvent(component, 'search');
-  }
+  // TODO > REVIEW THIS, IT SEEMS TO PREVENT PROPER FOCUS MANAGEMENT RATHER THAN IMPROVING IT
+  // const relatedTarget = (event.relatedTarget || event.target) as HTMLElement;
+  // if (!isInsidePicker(component, relatedTarget)) {
+  //     setTimeout(() => {
+  //         if (!isInsidePicker(component, document.activeElement)) {
+  //             handleFocusEvent(component, 'hide');
+  //         }
+  //     }, 100);
+  // } else {
+  //     handleFocusEvent(component, 'search');
+  // }
 }
 export function clickPickerModalArea(component, _event) {
   if (component.pickerClass === 'fieldError') {
@@ -58,6 +59,9 @@ export function clickPickerModalArea(component, _event) {
   else {
     component.mylog('Ignored modal click');
   }
+  if (component.theOptions.mode == 'tree') {
+    setupKeyboardNavigation(component, component.optionsManager, component.navigateInTree);
+  }
 }
 // Exposed event handlers
 export function focusInSearchEvent(component) {

package/dist/collection/features/keyboard-navigation/keyboard-navigation.js

@@ -1,67 +1,93 @@
-import { focusMainInput } from "../events/focus-handlers";
-export function setupKeyboardNavigation(component, navigateInTree) {
-  const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
+let focusedNodeIndex = 0;
+export function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
+  if (!optionsManager.getOptions().keyboardNavigation)
+    return;
+  const treeArea = component.el.querySelector('.hierarchized-picker-tree-area') || component.el.querySelector('.hierarchized-picker-raw-tree-area');
   if (!treeArea)
     return;
-  let focusedNodeIndex = 0;
   function focusNode(allLiElements, liElementToFocus) {
     Object.values(allLiElements).forEach((liNode) => {
       liNode.classList.remove('treejs-node__focused');
     });
     liElementToFocus.classList.add('treejs-node__focused');
   }
-  component.el.addEventListener('keydown', (event) => {
-    var _a, _b;
-    event.stopPropagation();
-    const tree = component.loadedTreeJs;
-    const treeNodesFromTree = tree.treeNodes;
-    if (!tree || !treeNodesFromTree.length)
-      return;
-    const spaceNode = treeNodesFromTree[focusedNodeIndex];
-    const activeNode = treeNodesFromTree[focusedNodeIndex];
-    const liElement = tree.liElementsById[activeNode.id];
-    switch (event.key) {
-      case 'Tab':
-      case '0':
-        event.preventDefault();
-        if (true) { //(spaceNode?.nodeId) {
-          component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-          component.showTree('hide');
-          setTimeout(() => focusMainInput(component), 100);
-        }
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
-        const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
-        const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
-        focusNode(tree.liElementsById, newLiElementUp);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
-        const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
-        const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
-        focusNode(tree.liElementsById, newLiElementDown);
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        const leftSwitcher = liElement.querySelector('.treejs-switcher');
-        if (leftSwitcher) {
-          (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
-          component.showTree('hide');
+  function findAllTreeNodes(treeNodes, liElementsById) {
+    let allNodes = [];
+    const traverse = (nodes) => {
+      nodes.forEach(node => {
+        allNodes.push(node);
+        if (node.children && node.children.length > 0 && !liElementsById[node.id].classList.contains("treejs-node__close")) {
+          traverse(node.children);
         }
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        const rightSwitcher = liElement.querySelector('.treejs-switcher');
-        if (rightSwitcher) {
-          (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
-        }
-        break;
-    }
-    navigateInTree.emit(event.key);
-  });
-  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes)
-    setTimeout(() => focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]), 100);
+      });
+    };
+    traverse(treeNodes);
+    return allNodes;
+  }
+  focusedNodeIndex = 0;
+  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
+    focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
+  }
+  if (!component._keydownListenerAdded) {
+    component._keydownListenerAdded = true;
+    component.el.addEventListener('keydown', (event) => {
+      var _a, _b;
+      event.stopPropagation();
+      const tree = component.loadedTreeJs;
+      let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
+      if (!tree || !treeNodesFromTree.length)
+        return;
+      let spaceNode = treeNodesFromTree[focusedNodeIndex];
+      let activeNode = treeNodesFromTree[focusedNodeIndex];
+      let liElement = tree.liElementsById[activeNode.id];
+      const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
+      switch (event.key.toLowerCase()) {
+        case 'tab':
+        case '0':
+          event.preventDefault();
+          if (true) { //(spaceNode?.nodeId) {
+            component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
+            if (optionsManager.getOptions().mode != "tree" && !optionsManager.getOptions().multiple) {
+              setTimeout(() => {
+                component.showTree('hide');
+                // TODO put back? >> focusMainInput(component);
+              }, 100);
+            }
+          }
+          break;
+        case 'arrowup':
+          event.preventDefault();
+          focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
+          const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
+          const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
+          newLiElementUp.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          focusNode(tree.liElementsById, newLiElementUp);
+          break;
+        case 'arrowdown':
+          event.preventDefault();
+          focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
+          const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
+          const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
+          focusNode(tree.liElementsById, newLiElementDown);
+          newLiElementDown.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          break;
+        case 'arrowleft':
+          event.preventDefault();
+          const leftSwitcher = liElement.querySelector('.treejs-switcher');
+          if (leftSwitcher) {
+            (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
+          }
+          break;
+        case 'arrowright':
+          event.preventDefault();
+          const rightSwitcher = liElement.querySelector('.treejs-switcher');
+          if (rightSwitcher) {
+            (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
+          }
+          break;
+      }
+      if (handledEvents.includes(event.key.toLowerCase()))
+        navigateInTree.emit(event);
+    });
+  }
 }

package/dist/collection/features/tree/tree-utils.js

@@ -47,7 +47,7 @@ export function findNodeById(tree, nodeId) {
 /**
  * Fills the tree with nodes based on the provided object.
  */
-export function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
+export function fillTreeWithObject(tree, myObject, searched, options) {
   const searchResultPresentsUnMatched = options.searchResultPresentsUnMatched;
   if (myObject && myObject.length) {
     myObject.forEach(value => {
@@ -79,7 +79,6 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
       const objToPush = {
         id: keyPropFromNode,
         nodeId: keyPropFromNode,
-        depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
         fullpathTranslated: fullpathTranslatedPropFromNode,
@@ -88,7 +87,7 @@ export function fillTreeWithObject(tree, myObject, searched, options, depth = 0)
         isDesaturated: false,
         searchMatch: false,
       };
-      const childTree = fillTreeWithObject(objToPush.children, childrenPropFromNode, searched, options, depth + 1);
+      const childTree = fillTreeWithObject(objToPush.children, childrenPropFromNode, searched, options);
       let pushMe = false;
       if (searched) {
         const matched = searchValue(objToPush, false, searched);
@@ -114,6 +113,11 @@ export function completeCurrentTreeWithTree(treeJsInstance, newTree, options) {
   var _a;
   const ElmID = newTree.key || newTree.id || newTree.ID;
   const targetNode = findNodeById(treeJsInstance, ElmID);
+  if (ElmID == 0 && newTree.children && newTree.children.length > 0) {
+    newTree.children.forEach(child => {
+      completeCurrentTreeWithTree(treeJsInstance, child, options);
+    });
+  }
   if (targetNode) {
     targetNode.children = [];
     let ulElem = (_a = treeJsInstance.liElementsById[ElmID]) === null || _a === void 0 ? void 0 : _a.querySelector('ul');
@@ -129,6 +133,11 @@ export function completeCurrentTreeWithTree(treeJsInstance, newTree, options) {
       targetNode.children.push(item);
       treeJsInstance.nodesById[item.id] = item;
       treeJsInstance.liElementsById[item.id] = liElm;
+      if (item.children && item.children.some(child => Object.keys(child).length > 0)) {
+        newTree.children.forEach(child => {
+          completeCurrentTreeWithTree(treeJsInstance, child, options);
+        });
+      }
     });
   }
 }

package/dist/collection/utils/conf-helper.js

@@ -99,6 +99,10 @@ export function isInstanceOfIConf(object) {
     toret = false;
     errorToLog = "options.displayRootNode value '" + object.displayRootNode + "' doesn't meet interface IConf requirements";
   }
+  if (!((!object.keyboardNavigation && typeof object.keyboardNavigation != 'boolean') || typeof object.keyboardNavigation == 'boolean')) {
+    toret = false;
+    errorToLog = "options.keyboardNavigation value '" + object.keyboardNavigation + "' doesn't meet interface IConf requirements";
+  }
   if (!((!object.dragAndDropEnabled && typeof object.dragAndDropEnabled != 'boolean') || typeof object.dragAndDropEnabled == 'boolean')) {
     toret = false;
     errorToLog = "options.dragAndDropEnabled value '" + object.dragAndDropEnabled + "' doesn't meet interface IConf requirements";

package/dist/collection/utils/constants.js

@@ -6,17 +6,18 @@ export const defaultPickerTheme = {
     primary: {
       main: '#888',
       light: '#888',
-      contrastText: '#000',
+      contrastText: '#000', // Text color of the selected node
     },
     background: {
       default: '#ccc',
       light: '#eee',
       main: '#000',
-      dark: '#fff',
+      dark: '#fff', // Background of the whole tree
     },
     text: {
-      primary: '#000',
+      primary: '#000', // Text color
     },
+    // For all inputs in the component, includes in modale mode the display input and the search input
     input: {
       background: '#fff',
       borderStyle: 'none'

package/dist/collection/utils/theme-utils.js

@@ -7,6 +7,7 @@ export function applyPickerTheme(theme, defaultTheme) {
   docstyle.setProperty('--hpicker-theme-palette-background-default', (theme === null || theme === void 0 ? void 0 : theme.palette.background.default) || defaultTheme.palette.background.default);
   docstyle.setProperty('--hpicker-theme-palette-background-light', (theme === null || theme === void 0 ? void 0 : theme.palette.background.light) || defaultTheme.palette.background.light);
   docstyle.setProperty('--hpicker-theme-palette-background-dark', (theme === null || theme === void 0 ? void 0 : theme.palette.background.dark) || defaultTheme.palette.background.dark);
+  docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
   docstyle.setProperty('--hpicker-theme-palette-input-background-color', (theme === null || theme === void 0 ? void 0 : theme.palette.input.background) || defaultTheme.palette.input.background);
   docstyle.setProperty('--hpicker-theme-palette-input-border-style', (theme === null || theme === void 0 ? void 0 : theme.palette.input.borderStyle) || defaultTheme.palette.input.borderStyle);
   docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);