Merge pull request #686 from Syncfusion-Content/hotfix/hotfix-v27.2.2

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-angular/code-snippet/common/bootstrap5.3-cs2/src/styles.css

@@ -1,5 +1,5 @@
 :root {
-  --color-sf-primary: 104, 134, 164;
+  --color-sf-primary: rgba(13,110,253,1);
 }
 
 @import 'node_modules/@syncfusion/ej2-base/styles/bootstrap5.3.css';

ej2-angular/code-snippet/common/clone-draggable/src/app.component.ts

@@ -9,7 +9,8 @@ standalone: true,
     selector: 'app-root',
     template:` <div id='container'>
     <div #ele class='element'><p class='drag'>Draggable Element </p></div>
-    </div> `
+    </div> `,
+    styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/drag-area/src/app.component.ts

@@ -10,7 +10,8 @@ standalone: true,
     template:` <div id='container'>
     <div id='droppable'><p class='drop'>Drop target </p></div>
     <div id='draggable'><p class='drag'>Draggable Element </p></div>
-    </div> `
+    </div> `,
+    styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/drag-drop-action-cs1/src/app.component.ts

@@ -13,7 +13,8 @@ standalone: true,
     template:` <div id='container'>
     <div id='droppable'><p class='drop'>Drop target </p></div>
     <div id='draggable'><p class='drag'>Draggable Element </p></div>
-    </div> `
+    </div> `,
+    styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/draggable-default-cs1/src/app.component.ts

@@ -12,7 +12,8 @@ standalone: true,
     selector: 'app-root',
     template:` <div id='container'>
     <div #ele class='element'><p class='drag'>Draggable Element </p></div>
-    </div> `
+    </div> `,
+    styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/droppable-default-cs1/src/app.component.ts

@@ -12,7 +12,8 @@ standalone: true,
     selector: 'app-root',
     template:` <div id='container'>
     <div #droppable class='droppable'><p class='drop'>Drop target </p></div>
-    </div> `
+    </div> `,
+    styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/fluent2-cs2/angular.json

@@ -34,13 +34,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1.5mb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "650kb",
+                  "maximumError": "700kb"
                 }
               ],
               "outputHashing": "all"

ej2-angular/code-snippet/common/fluent2-cs2/src/styles.css

@@ -1,5 +1,5 @@
 :root {
-  --color-sf-primary: 104, 134, 164;
+  --color-sf-primary: #0f6cbd;
 }
 
 @import 'node_modules/@syncfusion/ej2-base/styles/fluent2.css';

ej2-angular/code-snippet/tree-view/treeview-node-check-cs1/index.css

@@ -16,12 +16,4 @@
     margin: 0 auto;
 }
 
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
+

ej2-angular/code-snippet/tree-view/treeview-node-check-cs1/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"
   }
-}
+}

ej2-angular/code-snippet/tree-view/treeview-node-check-cs1/src/app.component.ts

@@ -2,12 +2,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 { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, NodeKeyPressEventArgs, NodeClickEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { NodeKeyPressEventArgs, NodeClickEventArgs } from '@syncfusion/ej2-navigations';
+import { Component, ViewChild } from '@angular/core';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
 /**
  * TreeView Checkboxes sample
  */

ej2-angular/code-snippet/tree-view/treeview-node-check-cs1/src/styles.css

@@ -4,4 +4,14 @@
 @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-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}

ej2-angular/code-snippet/tree-view/validation-cs1/index.css

@@ -16,18 +16,4 @@
     margin: 0 auto;
 }
 
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
 
-#display {
-    max-width: 500px;
-    margin: auto;
-    padding: 10px;
-}

ej2-angular/code-snippet/tree-view/validation-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": "*",
     "@syncfusion/ej2-angular-inputs": "*",
     "@angular/animations": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
+}

ej2-angular/code-snippet/tree-view/validation-cs1/src/app.component.ts

@@ -1,13 +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, NodeEditEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { NodeEditEventArgs } from '@syncfusion/ej2-navigations';
 
 @Component({
 imports: [

ej2-angular/code-snippet/tree-view/validation-cs1/src/styles.css

@@ -4,4 +4,20 @@
 @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-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+#display {
+    max-width: 500px;
+    margin: auto;
+    padding: 10px;
+}

ej2-angular/dashboard-layout/how-to/initializing-dashboard-using-systemjs.md

@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Initializing dashboard using systemjs in Angular Dashboard layout component | Syncfusion
+title: Angular Dashboard layout component with SystemJS | Syncfusion
 description: Learn here all about Initializing dashboard using systemjs in Syncfusion Angular Dashboard layout component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
 control: Initializing dashboard using systemjs 
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Initializing dashboard using systemjs in Angular Dashboard layout component
+# SystemJS Initialization in Angular Dashboard layout component
 
 DashboardLayout can also be initialized using `SystemJS` as follows.
 
@@ -22,7 +22,7 @@ DashboardLayout can also be initialized using `SystemJS` as follows.
       npm install
     ```
 
