feat: emit event on bim-grid when elements are created based on templates

Author: HoyosJuan

packages/core/src/components/Grid/index.ts

@@ -11,6 +11,7 @@ import {
   GridLayoutsDefinition,
   GridComponentDefinition,
   UpdateGridComponents,
+  ElementCreatedEventDetail,
 } from "./src";
 
 /**
@@ -193,6 +194,12 @@ export class Grid<
     }
   }
 
+  private emitElementCreation(detail: ElementCreatedEventDetail) {
+    this.dispatchEvent(new CustomEvent<ElementCreatedEventDetail>("elementcreated", {
+      detail
+    }))
+  }
+
   protected render() {
     if (this.layout) {
       if (this.layouts[this.layout]) {
@@ -230,6 +237,8 @@ export class Grid<
                 HTMLElement,
                 {}
               >(template, initialState);
+              
+              this.emitElementCreation({name: area, element: component})
 
               component.setAttribute("data-grid-template-id", templateId);
 
@@ -246,6 +255,9 @@ export class Grid<
             if (existingComponent) return existingComponent;
 
             const component = Component.create(element);
+            
+            this.emitElementCreation({name: area, element: component})
+
             component.setAttribute(
               "data-grid-template-id",
               this.getTemplateId(element),

packages/core/src/components/Grid/src/types.ts

@@ -57,3 +57,8 @@ export type UpdateGridComponents<T extends GridComponentDefinition> = {
     >,
   ) => void;
 };
+
+export interface ElementCreatedEventDetail<T extends HTMLElement = HTMLElement> {
+  name: string;
+  element: T
+}

packages/core/src/components/index.ts

@@ -3,7 +3,7 @@ import { Checkbox } from "./Checkbox";
 import { ColorInput } from "./ColorInput";
 import { ContextMenu } from "./ContextMenu";
 import { Dropdown } from "./Dropdown";
-import { Grid } from "./Grid";
+import { ElementCreatedEventDetail, Grid } from "./Grid";
 import { Icon } from "./Icon";
 import { Input } from "./Input";
 import { Label } from "./Label";
@@ -77,6 +77,7 @@ declare global {
     rowcreated: CustomEvent<RowCreatedEventDetail>;
     rowselected: CustomEvent<RowSelectedEventDetail>;
     rowdeselected: CustomEvent<RowDeselectedEventDetail>;
+    elementcreated: CustomEvent<ElementCreatedEventDetail>;
   }
 }