@aquera/nile-elements 1.3.3 → 1.3.4-beta-1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.3",
+  "version": "1.3.4-beta-1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-dropdown/portal-utils.ts

@@ -239,22 +239,9 @@ export class PortalContentUtils {
     const eventHandlerAttrs = ['onclick', 'onchange', 'oninput', 'onsubmit', 'onfocus', 'onblur', 'onkeydown', 'onkeyup'];
     
     eventHandlerAttrs.forEach(attr => {
-      const eventType = attr.replace('on', '');
-      const handler = element.getAttribute(attr);
-      if (handler) {
-        element.removeAttribute(attr);
-        element.addEventListener(eventType, (event: Event) => {
-          new Function('event', handler).call(element, event);
-        });
-      }
+      element.removeAttribute(attr);
       element.querySelectorAll(`[${attr}]`).forEach(child => {
-        const childHandler = child.getAttribute(attr);
-        if (childHandler) {
-          child.removeAttribute(attr);
-          child.addEventListener(eventType, (event: Event) => {
-            new Function('event', childHandler).call(child, event);
-          });
-        }
+        child.removeAttribute(attr);
       });
     });
   }
@@ -311,6 +298,98 @@ export class PortalEventUtils {
     const originalMenu = assignedElements[0];
     if (!originalMenu) return;
 
+    const findOriginalElement = (clonedElement: HTMLElement): HTMLElement | null => {
+      const clonedMenuItem = clonedElement.closest('nile-menu-item');
+      if (clonedMenuItem) {
+        const clonedItems = Array.from(clonedPanel.querySelectorAll('nile-menu-item'));
+        const originalItems = Array.from(originalMenu.querySelectorAll('nile-menu-item'));
+        const index = clonedItems.indexOf(clonedMenuItem);
+        const originalMenuItem = originalItems[index];
+        
+        if (originalMenuItem) {
+          if (clonedElement === clonedMenuItem) {
+            return originalMenuItem;
+          }
+          
+          const clonedTagName = clonedElement.tagName.toLowerCase();
+          const clonedElements = Array.from(clonedMenuItem.querySelectorAll(clonedTagName));
+          const originalElements = Array.from(originalMenuItem.querySelectorAll(clonedTagName));
+          const elementIndex = clonedElements.indexOf(clonedElement);
+          
+          if (elementIndex >= 0 && originalElements[elementIndex]) {
+            return originalElements[elementIndex] as HTMLElement;
+          }
+          
+          return originalMenuItem;
+        }
+      }
+      return null;
+    };
+
+    const forwardEvent = (event: Event, originalElement: HTMLElement) => {
+      const originalEvent = event as any;
+      let newEvent: Event;
+      
+      if (originalEvent instanceof MouseEvent) {
+        newEvent = new MouseEvent(event.type, {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          button: originalEvent.button,
+          buttons: originalEvent.buttons,
+          clientX: originalEvent.clientX,
+          clientY: originalEvent.clientY,
+          ctrlKey: originalEvent.ctrlKey,
+          shiftKey: originalEvent.shiftKey,
+          altKey: originalEvent.altKey,
+          metaKey: originalEvent.metaKey
+        });
+      } else if (originalEvent instanceof KeyboardEvent) {
+        newEvent = new KeyboardEvent(event.type, {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          key: originalEvent.key,
+          code: originalEvent.code,
+          keyCode: originalEvent.keyCode,
+          which: originalEvent.which,
+          ctrlKey: originalEvent.ctrlKey,
+          shiftKey: originalEvent.shiftKey,
+          altKey: originalEvent.altKey,
+          metaKey: originalEvent.metaKey
+        });
+      } else if (originalEvent instanceof CustomEvent) {
+        newEvent = new CustomEvent(event.type, {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: originalEvent.detail
+        });
+      } else {
+        newEvent = new Event(event.type, {
+          bubbles: true,
+          cancelable: true,
+          composed: true
+        });
+      }
+      
+      originalElement.dispatchEvent(newEvent);
+    };
+
+    const syncElementState = (clonedElement: HTMLElement, originalElement: HTMLElement) => {
+      if (clonedElement.tagName.toLowerCase() === 'nile-checkbox' && 
+          originalElement.tagName.toLowerCase() === 'nile-checkbox') {
+        const clonedCheckbox = clonedElement as any;
+        const originalCheckbox = originalElement as any;
+        if ('checked' in originalCheckbox && 'checked' in clonedCheckbox) {
+          clonedCheckbox.checked = originalCheckbox.checked;
+        }
+        if ('indeterminate' in originalCheckbox && 'indeterminate' in clonedCheckbox) {
+          clonedCheckbox.indeterminate = originalCheckbox.indeterminate;
+        }
+      }
+    };
+
     const eventTypes = ['click', 'change', 'input', 'submit', 'focus', 'blur', 'keydown', 'keyup', 'mousedown', 'mouseup'];
     
     eventTypes.forEach(eventType => {
@@ -318,58 +397,71 @@ export class PortalEventUtils {
         const target = event.target as HTMLElement;
         if (!target) return;
 
-        const clonedMenuItem = target.closest('nile-menu-item');
-        if (clonedMenuItem) {
-          const clonedItems = Array.from(clonedPanel.querySelectorAll('nile-menu-item'));
-          const originalItems = Array.from(originalMenu.querySelectorAll('nile-menu-item'));
-          const index = clonedItems.indexOf(clonedMenuItem);
-          const originalItem = originalItems[index];
-
-          if (originalItem) {
-            const originalEvent = event as any;
-            let newEvent: Event;
-            
-            if (originalEvent instanceof MouseEvent) {
-              newEvent = new MouseEvent(eventType, {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                button: originalEvent.button,
-                buttons: originalEvent.buttons,
-                clientX: originalEvent.clientX,
-                clientY: originalEvent.clientY,
-                ctrlKey: originalEvent.ctrlKey,
-                shiftKey: originalEvent.shiftKey,
-                altKey: originalEvent.altKey,
-                metaKey: originalEvent.metaKey
-              });
-            } else if (originalEvent instanceof KeyboardEvent) {
-              newEvent = new KeyboardEvent(eventType, {
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-                key: originalEvent.key,
-                code: originalEvent.code,
-                keyCode: originalEvent.keyCode,
-                which: originalEvent.which,
-                ctrlKey: originalEvent.ctrlKey,
-                shiftKey: originalEvent.shiftKey,
-                altKey: originalEvent.altKey,
-                metaKey: originalEvent.metaKey
-              });
+        const originalItem = findOriginalElement(target);
+        if (originalItem) {
+          if (eventType === 'click') {
+            if (target.tagName.toLowerCase() === 'nile-checkbox') {
+              event.stopImmediatePropagation();
+              event.preventDefault();
+              
+              const originalCheckbox = originalItem as any;
+              if (originalCheckbox && typeof originalCheckbox.click === 'function') {
+                originalCheckbox.click();
+                setTimeout(() => {
+                  syncElementState(target, originalItem);
+                }, 10);
+              } else {
+                forwardEvent(event, originalItem);
+                setTimeout(() => {
+                  syncElementState(target, originalItem);
+                }, 10);
+              }
             } else {
-              newEvent = new Event(eventType, {
-                bubbles: true,
-                cancelable: true,
-                composed: true
-              });
+              event.stopImmediatePropagation();
+              event.preventDefault();
+              forwardEvent(event, originalItem);
             }
-            
-            originalItem.dispatchEvent(newEvent);
+          } else {
+            forwardEvent(event, originalItem);
           }
         }
       }, true);
     });
+
+    const clonedCheckboxes = Array.from(clonedPanel.querySelectorAll('nile-checkbox'));
+    const originalCheckboxes = Array.from(originalMenu.querySelectorAll('nile-checkbox'));
+    
+    clonedCheckboxes.forEach((clonedCheckbox, index) => {
+      const originalCheckbox = originalCheckboxes[index];
+      if (originalCheckbox) {
+        originalCheckbox.addEventListener('nile-change', () => {
+          syncElementState(clonedCheckbox as HTMLElement, originalCheckbox as HTMLElement);
+        });
+      }
+    });
+
+    clonedPanel.addEventListener('nile-change', (event: CustomEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target) return;
+
+      const originalElement = findOriginalElement(target);
+      if (originalElement) {
+        const originalEvent = event as CustomEvent;
+        
+        if (target.tagName.toLowerCase() === 'nile-checkbox' && originalEvent.detail?.checked !== undefined) {
+          const clonedCheckbox = target as any;
+          clonedCheckbox.checked = originalEvent.detail.checked;
+        }
+        
+        const newEvent = new CustomEvent('nile-change', {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: originalEvent.detail
+        });
+        originalElement.dispatchEvent(newEvent);
+      }
+    }, true);
   }
 }