npm package: @steven-sanchez-altera/infragistics-grid-element
Description: Angular 20 Elements POC wrapping Infragistics Web Components Grid as a shareable custom element.
Author: Steven Sanchez
Latest version: 2.1.0

# Infragistics Grid Element

A reusable Angular Elements custom component that wraps the Infragistics Web Components Data Grid.

## 🚀 Demo

[Live Demo](https://infragistics-poc-ichz.vercel.app)

## 📦 Installation

```bash
npm install @steven-sanchez-altera/infragistics-grid-element
```

**📦 Bundle Options:**
- **Lightweight**: 2.5 KB (requires external dependencies)
- **Full Bundle**: 2.95 MB (includes all dependencies)
- **Utilities Only**: 1.6 KB (just sample data and utilities)

## 🎯 Usage

## 🎯 Usage

### **Option 1: Lightweight Bundle (Recommended - 2.5 KB)**

**Prerequisites:** Install the required dependencies in your project:
```bash
npm install @angular/core @angular/platform-browser @angular/elements
npm install igniteui-webcomponents igniteui-webcomponents-core igniteui-webcomponents-data-grids
```

**HTML Usage:**
```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css">
</head>
<body>
  <infragistics-grid-element id="myGrid"></infragistics-grid-element>
  
  <!-- Load the lightweight bundle (only 2.5 KB!) -->
  <script type="module" src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/custom/infragistics-grid-element.js"></script>
  
  <script>
    // Set data programmatically
    document.getElementById('myGrid').data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  </script>
</body>
</html>
```

**JavaScript/TypeScript:**
```javascript
// Import the lightweight component (only 2.5 KB!)
import '@steven-sanchez-altera/infragistics-grid-element/dist/custom/infragistics-grid-element.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

// Use in your app
const grid = document.createElement('infragistics-grid-element');
grid.data = myData;
document.body.appendChild(grid);
```

### **Option 2: Full Bundle (Easiest - 2.95 MB)**
```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css">
</head>
<body>
  <infragistics-grid-element id="myGrid"></infragistics-grid-element>
  
  <!-- Load the full bundle (2.95 MB - includes all dependencies) -->
  <script src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/browser/polyfills.js"></script>
  <script src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js"></script>
  
  <script>
    document.getElementById('myGrid').data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  </script>
</body>
</html>
```

### **Option 3: Utilities Only (Testing - 1.6 KB)**
```javascript
// Import just the utilities and sample data
import { defaultGridData, registerInfragisticsModules } from 
  '@steven-sanchez-altera/infragistics-grid-element/dist/infragistics-common.js';

// Use in tests or for configuration
const testData = defaultGridData;
registerInfragisticsModules();
```

### In React

```jsx
import { useEffect, useRef } from 'react';

// Import the custom element (this registers it globally)
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

function MyComponent() {
  const gridRef = useRef(null);
  
  useEffect(() => {
    if (gridRef.current) {
      gridRef.current.data = [
        {
          ProductID: 1,
          ProductName: "Chai",
          UnitPrice: 18.00,
          UnitsInStock: 39,
          OrderDate: new Date("2012-02-12"),
          Discontinued: false
        }
      ];
    }
  }, []);

  return (
    <div>
      <infragistics-grid-element ref={gridRef}></infragistics-grid-element>
    </div>
  );
}
```

### In Vue.js

```vue
<template>
  <infragistics-grid-element ref="gridRef"></infragistics-grid-element>
</template>

<script>
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

export default {
  name: 'MyComponent',
  mounted() {
    this.$refs.gridRef.data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  }
};
</script>
```

### In Angular

```typescript
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

// Import the custom element
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

@Component({
  selector: 'app-my-component',
  template: `
    <infragistics-grid-element #gridRef></infragistics-grid-element>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChild('gridRef') gridRef!: ElementRef;

  ngAfterViewInit() {
    this.gridRef.nativeElement.data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  }
}
```

## 🔧 API

### Properties

| Property | Type | Description | Default |
|----------|------|-------------|---------|
| `data` | `Array<any>` | Array of data objects to display in the grid | `[]` |

### Data Object Structure

Each data object should contain the following properties:

- `ProductID` (number): Unique product identifier
- `ProductName` (string): Name of the product
- `QuantityPerUnit` (string): Quantity description
- `UnitsInStock` (number): Available stock count
- `UnitPrice` (number): Price per unit
- `OrderDate` (Date): Order date
- `Discontinued` (boolean): Whether the product is discontinued

## 🎨 Theming

The component includes the Infragistics Material theme by default. You can customize the appearance by:

1. Using the included theme: `dist/themes/material.css`
2. Creating your own custom CSS targeting the grid elements
3. Using Infragistics theme variables

## 📋 Requirements

- Modern browser with Web Components support
- The following peer dependencies will be automatically installed:
  - `igniteui-webcomponents`
  - `igniteui-webcomponents-core`
  - `igniteui-webcomponents-data-grids`
  - `igniteui-webcomponents-grids`

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License.

## 🙏 Acknowledgments

- Built with [Angular Elements](https://angular.io/guide/elements)
- Uses [Infragistics Web Components](https://www.infragistics.com/products/ignite-ui-web-components)