reneco-hierarchized-picker 0.4.3-beta.20 → 0.4.3-beta.21

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

@@ -328,7 +328,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();
@@ -18623,28 +18622,20 @@ function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
   component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       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'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':
@@ -18836,15 +18827,39 @@ const HierarchizedPickerComponent = class {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -18906,9 +18921,10 @@ const HierarchizedPickerComponent = class {
         console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));

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

@@ -98,15 +98,39 @@ export class HierarchizedPickerComponent {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -168,9 +192,10 @@ export class HierarchizedPickerComponent {
         console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));

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

@@ -192,7 +192,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();

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

@@ -29,28 +29,20 @@ export function setupKeyboardNavigation(component, optionsManager, navigateInTre
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
   component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       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'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':

package/dist/custom-elements/index.js

@@ -325,7 +325,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();
@@ -18620,28 +18619,20 @@ function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
   component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       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'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':
@@ -18833,15 +18824,39 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -18903,9 +18918,10 @@ const HierarchizedPickerComponent = class extends HTMLElement {
         console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));

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

@@ -324,7 +324,6 @@ Tree.prototype.bindEvent = function (ele) {
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
-  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     return;
   const pickerValue = await this.options.parentApi.getValue();
@@ -18619,28 +18618,20 @@ function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
   if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
     focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
   }
-  //todo, put back ?
-  // if ((component.el as any)._hasKeydownListener) {
-  //   return;
-  // }
   component.el._hasKeydownListener = true;
   if (!component._keydownListenerAdded) {
     component._keydownListenerAdded = true;
     component.el.addEventListener('keydown', (event) => {
       var _a, _b;
-      console.log("Navigation 01", event);
       event.stopPropagation();
-      console.log("Navigation 02");
       const tree = component.loadedTreeJs;
       let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
-      console.log("Navigation 03");
       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'];
-      console.log("Navigation 04", event.key);
       switch (event.key.toLowerCase()) {
         case 'tab':
         case '0':
@@ -18832,15 +18823,39 @@ const HierarchizedPickerComponent = class {
       const val1 = obj1[key];
       const val2 = obj2[key];
       if (Array.isArray(val1) && Array.isArray(val2)) {
-        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+        // Compare array length
+        if (val1.length !== val2.length) {
           diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
         }
       }
       else if (val1 &&
         val2 &&
         typeof val1 === 'object' &&
         typeof val2 === 'object') {
-        diffs.push(...this.diffKeys(val1, val2, fullKey));
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
       }
       else if (val1 !== val2) {
         diffs.push(fullKey);
@@ -18902,9 +18917,10 @@ const HierarchizedPickerComponent = class {
         console.log("Setnewoptions 02");
         const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
         const noReloadProps = ["multiple"];
-        console.log("Setnewoptions 03", propDiffs);
-        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
-          const propChanged = propDiffs[0];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
           switch (propChanged) {
             case "multiple":
               document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));