Add duetOpen and duetClose events

README.md

@@ -163,6 +163,8 @@ Once included, Duet Date Picker can be used in your markup like any other regula
 | `duetBlur`   | Event emitted the date picker input is blurred. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 | `duetChange` | Event emitted when a date is selected.          | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
 | `duetFocus`  | Event emitted the date picker input is focused. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `duetOpen`  | Event emitted when the date picker modal is opened. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `duetClose`  | Event emitted the date picker modal is closed. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 
 ## Methods
 

src/components/duet-date-picker/duet-date-picker.tsx

@@ -63,6 +63,12 @@ export type DuetDatePickerChangeEvent = {
 export type DuetDatePickerFocusEvent = {
   component: "duet-date-picker"
 }
+export type DuetDatePickerOpenEvent = {
+  component: "duet-date-picker"
+}
+export type DuetDatePickerCloseEvent = {
+  component: "duet-date-picker"
+}
 export type DuetDatePickerDirection = "left" | "right"
 
 const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g
@@ -210,6 +216,16 @@ export class DuetDatePicker implements ComponentInterface {
    */
   @Event() duetFocus: EventEmitter<DuetDatePickerFocusEvent>
 
+  /**
+   * Event emitted the date picker modal is opened.
+   */
+  @Event() duetOpen: EventEmitter<DuetDatePickerOpenEvent>
+
+  /**
+   * Event emitted the date picker modal is closed.
+   */
+  @Event() duetClose: EventEmitter<DuetDatePickerCloseEvent>
+
   connectedCallback() {
     this.createDateFormatters()
   }
@@ -273,6 +289,9 @@ export class DuetDatePicker implements ComponentInterface {
    */
   @Method() async show() {
     this.open = true
+    this.duetOpen.emit({
+      component: "duet-date-picker",
+    })
     this.setFocusedDay(parseISODate(this.value) || new Date())
 
     clearTimeout(this.focusTimeoutId)
@@ -285,6 +304,9 @@ export class DuetDatePicker implements ComponentInterface {
    */
   @Method() async hide(moveFocusToButton = true) {
     this.open = false
+    this.duetClose.emit({
+      component: "duet-date-picker",
+    })
 
     // in cases where calendar is quickly shown and hidden
     // we should avoid moving focus to the button

src/components/duet-date-picker/readme.md

@@ -29,7 +29,9 @@
 | ------------ | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
 | `duetBlur`   | Event emitted the date picker input is blurred. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 | `duetChange` | Event emitted when a date is selected.          | `CustomEvent<{ component: "duet-date-picker"; valueAsDate: Date; value: string; }>` |
+| `duetClose`  | Event emitted the date picker modal is closed.  | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 | `duetFocus`  | Event emitted the date picker input is focused. | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
+| `duetOpen`   | Event emitted the date picker modal is opened.  | `CustomEvent<{ component: "duet-date-picker"; }>`                                   |
 
 
 ## Methods