Merge pull request #73 from chardin1/master

Add duetOpen and duetClose events
duetds · Mar 19, 2021 · 19824ab · 19824ab
2 parents fea486a + a982873
commit 19824ab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/README.md b/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
 

diff --git a/src/components/duet-date-picker/duet-date-picker.tsx b/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()
   }
@@ -274,6 +290,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)
@@ -286,6 +305,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

diff --git a/src/components/duet-date-picker/readme.md b/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