npm package: @stardyn/angular-ui-repeater
Description: Angular UI Repeater Package - Flexible and customizable repeater component with sections, columns, and rows for Angular applications
Author: Stardyn Team
Latest version: 2.0.9

# @stardyn/angular-ui-repeater

Flexible and customizable repeater component with sections, columns, and rows for Angular applications. Provides a structured layout system for displaying dynamic content with configurable sections.

## Features

- **Flexible Layout System**: Three-section layout (left, center, right) with customizable columns and rows
- **Anchor Support**: Fixed left/right sections with scrollable center content
- **Standalone Components**: All components are standalone and can be used independently
- **Responsive Design**: Configurable gaps, widths, and heights for responsive layouts
- **TypeScript Support**: Full TypeScript support with type definitions
- **Performance Focused**: OnPush change detection strategy for optimal performance
- **Customizable Styling**: CSS custom properties and flexible styling options

## Installation

```bash
npm install @stardyn/angular-ui-repeater
```

## Quick Start

### 1. Import Components

```typescript
import { Component } from '@angular/core';
import { 
  XConUIRepeater, 
  XConUIRepeaterColumn, 
  XConUIRepeaterRow,
  XConUIRepeaterLeft,
  XConUIRepeaterCenter,
  XConUIRepeaterRight
} from '@stardyn/angular-ui-repeater';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [
    XConUIRepeater,
    XConUIRepeaterColumn,
    XConUIRepeaterRow,
    XConUIRepeaterLeft,
    XConUIRepeaterCenter,
    XConUIRepeaterRight
  ],
  template: `
    <xcon-ui-repeater>
      <xcon-ui-repeater-left>
        <xcon-ui-repeater-column title="Left Column">
          <xcon-ui-repeater-row>Left Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Left Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-left>
      
      <xcon-ui-repeater-center>
        <xcon-ui-repeater-column title="Center Column">
          <xcon-ui-repeater-row>Center Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Center Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-center>
      
      <xcon-ui-repeater-right>
        <xcon-ui-repeater-column title="Right Column">
          <xcon-ui-repeater-row>Right Content 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Right Content 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-right>
    </xcon-ui-repeater>
  `
})
export class ExampleComponent { }
```

### 2. Basic Layout with Anchors

```typescript
@Component({
  template: `
    <xcon-ui-repeater 
      [leftAnchor]="true" 
      [rightAnchor]="true"
      rowGap="12px"
      columnGap="16px">
      
      <xcon-ui-repeater-left>
        <xcon-ui-repeater-column 
          title="Fixed Left" 
          columnWidth="200px"
          [showHeader]="true">
          <xcon-ui-repeater-row>Navigation Item 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Navigation Item 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-left>
      
      <xcon-ui-repeater-center>
        <xcon-ui-repeater-column 
          *ngFor="let item of items" 
          [title]="item.title"
          columnWidth="300px">
          <xcon-ui-repeater-row 
            *ngFor="let row of item.rows"
            [backgroundColor]="row.color">
            {{ row.content }}
          </xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-center>
      
      <xcon-ui-repeater-right>
        <xcon-ui-repeater-column 
          title="Fixed Right" 
          columnWidth="150px">
          <xcon-ui-repeater-row>Action 1</xcon-ui-repeater-row>
          <xcon-ui-repeater-row>Action 2</xcon-ui-repeater-row>
        </xcon-ui-repeater-column>
      </xcon-ui-repeater-right>
    </xcon-ui-repeater>
  `
})
export class AdvancedExampleComponent {
  items = [
    {
      title: 'Column 1',
      rows: [
        { content: 'Row 1', color: '#f0f0f0' },
        { content: 'Row 2', color: '#e0e0e0' }
      ]
    },
    {
      title: 'Column 2', 
      rows: [
        { content: 'Row 1', color: '#f5f5f5' },
        { content: 'Row 2', color: '#eeeeee' }
      ]
    }
  ];
}
```

