Skip to content

Commit 70528bc

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #693 from Syncfusion-Content/hotfix/hotfix-v27.2.2
DOCINFRA-2341_merged_using_automation
2 parents ff98abf + f4a5067 commit 70528bc

File tree

22 files changed

+94
-75
lines changed

22 files changed

+94
-75
lines changed

‎ej2-angular/avatar/getting-started.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ The `Avatar` component is pure CSS component which doesn't need specific depende
4949
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- ).
5050

5151
Currently, Syncfusion provides two types of package structures for Angular components,
52-
1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
52+
1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format#angular-package-format)
5353
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
5454

5555
### Ivy library distribution package
@@ -85,9 +85,9 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
8585
To render the Avatar component, import the Avatar and its dependent component's styles as given below in `[src/styles.css]`.
8686

8787
```css
88-
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
89-
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
90-
@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
88+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
89+
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
90+
@import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
9191
```
9292

9393
>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.
102102
import { Component } from '@angular/core';
103103

104104
@Component({
105-
selector: 'my-app',
105+
selector: 'app-root',
106106
template: `<div id='element'><span class="e-avatar">GR</span></div>`
107107
})
108108

@@ -124,6 +124,10 @@ The following example shows a basic Avatar component.
124124
{% include code-snippet/avatar/getting-started-cs1/src/app.component.ts %}
125125
{% endhighlight %}
126126

127+
{% highlight ts tabtitle="styles.css" %}
128+
{% include code-snippet/avatar/getting-started-cs1/src/styles.css %}
129+
{% endhighlight %}
130+
127131
{% highlight ts tabtitle="main.ts" %}
128132
{% include code-snippet/avatar/getting-started-cs1/src/main.ts %}
129133
{% endhighlight %}

‎ej2-angular/badge/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ The following example shows a basic badge component.
130130
{% include code-snippet/badge/getting-started-cs1/src/app.component.ts %}
131131
{% endhighlight %}
132132

133-
{% highlight ts tabtitle="styles.css" %}
134-
{% include code-snippet/badge/getting-started-cs1/src/styles.css %}
133+
{% highlight ts tabtitle="app.component.css" %}
134+
{% include code-snippet/badge/getting-started-cs1/src/app.component.css %}
135135
{% endhighlight %}
136136

137137
{% highlight ts tabtitle="main.ts" %}

‎ej2-angular/code-snippet/avatar/getting-started-cs1/index.css

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +0,0 @@
1-
#container {
2-
visibility: hidden;
3-
}
4-
5-
#loader {
6-
color: #008cff;
7-
height: 40px;
8-
left: 45%;
9-
position: absolute;
10-
top: 45%;
11-
width: 30%;
12-
}
13-
14-
#element {
15-
display: block;
16-
width: 300px;
17-
margin: 130px auto;
18-
border-radius: 3px;
19-
justify-content: center;
20-
}
21-
22-
.e-avatar {
23-
background-image: url(./pic01.png);
24-
margin: 2px;
25-
}

‎ej2-angular/code-snippet/avatar/getting-started-cs1/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@angular/platform-browser-dynamic": "17.1.2",
1616
"@syncfusion/ej2-base": "*",
1717
"@syncfusion/ej2-layouts": "*",
18+
"@syncfusion/ej2-angular-layouts": "*",
1819
"@angular/animations": "17.1.2",
1920
"@angular/common": "17.1.2",
2021
"@angular/compiler": "17.1.2",

‎ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
2-
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
1+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
2+
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
33

44

55
#loader {

‎ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#element {
2+
display: flex;
3+
width: 400px;
4+
margin: auto;
5+
border: 1px solid #dddddd;
6+
border-radius: 3px;
7+
justify-content: center;
8+
}
9+

‎ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ imports: [
1212

1313

1414
standalone: true,
15-
selector: 'my-app',
15+
selector: 'app-root',
16+
styleUrls: ['./app.component.css'],
1617
template: `<div id='element'><h1>Badge Component <span class="e-badge">New</span></h1></div>`
1718
})
1819

‎ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
11
@import '/node_modules/@syncfusion/ej2-base/styles/material.css';
22
@import '/node_modules/@syncfusion/ej2-notifications/styles/material.css';
33
@import '/node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';
4-
5-
#element {
6-
display: flex;
7-
width: 400px;
8-
margin: auto;
9-
border: 1px solid #dddddd;
10-
border-radius: 3px;
11-
justify-content: center;
12-
}

‎ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css renamed to ‎ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css

File renamed without changes.

‎ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule],
1212

1313
standalone: true,
1414
selector: 'app-root',
15-
styleUrls: ['./default-style.css'],
15+
styleUrls: ['./app.component.css'],
1616
template: `
1717
<div class="control-section">
1818
<ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]="5" [cellSpacing]='cellSpacing'>

‎ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css renamed to ‎ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css

File renamed without changes.

‎ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule],
1212

1313
standalone: true,
1414
selector: 'app-root',
15-
styleUrls: ['./default-style.css'],
15+
styleUrls: ['./app.component.css'],
1616
template: `
1717
<div class="control-section">
1818
<ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels'>

