From 857d8ca5cbf5bc2da386b4d264df36bd996603c5 Mon Sep 17 00:00:00 2001
From: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:13:48 -0400
Subject: [PATCH] fix(angular): enable event names with forward slash (#482)

* fix(angular): enable event names with forward slash

* Update packages/angular-output-target/src/generate-angular-component.ts

Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>

* add test

---------

Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
---
 .../generate-angular-component.spec.ts        | 21 +++++++++++++++++++
 .../src/generate-angular-component.ts         |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/angular-output-target/__tests__/generate-angular-component.spec.ts b/packages/angular-output-target/__tests__/generate-angular-component.spec.ts
index b6948d55..6a471157 100644
--- a/packages/angular-output-target/__tests__/generate-angular-component.spec.ts
+++ b/packages/angular-output-target/__tests__/generate-angular-component.spec.ts
@@ -285,6 +285,21 @@ describe('createComponentTypeDefinition()', () => {
         tags: [],
       },
     },
+    {
+      name: 'my/slash/event',
+      complexType: {
+        references: {
+          MySlashEvent: {
+            location: 'import',
+          },
+        },
+        original: 'MySlashEvent',
+      },
+      docs: {
+        text: '',
+        tags: [],
+      },
+    },
   ];
 
   describe('www build', () => {
@@ -296,6 +311,7 @@ describe('createComponentTypeDefinition()', () => {
 import type { MyOtherEvent as IMyComponentMyOtherEvent } from '@ionic/core';
 import type { MyDoclessEvent as IMyComponentMyDoclessEvent } from '@ionic/core';
 import type { MyKebabEvent as IMyComponentMyKebabEvent } from '@ionic/core';
+import type { MySlashEvent as IMyComponentMySlashEvent } from '@ionic/core';
 
 export declare interface MyComponent extends Components.MyComponent {
   /**
@@ -310,6 +326,8 @@ export declare interface MyComponent extends Components.MyComponent {
   myDoclessEvent: EventEmitter<CustomEvent<IMyComponentMyDoclessEvent>>;
 
   'my-kebab-event': EventEmitter<CustomEvent<IMyComponentMyKebabEvent>>;
+
+  'my/slash/event': EventEmitter<CustomEvent<IMyComponentMySlashEvent>>;
 }`
       );
     });
@@ -407,6 +425,7 @@ export declare interface MyComponent extends Components.MyComponent {
 import type { MyOtherEvent as IMyComponentMyOtherEvent } from '@ionic/core/custom-elements';
 import type { MyDoclessEvent as IMyComponentMyDoclessEvent } from '@ionic/core/custom-elements';
 import type { MyKebabEvent as IMyComponentMyKebabEvent } from '@ionic/core/custom-elements';
+import type { MySlashEvent as IMyComponentMySlashEvent } from '@ionic/core/custom-elements';
 
 export declare interface MyComponent extends Components.MyComponent {
   /**
@@ -421,6 +440,8 @@ export declare interface MyComponent extends Components.MyComponent {
   myDoclessEvent: EventEmitter<CustomEvent<IMyComponentMyDoclessEvent>>;
 
   'my-kebab-event': EventEmitter<CustomEvent<IMyComponentMyKebabEvent>>;
+
+  'my/slash/event': EventEmitter<CustomEvent<IMyComponentMySlashEvent>>;
 }`
         );
       });
diff --git a/packages/angular-output-target/src/generate-angular-component.ts b/packages/angular-output-target/src/generate-angular-component.ts
index 7cb1672f..bf5ea517 100644
--- a/packages/angular-output-target/src/generate-angular-component.ts
+++ b/packages/angular-output-target/src/generate-angular-component.ts
@@ -188,8 +188,8 @@ export const createComponentTypeDefinition = (
   const eventTypes = publicEvents.map((event) => {
     const comment = createDocComment(event.docs);
     let eventName = event.name;
-    if (event.name.includes('-')) {
-      // If an event name includes a dash, we need to wrap it in quotes.
+    if (/[-/]/.test(event.name)) {
+      // If an event name includes a dash or a forward slash, we need to wrap it in quotes.
       // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
       eventName = `'${event.name}'`;
     }