feat: Add onCanceled event for action sheet (#138)

Author: OS-pedrogustavobilro

src/components.d.ts

@@ -93,6 +93,7 @@ declare namespace LocalJSX {
     interface PwaActionSheet {
         "cancelable"?: boolean;
         "header"?: string;
+        "onOnCanceled"?: (event: PwaActionSheetCustomEvent<any>) => void;
         "onOnSelection"?: (event: PwaActionSheetCustomEvent<any>) => void;
         "options"?: ActionSheetOption[];
     }

src/components/action-sheet/action-sheet.tsx

@@ -18,6 +18,8 @@ export class PWAActionSheet {
 
   @Event() onSelection: EventEmitter;
 
+  @Event() onCanceled: EventEmitter;
+
   @State() open = false;
 
   componentDidLoad() {
@@ -28,6 +30,7 @@ export class PWAActionSheet {
 
   dismiss() {
     if (this.cancelable) {
+      this.onCanceled.emit();
       this.close();
     }
   }

src/index.html

@@ -75,13 +75,16 @@
     b.addEventListener('click', async (ev) => {
       const actionSheet = document.createElement('pwa-action-sheet');
       actionSheet.header = 'choose option';
-      actionSheet.cancelable = false;
+      actionSheet.cancelable = true;
       actionSheet.options = [{title: 'hi'},{title: 'bye', style: "DESTRUCTIVE"},{title: 'cancel', style: "CANCEL"}]
       document.body.appendChild(actionSheet);
       actionSheet.addEventListener('onSelection', async (e) => {
         const selection = e.detail;
         console.log('selected', selection);
       })
+      actionSheet.addEventListener('onCanceled', async () => {
+        console.log('sheet was canceled');
+      })
     });
   </script>