@aquera/nile-elements 1.3.0 → 1.3.1-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.0",
+  "version": "1.3.1-beta-1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -220,4 +220,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/nile-calendar/nile-calendar.css.ts

@@ -11,6 +11,10 @@ import { css } from 'lit';
  * DatePicker CSS
  */
 export const styles = css`
+  :host {
+    display: inline-block;
+  }
+  
   .base {
     background-color: var(
       --nile-colors-white-base,

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

@@ -481,6 +481,8 @@ export class DropdownPortalManager {
   updatePortalPanel(): void {
     if (this.portalContainer && this.clonedPanel) {
       PortalContentUtils.updatePortalPanel(this.clonedPanel, this.component);
+      // Re-setup event listeners after updating the panel content
+      this.setupPortalEventListeners();
       this.forceReposition();
     }
   }

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

@@ -203,6 +203,7 @@ export class PortalContentUtils {
     // Clone all assigned elements
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
+      this.processInlineEventHandlers(clonedElement);
       panelContainer.appendChild(clonedElement);
     });
 
@@ -229,9 +230,34 @@ export class PortalContentUtils {
 
     assignedElements.forEach((element: Element) => {
       const clonedElement = element.cloneNode(true) as HTMLElement;
+      this.processInlineEventHandlers(clonedElement);
       clonedPanel.appendChild(clonedElement);
     });
   }
+
+  static processInlineEventHandlers(element: HTMLElement): void {
+    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.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);
+          });
+        }
+      });
+    });
+  }
 }
 
 export class PortalEventUtils {