Skip to content

Commit f37109a

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 01-27-2023 1:00:09 PM
1 parent 44e32f9 commit f37109a

File tree

167 files changed

+4278
-48
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

167 files changed

+4278
-48
lines changed

‎ej2-angular-toc.html

+9
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<li><a href="/ej2-angular/common/animation">Animation</a></li>
5757
<li><a href="/ej2-angular/common/deployment">Deployment</a></li>
5858
<li><a href="/ej2-angular/common/drag-and-drop">Drag and Drop</a></li>
59+
<li><a href="/ej2-angular/common/template">Template</a></li>
5960
<li>Globalization
6061
<ul>
6162
<li><a href="/ej2-angular/common/globalization/overview">Overview</a></li>
@@ -1774,6 +1775,14 @@
17741775
Rating
17751776
<ul>
17761777
<li><a href="/ej2-angular/rating/getting-started">Getting Started</a></li>
1778+
<li><a href="/ej2-angular/rating/precision-modes">Precision Modes</a></li>
1779+
<li><a href="/ej2-angular/rating/labels">Labels</a></li>
1780+
<li><a href="/ej2-angular/rating/tooltip">Tooltip</a></li>
1781+
<li><a href="/ej2-angular/rating/selection">Selection</a></li>
1782+
<li><a href="/ej2-angular/rating/templates">Templates</a></li>
1783+
<li><a href="/ej2-angular/rating/events">Events</a></li>
1784+
<li><a href="/ej2-angular/rating/appearance">Appearance</a></li>
1785+
<li><a href="/ej2-angular/rating/accessibility">Accessibility</a></li>
17771786
<li><a href="https://ej2.syncfusion.com/angular/documentation/api/rating/">API Reference</a></li>
17781787
</ul>
17791788
</li><li>

‎ej2-angular/chart/selection.md

+20-20
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ We have different type of selection mode for selecting the data. They are,
3737
{% highlight ts tabtitle="app.module.ts" %}
3838
{% include code-snippet/chart/user-interaction/selection-cs1/app/app.module.ts %}
3939
{% endhighlight %}
40-
{% highlight ts tabtitle="main.ts" %}
41-
{% include code-snippet/chart/user-interaction/selection-cs1/app/main.ts %}
40+
{% highlight ts tabtitle="app.component.css" %}
41+
{% include code-snippet/chart/user-interaction/selection-cs1/index.css %}
4242
{% endhighlight %}
4343
{% endtabs %}
4444

@@ -57,8 +57,8 @@ We have different type of selection mode for selecting the data. They are,
5757
{% highlight ts tabtitle="app.module.ts" %}
5858
{% include code-snippet/chart/user-interaction/selection-cs2/app/app.module.ts %}
5959
{% endhighlight %}
60-
{% highlight ts tabtitle="main.ts" %}
61-
{% include code-snippet/chart/user-interaction/selection-cs2/app/main.ts %}
60+
{% highlight ts tabtitle="app.component.css" %}
61+
{% include code-snippet/chart/user-interaction/selection-cs2/index.css %}
6262
{% endhighlight %}
6363
{% endtabs %}
6464

@@ -75,8 +75,8 @@ You can select the points that corresponds to the same index in all the series,
7575
{% highlight ts tabtitle="app.module.ts" %}
7676
{% include code-snippet/chart/user-interaction/selection-cs3/app/app.module.ts %}
7777
{% endhighlight %}
78-
{% highlight ts tabtitle="main.ts" %}
79-
{% include code-snippet/chart/user-interaction/selection-cs3/app/main.ts %}
78+
{% highlight ts tabtitle="app.component.css" %}
79+
{% include code-snippet/chart/user-interaction/selection-cs3/index.css %}
8080
{% endhighlight %}
8181
{% endtabs %}
8282

