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

@@ -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>

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'