v20.4.38 is released

Author: pipeline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ej2-angular-samples",
-  "version": "20.3.56",
+  "version": "20.4.38",
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.0.0",
@@ -113,7 +113,8 @@
     "webpack": "^4.16.1",
     "webpack-cli": "*",
     "webpack-stream": "^5.0.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.10.3",
+    "os": "^0.1.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.0",

sampleOrder.json

@@ -233,6 +233,15 @@
             "chips-api": "API"
         }
     },
+    "arc-gauge":{
+      "ControlName": "Arc Gauge",
+      "Samples": {
+            "default": "Default Functionalities",
+            "customer-satisfaction-score": "Customer Satisfaction Score",
+            "key-performance-indicator": "Key Performance Indicator",
+            "patterns": "Patterns"
+        }
+    },
     "circular-gauge": {
         "ControlName": "Circular Gauge",
         "Samples": {
@@ -838,6 +847,17 @@
             "rtl": "RTL"
         }
     },
+    "rating": {
+        "ControlName": "Rating",
+        "Samples": {
+            "default":"Default Functionalities",
+            "precision": "Precision",
+            "tooltip": "Tooltip",
+            "label": "Label",
+            "template": "Template",
+            "keyboard-navigation": "Keyboard Navigations"
+        }
+    },
     "rich-text-editor": {
         "ControlName": "Rich Text Editor",
         "Samples": {
@@ -1091,7 +1111,9 @@
         "Samples": {
             "default": "Default Functionalities",
             "popup": "Popup",
-            "alignment": "Alignment"
+            "alignment": "Alignment",
+            "template": "Template",
+            "keyboard-interaction": "Keyboard Interaction"
         }
     },
     "tooltip": {
@@ -1111,6 +1133,8 @@
         "Samples": {
             "treegrid-overview": "Overview",
             "default": "Default Functionalities",
+            "adaptive": "Adaptive",
+            "loading-animation": "Loading Animation",
             "localdata": "Local Data",
             "remotedata": "Remote Data",
             "selfreference": "Self Reference",

src/app/accordion/default-stackb.json

@@ -0,0 +1,32 @@
+/**
+ * Arc Gauge Control
+ */
+import { NgModule, ModuleWithProviders, Type } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CircularGaugeAllModule } from '@syncfusion/ej2-angular-circulargauge';
+import { GridModule } from '@syncfusion/ej2-angular-grids';
+import { DefaultComponent } from './default.component';
+import { CustomerSatisfactionComponent } from './customer-satisfaction-score.component';
+import { KeyPerformanceComponent } from './key-performance-indicator.component';
+import { PatternsComponent } from './patterns.component';
+import { ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
+
+export const arcgaugeAppRoutes: Object[] = [
+    { path: ':theme/arc-gauge/default', component: DefaultComponent, type: 'new', name: 'Default Functionalities', order: '01', category: 'Arc Gauge', description: 'This Essential JS2 Arc Gauge demo shows the gauges basic rendering.'},
+    { path: ':theme/arc-gauge/customer-satisfaction-score', component: CustomerSatisfactionComponent, type: 'new', name: 'Customer Satisfaction Score', order: '01', category: 'Arc Gauge', description: 'This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a customer satisfaction score scenario.'},
+    { path: ':theme/arc-gauge/key-performance-indicator', component: KeyPerformanceComponent, type: 'new', name: 'Key Performance Indicator', order: '01', category: 'Arc Gauge', description: 'This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a key performance indicator scenario.'},
+    { path: ':theme/arc-gauge/patterns', component: PatternsComponent, type: 'new', name: 'Patterns', order: '01', category: 'Arc Gauge', description: 'This Essential JS2 Arc Gauge demo shows how the gauge can be rendered in many ways to demonstrate different user interfaces by customizing its axis, range, pointer, etc.'}
+];
+
+export const arcRouter: ModuleWithProviders<any> = RouterModule.forChild(arcgaugeAppRoutes);
+
+let declarations: Type<Object>[] = [DefaultComponent, CustomerSatisfactionComponent, KeyPerformanceComponent, PatternsComponent];
+
+@NgModule({
+    imports: [arcRouter, CircularGaugeAllModule, GridModule, ButtonModule, CheckBoxModule],
+    exports: [],
+    declarations: declarations,
+    providers: [CircularGaugeAllModule]
+})
+export class ArcGaugeSampleModule {
+}

src/app/accordion/icon-stackb.json

@@ -0,0 +1,101 @@
+/**
+ * Sample for Circular Gauge default functionalities
+ */
+import { Component, ViewEncapsulation } from '@angular/core';
+import { ILoadedEventArgs, GaugeTheme, Legend } from '@syncfusion/ej2-angular-circulargauge';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'customer-satisfaction-score.html',
+    encapsulation: ViewEncapsulation.None
+})
+
+export class CustomerSatisfactionComponent {
+
+    public height: string = "400px";
+    public allowMargin: boolean = false;
+    public pointerWidth: number = 5;
+    public needleEndWidth: number = 2;
+
+    public titleStyle: Object = {
+        fontFamily: 'inherit',
+        size: '18px'
+    };
+
+    public animation: Object = {
+        enable: false
+    };    
+
+    public legendSettings: Object = {
+        visible: true,
+        position: 'Bottom',
+        width:'55%',
+        textStyle: {
+            fontFamily: 'inherit',
+            size: '12px'
+        }
+    };
+
+    public tooltip: Object = {
+        enable: true,
+        template: '<div style="font-size:18px;background:white;width:180px;color:#595959;border:1px solid #e8e8e8">Current Score: 7.5 </div>'
+    };
+
+    public annotations: Object = [
+        {
+            content:
+                '<div style="font-size:16px;margin-top: 15px;font-family: inherit;">7.5</div>',
+            angle: 0,
+            zIndex: '1',
+            radius: '-10%',
+        }
+    ];
+
+    public majorTicks: Object = {
+        height: 12,
+        width: 1.5,
+        interval: 2.0,
+        offset: 35
+    };
+
+    public minorTicks: Object = {
+        height: 0
+    };
+
+    public lineStyle: Object = {
+        width: 0
+    };
+
+    public labelStyle: Object = {
+        font: {
+            size: '12px',
+            fontFamily: 'inherit'
+        },
+        position: 'Outside',
+        offset: -40,
+    };
+
+    public cap: Object = {
+        radius: 8,
+        border: { width: 2 },
+    };
+
+    public load(args: ILoadedEventArgs): void {
+        // custom code start
+        let selectedTheme: string = location.hash.split('/')[1];
+        selectedTheme = selectedTheme ? selectedTheme : 'Material';
+        args.gauge.theme = <GaugeTheme>(selectedTheme.charAt(0).toUpperCase() +
+            selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast');
+        if (selectedTheme.indexOf('dark') > -1 || selectedTheme.indexOf('contrast') > -1) {
+            args.gauge.axes[0].annotations[0].content = '<div style="font-size:16px;font-family:inherit;margin-top:15px;color:white">7.5</div>';
+        }
+        else {
+            args.gauge.axes[0].annotations[0].content = '<div style="font-size:16px;font-family:inherit;margin-top:15px;color:black">7.5</div>';
+        }
+        // custom code end
+    }
+
+    constructor() {
+        // code
+    };
+}