feat(combo): add Combo Remote Binding example with necessary files and configurations

samples/inputs/combo/remote-binding/README.md

@@ -0,0 +1,15 @@
+This folder contains a React application with the Combo Remote Binding example.
+
+- [Run in the samples browser](https://www.infragistics.com/react-demos/inputs/combo/remote-binding)
+- [Source](./src/index.tsx)
+
+## Run locally
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+cd igniteui-react-examples/samples/inputs/combo/remote-binding
+npm install
+npm start
+```
+
+Then open http://localhost:4200/ in your browser.

samples/inputs/combo/remote-binding/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Combo Remote Binding</title>
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" />
+    <link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/inputs/combo/remote-binding/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-combo-remote-binding",
+  "description": "This project provides example of Combo Remote Binding using Infragistics React components",
+  "author": "Infragistics",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "igniteui-react": "19.9.0",
+    "igniteui-webcomponents": "~7.4.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.1"
+  }
+}

samples/inputs/combo/remote-binding/src/ProductsService.ts

@@ -0,0 +1,59 @@
+export interface Product {
+    ProductID: number;
+    ProductName: string;
+}
+
+export interface ProductsPage {
+    items: Product[];
+    /** How many products match the query on the server, across all pages. */
+    total: number;
+}
+
+export interface ProductsQuery {
+    search: string;
+    skip: number;
+    top: number;
+}
+
+const PRODUCTS_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Products';
+
+/** Builds an OData request for one page of products whose name contains `search`. */
+export function buildProductsUrl({ search, skip, top }: ProductsQuery): string {
+    const params = [
+        '$select=ProductID,ProductName',
+        '$orderby=ProductName',
+        '$count=true',
+        `$skip=${skip}`,
+        `$top=${top}`,
+    ];
+
+    if (search) {
+        // OData escapes a single quote inside a string literal by doubling it.
+        const term = search.toLowerCase().replace(/'/g, "''");
+        params.push(`$filter=contains(tolower(ProductName),'${encodeURIComponent(term)}')`);
+    }
+
+    return `${PRODUCTS_URL}?${params.join('&')}`;
+}
+
+export async function fetchProducts(url: string, signal: AbortSignal): Promise<ProductsPage> {
+    const response = await fetch(url, { signal });
+
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    }
+
+    const json = await response.json();
+    return { items: json.value, total: json['@odata.count'] };
+}
+
+/** Waits `ms`, or rejects as soon as `signal` aborts. */
+export function delay(ms: number, signal: AbortSignal): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const timer = setTimeout(resolve, ms);
+        signal.addEventListener('abort', () => {
+            clearTimeout(timer);
+            reject(signal.reason);
+        }, { once: true });
+    });
+}

samples/inputs/combo/remote-binding/src/index.css

@@ -0,0 +1,144 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.sample {
+    gap: 24px;
+    max-width: 760px;
+}
+
+/* Slotted into the combo's dropdown */
+
+/* A thin bar at the top of the dropdown, instead of Bootstrap's 1rem track */
+.combo-progress {
+    --ig-linear-bar-track-height: 4px;
+    --ig-linear-bar-track-border-radius: 0;
+}
+
+.combo-empty {
+    padding: 12px 16px;
+    color: var(--ig-gray-700);
+}
+
+.combo-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-height: 40px;
+    padding: 0 4px 0 16px;
+    border-top: 1px solid var(--ig-gray-300);
+}
+
+.combo-footer-text {
+    font-size: 0.8125rem;
+    color: var(--ig-gray-700);
+}
+
+/* Background operations log */
+
+.log {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--ig-gray-300);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.log-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px 16px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--ig-gray-300);
+    background: var(--ig-gray-50);
+}
+
+/* Two classes, to win over the theme's `.ig-typography h2` */
+.log .log-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: normal;
+}
+
+.log-options {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+}
+
+.log-entries {
+    height: 280px;
+    margin: 0;
+    padding: 4px 0;
+    overflow-y: auto;
+    list-style: none;
+    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+}
+
+.log-entry {
+    --kind-color: var(--ig-gray-700);
+
+    display: grid;
+    grid-template-columns: auto 5.5rem 1fr;
+    align-items: baseline;
+    gap: 12px;
+    padding: 2px 12px;
+}
+
+.log-entry--event {
+    --kind-color: var(--ig-secondary-700);
+}
+
+.log-entry--request {
+    --kind-color: var(--ig-primary-600);
+}
+
+.log-entry--response,
+.log-entry--data {
+    --kind-color: var(--ig-success-700);
+}
+
+.log-entry--abort {
+    --kind-color: var(--ig-warn-800);
+}
+
+.log-entry--error {
+    --kind-color: var(--ig-error-600);
+}
+
+.log-entry--error .log-message {
+    color: var(--ig-error-600);
+}
+
+.log-time {
+    color: var(--ig-gray-600);
+}
+
+.log-kind {
+    justify-self: start;
+    padding: 0 6px;
+    border-radius: 4px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--kind-color);
+    background: color-mix(in srgb, var(--kind-color) 12%, transparent);
+}
+
+.log-message {
+    min-width: 0;
+}
+
+.log-detail {
+    display: block;
+    color: var(--ig-gray-600);
+    word-break: break-all;
+}