add theme sample

browser/public/index.html

@@ -184,6 +184,7 @@
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/polar-spline-chart">─<span>Polar Spline Chart</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-area-chart">─<span>Radial Area Chart</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-area-chart-styling">─<span>Radial Area Chart Styling</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-chart-animation">─<span>Radial Chart Animation</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-chart-types">─<span>Radial Chart Types</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-column-chart">─<span>Radial Column Chart</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/charts/data-chart/radial-column-chart-selection">─<span>Radial Column Chart Selection</span></a> 
@@ -376,6 +377,13 @@
            <a class="nav-link" href="#" data-nav="/samples/excel/spreadsheet/sort-dialog">─<span>Sort Dialog</span></a> 
        </div>
 
+       <div class="nav-group">GALLERY</div> 
+       <label id="nav-themes" class="nav-component">Themes</label> 
+       <div id="nav-themes-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/gallery/themes/dark-theme">─<span>Dark Theme</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/gallery/themes/light-theme">─<span>Light Theme</span></a> 
+       </div>
+
        <div class="nav-group">GAUGES</div> 
        <label id="nav-bullet-graph" class="nav-component">Bullet Graph</label> 
        <div id="nav-bullet-graph-list" class="nav-list" state="collapsed"> 

browser/src/router.ts

@@ -2,6 +2,7 @@
 import { RouterCharts } from "./samples/charts/router";
 import { RouterEditors } from "./samples/editors/router";
 import { RouterExcel } from "./samples/excel/router";
+import { RouterGallery } from "./samples/gallery/router";
 import { RouterGauges } from "./samples/gauges/router";
 import { RouterGrids } from "./samples/grids/router";
 import { RouterInputs } from "./samples/inputs/router";
