From fe28115828085f8e3f58f8d56f67ad468759d54d Mon Sep 17 00:00:00 2001
From: OS-pedrogustavobilro <pedro.gustavo.bilro@outsystems.com>
Date: Tue, 17 Dec 2024 12:29:07 +0000
Subject: [PATCH] feat: Add onCanceled event for action sheet

References: https://outsystemsrd.atlassian.net/browse/RMET-3576
---
 src/components.d.ts                          | 1 +
 src/components/action-sheet/action-sheet.tsx | 3 +++
 src/index.html                               | 5 ++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 037a14f..3dd8c96 100644
--- a/src/components.d.ts
+++ b/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[];
     }
diff --git a/src/components/action-sheet/action-sheet.tsx b/src/components/action-sheet/action-sheet.tsx
index 846ab85..6f60833 100644
--- a/src/components/action-sheet/action-sheet.tsx
+++ b/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();
     }
   }
diff --git a/src/index.html b/src/index.html
index 6a0f5b6..50163ee 100644
--- a/src/index.html
+++ b/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>