@@ -102,8 +102,8 @@ The selected data’s are returned as an array collection in the [`dragComplete`
102102
{% highlight ts tabtitle="app.module.ts" %}
103103
{% include code-snippet/chart/user-interaction/drag-cs1/app/app.module.ts %}
104104
{% endhighlight %}
105-
{% highlight ts tabtitle="main.ts" %}
106-
{% include code-snippet/chart/user-interaction/drag-cs1/app/main.ts %}
105+
{% highlight ts tabtitle="app.component.css" %}
106+
{% include code-snippet/chart/user-interaction/drag-cs1/index.css %}
107107
{% endhighlight %}
108108
{% endtabs %}
109109

@@ -120,8 +120,8 @@ To select a region by drawing freehand shapes to fetch a collection of data use
120120
{% highlight ts tabtitle="app.module.ts" %}
121121
{% include code-snippet/chart/user-interaction/drag-cs2/app/app.module.ts %}
122122
{% endhighlight %}
123-
{% highlight ts tabtitle="main.ts" %}
124-
{% include code-snippet/chart/user-interaction/drag-cs2/app/main.ts %}
123+
{% highlight ts tabtitle="app.component.css" %}
124+
{% include code-snippet/chart/user-interaction/drag-cs2/index.css %}
125125
{% endhighlight %}
126126
{% endtabs %}
127127

@@ -138,8 +138,8 @@ To select multiple region on the chart, set the `allowMultiSelection` property t
138138
{% highlight ts tabtitle="app.module.ts" %}
139139
{% include code-snippet/chart/user-interaction/drag-cs3/app/app.module.ts %}
140140
{% endhighlight %}
141-
{% highlight ts tabtitle="main.ts" %}
142-
{% include code-snippet/chart/user-interaction/drag-cs3/app/main.ts %}
141+
{% highlight ts tabtitle="app.component.css" %}
142+
{% include code-snippet/chart/user-interaction/drag-cs3/index.css %}
143143
{% endhighlight %}
144144
{% endtabs %}
145145

@@ -156,8 +156,8 @@ You can select multiple points or series, by enabling the [`isMultiSelect`](http
156156
{% highlight ts tabtitle="app.module.ts" %}
157157
{% include code-snippet/chart/user-interaction/selection-cs4/app/app.module.ts %}
158158
{% endhighlight %}
159-
{% highlight ts tabtitle="main.ts" %}
160-
{% include code-snippet/chart/user-interaction/selection-cs4/app/main.ts %}
159+
{% highlight ts tabtitle="app.component.css" %}
160+
{% include code-snippet/chart/user-interaction/selection-cs4/index.css %}
161161
{% endhighlight %}
162162
{% endtabs %}
163163

@@ -174,8 +174,8 @@ You can able to select a point or series programmatically on a chart using [`sel
174174
{% highlight ts tabtitle="app.module.ts" %}
175175
{% include code-snippet/chart/user-interaction/selection-cs5/app/app.module.ts %}
176176
{% endhighlight %}
177-
{% highlight ts tabtitle="main.ts" %}
178-
{% include code-snippet/chart/user-interaction/selection-cs5/app/main.ts %}
177+
{% highlight ts tabtitle="app.component.css" %}
178+
{% include code-snippet/chart/user-interaction/selection-cs5/index.css %}
179179
{% endhighlight %}
180180
{% endtabs %}
181181

@@ -191,8 +191,8 @@ You can able to select a point or series through on legend using [`toggleVisibil
191191
{% highlight ts tabtitle="app.module.ts" %}
192192
{% include code-snippet/chart/user-interaction/selection-cs6/app/app.module.ts %}
193193
{% endhighlight %}
194-
{% highlight ts tabtitle="main.ts" %}
195-
{% include code-snippet/chart/user-interaction/selection-cs6/app/main.ts %}
194+
{% highlight ts tabtitle="app.component.css" %}
195+
{% include code-snippet/chart/user-interaction/selection-cs6/index.css %}
196196
{% endhighlight %}
197197
{% endtabs %}
198198

@@ -209,8 +209,8 @@ You can apply custom style to selected points or series with [`selectionStyle`](
209209
{% highlight ts tabtitle="app.module.ts" %}
210210
{% include code-snippet/chart/user-interaction/selection-cs7/app/app.module.ts %}
211211
{% endhighlight %}
212-
{% highlight ts tabtitle="main.ts" %}
213-
{% include code-snippet/chart/user-interaction/selection-cs7/app/main.ts %}
212+
{% highlight ts tabtitle="app.component.css" %}
213+
{% include code-snippet/chart/user-interaction/selection-cs7/index.css %}
214214
{% endhighlight %}
215215
{% endtabs %}
216216

‎ej2-angular/code-snippet/rating/appearance/border-cs/app/app.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
template: `<!-- To Render Rating component. -->
6+
<div class="wrap">
7+
<input ejs-rating id="rating" value="3" cssClass="custom-border" />
8+
</div>`
9+
})
10+
11+
export class AppComponent {}

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/app/app.module.ts renamed to ‎ej2-angular/code-snippet/rating/appearance/border-cs/app/app.module.ts

File renamed without changes.

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/app/main.ts renamed to ‎ej2-angular/code-snippet/rating/appearance/border-cs/app/main.ts

File renamed without changes.

‎ej2-angular/code-snippet/rating/appearance/border-cs/index.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
.wrap {
15+
margin: 50px auto;
16+
text-align: center;
17+
}
18+
19+
.e-rating-container.custom-border .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
20+
.e-rating-container.custom-border .e-rating-item-container .e-rating-icon {
21+
/* To change rating symbol border color */
22+
-webkit-text-stroke: 2px #ae9e9d;
23+
}

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/index.html renamed to ‎ej2-angular/code-snippet/rating/appearance/border-cs/index.html

File renamed without changes.

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/systemjs.config.js renamed to ‎ej2-angular/code-snippet/rating/appearance/border-cs/systemjs.config.js

File renamed without changes.

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/app/app.component.ts renamed to ‎ej2-angular/code-snippet/rating/appearance/disabled-cs/app/app.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
44
selector: 'app-root',
55
template: `<!-- To Render Rating component. -->
66
<div class="wrap">
7-
<input ejs-rating id='rating' itemsCount="8" value="3.0"/>
7+
<input ejs-rating id="rating" value="3" disabled="true" />
88
</div>`
99
})
1010

