Changes from igniteui-xplat-examples-output+PRs_2023.12.5.1

samples/grids/grid/cascading-combo/src/index.ts

@@ -78,97 +78,122 @@ export class Sample {
               City: ''
             }
         ];
-
-        setTimeout(() => {
-            for (let index = 0; index < grid.data.length; index++) {
-                const rowId = grid.data[index].ID;
-                this.bindEventsCountryCombo(rowId, grid.getCellByKey(rowId , "Country"));
-                this.bindEventsRegionCombo(rowId, grid.getCellByKey(rowId , "Region"));
-                this.bindEventsCityCombo(rowId, grid.getCellByKey(rowId , "City"));
-            }
-        }, 100);
     }
 
-    public bindEventsCountryCombo(rowId: any, cell: any) {
-        const comboId = "country_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-            const nextCombo = document.getElementById("region_" + cell.id.rowID) as IgcComboComponent<any>;
-            const nextProgress = document.getElementById("progress_region_" + cell.id.rowID) as IgcLinearProgressComponent;
-            if (value === "") {
-                nextCombo.deselect(nextCombo.value);
-                nextCombo.disabled = true;
-                nextCombo.data = [];
-            } else {
-                nextProgress.style.display = "block";
-                setTimeout(() => {
-                    nextProgress.style.display = "none";
-                    nextCombo.disabled = false;
-                    nextCombo.data = this.regions.filter(x => x.Country === value);
-                }, 2000);
-
-            }
-        });
-        combo?.addEventListener("igcOpening", (e:any) => {
-            var currCombo = e.target;
-            if (currCombo.data.length === 0) {
-                combo.data = this.countries;
-            };
-        });
-    }
-
-    public bindEventsRegionCombo(rowId: any, cell: any) {
-        const comboId = "region_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-            const nextCombo = document.getElementById("city_" + cell.id.rowID) as IgcComboComponent<any>;
-            const nextProgress = document.getElementById("progress_city_" + cell.id.rowID) as IgcLinearProgressComponent;
-            if (value === "") {
-                nextCombo.deselect(nextCombo.value);
-                nextCombo.disabled = true;
-                nextCombo.data = [];
-            } else {
-                nextProgress.style.display = "block";
-                setTimeout(() => {
-                    nextProgress.style.display = "none";
-                    nextCombo.disabled = false;
-                    nextCombo.data = this.cities.filter(x => x.Region === value);
-                }, 2000);
-            }
-        });
+    public onCountryChange(rowId: string, e: CustomEvent) {
+        const newValue = e.detail.newValue[0];
+        const regionComboId = "region_" + rowId;
+        const cityComboId = "city_" + rowId;
+        const regionCombo = document.getElementById(regionComboId) as IgcComboComponent<any>;
+        const cityCombo = document.getElementById(cityComboId) as IgcComboComponent;
+
+        if (!regionCombo || !cityCombo) return;
+
+        if (newValue === undefined || newValue === '') {
+            // Deselect, disable and clear region combo
+            regionCombo.deselect(regionCombo.value);
+            regionCombo.disabled = true;
+            regionCombo.data = [];
+
+            // Deselect, disable and clear city combo
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        } else {
+            // Populate and enable region combo based on selected country
+            regionCombo.disabled = false;
+            regionCombo.data = this.regions.filter(region => region.Country === newValue);
+
+            // Ensure city combo is reset when changing country
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        }
     }
 
-    public bindEventsCityCombo(rowId: any, cell: any) {
-        const comboId = "city_" + rowId;
-        var combo = document.getElementById(comboId) as IgcComboComponent<any>;
-        combo?.addEventListener("igcChange", (e:any) => {
-            const value = e.detail.newValue[0];
-            cell.update(value);
-        });
+    public onRegionChange(rowId: string, e: CustomEvent) {
+        const newValue = e.detail.newValue[0];
+        const cityComboId = "city_" + rowId;
+        const cityCombo = document.getElementById(cityComboId) as IgcComboComponent;
+
+        if (!cityCombo) return;
+
+        if (newValue === undefined || newValue === '') {
+            // Deselect, disable and clear city combo
+            cityCombo.deselect(cityCombo.value);
+            cityCombo.disabled = true;
+            cityCombo.data = [];
+        } else {
+            // Populate and enable city combo based on selected country
+            cityCombo.disabled = false;
+            cityCombo.data = this.cities.filter(city => city.Region === newValue);
+        }
     }
 
     public webGridCountryDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "country_" + id;
-        return html`<igc-combo placeholder="Choose Country..." value-key="Country" display-key="Country" id="${comboId}" single-select></igc-combo>`;
+
+        return html`
+            <igc-combo
+                id="${comboId}"
+                placeholder="Choose Country..."
+                value-key="Country"
+                display-key="Country"
+                single-select
+                .data="${this.countries}"
+                @igcChange="${(e: CustomEvent) => this.onCountryChange(id, e)}"
+            ></igc-combo>
+        `;
     }
 
     public webGridRegionDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "region_" + id;