‎ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#sample-list {
2+
display: block;
3+
max-width: 400px;
4+
margin: auto;
5+
border: 1px solid #dddddd;
6+
border-radius: 3px;
7+
}

‎ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"@angular/platform-browser": "17.1.2",
1515
"@angular/platform-browser-dynamic": "17.1.2",
1616
"@syncfusion/ej2-angular-navigations": "*",
17-
"@syncfusion/ej2-base": "*",
17+
"@syncfusion/ej2-base": "*",
18+
"@syncfusion/ej2-navigations": "*",
1819
"@syncfusion/ej2-angular-base": "*",
1920
"@syncfusion/ej2-angular-buttons": "*",
2021
"@angular/animations": "17.1.2",

‎ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@angular/platform-browser-dynamic": "17.1.2",
1616
"@syncfusion/ej2-angular-navigations": "*",
1717
"@syncfusion/ej2-base": "*",
18+
"@syncfusion/ej2-navigations": "*",
1819
"@syncfusion/ej2-angular-base": "*",
1920
"@syncfusion/ej2-angular-buttons": "*",
2021
"@syncfusion/ej2-angular-lists": "*",

‎ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#treeparent {
2+
display: block;
3+
max-width: 400px;
4+
max-height: 330px;
5+
margin: auto;
6+
overflow: auto;
7+
border: 1px solid #dddddd;
8+
border-radius: 3px;
9+
}

‎ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ imports: [
1414

1515

1616
standalone: true,
17-
selector: 'app-container',
17+
selector: 'app-root',
18+
styleUrls: ['./app.component.css'],
1819
template: `<div id='treeparent'><ejs-treeview id='treeelement' [fields]='field'></ejs-treeview></div>`
1920
})
2021
export class AppComponent {

‎ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11

2-
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
3-
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
4-
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
5-
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
6-
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
7-
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
2+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
3+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
4+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
5+
@import '../node_modules/@syncfusion/ej2-angular-base/styles/material.css';
6+
@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
7+
@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
88

9-
#treeparent {
10-
display: block;
11-
max-width: 400px;
12-
max-height: 330px;
13-
margin: auto;
14-
overflow: auto;
15-
border: 1px solid #dddddd;
16-
border-radius: 3px;
17-
}

‎ej2-angular/dashboard-layout/getting-started.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
103103
To render the DashboardLayout component, import the DashboardLayout and its dependent component's styles as given below in `[src/styles.css]`.
104104

105105
```css
106-
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
107-
@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
106+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
107+
@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
108108
```
109109

110110
>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';
129129