‎ej2-angular/code-snippet/rating/appearance/disabled-cs/app/app.module.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { FormsModule } from '@angular/forms';
4+
import { AppComponent } from './app.component';
5+
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
6+
import { enableRipple } from '@syncfusion/ej2-base';
7+
8+
enableRipple(true);
9+
10+
/**
11+
* Module
12+
*/
13+
@NgModule({
14+
imports: [
15+
BrowserModule, FormsModule, RatingModule
16+
],
17+
declarations: [AppComponent],
18+
bootstrap: [AppComponent]
19+
})
20+
export class AppModule { }

‎ej2-angular/code-snippet/rating/appearance/disabled-cs/app/main.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import { enableProdMode } from '@angular/core';
3+
import { AppModule } from './app.module';
4+
5+
enableProdMode();
6+
platformBrowserDynamic().bootstrapModule(AppModule);

‎ej2-angular/code-snippet/rating/getting-started/items-count-cs/index.css renamed to ‎ej2-angular/code-snippet/rating/appearance/disabled-cs/index.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
}
1313

1414
.wrap {
15-
margin: 0 auto;
16-
width: 250px;
15+
margin: 50px auto;
1716
text-align: center;
1817
}

‎ej2-angular/code-snippet/rating/appearance/disabled-cs/index.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 Angular Rating</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Angular Rating Component" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
16+
17+
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
20+
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
22+
<script src="systemjs.config.js"></script>
23+
</head>
24+
25+
<body>
26+
<div id='ang_container'>
27+
<app-root>
28+
<div id='loader'>LOADING....</div>
29+
</app-root>
30+
</div>
31+
</body>
32+
33+
</html>

