DOCINFRA-2341_merged_using_automation

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 %}

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 %}

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 %}

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;
-}

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
     ],
 
 

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;
+}

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;
-}