From 26d44284c21feb54b07e6fb142727ee81116499c Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 30 Dec 2024 17:11:48 -0500
Subject: [PATCH 1/3] fix(playground): update template generator to support
 angular standalone

---
 _templates/playground/new/angular.md.ejs.t      |  7 -------
 .../new/angular_example_component_html.md.ejs.t |  6 ++++++
 .../new/angular_example_component_ts.md.ejs.t   |  9 +++++----
 _templates/playground/new/index.js              |  5 -----
 _templates/playground/new/index.md.ejs.t        | 17 +++--------------
 _templates/playground/new/react.md.ejs.t        |  5 +----
 6 files changed, 15 insertions(+), 34 deletions(-)
 delete mode 100644 _templates/playground/new/angular.md.ejs.t
 create mode 100644 _templates/playground/new/angular_example_component_html.md.ejs.t

diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t
deleted file mode 100644
index f44075feb06..00000000000
--- a/_templates/playground/new/angular.md.ejs.t
+++ /dev/null
@@ -1,7 +0,0 @@
----
-# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
-to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
----
-```html
-<<%= component %>></<%= component %>>
-```
diff --git a/_templates/playground/new/angular_example_component_html.md.ejs.t b/_templates/playground/new/angular_example_component_html.md.ejs.t
new file mode 100644
index 00000000000..98f48fde212
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_html.md.ejs.t
@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>></<%= component %>>
+```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index fb07f495acb..dda79001c4d 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -1,9 +1,10 @@
 ---
-# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
 ---
 ```ts
 import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-example',
@@ -11,7 +12,7 @@ import { Component } from '@angular/core';
 <% if (css){ -%>
   styleUrls: ['./example.component.css'],
 <% } -%>
+  imports: [<%= pascalComponent %>],
 })
-export class ExampleComponent {
-}
+export class ExampleComponent {}
 ```
diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js
index a0d4fd89cca..c6f9fb53b6c 100644
--- a/_templates/playground/new/index.js
+++ b/_templates/playground/new/index.js
@@ -62,11 +62,6 @@ module.exports = {
               name: 'css',
               message: 'Generate custom CSS files?',
             },
-            {
-              type: 'toggle',
-              name: 'angular_ts',
-              message: 'Generate an Angular TypeScript file?',
-            },
           ])
           .then((answers) => {
             answers.name = answers.name || answers.component.replace('ion-', '');
diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t
index 5c7bbf08e81..148d3e85efe 100644
--- a/_templates/playground/new/index.md.ejs.t
+++ b/_templates/playground/new/index.md.ejs.t
@@ -12,17 +12,12 @@ import react_main_css from './react/main_css.md';
 import react from './react.md';
 <% } -%>
 import vue from './vue.md';
-<% if (css || angular_ts){ %>
+
 import angular_example_component_html from './angular/example_component_html.md';
-<% } else { -%>
-import angular from './angular.md';
-<% } -%>
-<% if (angular_ts){ -%>
-import angular_example_component_ts from './angular/example_component_ts.md';
-<% } -%>
 <% if (css){ -%>
 import angular_example_component_css from './angular/example_component_css.md';
 <% } -%>
+import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="<%= version %>"
@@ -39,21 +34,15 @@ import angular_example_component_css from './angular/example_component_css.md';
     react,
 <% } -%>
     vue,
-<% if (angular_ts || css){ -%>
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-<% if (angular_ts){ -%>
-        'src/app/example.component.ts': angular_example_component_ts,
-<% } -%>
 <% if (css){ -%>
         'src/app/example.component.css': angular_example_component_css,
 <% } -%>
+        'src/app/example.component.ts': angular_example_component_ts,
       },
     },
-<% } else { -%>
-    angular,
-<% } -%>
   }}
   src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
 />
diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t
index 8a84f90e57f..b9c18612bba 100644
--- a/_templates/playground/new/react.md.ejs.t
+++ b/_templates/playground/new/react.md.ejs.t
@@ -10,10 +10,7 @@ import { <%= pascalComponent %> } from '@ionic/react';<% if (css){ %>
 import './main.css';<% } %>
 
 function Example() {
-  return (
-    <<%= pascalComponent %>></<%= pascalComponent %>>
-  );
+  return <<%= pascalComponent %>></<%= pascalComponent %>>;
 }
 export default Example;
 ```
-

From 8f935df353c10cf14de329a9078645763aa1220d Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 30 Dec 2024 17:18:01 -0500
Subject: [PATCH 2/3] fix(playground): update react to support multiple lines

---
 _templates/playground/new/react.md.ejs.t | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t
index b9c18612bba..a8320a026ba 100644
--- a/_templates/playground/new/react.md.ejs.t
+++ b/_templates/playground/new/react.md.ejs.t
@@ -10,7 +10,11 @@ import { <%= pascalComponent %> } from '@ionic/react';<% if (css){ %>
 import './main.css';<% } %>
 
 function Example() {
-  return <<%= pascalComponent %>></<%= pascalComponent %>>;
+  return (
+    <>
+      <<%= pascalComponent %>></<%= pascalComponent %>>
+    </>
+  );
 }
 export default Example;
 ```

From 65d7678bf99e1a399092bbc14fd96cf93e6a611d Mon Sep 17 00:00:00 2001
From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 31 Dec 2024 10:45:59 -0500
Subject: [PATCH 3/3] fix(playground): css file should always be included

---
 _templates/playground/new/angular_example_component_ts.md.ejs.t | 2 --
 1 file changed, 2 deletions(-)

diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index dda79001c4d..548a45dd57b 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -9,9 +9,7 @@ import { <%= pascalComponent %> } from '@ionic/angular/standalone';
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
-<% if (css){ -%>
   styleUrls: ['./example.component.css'],
-<% } -%>
   imports: [<%= pascalComponent %>],
 })
 export class ExampleComponent {}