From b1b90543aa3c5a434cef4d72974678ad1b9e4368 Mon Sep 17 00:00:00 2001 From: Sridhar-Karunakaran <107928376+Sridhar-Karunakaran@users.noreply.github.com> Date: Tue, 26 Nov 2024 09:55:33 +0530 Subject: [PATCH 1/2] 920209: Updating UG for the UI Kit topic (Session-3) --- ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md b/ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md index 0ce57e3331..ee84dc93fe 100644 --- a/ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md +++ b/ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Build your first Angular app with our blocks -## Create an Angular app +## Create a new Angular app To create a new Angular app, please refer to the official Angular setup guide [here](https://v17.angular.io/guide/setup-local) to get started. In this example, I have created a new Angular app named **my-angular-app** and will walk you through the step-by-step process of adding a simple sign-in block. ![New Angular App](images/new-angular-app.png) From 3352928b18ac4938a5be5f5f077b07502e768e80 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 27 Nov 2024 01:13:56 +0530 Subject: [PATCH 2/2] Integrated latest changes at 11-26-2024 10:30:13 PM --- .../avatar/how-to/avatar-customization.md | 17 +++ .../how-to/integrate-avatar-into-badge.md | 4 + ej2-angular/avatar/types.md | 4 + .../avatar/angular-avatar-cs2/index.css | 101 ------------- .../angular-avatar-cs2/src/app.component.ts | 4 +- .../avatar/angular-avatar-cs2/src/styles.css | 103 +++++++++++++ .../code-snippet/avatar/badge-cs2/index.css | 97 ------------- .../avatar/badge-cs2/package.json | 5 +- .../avatar/badge-cs2/src/app.component.ts | 4 +- .../avatar/badge-cs2/src/styles.css | 100 +++++++++++++ .../code-snippet/avatar/color-cs2/index.css | 43 ------ .../avatar/color-cs2/src/styles.css | 45 ++++++ .../avatar/custom-size-cs2/index.css | 38 ----- .../avatar/custom-size-cs2/src/styles.css | 40 +++++ .../avatar/media-formats-cs2/index.css | 135 ----------------- .../avatar/media-formats-cs2/src/styles.css | 137 ++++++++++++++++++ .../code-snippet/avatar/size-cs1/index.css | 22 --- .../avatar/size-cs1/src/styles.css | 25 ++++ .../directory-upload-cs1/src/app.component.ts | 2 +- .../flat-data-cs1/src/app.component.ts | 12 +- .../virtualization-cs1/src/app.component.ts | 11 +- .../tooltip/getting-started-cs15/package.json | 3 +- .../getting-started-cs15/src/app.component.ts | 6 +- .../tree-view/context-menu-cs1/package.json | 5 +- .../context-menu-cs1/src/app.component.ts | 9 +- .../getting-started-cs11/package.json | 3 +- .../getting-started-cs11/src/app.component.ts | 7 +- .../getting-started-cs12/package.json | 3 +- .../getting-started-cs12/src/app.component.ts | 7 +- .../tree-view/getting-started-cs9/index.css | 27 ---- .../getting-started-cs9/src/styles.css | 29 +++- .../tree-view/template-cs1/index.css | 33 ----- .../tree-view/template-cs1/src/styles.css | 35 ++++- ...customize-the-expand-and-collapse-icons.md | 8 +- ej2-angular/treeview/template.md | 4 + 35 files changed, 583 insertions(+), 545 deletions(-) diff --git a/ej2-angular/avatar/how-to/avatar-customization.md b/ej2-angular/avatar/how-to/avatar-customization.md index dceefc8d31..c7dfb2153c 100644 --- a/ej2-angular/avatar/how-to/avatar-customization.md +++ b/ej2-angular/avatar/how-to/avatar-customization.md @@ -20,6 +20,10 @@ by adding custom class or directly selecting the avatar class from the CSS. {% include code-snippet/avatar/color-cs2/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/color-cs2/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/color-cs2/src/main.ts %} {% endhighlight %} @@ -38,6 +42,11 @@ designed in such a way that the width and height will be relative to font-size. {% include code-snippet/avatar/custom-size-cs2/src/app.component.ts %} {% endhighlight %} + +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/custom-size-cs2/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/custom-size-cs2/src/main.ts %} {% endhighlight %} @@ -55,6 +64,10 @@ etc. Some of them are given below. {% include code-snippet/avatar/media-formats-cs2/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/media-formats-cs2/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/media-formats-cs2/src/main.ts %} {% endhighlight %} @@ -74,6 +87,10 @@ data-source from the server or remote data or AJAX. We have also rendered the av {% include code-snippet/avatar/angular-avatar-cs2/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/angular-avatar-cs2/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/angular-avatar-cs2/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/avatar/how-to/integrate-avatar-into-badge.md b/ej2-angular/avatar/how-to/integrate-avatar-into-badge.md index 40ea5950ba..0a9ef9f826 100644 --- a/ej2-angular/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-angular/avatar/how-to/integrate-avatar-into-badge.md @@ -19,6 +19,10 @@ badges (.`e-badge-notification`) in the following sample. {% include code-snippet/avatar/badge-cs2/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/badge-cs2/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/badge-cs2/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/avatar/types.md b/ej2-angular/avatar/types.md index d67011c3ef..a84483aa8a 100644 --- a/ej2-angular/avatar/types.md +++ b/ej2-angular/avatar/types.md @@ -30,6 +30,10 @@ class to change the appearance of the avatar. {% include code-snippet/avatar/size-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/avatar/size-cs1/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/avatar/size-cs1/src/main.ts %} {% endhighlight %} diff --git a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/index.css b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/index.css index f681ad20ad..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/index.css +++ b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/index.css @@ -1,102 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: block; - margin: auto; - border-radius: 3px; - justify-content: center; -} - -.e-avatar { - margin: 2px; -} - -.sample_container.avatar-badge .avatar-sub-block { - display: inline-block; - position: relative; - margin: 7px -} - -.sample_container.avatar-badge .avatar-block { - display: inline-block; - vertical-align: top; -} - -/* Media Queries for various devices */ - -@media only screen and (max-width: 965px) { - .sample_container.avatar-badge { - max-width: 332px; - margin: auto; - margin-top: 0; - } - .circleAvatar { - margin-top: 15px; - } - .e-avatar-showcase.e-card { - width: 320px; - } -} - -@media only screen and (min-width: 965px) { - .sample_container.avatar-badge { - max-width: 825px; - margin: auto; - margin-top: 70px; - } - .e-avatar-showcase.e-card { - width: 400px; - } -} - -.e-avatar.image { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -/* Card Customization */ - -.e-avatar-showcase.e-card { - height: 140px; - padding: 4px; - margin: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-radius: 8px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-header-title { - align-self: center; - font-size: 18px; - letter-spacing: 1px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { - color: rgba(0, 0, 0, 0.75); - white-space: pre-line; - font-size: 14px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { - margin: 0; -} - -.e-avatar-showcase.e-card .e-card-content { - align-self: center; - padding: 10px 11px 10px 0px; - color: rgba(0, 0, 0, 0.75); - overflow: visible; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/app.component.ts b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/app.component.ts index 0782ce5887..cdbeb8f91b 100644 --- a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/app.component.ts +++ b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/app.component.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' - import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ imports: [ - + CommonModule ], diff --git a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/styles.css b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/styles.css index 823d52e9b0..32580a23e1 100644 --- a/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/styles.css +++ b/ej2-angular/code-snippet/avatar/angular-avatar-cs2/src/styles.css @@ -1,2 +1,105 @@ @import 'node_modules/@syncfusion/ej2-base/styles/material.css'; @import 'node_modules/@syncfusion/ej2-layouts/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + margin: auto; + border-radius: 3px; + justify-content: center; +} + +.e-avatar { + margin: 2px; +} + +.sample_container.avatar-badge .avatar-sub-block { + display: inline-block; + position: relative; + margin: 7px +} + +.sample_container.avatar-badge .avatar-block { + display: inline-block; + vertical-align: top; +} + +/* Media Queries for various devices */ + +@media only screen and (max-width: 965px) { + .sample_container.avatar-badge { + max-width: 332px; + margin: auto; + margin-top: 0; + } + .circleAvatar { + margin-top: 15px; + } + .e-avatar-showcase.e-card { + width: 320px; + } +} + +@media only screen and (min-width: 965px) { + .sample_container.avatar-badge { + max-width: 825px; + margin: auto; + margin-top: 70px; + } + .e-avatar-showcase.e-card { + width: 400px; + } +} + +.e-avatar.image { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* Card Customization */ + +.e-avatar-showcase.e-card { + height: 140px; + padding: 4px; + margin: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 8px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-header-title { + align-self: center; + font-size: 18px; + letter-spacing: 1px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { + color: rgba(0, 0, 0, 0.75); + white-space: pre-line; + font-size: 14px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { + margin: 0; +} + +.e-avatar-showcase.e-card .e-card-content { + align-self: center; + padding: 10px 11px 10px 0px; + color: rgba(0, 0, 0, 0.75); + overflow: visible; +} diff --git a/ej2-angular/code-snippet/avatar/badge-cs2/index.css b/ej2-angular/code-snippet/avatar/badge-cs2/index.css index dc3dd76cbd..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/badge-cs2/index.css +++ b/ej2-angular/code-snippet/avatar/badge-cs2/index.css @@ -1,98 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: block; - margin: auto; - border-radius: 3px; - justify-content: center; -} - -.sample_container.avatar-badge .avatar-sub-block { - display: inline-block; - position: relative; - margin: 7px -} - -.sample_container.avatar-badge .avatar-block { - display: inline-block; - vertical-align: top; -} - -/* Media Queries for various devices */ - -@media only screen and (max-width: 965px) { - .sample_container.avatar-badge { - max-width: 332px; - margin: auto; - margin-top: 0; - } - .circleAvatar { - margin-top: 15px; - } - .e-avatar-showcase.e-card { - width: 320px; - } -} - -@media only screen and (min-width: 965px) { - .sample_container.avatar-badge { - max-width: 825px; - margin: auto; - margin-top: 70px; - } - .e-avatar-showcase.e-card { - width: 400px; - } -} - -.e-avatar.image { - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -/* Card Customization */ - -.e-avatar-showcase.e-card { - height: 140px; - padding: 4px; - margin: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-radius: 8px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-header-title { - align-self: center; - font-size: 18px; - letter-spacing: 1px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { - color: rgba(0, 0, 0, 0.75); - white-space: pre-line; - font-size: 14px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { - margin: 0; -} - -.e-avatar-showcase.e-card .e-card-content { - align-self: center; - padding: 10px 11px 10px 0px; - color: rgba(0, 0, 0, 0.75); - overflow: visible; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/avatar/badge-cs2/package.json b/ej2-angular/code-snippet/avatar/badge-cs2/package.json index eb9ab62ca1..f08987bb64 100644 --- a/ej2-angular/code-snippet/avatar/badge-cs2/package.json +++ b/ej2-angular/code-snippet/avatar/badge-cs2/package.json @@ -13,7 +13,8 @@ "@angular/core": "17.1.2", "@angular/platform-browser": "17.1.2", "@angular/platform-browser-dynamic": "17.1.2", - "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-notifications": "*", "@syncfusion/ej2-layouts": "*", "@angular/animations": "17.1.2", "@angular/common": "17.1.2", @@ -38,4 +39,4 @@ "karma-jasmine-html-reporter": "2.0.0", "typescript": "5.3.3" } -} \ No newline at end of file +} diff --git a/ej2-angular/code-snippet/avatar/badge-cs2/src/app.component.ts b/ej2-angular/code-snippet/avatar/badge-cs2/src/app.component.ts index 311bd9820e..2718097972 100644 --- a/ej2-angular/code-snippet/avatar/badge-cs2/src/app.component.ts +++ b/ej2-angular/code-snippet/avatar/badge-cs2/src/app.component.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' - import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ imports: [ - + CommonModule ], diff --git a/ej2-angular/code-snippet/avatar/badge-cs2/src/styles.css b/ej2-angular/code-snippet/avatar/badge-cs2/src/styles.css index 823d52e9b0..2725b2f130 100644 --- a/ej2-angular/code-snippet/avatar/badge-cs2/src/styles.css +++ b/ej2-angular/code-snippet/avatar/badge-cs2/src/styles.css @@ -1,2 +1,102 @@ @import 'node_modules/@syncfusion/ej2-base/styles/material.css'; +@import 'node_modules/@syncfusion/ej2-notifications/styles/material.css'; @import 'node_modules/@syncfusion/ej2-layouts/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + margin: auto; + border-radius: 3px; + justify-content: center; +} + +.sample_container.avatar-badge .avatar-sub-block { + display: inline-block; + position: relative; + margin: 7px +} + +.sample_container.avatar-badge .avatar-block { + display: inline-block; + vertical-align: top; +} + +/* Media Queries for various devices */ + +@media only screen and (max-width: 965px) { + .sample_container.avatar-badge { + max-width: 332px; + margin: auto; + margin-top: 0; + } + .circleAvatar { + margin-top: 15px; + } + .e-avatar-showcase.e-card { + width: 320px; + } +} + +@media only screen and (min-width: 965px) { + .sample_container.avatar-badge { + max-width: 825px; + margin: auto; + margin-top: 70px; + } + .e-avatar-showcase.e-card { + width: 400px; + } +} + +.e-avatar.image { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* Card Customization */ + +.e-avatar-showcase.e-card { + height: 140px; + padding: 4px; + margin: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 8px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-header-title { + align-self: center; + font-size: 18px; + letter-spacing: 1px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { + color: rgba(0, 0, 0, 0.75); + white-space: pre-line; + font-size: 14px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { + margin: 0; +} + +.e-avatar-showcase.e-card .e-card-content { + align-self: center; + padding: 10px 11px 10px 0px; + color: rgba(0, 0, 0, 0.75); + overflow: visible; +} diff --git a/ej2-angular/code-snippet/avatar/color-cs2/index.css b/ej2-angular/code-snippet/avatar/color-cs2/index.css index 3b7f57539c..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/color-cs2/index.css +++ b/ej2-angular/code-snippet/avatar/color-cs2/index.css @@ -1,44 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: flex; - width: 400px; - margin: 100px auto; - border-radius: 3px; - justify-content: center; -} - -.e-avatar { - margin: 2px; -} - -.e-avatar.green { - background-color: #87eb87; -} - -.e-avatar.violet { - background-color: #ee82ee; -} - -.e-avatar.blue { - background-color: #7171e4; -} - -.e-avatar.red { - background-color: #d86e6e; -} - -.e-avatar.rose { - background-color: #bc8f8f; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/avatar/color-cs2/src/styles.css b/ej2-angular/code-snippet/avatar/color-cs2/src/styles.css index 823d52e9b0..a815af7f43 100644 --- a/ej2-angular/code-snippet/avatar/color-cs2/src/styles.css +++ b/ej2-angular/code-snippet/avatar/color-cs2/src/styles.css @@ -1,2 +1,47 @@ @import 'node_modules/@syncfusion/ej2-base/styles/material.css'; @import 'node_modules/@syncfusion/ej2-layouts/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: flex; + width: 400px; + margin: 100px auto; + border-radius: 3px; + justify-content: center; +} + +.e-avatar { + margin: 2px; +} + +.e-avatar.green { + background-color: #87eb87; +} + +.e-avatar.violet { + background-color: #ee82ee; +} + +.e-avatar.blue { + background-color: #7171e4; +} + +.e-avatar.red { + background-color: #d86e6e; +} + +.e-avatar.rose { + background-color: #bc8f8f; +} diff --git a/ej2-angular/code-snippet/avatar/custom-size-cs2/index.css b/ej2-angular/code-snippet/avatar/custom-size-cs2/index.css index 570f94ee01..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/custom-size-cs2/index.css +++ b/ej2-angular/code-snippet/avatar/custom-size-cs2/index.css @@ -1,39 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: block; - width: 400px; - margin: 100px auto; - border-radius: 3px; -} - -#element :nth-child(5) { - font-size: 18px; -} - -#element :nth-child(4) { - font-size: 20px; -} - -#element :nth-child(3) { - font-size: 22px; -} - -#element :nth-child(2) { - font-size: 24px; -} - -#element :nth-child(1) { - font-size: 26px; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/avatar/custom-size-cs2/src/styles.css b/ej2-angular/code-snippet/avatar/custom-size-cs2/src/styles.css index 823d52e9b0..e5c4d72723 100644 --- a/ej2-angular/code-snippet/avatar/custom-size-cs2/src/styles.css +++ b/ej2-angular/code-snippet/avatar/custom-size-cs2/src/styles.css @@ -1,2 +1,42 @@ @import 'node_modules/@syncfusion/ej2-base/styles/material.css'; @import 'node_modules/@syncfusion/ej2-layouts/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + width: 400px; + margin: 100px auto; + border-radius: 3px; +} + +#element :nth-child(5) { + font-size: 18px; +} + +#element :nth-child(4) { + font-size: 20px; +} + +#element :nth-child(3) { + font-size: 22px; +} + +#element :nth-child(2) { + font-size: 24px; +} + +#element :nth-child(1) { + font-size: 26px; +} diff --git a/ej2-angular/code-snippet/avatar/media-formats-cs2/index.css b/ej2-angular/code-snippet/avatar/media-formats-cs2/index.css index 6e7a6a6497..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/media-formats-cs2/index.css +++ b/ej2-angular/code-snippet/avatar/media-formats-cs2/index.css @@ -1,136 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - width: auto; - margin: auto; - border-radius: 3px; - justify-content: center; -} - - -/* Media Quries for various devices */ - -@media only screen and (max-width: 965px) { - .sample_container.avatar-types { - max-width: 500px; - margin: auto; - margin-top: 0; - } - .e-avatar-showcase.e-card { - width: 120px; - } -} - -@media only screen and (min-width: 965px) { - .sample_container.avatar-types { - max-width: 500px; - margin: auto; - margin-top: 35px; - } - .e-avatar-showcase.e-card { - width: 150px; - } -} - -.sample_container.avatar-types .avatar-block { - display: inline-block; - vertical-align: top; -} - -/* Avatar image source in 'background-image' property */ - -.e-avatar.image { - background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png'); - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -/* SVG Icons */ - -.chrome { - background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%; -} - -.svg_icons { - width: 32px; - height: 32px; - display: inline-block; -} - -/* Card Customization */ - -.e-avatar-showcase.e-card { - height: 113px; - padding: 5px; - margin: 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-radius: 8px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-header-title { - align-self: center; - font-size: 18px; - letter-spacing: 1px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { - color: rgba(0, 0, 0, 0.75); - white-space: pre-line; - font-size: 14px; - text-shadow: #eaeaea 1px 1px 2px; -} - -.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { - margin: 0; -} - -.e-avatar-showcase.e-card .e-card-content { - align-self: center; - padding: 10px 0 10px 0; - overflow: visible; -} - -.e-avatar-showcase.e-card .e-card-content .e-avatar { - font-size: 18px; -} - -/* Font Icons */ - -@font-face { - font-family: 'Contacts'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype'); - font-weight: normal; - font-style: normal; -} - -.people, -.e-people { - font-family: 'Contacts'; -} - -.e-people:before { - content: '\e700'; -} - -.e-avatar .e-people.icons { - font-size: 24px; -} - -/* Custom Avatar Background Color */ - -.e-avatar.custom { - background-color: blueviolet; -} diff --git a/ej2-angular/code-snippet/avatar/media-formats-cs2/src/styles.css b/ej2-angular/code-snippet/avatar/media-formats-cs2/src/styles.css index 3ec29b0021..5f144ff6c9 100644 --- a/ej2-angular/code-snippet/avatar/media-formats-cs2/src/styles.css +++ b/ej2-angular/code-snippet/avatar/media-formats-cs2/src/styles.css @@ -6,3 +6,140 @@ @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css'; @import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css'; @import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + width: auto; + margin: auto; + border-radius: 3px; + justify-content: center; +} + + +/* Media Quries for various devices */ + +@media only screen and (max-width: 965px) { + .sample_container.avatar-types { + max-width: 500px; + margin: auto; + margin-top: 0; + } + .e-avatar-showcase.e-card { + width: 120px; + } +} + +@media only screen and (min-width: 965px) { + .sample_container.avatar-types { + max-width: 500px; + margin: auto; + margin-top: 35px; + } + .e-avatar-showcase.e-card { + width: 150px; + } +} + +.sample_container.avatar-types .avatar-block { + display: inline-block; + vertical-align: top; +} + +/* Avatar image source in 'background-image' property */ + +.e-avatar.image { + background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* SVG Icons */ + +.chrome { + background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%; +} + +.svg_icons { + width: 32px; + height: 32px; + display: inline-block; +} + +/* Card Customization */ + +.e-avatar-showcase.e-card { + height: 113px; + padding: 5px; + margin: 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 8px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-header-title { + align-self: center; + font-size: 18px; + letter-spacing: 1px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title { + color: rgba(0, 0, 0, 0.75); + white-space: pre-line; + font-size: 14px; + text-shadow: #eaeaea 1px 1px 2px; +} + +.e-avatar-showcase.e-card .e-card-header .e-card-sub-title p { + margin: 0; +} + +.e-avatar-showcase.e-card .e-card-content { + align-self: center; + padding: 10px 0 10px 0; + overflow: visible; +} + +.e-avatar-showcase.e-card .e-card-content .e-avatar { + font-size: 18px; +} + +/* Font Icons */ + +@font-face { + font-family: 'Contacts'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRgAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmiAnWagAAAcwAAADwaGVhZBD04psAAADQAAAANmhoZWEHiwNuAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQAwAHgAAAHEAAAACG1heHABDwA1AAABCAAAACBuYW1lby+ImAAAArwAAAIxcG9zdGUbI4AAAATwAAAAOwABAAADUv9qAFoEAAAAAAAD3QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAWW9ja18PPPUACwPoAAAAANb8zuYAAAAA1vzO5gAAAAAD3QPqAAAACAACAAAAAAAAAAEAAAADACkAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAADAAeAACAAAAAAO+A+oADQAZAAA3FBYXIT4BNS4BJyEOARMeARc+ATcuAScOAS4YFwMzFxgDq4H+zYGr4QOCY2KCAwOCYmGCnCtOISFOK3qiAwOiAe1igwICg2JjggICggAAAAACAAAAAAPdA+oAFAAoAAABDgEHIicjDgEHLgEnLgEnPgE3HgEFFBYfARYfATcXFhc2JDcmJCcGBAOkBfK3KioXEFcpBBEMRUsBBfK3tvL8cVRLDggBBsQKLDDPARMFBf7tz87+7QI+ndEEBwI/Izh2DS+RVZ3RBATRnWCmN3BIETecAgcBBPK1tfIEBPIAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAgAAQABAAAAAAACAAcACQABAAAAAAADAAgAEAABAAAAAAAEAAgAGAABAAAAAAAFAAsAIAABAAAAAAAGAAgAKwABAAAAAAAKACwAMwABAAAAAAALABIAXwADAAEECQAAAAIAcQADAAEECQABABAAcwADAAEECQACAA4AgwADAAEECQADABAAkQADAAEECQAEABAAoQADAAEECQAFABYAsQADAAEECQAGABAAxwADAAEECQAKAFgA1wADAAEECQALACQBLyBDb250YWN0c1JlZ3VsYXJDb250YWN0c0NvbnRhY3RzVmVyc2lvbiAxLjBDb250YWN0c0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwBvAG4AdABhAGMAdABzAFIAZQBnAHUAbABhAHIAQwBvAG4AdABhAGMAdABzAEMAbwBuAHQAYQBjAHQAcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwBvAG4AdABhAGMAdABzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQABHVzZXIKY2hhdC0wMS13ZgAAAA==) format('truetype'); + font-weight: normal; + font-style: normal; +} + +.people, +.e-people { + font-family: 'Contacts'; +} + +.e-people:before { + content: '\e700'; +} + +.e-avatar .e-people.icons { + font-size: 24px; +} + +/* Custom Avatar Background Color */ + +.e-avatar.custom { + background-color: blueviolet; +} diff --git a/ej2-angular/code-snippet/avatar/size-cs1/index.css b/ej2-angular/code-snippet/avatar/size-cs1/index.css index 90289d8fb2..8b13789179 100644 --- a/ej2-angular/code-snippet/avatar/size-cs1/index.css +++ b/ej2-angular/code-snippet/avatar/size-cs1/index.css @@ -1,23 +1 @@ -#container { - visibility: hidden; -} -#loader { - color: #008cff; - height: 40px; - left: 45%; - position: absolute; - top: 45%; - width: 30%; -} - -#element { - display: block; - width: 300px; - margin: 100px auto; - border-radius: 3px; -} - -.e-avatar { - background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png'); -} diff --git a/ej2-angular/code-snippet/avatar/size-cs1/src/styles.css b/ej2-angular/code-snippet/avatar/size-cs1/src/styles.css index 3ec29b0021..e3bed998e7 100644 --- a/ej2-angular/code-snippet/avatar/size-cs1/src/styles.css +++ b/ej2-angular/code-snippet/avatar/size-cs1/src/styles.css @@ -6,3 +6,28 @@ @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css'; @import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css'; @import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css'; + +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + width: 300px; + margin: 100px auto; + border-radius: 3px; +} + +.e-avatar { + background-image: url('https://ej2.syncfusion.com/demos/src/grid/images/2.png'); + margin: 2px; +} diff --git a/ej2-angular/code-snippet/file-manager/directory-upload-cs1/src/app.component.ts b/ej2-angular/code-snippet/file-manager/directory-upload-cs1/src/app.component.ts index bb4d25d837..69595c1cc6 100644 --- a/ej2-angular/code-snippet/file-manager/directory-upload-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/file-manager/directory-upload-cs1/src/app.component.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser' import { NgModule } from '@angular/core' -import { FileManagerModule,NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager' +import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager' diff --git a/ej2-angular/code-snippet/file-manager/flat-data-cs1/src/app.component.ts b/ej2-angular/code-snippet/file-manager/flat-data-cs1/src/app.component.ts index 12cbc2edcc..d3b20541b6 100644 --- a/ej2-angular/code-snippet/file-manager/flat-data-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/file-manager/flat-data-cs1/src/app.component.ts @@ -33,11 +33,11 @@ import { imports: [FileManagerModule, FileManagerAllModule], }) export class AppComponent { - public contextMenuSettings: object; - public toolbarSettings: ToolbarSettingsModel; - public permission: Permission; - public fileData: FileData[]; - public resultData: { [key: string]: Object }[]; + public contextMenuSettings?: object; + public toolbarSettings?: ToolbarSettingsModel; + public permission?: Permission; + public fileData?: FileData[]; + public resultData?: { [key: string]: Object }[]; public ngOnInit(): void { this.permission = { copy: false, @@ -57,7 +57,7 @@ export class AppComponent { id: '0', isFile: false, name: 'Files', - parentId: null, + parentId: undefined, size: 1779448, type: 'folder', }, diff --git a/ej2-angular/code-snippet/file-manager/virtualization-cs1/src/app.component.ts b/ej2-angular/code-snippet/file-manager/virtualization-cs1/src/app.component.ts index cb2cb63f54..194870c21c 100644 --- a/ej2-angular/code-snippet/file-manager/virtualization-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/file-manager/virtualization-cs1/src/app.component.ts @@ -3,15 +3,12 @@ import { NgModule } from '@angular/core' import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService, VirtualizationService } from '@syncfusion/ej2-angular-filemanager' import { Component, ViewEncapsulation } from '@angular/core'; -import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService, VirtualizationService } from '@syncfusion/ej2-angular-filemanager'; /** * File Manager virtualization feature sample */ @Component({ imports: [FileManagerModule, ], - -providers:[ NavigationPaneService, ToolbarService, DetailsViewService, VirtualizationService ], standalone: true, selector: 'app-root', styleUrls: ['./app.component.css'], @@ -26,10 +23,10 @@ export class AppComponent { public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; public ngOnInit(): void { this.ajaxSettings = { - url: this.hostUrl + 'api/FileManager/FileOperations', - getImageUrl: this.hostUrl + 'api/FileManager/GetImage', - uploadUrl: this.hostUrl + 'api/FileManager/Upload', - downloadUrl: this.hostUrl + 'api/FileManager/Download' + url: this.hostUrl + 'api/Virtualization/FileOperations', + getImageUrl: this.hostUrl + 'api/Virtualization/GetImage', + uploadUrl: this.hostUrl + 'api/Virtualization/Upload', + downloadUrl: this.hostUrl + 'api/Virtualization/Download' }; this.view = "Details"; } diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs15/package.json b/ej2-angular/code-snippet/tooltip/getting-started-cs15/package.json index 144412753d..c47a50a96f 100644 --- a/ej2-angular/code-snippet/tooltip/getting-started-cs15/package.json +++ b/ej2-angular/code-snippet/tooltip/getting-started-cs15/package.json @@ -16,6 +16,7 @@ "@syncfusion/ej2-angular-buttons": "*", "@syncfusion/ej2-angular-popups": "*", "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-popups": "*", "@syncfusion/ej2-angular-base": "*", "@angular/animations": "17.1.2", "@angular/common": "17.1.2", @@ -40,4 +41,4 @@ "karma-jasmine-html-reporter": "2.0.0", "typescript": "5.3.3" } -} \ No newline at end of file +} diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs15/src/app.component.ts b/ej2-angular/code-snippet/tooltip/getting-started-cs15/src/app.component.ts index 18788b3191..918184b487 100644 --- a/ej2-angular/code-snippet/tooltip/getting-started-cs15/src/app.component.ts +++ b/ej2-angular/code-snippet/tooltip/getting-started-cs15/src/app.component.ts @@ -2,11 +2,9 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { TooltipModule } from '@syncfusion/ej2-angular-popups' import { ButtonModule } from '@syncfusion/ej2-angular-buttons' - - - import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; -import { TooltipComponent, Position } from '@syncfusion/ej2-angular-popups'; +import { TooltipComponent } from '@syncfusion/ej2-angular-popups'; +import { Position } from '@syncfusion/ej2-popups'; @Component({ imports: [ diff --git a/ej2-angular/code-snippet/tree-view/context-menu-cs1/package.json b/ej2-angular/code-snippet/tree-view/context-menu-cs1/package.json index ab9982a53c..8235fc983c 100644 --- a/ej2-angular/code-snippet/tree-view/context-menu-cs1/package.json +++ b/ej2-angular/code-snippet/tree-view/context-menu-cs1/package.json @@ -17,7 +17,8 @@ "@syncfusion/ej2-angular-navigations": "*", "@syncfusion/ej2-base": "*", "@syncfusion/ej2-inputs": "*", - "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-navigations": "*", "@syncfusion/ej2-angular-base": "*", "@angular/animations": "17.1.2", "@angular/common": "17.1.2", @@ -41,4 +42,4 @@ "karma-jasmine-html-reporter": "2.0.0", "typescript": "5.3.3" } -} \ No newline at end of file +} diff --git a/ej2-angular/code-snippet/tree-view/context-menu-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/context-menu-cs1/src/app.component.ts index a7659e1a3e..68a3e07b7d 100644 --- a/ej2-angular/code-snippet/tree-view/context-menu-cs1/src/app.component.ts +++ b/ej2-angular/code-snippet/tree-view/context-menu-cs1/src/app.component.ts @@ -1,13 +1,10 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' -import { TreeViewModule, BeforeOpenCloseMenuEventArgs, MenuEventArgs, MenuItemModel, ContextMenuComponent, ContextMenuModule } from '@syncfusion/ej2-angular-navigations' - - - - +import { TreeViewModule, ContextMenuModule } from '@syncfusion/ej2-angular-navigations'; +import { NodeClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations'; import { Component, Inject, ViewChild } from '@angular/core'; -import { TreeViewComponent, NodeClickEventArgs, BeforeOpenCloseMenuEventArgs, MenuEventArgs, MenuItemModel, ContextMenuComponent } from '@syncfusion/ej2-angular-navigations'; +import { TreeViewComponent, ContextMenuComponent } from '@syncfusion/ej2-angular-navigations'; @Component({ imports: [ diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs11/package.json b/ej2-angular/code-snippet/tree-view/getting-started-cs11/package.json index 55de7e8a30..9ea648fd9e 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs11/package.json +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs11/package.json @@ -18,6 +18,7 @@ "@syncfusion/ej2-base": "*", "@syncfusion/ej2-inputs": "*", "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-navigations": "*", "@syncfusion/ej2-angular-base": "*", "@syncfusion/ej2-angular-inputs": "*", "@angular/animations": "17.1.2", @@ -42,4 +43,4 @@ "karma-jasmine-html-reporter": "2.0.0", "typescript": "5.3.3" } -} \ No newline at end of file +} diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs11/src/app.component.ts b/ej2-angular/code-snippet/tree-view/getting-started-cs11/src/app.component.ts index 2bfa14ac9d..c107708f7e 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs11/src/app.component.ts +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs11/src/app.component.ts @@ -1,12 +1,9 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' -import { TreeViewModule } from '@syncfusion/ej2-angular-navigations' - - - +import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations' import { Component, ViewChild } from '@angular/core'; -import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-angular-navigations'; +import { NodeSelectEventArgs } from '@syncfusion/ej2-navigations'; @Component({ imports: [ diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs12/package.json b/ej2-angular/code-snippet/tree-view/getting-started-cs12/package.json index 55de7e8a30..9ea648fd9e 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs12/package.json +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs12/package.json @@ -18,6 +18,7 @@ "@syncfusion/ej2-base": "*", "@syncfusion/ej2-inputs": "*", "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-navigations": "*", "@syncfusion/ej2-angular-base": "*", "@syncfusion/ej2-angular-inputs": "*", "@angular/animations": "17.1.2", @@ -42,4 +43,4 @@ "karma-jasmine-html-reporter": "2.0.0", "typescript": "5.3.3" } -} \ No newline at end of file +} diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs12/src/app.component.ts b/ej2-angular/code-snippet/tree-view/getting-started-cs12/src/app.component.ts index 8adb472aef..8ab9ae5b47 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs12/src/app.component.ts +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs12/src/app.component.ts @@ -1,12 +1,9 @@ import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' -import { TreeViewModule } from '@syncfusion/ej2-angular-navigations' - - - +import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations' import { Component, ViewChild } from '@angular/core'; -import { NodeCheckEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'; +import { NodeCheckEventArgs } from '@syncfusion/ej2-navigations'; @Component({ imports: [ diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs9/index.css b/ej2-angular/code-snippet/tree-view/getting-started-cs9/index.css index a0c53000e7..41bf0e2345 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs9/index.css +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs9/index.css @@ -15,30 +15,3 @@ width: 350px; margin: 0 auto; } - -.custom .e-list-item .e-icons { - font-family: "Customize-icon"; - } - - .custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before { - content: '\e700'; - font-size: 12px; - } - - @font-face { - font-family: 'Customize-icon'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=) format('truetype'); - font-weight: normal; - font-style: normal; - } - - -#treeparent { - display: block; - max-width: 400px; - max-height: 330px; - margin: auto; - overflow: auto; - border: 1px solid #dddddd; - border-radius: 3px; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs9/src/styles.css b/ej2-angular/code-snippet/tree-view/getting-started-cs9/src/styles.css index bb9881a173..562438ff89 100644 --- a/ej2-angular/code-snippet/tree-view/getting-started-cs9/src/styles.css +++ b/ej2-angular/code-snippet/tree-view/getting-started-cs9/src/styles.css @@ -4,4 +4,31 @@ @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'; \ No newline at end of file +@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; + +.custom .e-list-item .e-icons { + font-family: "Customize-icon"; + } + + .custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before { + content: '\e700'; + font-size: 12px; + } + + @font-face { + font-family: 'Customize-icon'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=) format('truetype'); + font-weight: normal; + font-style: normal; + } + + +#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/template-cs1/index.css b/ej2-angular/code-snippet/tree-view/template-cs1/index.css index 793d7a0190..47c26f679e 100644 --- a/ej2-angular/code-snippet/tree-view/template-cs1/index.css +++ b/ej2-angular/code-snippet/tree-view/template-cs1/index.css @@ -15,36 +15,3 @@ width: 400px; margin: 0 auto; } - -#treeparent { - display: block; - max-width: 450px; - max-height: 320px; - margin: auto; - overflow: auto; - border: 1px solid #dddddd; - border-radius: 3px; -} - -.custom .e-list-item .e-fullrow { - height: 72px; -} - -.custom .e-list-item .e-list-text { - line-height: normal; -} - -.eimage { - float: left; - padding: 11px 16px 11px 0; -} - -.ename { - font-size: 16px; - padding: 14px 0 0; -} - -.ejob { - font-size: 14px; - opacity: .87; -} \ No newline at end of file diff --git a/ej2-angular/code-snippet/tree-view/template-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/template-cs1/src/styles.css index bb9881a173..1ec55bf860 100644 --- a/ej2-angular/code-snippet/tree-view/template-cs1/src/styles.css +++ b/ej2-angular/code-snippet/tree-view/template-cs1/src/styles.css @@ -4,4 +4,37 @@ @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'; \ No newline at end of file +@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; + +#treeparent { + display: block; + max-width: 450px; + max-height: 320px; + margin: auto; + overflow: auto; + border: 1px solid #dddddd; + border-radius: 3px; +} + +.custom .e-list-item .e-fullrow { + height: 72px; +} + +.custom .e-list-item .e-list-text { + line-height: normal; +} + +.eimage { + float: left; + padding: 11px 16px 11px 0; +} + +.ename { + font-size: 16px; + padding: 14px 0 0; +} + +.ejob { + font-size: 14px; + opacity: .87; +} diff --git a/ej2-angular/treeview/how-to/customize-the-expand-and-collapse-icons.md b/ej2-angular/treeview/how-to/customize-the-expand-and-collapse-icons.md index a8a04ecf96..741d91b5b3 100644 --- a/ej2-angular/treeview/how-to/customize-the-expand-and-collapse-icons.md +++ b/ej2-angular/treeview/how-to/customize-the-expand-and-collapse-icons.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the expand and collapse icons in Angular Treeview component | Syncfusion +title: Apply custom icons in Angular Treeview component | Syncfusion description: Learn here all about Customize the expand and collapse icons in Syncfusion Angular Treeview component of Syncfusion Essential JS 2 and more. platform: ej2-angular control: Customize the expand and collapse icons @@ -18,9 +18,13 @@ Refer to the sample to customize expand/collapse icons. {% include code-snippet/tree-view/getting-started-cs9/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/tree-view/getting-started-cs9/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/tree-view/getting-started-cs9/src/main.ts %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/samples/tree-view/getting-started-cs9" %} \ No newline at end of file +{% previewsample "page.domainurl/samples/tree-view/getting-started-cs9" %} diff --git a/ej2-angular/treeview/template.md b/ej2-angular/treeview/template.md index b4af2aa84b..9bd702b742 100644 --- a/ej2-angular/treeview/template.md +++ b/ej2-angular/treeview/template.md @@ -21,6 +21,10 @@ The template expression should be provided inside the `${...}` interpolation syn {% include code-snippet/tree-view/template-cs1/src/app.component.ts %} {% endhighlight %} +{% highlight ts tabtitle="styles.css" %} +{% include code-snippet/tree-view/template-cs1/src/styles.css %} +{% endhighlight %} + {% highlight ts tabtitle="main.ts" %} {% include code-snippet/tree-view/template-cs1/src/main.ts %} {% endhighlight %}