‎ej2-angular/code-snippet/rating/appearance/disabled-cs/systemjs.config.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
var ngVersion = '@5.2.10';
2+
3+
System.config({
4+
transpiler: "typescript",
5+
typescriptOptions: {
6+
compilerOptions: {
7+
target: "umd",
8+
module: "commonjs",
9+
moduleResolution: "node",
10+
emitDecoratorMetadata: true,
11+
experimentalDecorators: true
12+
}
13+
},
14+
paths: {
15+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.2.43/",
16+
"angular:": "https://unpkg.com/@angular/"
17+
},
18+
map: {
19+
app: 'app',
20+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
21+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
22+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
23+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
24+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
25+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
26+
27+
"@syncfusion/ej2-angular-base": "syncfusion:ej2-angular-base/dist/ej2-angular-base.umd.min.js",
28+
"@syncfusion/ej2-angular-inputs": "syncfusion:ej2-angular-inputs/dist/ej2-angular-inputs.umd.min.js",
29+
"@syncfusion/ej2-angular-popups": "syncfusion:ej2-angular-popups/dist/ej2-angular-popups.umd.min.js",
30+
"@syncfusion/ej2-angular-buttons": "syncfusion:ej2-angular-buttons/dist/ej2-angular-buttons.umd.min.js",
31+
"@syncfusion/ej2-angular-splitbuttons": "syncfusion:ej2-angular-splitbuttons/dist/ej2-angular-splitbuttons.umd.min.js",
32+
33+
'@angular/core': 'angular:core' + ngVersion + '/bundles/core.umd.js',
34+
'@angular/common': 'angular:common' + ngVersion + '/bundles/common.umd.js',
35+
'@angular/compiler': 'angular:compiler' + ngVersion + '/bundles/compiler.umd.js',
36+
'@angular/http': 'angular:http' + ngVersion + '/bundles/http.umd.js',
37+
'@angular/forms': 'angular:forms' + ngVersion + '/bundles/forms.umd.js',
38+
'@angular/router': 'angular:router' + ngVersion + '/bundles/router.umd.js',
39+
'@angular/platform-browser': 'angular:platform-browser' + ngVersion + '/bundles/platform-browser.umd.js',
40+
'@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic' + ngVersion + '/bundles/platform-browser-dynamic.umd.js',
41+
'@angular/material': 'angular:material@5.2.10/bundles/material.umd.js',
42+
'rxjs': 'https://unpkg.com/rxjs@5.5.10'
43+
},
44+
packages: {
45+
'app': { main: 'main', defaultExtension: 'ts' },
46+
'rxjs': { main: 'Rx' },
47+
}
48+
});
49+
50+
System.import('app');

‎ej2-angular/code-snippet/rating/appearance/fill-color-cs/app/app.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
template: `<!-- To Render Rating component. -->
6+
<div class="wrap">
7+
<input ejs-rating id="rating" value="3" cssClass="custom-fill" />
8+
</div>`
9+
})
10+
11+
export class AppComponent {}

‎ej2-angular/code-snippet/rating/appearance/fill-color-cs/app/app.module.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { FormsModule } from '@angular/forms';
4+
import { AppComponent } from './app.component';
5+
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
6+
import { enableRipple } from '@syncfusion/ej2-base';
7+
8+
enableRipple(true);
9+
10+
/**
11+
* Module
12+
*/
13+
@NgModule({
14+
imports: [
15+
BrowserModule, FormsModule, RatingModule
16+
],
17+
declarations: [AppComponent],
18+
bootstrap: [AppComponent]
19+
})
20+
export class AppModule { }

‎ej2-angular/code-snippet/rating/appearance/fill-color-cs/app/main.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
import { enableProdMode } from '@angular/core';
3+
import { AppModule } from './app.module';
4+
5+
enableProdMode();
6+
platformBrowserDynamic().bootstrapModule(AppModule);

‎ej2-angular/code-snippet/rating/appearance/fill-color-cs/index.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
.wrap {
15+
margin: 50px auto;
16+
text-align: center;
17+
}
18+
19+
.e-rating-container.custom-fill .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
20+
.e-rating-container.custom-fill .e-rating-item-container .e-rating-icon {
21+
/* To change rated symbol fill color and un-rated symbol fill color */
22+
background: linear-gradient(to right, #ffe814 var(--rating-value), #d8d7d4 var(--rating-value));
23+
background-clip: text;
24+
-webkit-background-clip: text;
25+
}

0 commit comments

Comments
 (0)