130130
@Component({
131131
selector: 'app-root',
132-
styleUrls: ['default-style.css'],
132+
styleUrls: ['./app.component.css'],
133133
template: `
134134
<div class="control-section">
135135
<ejs-dashboardlayout id='defaultLayout' [columns]="5" #defaultLayout [cellSpacing]='cellSpacing'>
@@ -189,7 +189,7 @@ export class AppComponent {
189189
}
190190
```
191191

192-
* Import DashboardLayout module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-layouts`.
192+
* Import DashboardLayout module into Angular application(`app.module.ts`) from the package `@syncfusion/ej2-angular-layouts`.
193193

194194
```javascript
195195
import { NgModule } from '@angular/core';
@@ -222,8 +222,8 @@ The following example shows a basic DashboardLayout by adding the panels propert
222222
{% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts %}
223223
{% endhighlight %}
224224

225-
{% highlight ts tabtitle="default-style.css" %}
226-
{% include code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css %}
225+
{% highlight ts tabtitle="app.component.css" %}
226+
{% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css %}
227227
{% endhighlight %}
228228

229229
{% highlight ts tabtitle="main.ts" %}
@@ -246,7 +246,7 @@ import { Component,ViewEncapsulation } from '@angular/core';
246246

247247
@Component({
248248
selector: 'app-root',
249-
styleUrls: ['app/default-style.css'],
249+
styleUrls: ['./app.component.css'],
250250
template: `
251251
<div class="control-section">
252252
<ejs-dashboardlayout id='defaultLayout' #defaultLayout [cellSpacing]='cellSpacing' [panels]='panels' [columns]="5">
@@ -274,8 +274,8 @@ The following example shows a basic DashboardLayout by using the `panels` proper
274274
{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts %}
275275
{% endhighlight %}
276276

277-
{% highlight ts tabtitle="default-style.css" %}
278-
{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css %}
277+
{% highlight ts tabtitle="app.component.css" %}
278+
{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css %}
279279
{% endhighlight %}
280280

281281
{% highlight ts tabtitle="main.ts" %}

‎ej2-angular/listview/getting-started.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ The output will appear as follows.
130130
{% include code-snippet/listview/getting-started-cs1/src/app.component.ts %}
131131
{% endhighlight %}
132132

133+
{% highlight ts tabtitle="app.component.css" %}
134+
{% include code-snippet/listview/getting-started-cs1/src/app.component.css %}
135+
{% endhighlight %}
136+
133137
{% highlight ts tabtitle="main.ts" %}
134138
{% include code-snippet/listview/getting-started-cs1/src/main.ts %}
135139
{% endhighlight %}

‎ej2-angular/sidebar/getting-started.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
9898
9999
## Adding Styles
100100

101-
To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `app.component.css`.
101+
To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `[src/styles.css]`.
102102

103103
```css
104104
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@@ -150,6 +150,10 @@ The following samples shows the sidebar component in browser.
150150
{% include code-snippet/sidebar/getting-started-cs1/src/app.component.ts %}
151151
{% endhighlight %}
152152

153+
{% highlight ts tabtitle="app.component.css" %}
154+
{% include code-snippet/sidebar/getting-started-cs1/src/app.component.css %}
155+
{% endhighlight %}
156+
153157
{% highlight ts tabtitle="main.ts" %}
154158
{% include code-snippet/sidebar/getting-started-cs1/src/main.ts %}
155159
{% endhighlight %}
@@ -171,6 +175,10 @@ N> To achieve a proper **backdrop**, we suggest that you create a wrapper parent
171175
{% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.ts %}
172176
{% endhighlight %}
173177

178+
{% highlight ts tabtitle="app.component.css" %}
179+
{% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.css %}
180+
{% endhighlight %}
181+
174182
{% highlight ts tabtitle="main.ts" %}
175183
{% include code-snippet/sidebar/showBackDrop-cs1/src/main.ts %}
176184
{% endhighlight %}
@@ -189,6 +197,10 @@ Positioning the Sidebar to the right or left of the main content can be achieved
189197
{% include code-snippet/sidebar/position-cs1/src/app.component.ts %}
190198
{% endhighlight %}
191199

200+
{% highlight ts tabtitle="app.component.css" %}
201+
{% include code-snippet/sidebar/position-cs1/src/app.component.css %}
202+
{% endhighlight %}
203+
192204
{% highlight ts tabtitle="main.ts" %}
193205
{% include code-snippet/sidebar/position-cs1/src/main.ts %}
194206
{% endhighlight %}
@@ -205,6 +217,10 @@ Animation transitions can be set while expanding or collapsing the Sidebar using
205217
{% include code-snippet/sidebar/animate-cs1/src/app.component.ts %}
206218
{% endhighlight %}
207219

220+
{% highlight ts tabtitle="app.component.css" %}
221+
{% include code-snippet/sidebar/animate-cs1/src/app.component.css %}
222+
{% endhighlight %}
223+
208224
{% highlight ts tabtitle="main.ts" %}
209225
{% include code-snippet/sidebar/animate-cs1/src/main.ts %}
210226
{% endhighlight %}
@@ -221,6 +237,10 @@ Sidebar can be closed on document click by setting [`closeOnDocumentClick`](http
221237
{% include code-snippet/sidebar/document-click-cs1/src/app.component.ts %}
222238
{% endhighlight %}
223239

240+
{% highlight ts tabtitle="app.component.css" %}
241+
{% include code-snippet/sidebar/document-click-cs1/src/app.component.css %}
242+
{% endhighlight %}
243+
224244
{% highlight ts tabtitle="main.ts" %}
225245
{% include code-snippet/sidebar/document-click-cs1/src/main.ts %}
226246
{% endhighlight %}
@@ -237,6 +257,10 @@ Expand or collapse the Sidebar while swiping in touch devices using [`enableGest
237257
{% include code-snippet/sidebar/gestures-cs1/src/app.component.ts %}
238258
{% endhighlight %}
239259

260+
{% highlight ts tabtitle="app.component.css" %}
261+
{% include code-snippet/sidebar/gestures-cs1/src/app.component.css %}
262+
{% endhighlight %}
263+
240264
{% highlight ts tabtitle="main.ts" %}
241265
{% include code-snippet/sidebar/gestures-cs1/src/main.ts %}
242266
{% endhighlight %}

‎ej2-angular/treeview/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,8 @@ The output will appear as follows.
168168
{% include code-snippet/tree-view/getting-started-cs8/src/app.component.ts %}
169169
{% endhighlight %}
170170

171-
{% highlight ts tabtitle="styles.css" %}
172-
{% include code-snippet/tree-view/getting-started-cs8/src/styles.css %}
171+
{% highlight ts tabtitle="app.component.css" %}
172+
{% include code-snippet/tree-view/getting-started-cs8/src/app.component.css %}
173173
{% endhighlight %}
174174

175175
{% highlight ts tabtitle="main.ts" %}

0 commit comments

Comments
 (0)