From 38ad9d21c06021f045a8cf214c4bcaf6163aeb23 Mon Sep 17 00:00:00 2001
From: Philipp Siekmann <philipp.siekmann@getflip.com>
Date: Mon, 27 Jan 2025 14:22:31 +0100
Subject: [PATCH] feat(components): add "componentLoad" event to SwirlBox

---
 .changeset/wet-tables-perform.md                  |  7 +++++++
 .../src/components/swirl-box/swirl-box.tsx        | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wet-tables-perform.md

diff --git a/.changeset/wet-tables-perform.md b/.changeset/wet-tables-perform.md
new file mode 100644
index 000000000..cd69c1284
--- /dev/null
+++ b/.changeset/wet-tables-perform.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add "componentLoad" event to swirl-box
diff --git a/packages/swirl-components/src/components/swirl-box/swirl-box.tsx b/packages/swirl-components/src/components/swirl-box/swirl-box.tsx
index b6c943dd4..2234fd7a8 100644
--- a/packages/swirl-components/src/components/swirl-box/swirl-box.tsx
+++ b/packages/swirl-components/src/components/swirl-box/swirl-box.tsx
@@ -1,4 +1,13 @@
-import { Component, Element, h, Host, Prop, State } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from "@stencil/core";
 import classnames from "classnames";
 
 export type SwirlBoxBorderColor = "default" | "strong";
@@ -72,6 +81,8 @@ export class SwirlBox {
   @Prop() width?: string;
   @Prop() zIndex?: string;
 
+  @Event() componentLoad: EventEmitter<void>;
+
   @State() scrollState = {
     scrollable: false,
     scrolledToBottom: false,
@@ -79,6 +90,8 @@ export class SwirlBox {
   };
 
   componentDidLoad() {
+    this.componentLoad.emit();
+
     queueMicrotask(() => {
       this.updateScrollState();
     });