From 2ed8a97725772e4efb38268dd9ea45e5a22fe2bd Mon Sep 17 00:00:00 2001
From: Tom BH <tom@so-design.co.uk>
Date: Thu, 1 Feb 2024 11:44:48 +0000
Subject: [PATCH] Add a componentReady event (#99)

* add a new componentReady event

Useful for when you need to check for things like startDate from outside the web component
---
 docs/index.html                                    | 14 +++++++++++++-
 src/components/inclusive-dates/inclusive-dates.tsx |  3 +++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index 5facaad..f147027 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -726,6 +726,13 @@ <h2 id="events">Events</h2>
           </td>
           <td>Fired when the displayed month or year changes.</td>
         </tr>
+        <tr>
+          <td>componentReady</td>
+          <td>
+            <code>CustomEvent&lt;void&gt;</code>
+          </td>
+          <td>Fired when this component is fully loaded at the first render.</td>
+        </tr>
         </tbody>
       </table>
     </div>
@@ -739,7 +746,12 @@ <h2 id="events">Events</h2>
   datepicker.addEventListener('selectDate', function(event) {
     console.log(event.detail);
   });
-&lt;/script&gt;</code></pre>
+
+  datepicker.addEventListener('componentReady', function(event) {
+    console.log(datepicker.startDate);
+  });
+  &lt;/script&gt;
+</code></pre>
   </section>
 
   <section>
diff --git a/src/components/inclusive-dates/inclusive-dates.tsx b/src/components/inclusive-dates/inclusive-dates.tsx
index 8841c9a..061358d 100644
--- a/src/components/inclusive-dates/inclusive-dates.tsx
+++ b/src/components/inclusive-dates/inclusive-dates.tsx
@@ -138,6 +138,8 @@ export class InclusiveDates {
 
   @Event() selectDate: EventEmitter<string | string[] | undefined>;
 
+  @Event() componentReady: EventEmitter<void>;
+
   private modalRef?: HTMLInclusiveDatesModalElement;
   private inputRef?: HTMLInputElement;
   private calendarButtonRef?: HTMLButtonElement;
@@ -148,6 +150,7 @@ export class InclusiveDates {
   private errorMessage = "";
 
   componentDidLoad() {
+    this.componentReady.emit();
     if (!this.id) {
       console.error(
         'inclusive-dates: The "id" prop is required for accessibility'