@@ -105,6 +106,9 @@ export class Router {
         else if (route.indexOf("/excel/") >= 0) {
             this.displaySample(await RouterExcel.get(route));
         }
+        else if (route.indexOf("/gallery/") >= 0) {
+            this.displaySample(await RouterGallery.get(route));
+        }
         else if (route.indexOf("/gauges/") >= 0) {
             this.displaySample(await RouterGauges.get(route));
         }

browser/tasks/Transformer.ts

@@ -12,45 +12,45 @@ let igConfig = require('./gulp-config.js');
 
 // this class provides information about a sample that is implemented in /samples folder
 class SampleInfo {
-    public ComponentGroup: string;     // maps
-    public ComponentFolder: string;    // geo-map
-    public ComponentName: string;      // Geo Map
-    public ComponentID: string;        // GeoMap
-
-    public HtmlFilePath: string;        // /samples/maps/geo-map/binding-csv-points/index.html
-    public HtmlFileCode: string;        // html code of above file
-    public HtmlFileRoot: string;        // root code of above file
-
-    // public SampleDirOnDisk: string;    // C:\repo\igniteui-web-comp-examples\samples\maps\geo-map\binding-csv-points\
-    public SampleFolderPath: string;     // /samples/maps/geo-map/binding-csv-points/
-    public SampleFilePath: string;       // /samples/maps/geo-map/binding-csv-points/src/MapBindingDataCSV.ts
-    public SampleRouteOld: string;       //         /maps/geo-map-binding-csv-points/
-    public SampleRouteNew: string;       //         /maps/geo-map/binding-csv-points/
-    public SampleFolderName: string;     //                       binding-csv-points
-    public SampleFileName: string;       // MapBindingDataCSV.ts
-    public SampleImportName: string;     // MapBindingDataCSV
-    public SampleImportPath: string;     // ./geo-map/binding-csv-points/MapBindingDataCSV
-    public SampleDisplayName: string;    // Map Binding Data CSV
-    public SampleFileSourcePath: string; // /src/MapBindingDataCSV.ts
-    public SampleFileSourceCode: string; // source code from /src/MapBindingDataCSV.ts file
-    public SampleFileBrowserCode: string; // source code for a sample in browser
-    public SampleFileSourceClass: string; // MapBindingDataCSV
-    public SampleFileOriginalClass: string; // MapBindingDataCSV
-
-    public SampleImportLines: string[];
-    public SampleImportPackages: string[];
-    public SampleImportFiles: string[];
-    public SampleReadMe: string;       // content of ReadMe.md file generated for /samples/maps/geo-map/binding-csv-points/
-    public SampleFilePaths: string[];  // relative paths to files in sample folder: /samples/maps/geo-map/binding-csv-points/
-    public SampleFileNames: string[];  // names of files in sample folder: /samples/maps/geo-map/binding-csv-points/
-
-    public DocsUrl: string             // https://infragistics.com/webcomponentssite/components/geo-map.html
-
-    public SandboxUrlView: string;     // https://codesandbox.io/embed/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
-    public SandboxUrlEdit: string;     //     https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
-    public SandboxUrlShort: string;    //     https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
-
-    public PackageFileContent: PackageJson;
+    public ComponentGroup: string | undefined;     // maps
+    public ComponentFolder: string | undefined;    // geo-map
+    public ComponentName: string | undefined;      // Geo Map
+    public ComponentID: string | undefined;        // GeoMap
+
+    public HtmlFilePath: string | undefined;        // /samples/maps/geo-map/binding-csv-points/index.html
+    public HtmlFileCode: string | undefined;        // html code of above file
+    public HtmlFileRoot: string | undefined;        // root code of above file
+
+    // public SampleDirOnDisk: string | undefined;    // C:\repo\igniteui-web-comp-examples\samples\maps\geo-map\binding-csv-points\
+    public SampleFolderPath: string | undefined;     // /samples/maps/geo-map/binding-csv-points/
+    public SampleFilePath: string | undefined;       // /samples/maps/geo-map/binding-csv-points/src/MapBindingDataCSV.ts
+    public SampleRouteOld: string | undefined;       //         /maps/geo-map-binding-csv-points/
+    public SampleRouteNew: string | undefined;       //         /maps/geo-map/binding-csv-points/
+    public SampleFolderName: string | undefined;     //                       binding-csv-points
+    public SampleFileName: string | undefined;       // MapBindingDataCSV.ts
+    public SampleImportName: string | undefined;     // MapBindingDataCSV
+    public SampleImportPath: string | undefined;     // ./geo-map/binding-csv-points/MapBindingDataCSV
+    public SampleDisplayName: string | undefined;    // Map Binding Data CSV
+    public SampleFileSourcePath: string | undefined; // /src/MapBindingDataCSV.ts
+    public SampleFileSourceCode: string | undefined; // source code from /src/MapBindingDataCSV.ts file
+    public SampleFileBrowserCode: string | undefined; // source code for a sample in browser
+    public SampleFileSourceClass: string | undefined; // MapBindingDataCSV
+    public SampleFileOriginalClass: string | undefined; // MapBindingDataCSV
+
+    public SampleImportLines: string[] | undefined;
+    public SampleImportPackages: string[] | undefined;
+    public SampleImportFiles: string[] | undefined;
+    public SampleReadMe: string | undefined;       // content of ReadMe.md file generated for /samples/maps/geo-map/binding-csv-points/
+    public SampleFilePaths: string[] | undefined;  // relative paths to files in sample folder: /samples/maps/geo-map/binding-csv-points/
+    public SampleFileNames: string[] | undefined;  // names of files in sample folder: /samples/maps/geo-map/binding-csv-points/
+
+    public DocsUrl: string | undefined;             // https://infragistics.com/webcomponentssite/components/geo-map.html
+
+    public SandboxUrlView: string | undefined;     // https://codesandbox.io/embed/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
+    public SandboxUrlEdit: string | undefined;     //     https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
+    public SandboxUrlShort: string | undefined;    //     https://codesandbox.io/s/github/IgniteUI/igniteui-web-comp-examples/tree/master/samples/maps/geo-map/binding-csv-points
+
+    public PackageFileContent: PackageJson | undefined;
     public PackageDependencies: PackageDependency[];
 
     constructor() {
@@ -62,16 +62,16 @@ class SampleInfo {
     }
 
     public isUsingFileName(name: string): boolean {
-        return this.SampleFileNames.includes(name);
+        return this.SampleFileNames ? this.SampleFileNames.includes(name) : false;
     }
 }
 
 class SampleSourceBlock {
-    public ImportLines: string[];
-    public ImportFiles: string[];
-    public ImportPackages: string[];
-    public ImportCSS: string[];
-    public OtherLines: string[];
+    public ImportLines: string[] | undefined;
+    public ImportFiles: string[] | undefined;
+    public ImportPackages: string[] | undefined;
+    public ImportCSS: string[] | undefined;
+    public OtherLines: string[] | undefined;
 }
 
 class Transformer {
@@ -98,7 +98,7 @@ class Transformer {
     }
 
     public static sort(samples: SampleInfo[]): void {
-        samples.sort((a, b) => a.SampleFolderPath > b.SampleFolderPath ? 1 : -1);
+        samples.sort((a, b) => (a.SampleFolderPath ?? "") > (b.SampleFolderPath ?? "") ? 1 : -1);
     }
 
     public static printNames(samples: SampleInfo[]): void {
@@ -921,10 +921,10 @@ class Transformer {
 
 class SampleGroup {
 
-    public Name: string;
-    public RouterClass: string;
-    public RouterFile: string;
-    public RouterImport: string;
+    public Name: string | undefined;
+    public RouterClass: string | undefined;
+    public RouterFile: string | undefined;
+    public RouterImport: string | undefined;
 
     public Components: SampleComponent[];
 
@@ -935,8 +935,8 @@ class SampleGroup {
 
 class SampleComponent {
 
-    public Name: string;
-    public Group: string;
+    public Name: string | undefined;
+    public Group: string | undefined;
     public Samples: SampleInfo[];
 
     constructor() {
@@ -998,8 +998,8 @@ class PackageJson {
 }
 
 class PackageDependency {
-    public name: string;
-    public version: string;
+    public name: string | undefined;
+    public version: string | undefined;;
 
     public samples?: SampleInfo[];
 

browser/tasks/gulp-samples.js

@@ -50,6 +50,9 @@ var sampleSources = [
 
     // including all samples for all components:
     igConfig.SamplesCopyPath + '/**/package.json',
+
+    // igConfig.SamplesCopyPath + '/maps/**/package.json',
+    // igConfig.SamplesCopyPath + '/gallery/**/package.json',
 
     // uncomment to exclude samples for specific components:
     // '!' + igConfig.SamplesCopyPath + '/charts/category-chart/**/package.json',
@@ -61,6 +64,7 @@ var sampleSources = [
     // '!' + igConfig.SamplesCopyPath + '/charts/tree-map/**/package.json',
     // '!' + igConfig.SamplesCopyPath + '/charts/zoomslider/**/package.json',
     // '!' + igConfig.SamplesCopyPath + '/maps/**/package.json',
+    // '!' + igConfig.SamplesCopyPath + '/gallery/**/package.json',
     // '!' + igConfig.SamplesCopyPath + '/excel/excel-library/**/package.json',
     // '!' + igConfig.SamplesCopyPath + '/excel/spreadsheet/**/package.json',
     // '!' + igConfig.SamplesCopyPath + '/gauges/bullet-graph/**/package.json',

package.json

@@ -43,8 +43,8 @@
     "dompurify": "^3.2.6",
     "file-saver": "^2.0.2",
     "igniteui-dockmanager": "^2.0.1",
-    "igniteui-i18n-resources": "^1.0.2",
     "igniteui-grid-lite": "^0.6.0",
+    "igniteui-i18n-resources": "^1.0.2",
     "igniteui-theming": "^25.0.0",
     "igniteui-webcomponents": "^7.0.0",
     "igniteui-webcomponents-charts": "7.0.0",

samples/charts/data-chart/radial-chart-animation/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}

samples/charts/data-chart/radial-chart-animation/ReadMe.md

@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Radial Chart Animation feature using [Data Chart](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/charts/data-chart/radial-chart-animation" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/charts/data-chart/radial-chart-animation?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/data-chart/radial-chart-animation
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

samples/charts/data-chart/radial-chart-animation/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample">
+
+    <div class="legend-title">
+        <!-- Solar Days based on latitude on Earth -->
+    </div>
+
+    <div class="legend">
+        <igc-legend
+        name="legend"
+        id="legend"
+        orientation="Horizontal">
+        </igc-legend>
+    </div>
+
+    <div class="container fill">
+        <igc-data-chart
+        name="chart"
+        id="chart"
+        is-horizontal-zoom-enabled="false"
+        is-vertical-zoom-enabled="false">
+            <igc-category-angle-axis
+            name="angleAxis"
+            id="angleAxis" gap="0.4" interval="1"
+            label="latitude">
+            </igc-category-angle-axis>
+
+            <igc-numeric-radius-axis
+            name="radiusAxis"
+            id="radiusAxis"
+            inner-radius-extent-scale="0.4"
+            interval="6"
+            minimum-value="0"
+            maximum-value="24">
+            </igc-numeric-radius-axis>
+
+            <igc-radial-column-series
+            name="radialSeries"
+            id="radialSeries"
+            value-member-path="dayLength"
+            show-default-tooltip="false"
+            area-fill-opacity="0.8"
+            thickness="3"
+            title="Day Length">
+            </igc-radial-column-series>
+
+            <igc-data-tool-tip-layer
+            name="dataTooltip"
+            id="dataTooltip">
+            </igc-data-tool-tip-layer>
+        </igc-data-chart>
+    </div>
+</div>
+
+    </div>
+
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+  </body>
+</html>