## API Reference

### XConUIRepeater

Main container component for the repeater layout.

#### Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `equalColumns` | `boolean` | `true` | Whether columns should have equal width |
| `rowGap` | `string` | `'8px'` | Gap between rows inside columns |
| `columnGap` | `string` | `'5px'` | Gap between columns and sections |
| `minHeight` | `string` | `'400px'` | Minimum height of the repeater |
| `leftAnchor` | `boolean` | `false` | Fix left section in place |
| `rightAnchor` | `boolean` | `false` | Fix right section in place |
| `backgroundColor` | `string` | `''` | Background color of the container |

### XConUIRepeaterColumn

Column component for organizing content vertically.

#### Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `title` | `string` | `''` | Column title |
| `subtitle` | `string` | `''` | Column subtitle |
| `showHeader` | `boolean` | `false` | Show/hide column header |
| `padding` | `string` | `'0'` | Column padding |
| `backgroundColor` | `string` | `''` | Column background color |
| `columnWidth` | `string` | `'200px'` | Column width |
| `flex` | `string` | `'1'` | CSS flex value |

### XConUIRepeaterRow

Row component for individual content items.

#### Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `padding` | `string` | `'4px'` | Row padding |
| `backgroundColor` | `string` | `''` | Row background color |
| `rowHeight` | `string` | `''` | Fixed row height |
| `alignItems` | `string` | `'flex-start'` | CSS align-items value |

### Section Components

- `XConUIRepeaterLeft`: Left section wrapper
- `XConUIRepeaterCenter`: Center section wrapper
- `XConUIRepeaterRight`: Right section wrapper

These components are simple wrappers that accept `ng-content` and provide proper positioning within the repeater layout.

## Layout Modes

### 1. Default Mode (No Anchors)
All sections scroll together horizontally.

```html
<xcon-ui-repeater>
  <!-- All sections move together -->
</xcon-ui-repeater>
```

### 2. Left Anchor Mode
Left section is fixed, center and right sections scroll together.

```html
<xcon-ui-repeater [leftAnchor]="true">
  <!-- Left fixed, center+right scroll -->
</xcon-ui-repeater>
```

### 3. Right Anchor Mode
Right section is fixed, left and center sections scroll together.

```html
<xcon-ui-repeater [rightAnchor]="true">
  <!-- Left+center scroll, right fixed -->
</xcon-ui-repeater>
```

### 4. Both Anchors Mode
Left and right sections are fixed, only center section scrolls.

```html
<xcon-ui-repeater [leftAnchor]="true" [rightAnchor]="true">
  <!-- Left+right fixed, center scrolls -->
</xcon-ui-repeater>
```

## Styling

### CSS Custom Properties

The component uses CSS custom properties that can be overridden:

```css
:root {
  --xcon-repeater-row-gap: 8px;
  --xcon-repeater-column-gap: 16px;
  --xcon-repeater-column-padding: 12px;
}
```

### Custom Styling

```css
/* Custom column styling */
xcon-ui-repeater-column {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Custom row styling */
xcon-ui-repeater-row {
  transition: background-color 0.2s ease;
}

xcon-ui-repeater-row:hover {
  background-color: #f5f5f5;
}
```

## Performance

- **OnPush Change Detection**: All components use OnPush strategy for optimal performance
- **Standalone Components**: Tree-shakable components reduce bundle size
- **CSS-based Layout**: Hardware-accelerated CSS for smooth scrolling
- **Minimal DOM**: Efficient DOM structure with minimal nesting

## Browser Support

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## TypeScript Support

Full TypeScript support with comprehensive type definitions:

```typescript
import type { 
  XConUIRepeater,
  XConUIRepeaterColumn,
  XConUIRepeaterRow 
} from '@stardyn/angular-ui-repeater';
```

## License

MIT License - see LICENSE file for details.

## Repository

https://github.com/stardyn/angular-ui-repeater