IgniteUI · dkamburov · Jun 12, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
diff --git a/samples/inputs/combo/templates/.eslintrc.js b/samples/inputs/combo/templates/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
diff --git a/samples/inputs/combo/templates/README.md b/samples/inputs/combo/templates/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-react-examples/tree/vnext/templates/sample/ReadMe.md -->
+
+This folder contains implementation of React application with example of Templates feature using [Combo](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/react-demos/samples/inputs/combo/templates" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/inputs/combo/templates?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/inputs/combo/templates
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/inputs/combo/templates/package.json b/samples/inputs/combo/templates/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "react-combo-overview",
+  "description": "This project provides example of Combo Overview using Infragistics React components",
+  "author": "Infragistics",
+  "homepage": ".",
+  "version": "1.4.0",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.16.1",
+    "igniteui-react": "19.0.2",
+    "igniteui-react-core": "19.0.0-alpha.0",
+    "igniteui-react-grids": "19.0.2",
+    "igniteui-react-inputs": "19.0.0-alpha.0",
+    "igniteui-react-layouts": "19.0.0-alpha.0",
+    "igniteui-webcomponents": "6.0.0",
+    "lit-html": "^3.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/inputs/combo/templates/public/index.html b/samples/inputs/combo/templates/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Combo Overview</title>
+    <link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/samples/inputs/combo/templates/sandbox.config.json b/samples/inputs/combo/templates/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
diff --git a/samples/inputs/combo/templates/src/data.ts b/samples/inputs/combo/templates/src/data.ts
@@ -0,0 +1,33 @@
+export interface City {
+    id: string;
+    name: string;
+    country: string;
+  }
+
+  export const Cities: City[] = [
+    { name: "London", id: "UK01", country: "UK" },
+    { name: "Manchester", id: "UK02", country: "UK" },
+    { name: "Birmingham", id: "UK03", country: "UK" },
+    { name: "Glasgow", id: "UK04", country: "UK" },
+    { name: "Liverpool", id: "UK05", country: "UK" },
+    { name: "New York", id: "US01", country: "USA" },
+    { name: "Miami", id: "US02", country: "USA" },
+    { name: "Philadelphia", id: "US03", country: "USA" },
+    { name: "Chicago", id: "US04", country: "USA" },
+    { name: "Springfield", id: "US05", country: "USA" },
+    { name: "Los Angeles", id: "US06", country: "USA" },
+    { name: "Houston", id: "US07", country: "USA" },
+    { name: "Phoenix", id: "US08", country: "USA" },
+    { name: "San Diego", id: "US09", country: "USA" },
+    { name: "Dallas", id: "US010", country: "USA" },
+    { name: "Sofia", id: "BG01", country: "Bulgaria" },
+    { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
+    { name: "Varna", id: "BG03", country: "Bulgaria" },
+    { name: "Burgas", id: "BG04", country: "Bulgaria" },
+    { name: "Rome", id: "IT01", country: "Italy" },
+    { name: "Milan", id: "IT02", country: "Italy" },
+    { name: "Naples", id: "IT03", country: "Italy" },
+    { name: "Turin", id: "IT04", country: "Italy" },
+    { name: "Palermo", id: "IT05", country: "Italy" },
+    { name: "Florence", id: "IT06", country: "Italy" },
+  ];
diff --git a/samples/inputs/combo/templates/src/index.css b/samples/inputs/combo/templates/src/index.css
@@ -0,0 +1,6 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.combo-padding {
+  padding: 12px 16px;
+}
diff --git a/samples/inputs/combo/templates/src/index.tsx b/samples/inputs/combo/templates/src/index.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import {
+  IgrCombo,
+  ComboTemplateProps,
+  IgrIcon,
+  registerIconFromText
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import { Cities, City } from "./data";
+import "./index.css";
+
+export default function ComboTemplates() {
+
+  const downIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>';
+  const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-280v-80h560v80H120Zm80-160v-80h560v80H200Zm80-160v-80h560v80H280Z"/></svg>';
+
+  useEffect(() => {
+    registerIconFromText("down", downIcon, "material");
+    registerIconFromText("clear", clearIcon, "material");
+  }, []);
+
+  const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
+    return <span>Country of {args.item.country}</span>;
+  };
+
+  const renderItemTemplate = (args: ComboTemplateProps<City>) => {
+    const item = args.item;
+    return (
+      <span>
+        <b>{item.name}</b> [{item.id}] - {item.country}
+      </span>
+    );
+  };
+
+  return (
+    <div className="sample">
+      <IgrCombo
+        valueKey="id"
+        displayKey="name"
+        groupKey="country"
+        data={Cities}
+        itemTemplate={renderItemTemplate}
+        groupHeaderTemplate={renderGroupHeaderTemplate}
+      >
+        <header slot="header" className="combo-padding">
+          <strong>Select a City</strong>
+          <div>List of countries and their most popular cities</div>
+        </header>
+        <footer slot="footer" className="combo-padding">
+          <em>
+            Tip: Start typing to find your city if you have troubles finding it.
+          </em>
+        </footer>
+        <span slot="toggle-icon">
+          <IgrIcon name="down" collection="material"></IgrIcon>
+        </span>
+        <span slot="clear-icon">
+          <IgrIcon name="clear" collection="material"></IgrIcon>
+        </span>
+      </IgrCombo>
+    </div>
+  );
+}
+
+// rendering above function to the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<ComboTemplates />);
diff --git a/samples/inputs/combo/templates/src/react-app-env.d.ts b/samples/inputs/combo/templates/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/inputs/combo/templates/tsconfig.json b/samples/inputs/combo/templates/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}