From f4a50672a0fce82fa6504b5182409617ec4d21f6 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 9 Dec 2024 01:21:38 +0530 Subject: [PATCH] Integrated latest changes at 12-08-2024 10:30:09 PM --- ej2-angular/avatar/getting-started.md | 14 ++++++---- ej2-angular/badge/getting-started.md | 4 +-- .../avatar/getting-started-cs1/index.css | 25 ------------------ .../avatar/getting-started-cs1/package.json | 1 + .../avatar/getting-started-cs1/src/styles.css | 4 +-- .../getting-started-cs1/src/app.component.css | 9 +++++++ .../getting-started-cs1/src/app.component.ts | 3 ++- .../badge/getting-started-cs1/src/styles.css | 9 ------- .../{default-style.css => app.component.css} | 0 .../getting-started-cs1/src/app.component.ts | 2 +- .../{default-style.css => app.component.css} | 0 .../src/app.component.ts | 2 +- .../getting-started-cs1/src/app.component.css | 7 +++++ .../sidebar/getting-started-cs1/package.json | 3 ++- .../sidebar/showBackDrop-cs1/package.json | 1 + .../getting-started-cs8/src/app.component.css | 9 +++++++ .../getting-started-cs8/src/app.component.ts | 3 ++- .../getting-started-cs8/src/styles.css | 21 +++++---------- .../dashboard-layout/getting-started.md | 18 ++++++------- ej2-angular/listview/getting-started.md | 4 +++ ej2-angular/sidebar/getting-started.md | 26 ++++++++++++++++++- ej2-angular/treeview/getting-started.md | 4 +-- 22 files changed, 94 insertions(+), 75 deletions(-) create mode 100644 ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css rename ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/{default-style.css => app.component.css} (100%) rename ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/{default-style.css => app.component.css} (100%) create mode 100644 ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css create mode 100644 ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css diff --git a/ej2-angular/avatar/getting-started.md b/ej2-angular/avatar/getting-started.md index 4a52076e1b..e9af9b5b50 100644 --- a/ej2-angular/avatar/getting-started.md +++ b/ej2-angular/avatar/getting-started.md @@ -49,7 +49,7 @@ The `Avatar` component is pure CSS component which doesn't need specific depende Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ). Currently, Syncfusion provides two types of package structures for Angular components, -1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format) +1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format#angular-package-format) 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package. ### Ivy library distribution package @@ -85,9 +85,9 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w To render the Avatar component, import the Avatar and its dependent component's styles as given below in `[src/styles.css]`. ```css -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css'; -@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css"; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css'; ``` >Note: To refer the combined component styles, use Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application. @@ -102,7 +102,7 @@ Modify the `template` in `app.component.ts` file to render Avatar component. import { Component } from '@angular/core'; @Component({ - selector: 'my-app', + selector: 'app-root', template: `
GR
` }) @@ -124,6 +124,10 @@ The following example shows a basic Avatar component. {% include code-snippet/avatar/getting-started-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/getting-started-cs1/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/getting-started-cs1/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/badge/getting-started.md b/ej2-angular/badge/getting-started.md index 5a1eaca5d3..3bd5c2470c 100644 --- a/ej2-angular/badge/getting-started.md +++ b/ej2-angular/badge/getting-started.md @@ -130,8 +130,8 @@ The following example shows a basic badge component. {% include code-snippet/badge/getting-started-cs1/src/app.component.ts %} {% endhighlight %} -{% highlight ts tabtitle="styles.css" %} -{% include code-snippet/badge/getting-started-cs1/src/styles.css %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/badge/getting-started-cs1/src/app.component.css %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %} diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css b/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css index 7d57ddbd42..e69de29bb2 100644 --- a/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css +++ b/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css @@ -1,25 +0,0 @@ -#container { - visibility: hidden; -} - -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: block; - width: 300px; - margin: 130px auto; - border-radius: 3px; - justify-content: center; -} - -.e-avatar { - background-image: url(./pic01.png); - margin: 2px; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json b/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json index eb9ab62ca1..85ba9b22cd 100644 --- a/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json +++ b/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json @@ -15,6 +15,7 @@ "@angular/platform-browser-dynamic": "17.1.2", "@syncfusion/ej2-base": "*", "@syncfusion/ej2-layouts": "*", + "@syncfusion/ej2-angular-layouts": "*", "@angular/animations": "17.1.2", "@angular/common": "17.1.2", "@angular/compiler": "17.1.2", diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css b/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css index 06e04cf5d0..1b30befb05 100644 --- a/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css +++ b/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css @@ -1,5 +1,5 @@ -@import 'node_modules/@syncfusion/ej2-base/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; #loader { diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css new file mode 100644 index 0000000000..9b437a1bda --- /dev/null +++ b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css @@ -0,0 +1,9 @@ +#element { + display: flex; + width: 400px; + margin: auto; + border: 1px solid #dddddd; + border-radius: 3px; + justify-content: center; + } + \ No newline at end of file diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts index 538565171c..c06150198d 100644 --- a/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts @@ -12,7 +12,8 @@ imports: [ standalone: true, - selector: 'my-app', + selector: 'app-root', + styleUrls: ['./app.component.css'], template: `

Badge Component New

` }) diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css b/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css index ec6eb400ec..307b87da59 100644 --- a/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css +++ b/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css @@ -1,12 +1,3 @@ @import '/node_modules/@syncfusion/ej2-base/styles/material.css'; @import '/node_modules/@syncfusion/ej2-notifications/styles/material.css'; @import '/node_modules/@syncfusion/ej2-angular-notifications/styles/material.css'; - -#element { - display: flex; - width: 400px; - margin: auto; - border: 1px solid #dddddd; - border-radius: 3px; - justify-content: center; -} diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css b/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css similarity index 100% rename from ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css rename to ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts b/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts index 4a03c42788..311c30dab6 100644 --- a/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts @@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule], standalone: true, selector: 'app-root', - styleUrls: ['./default-style.css'], + styleUrls: ['./app.component.css'], template: `
diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css b/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css similarity index 100% rename from ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css rename to ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts b/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts index beb76f1365..872d850977 100644 --- a/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts @@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule], standalone: true, selector: 'app-root', - styleUrls: ['./default-style.css'], + styleUrls: ['./app.component.css'], template: `
diff --git a/ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css b/ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css new file mode 100644 index 0000000000..187c5fdfc5 --- /dev/null +++ b/ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css @@ -0,0 +1,7 @@ +#sample-list { + display: block; + max-width: 400px; + margin: auto; + border: 1px solid #dddddd; + border-radius: 3px; + } \ No newline at end of file diff --git a/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json b/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json index f311c7183d..8dfebbce9b 100644 --- a/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json +++ b/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json @@ -14,7 +14,8 @@ "@angular/platform-browser": "17.1.2", "@angular/platform-browser-dynamic": "17.1.2", "@syncfusion/ej2-angular-navigations": "*", - "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-navigations": "*", "@syncfusion/ej2-angular-base": "*", "@syncfusion/ej2-angular-buttons": "*", "@angular/animations": "17.1.2", diff --git a/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json b/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json index db49edd404..f6dedf15a6 100644 --- a/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json +++ b/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json @@ -15,6 +15,7 @@ "@angular/platform-browser-dynamic": "17.1.2", "@syncfusion/ej2-angular-navigations": "*", "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-navigations": "*", "@syncfusion/ej2-angular-base": "*", "@syncfusion/ej2-angular-buttons": "*", "@syncfusion/ej2-angular-lists": "*", diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css new file mode 100644 index 0000000000..dde1a75422 --- /dev/null +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css @@ -0,0 +1,9 @@ +#treeparent { + display: block; + max-width: 400px; + max-height: 330px; + margin: auto; + overflow: auto; + border: 1px solid #dddddd; + border-radius: 3px; +} diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts index 47302bfa6a..33660bdebd 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts @@ -14,7 +14,8 @@ imports: [ standalone: true, - selector: 'app-container', + selector: 'app-root', + styleUrls: ['./app.component.css'], template: `
` }) export class AppComponent { diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css index f84f196e6f..b648435d6e 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css @@ -1,17 +1,8 @@ -@import 'node_modules/@syncfusion/ej2-base/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css'; -@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; -#treeparent { - display: block; - max-width: 400px; - max-height: 330px; - margin: auto; - overflow: auto; - border: 1px solid #dddddd; - border-radius: 3px; -} diff --git a/ej2-angular/dashboard-layout/getting-started.md b/ej2-angular/dashboard-layout/getting-started.md index b1e3b5cc46..7612aba436 100644 --- a/ej2-angular/dashboard-layout/getting-started.md +++ b/ej2-angular/dashboard-layout/getting-started.md @@ -103,8 +103,8 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w To render the DashboardLayout component, import the DashboardLayout and its dependent component's styles as given below in `[src/styles.css]`. ```css -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; +@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css"; ``` >Note: To refer the combined component styles, use Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application. @@ -129,7 +129,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', - styleUrls: ['default-style.css'], + styleUrls: ['./app.component.css'], template: `
@@ -189,7 +189,7 @@ export class AppComponent { } ``` -* Import DashboardLayout module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-layouts`. +* Import DashboardLayout module into Angular application(`app.module.ts`) from the package `@syncfusion/ej2-angular-layouts`. ```javascript import { NgModule } from '@angular/core'; @@ -222,8 +222,8 @@ The following example shows a basic DashboardLayout by adding the panels propert {% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts %} {% endhighlight %} -{% highlight ts tabtitle="default-style.css" %} -{% include code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %} @@ -246,7 +246,7 @@ import { Component,ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-root', - styleUrls: ['app/default-style.css'], + styleUrls: ['./app.component.css'], template: `
@@ -274,8 +274,8 @@ The following example shows a basic DashboardLayout by using the `panels` proper {% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts %} {% endhighlight %} -{% highlight ts tabtitle="default-style.css" %} -{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %} diff --git a/ej2-angular/listview/getting-started.md b/ej2-angular/listview/getting-started.md index 67c4d98906..0be1bd9b7b 100644 --- a/ej2-angular/listview/getting-started.md +++ b/ej2-angular/listview/getting-started.md @@ -130,6 +130,10 @@ The output will appear as follows. {% include code-snippet/listview/getting-started-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/listview/getting-started-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/listview/getting-started-cs1/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/sidebar/getting-started.md b/ej2-angular/sidebar/getting-started.md index 475de59669..edd8476032 100644 --- a/ej2-angular/sidebar/getting-started.md +++ b/ej2-angular/sidebar/getting-started.md @@ -98,7 +98,7 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w ## Adding Styles -To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `app.component.css`. +To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `[src/styles.css]`. ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -150,6 +150,10 @@ The following samples shows the sidebar component in browser. {% include code-snippet/sidebar/getting-started-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/getting-started-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/getting-started-cs1/src/main.ts %} {% endhighlight %} @@ -171,6 +175,10 @@ N> To achieve a proper **backdrop**, we suggest that you create a wrapper parent {% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/showBackDrop-cs1/src/main.ts %} {% endhighlight %} @@ -189,6 +197,10 @@ Positioning the Sidebar to the right or left of the main content can be achieved {% include code-snippet/sidebar/position-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/position-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/position-cs1/src/main.ts %} {% endhighlight %} @@ -205,6 +217,10 @@ Animation transitions can be set while expanding or collapsing the Sidebar using {% include code-snippet/sidebar/animate-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/animate-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/animate-cs1/src/main.ts %} {% endhighlight %} @@ -221,6 +237,10 @@ Sidebar can be closed on document click by setting [`closeOnDocumentClick`](http {% include code-snippet/sidebar/document-click-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/document-click-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/document-click-cs1/src/main.ts %} {% endhighlight %} @@ -237,6 +257,10 @@ Expand or collapse the Sidebar while swiping in touch devices using [`enableGest {% include code-snippet/sidebar/gestures-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/sidebar/gestures-cs1/src/app.component.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/sidebar/gestures-cs1/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/treeview/getting-started.md b/ej2-angular/treeview/getting-started.md index b93f8f4a2e..b1aa81e458 100644 --- a/ej2-angular/treeview/getting-started.md +++ b/ej2-angular/treeview/getting-started.md @@ -168,8 +168,8 @@ The output will appear as follows. {% include code-snippet/tree-view/getting-started-cs8/src/app.component.ts %} {% endhighlight %} -{% highlight ts tabtitle="styles.css" %} -{% include code-snippet/tree-view/getting-started-cs8/src/styles.css %} +{% highlight ts tabtitle="app.component.css" %} +{% include code-snippet/tree-view/getting-started-cs8/src/app.component.css %} {% endhighlight %} {% highlight ts tabtitle="main.ts" %}