-        const progressId = "progress_region_" + id;
-        return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose Region..." disabled value-key="Region"  display-key="Region" id="${comboId}" single-select></igc-combo><igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress><div>`;
+
+        return html`
+            <div style="display: flex; flex-direction: column;">
+                <igc-combo
+                    id="${comboId}"
+                    placeholder="Choose Region..."
+                    value-key="Region"
+                    display-key="Region"
+                    single-select
+                    disabled
+                    @igcChange="${(e: CustomEvent) => this.onRegionChange(id, e)}"
+                ></igc-combo>
+            </div>
+        `;
     }
 
     public webGridCityDropDownTemplate: IgcRenderFunction<IgcCellTemplateContext> = (ctx: IgcCellTemplateContext) => {
+        if (!ctx || !ctx.cell) {
+            return nothing;
+        }
+
         const id = ctx.cell.id.rowID;
         const comboId = "city_" + id;
-        const progressId = "progress_city_" + id;
-        return html`<div style="display:flex; flex-direction: column;"><igc-combo placeholder="Choose City..." disabled value-key="Name"  display-key="Name" id="${comboId}" single-select></igc-combo><igc-linear-progress style="display:none;" indeterminate id="${progressId}"></<igc-linear-progress></div>`;
+
+        return html`
+            <div style="display: flex; flex-direction: column;">
+                <igc-combo
+                    id="${comboId}"
+                    placeholder="Choose City..."
+                    value-key="Name"
+                    display-key="Name"
+                    single-select
+                    disabled
+                ></igc-combo>
+            </div>
+        `;
     }
 
 }

samples/grids/grid/conditional-row-selectors/src/index.ts

@@ -63,7 +63,6 @@ export class Sample {
                 // all selected from header, de-select instead
                 event.newSelection = [];
         }
-        grid.markForCheck();
     }
 
 }

samples/grids/grid/keyboard-custom-navigation/src/index.ts

@@ -70,7 +70,7 @@ export class Sample {
         const type = args.targetType;
         var grid = this.grid as any;
 
-        if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
+        if (type === "dataCell" && target.editMode && evt.key.toLowerCase() === 'tab') {
             // Value validation for number column.
             // This covers both 'tab' and 'shift+tab' key interactions.
             args.event.preventDefault();
@@ -85,7 +85,7 @@ export class Sample {
 
             grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex,
                 (obj: any) => { obj.target.activate(); });
-        } else if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
+        } else if (type === "dataCell" && evt.key.toLowerCase() === 'enter') {
             // Perform column based kb navigation with 'enter' key press
             args.cancel = true;
             grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj: any) => {

samples/grids/tree-grid/column-sorting-indicators/.prettierrc

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

samples/grids/tree-grid/column-sorting-indicators/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/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://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+    <link rel="stylesheet" href="/src/index.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container sample ig-typography">
+
+    <div class="container fill">
+        <igc-tree-grid
+        auto-generate="false"
+        name="grid"
+        id="grid"
+        id="grid"
+        primary-key="ID"
+        foreign-key="ParentID">
+            <igc-column
+            field="ID"
+            header="Order ID"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Name"
+            header="Name"
+            data-type="string"
+            groupable="true"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Category"
+            header="Category"
+            data-type="string"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="OrderDate"
+            header="Order Date"
+            data-type="date"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Price"
+            data-type="currency"
+            sortable="true"
+            name="column1"
+            id="column1">
+            </igc-column>
+            <igc-column
+            field="Units"
+            header="Units"
+            data-type="number"
+            sortable="true">
+            </igc-column>
+            <igc-column
+            field="Delivered"
+            header="Units"
+            data-type="boolean"
+            sortable="true">
+            </igc-column>
+        </igc-tree-grid>
+    </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>

samples/grids/tree-grid/column-sorting-indicators/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "example-ignite-ui-web-components",
+  "description": "This project provides example of using Ignite UI for Web Components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "license": "",
+  "private": true,
+  "homepage": ".",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents-core": "4.3.2",
+    "igniteui-webcomponents-grids": "4.3.2",
+    "igniteui-webcomponents-inputs": "4.3.2",
+    "igniteui-webcomponents-layouts": "4.3.2",
+    "lit-html": "^2.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.4.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}

samples/grids/tree-grid/column-sorting-indicators/sandbox.config.json

@@ -0,0 +1,6 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}