-   For more information, refer to [Angular sample setup](https://angular.io/guide/setup).
+   For more information, refer to [Angular sample setup](https://v17.angular.io/guide/setup-local).
 
 * Install Syncfusion DashboardLayout package using below command.
 
@@ -212,11 +212,15 @@ The following example shows a basic DashboardLayout by adding the panels propert
 {% include code-snippet/dashboard-layout/getting-started-cs2/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/getting-started-cs2/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/getting-started-cs2/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/getting-started-cs2" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.

ej2-angular/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Dragging moving of panels in Angular Dashboard layout component | Syncfusion
+title: Dragging panels in Angular Dashboard layout component | Syncfusion
 description: Learn here all about Dragging moving of panels in Syncfusion Angular Dashboard layout component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
 control: Dragging moving of panels 
@@ -26,6 +26,10 @@ The following sample demonstrates dragging and pushing of panels. For example, w
 {% include code-snippet/dashboard-layout/dragging-of-panels-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/dragging-of-panels-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/dragging-of-panels-cs1/src/main.ts %}
 {% endhighlight %}
@@ -44,6 +48,10 @@ The following sample demonstrates customizing the dragging handler of the panels
 {% include code-snippet/dashboard-layout/customizing-the-dragging-handler-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/customizing-the-dragging-handler-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/customizing-the-dragging-handler-cs1/src/main.ts %}
 {% endhighlight %}
@@ -62,11 +70,15 @@ The following sample demonstrates Dashboard Layout with dragging support disable
 {% include code-snippet/dashboard-layout/disable-dragging-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/disable-dragging-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/disable-dragging-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/disable-dragging-cs1" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.

ej2-angular/dashboard-layout/interaction-with-panels/moving-panels.md

@@ -31,11 +31,15 @@ The following sample demonstrates moving a panel programmatically to a new posit
 {% include code-snippet/dashboard-layout/moving-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/moving-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/moving-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/moving-cs1" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.

ej2-angular/dashboard-layout/interaction-with-panels/resizing-of-panels.md

@@ -26,6 +26,10 @@ The following sample demonstrates how to enable and disable the resizing of pane
 {% include code-snippet/dashboard-layout/resizing-of-panels-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/resizing-of-panels-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/resizing-of-panels-cs1/src/main.ts %}
 {% endhighlight %}
@@ -54,11 +58,15 @@ The following sample demonstrates resizing panels programmatically in the Dashbo
 {% include code-snippet/dashboard-layout/resize-panel-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/resize-panel-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/resize-panel-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/resize-panel-cs1" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.

ej2-angular/dashboard-layout/responsive-adaptive.md

@@ -21,11 +21,15 @@ The following sample demonstrates the usage of the `mediaQuery` property to turn
 {% include code-snippet/dashboard-layout/responsive-adaptive-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/responsive-adaptive-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/responsive-adaptive-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/responsive-adaptive-cs1" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.

ej2-angular/dashboard-layout/save-restore.md

@@ -19,11 +19,15 @@ The following sample demonstrates how to save and restore the state of the panel
 {% include code-snippet/dashboard-layout/save-restore-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="default-style.css" %}
+{% include code-snippet/dashboard-layout/save-restore-cs1/src/default-style.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/dashboard-layout/save-restore-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
 
 {% previewsample "page.domainurl/samples/dashboard-layout/save-restore-cs1" %}
 
-> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.
+> You can refer to our [Angular Dashboard Layout](https://www.syncfusion.com/angular-ui-components/angular-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Dashboard Layout example](https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default) to knows how to present and manipulate data.