Updating Production for 7.0.0

.github/workflows/node.js.yml

@@ -14,21 +14,16 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
     # defaults:
     #   run:
     #     working-directory: ./browser # The working directory path
 
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 22.x
         cache: 'npm'
         # cache-dependency-path: browser/package-lock.json
 

azure-pipelines/build-pipeline.yml

@@ -35,7 +35,7 @@ stages:
         displayName: 'Install Node'
         inputs:
           versionSource: 'spec'
-          versionSpec: '20.x'
+          versionSpec: '22.15.1'
 
       - task: Npm@1
         displayName: 'Register licensed npm registry in .npmrc'

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"> 
@@ -612,6 +620,7 @@
            <a class="nav-link" href="#" data-nav="/samples/grids/grid-lite/sort-config-grid">─<span>Sort Config Grid</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid-lite/sort-config-pipeline">─<span>Sort Config Pipeline</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid-lite/sort-config-sample">─<span>Sort Config Sample</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/grids/grid-lite/styling-config-themes">─<span>Styling Config Themes</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/grids/grid-lite/styling-custom-theme">─<span>Styling Custom Theme</span></a> 
        </div>
        <label id="nav-hierarchical-grid" class="nav-component">Hierarchical Grid</label> 
@@ -821,6 +830,7 @@
        <div class="nav-group">INPUTS</div> 
        <label id="nav-badge" class="nav-component">Badge</label> 
        <div id="nav-badge-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/badge/dot">─<span>Dot</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/badge/outlined">─<span>Outlined</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/badge/shape">─<span>Shape</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/badge/styling">─<span>Styling</span></a> 
@@ -1012,6 +1022,11 @@
            <a class="nav-link" href="#" data-nav="/samples/interactions/chat/overview">─<span>Overview</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/interactions/chat/styling">─<span>Styling</span></a> 
        </div>
+       <label id="nav-query-builder" class="nav-component">Query Builder</label> 
+       <div id="nav-query-builder-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/interactions/query-builder/overview">─<span>Overview</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/interactions/query-builder/template">─<span>Template</span></a> 
+       </div>
 
        <div class="nav-group">LAYOUTS</div> 
        <label id="nav-accordion" class="nav-component">Accordion</label> 

browser/src/assets/css/browser.css

@@ -143,4 +143,12 @@ html, body, .sample-content {
     width: 20px;
     height: 20px;
     display: inline-block;
+}
+
+img[src*="dl.infragistics.com/x/img/people"] {
+    width: 62px;
+    height: 62px;
+    object-fit: cover;
+    display: block;
+    margin: auto;
 }

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 {
@@ -585,15 +585,10 @@ class Transformer {
         }
     }
 
-    public static getRelative(path: string): string {
-        if (path.indexOf(igConfig.RepositoryName) > -1) {
-            path = path.split(igConfig.RepositoryName).pop() as string;
-            path = path.split("\\").join("/");
-            return "." + path;
-        }
-
-        console.log("failed on getRelative " + path);
-        return path;
+    public static getRelative(absolutePath: string): string {
+        let relative = require('path').relative(process.cwd(), absolutePath);
+        relative = relative.split("\\").join("/");
+        return "./" + relative;
     }
 
     public static getFileName(relativePath: string): string {
@@ -926,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[];
 
@@ -940,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() {
@@ -1003,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',
@@ -999,23 +1003,24 @@ function updateIG(cb) {
     // { version: "3.2.12",  name:               "igniteui-webcomponents-core" },   // PUBLIC NPM
     let packageUpgrades = [
         // these IG packages are often updated:
-        { version: "6.3.1", name: "igniteui-webcomponents-core" },
-        { version: "6.3.1", name: "igniteui-webcomponents-charts" },
-        { version: "6.3.1", name: "igniteui-webcomponents-excel" },
-        { version: "6.3.1", name: "igniteui-webcomponents-gauges" },
-        { version: "6.3.1", name: "igniteui-webcomponents-data-grids" },
-        { version: "6.3.1", name: "igniteui-webcomponents-inputs" },
-        { version: "6.3.1", name: "igniteui-webcomponents-layouts" },
-        { version: "6.3.1", name: "igniteui-webcomponents-maps" },
-        { version: "6.3.1", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
-        { version: "6.3.1", name: "igniteui-webcomponents-spreadsheet" },
-        { version: "6.3.1", name: "igniteui-webcomponents-datasources" },
-        { version: "6.3.1", name: "igniteui-webcomponents-dashboards" },
+        { version: "7.0.0", name: "igniteui-webcomponents-core" },
+        { version: "7.0.0", name: "igniteui-webcomponents-charts" },
+        { version: "7.0.0", name: "igniteui-webcomponents-excel" },
+        { version: "7.0.0", name: "igniteui-webcomponents-gauges" },
+        { version: "7.0.0", name: "igniteui-webcomponents-data-grids" },
+        { version: "7.0.0", name: "igniteui-webcomponents-inputs" },
+        { version: "7.0.0", name: "igniteui-webcomponents-layouts" },
+        { version: "7.0.0", name: "igniteui-webcomponents-maps" },
+        { version: "7.0.0", name: "igniteui-webcomponents-spreadsheet-chart-adapter" },
+        { version: "7.0.0", name: "igniteui-webcomponents-spreadsheet" },
+        { version: "7.0.0", name: "igniteui-webcomponents-datasources" },
+        { version: "7.0.0", name: "igniteui-webcomponents-dashboards" },
+        { version: "^1.0.2", name: "igniteui-i18n-resources" },
         // these IG packages are sometimes updated:
-        { version: "^0.0.1", name: "igniteui-grid-lite" },
-        { version: "^6.2.2", name: "igniteui-webcomponents-grids" },
-        { version: "^6.3.6" , name: "igniteui-webcomponents" },
-        { version: "^1.18.0", name: "igniteui-dockmanager" },
+        { version: "^0.6.0", name: "igniteui-grid-lite" },
+        { version: "^7.0.0", name: "igniteui-webcomponents-grids" },
+        { version: "^7.0.0" , name: "igniteui-webcomponents" },
+        { version: "^2.0.1", name: "igniteui-dockmanager" },
         // other packages:
         { version: "^5.101.3", name: "webpack" },
         { version: "^6.0.1", name: "webpack-cli" },