ui-essentials/projects/demo-ui-essentials/src/app/demos/grid-container-demo/grid-container-demo.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { GridContainerComponent } from 'ui-essentials';

@Component({
  selector: 'ui-grid-container-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, GridContainerComponent],
  template: `
    <div class="demo-container">
      <h2>GridContainer Demo</h2>
      <p class="demo-description">
        Advanced CSS Grid wrapper with template areas support, responsive column/row definitions, and auto-placement algorithms.
      </p>
      
      <!-- Basic Grid Examples -->
      <section class="demo-section">
        <h3>Basic Grid Layouts</h3>
        
        <div class="demo-example">
          <h4>Auto-fit Grid (Responsive)</h4>
          <ui-grid-container columns="auto-fit" gap="md">
            @for (item of basicItems; track item.id) {
              <div class="demo-grid-item demo-grid-item--primary">{{ item.label }}</div>
            }
          </ui-grid-container>
        </div>
        
        <div class="demo-example">
          <h4>Fixed 3-Column Grid</h4>
          <ui-grid-container [columns]="3" gap="lg">
            @for (item of basicItems; track item.id) {
              <div class="demo-grid-item demo-grid-item--secondary">{{ item.label }}</div>
            }
          </ui-grid-container>
        </div>
      </section>
      
      <!-- Gap Variants -->
      <section class="demo-section">
        <h3>Gap Sizes</h3>
        <div class="demo-row">
          @for (gap of gaps; track gap) {
            <div class="demo-example">
              <h4>{{ gap }} Gap</h4>
              <ui-grid-container [columns]="3" [gap]="gap">
                @for (item of shortItems; track item.id) {
                  <div class="demo-grid-item demo-grid-item--success">{{ item.label }}</div>
                }
              </ui-grid-container>
            </div>
          }
        </div>
      </section>
      
      <!-- Column Variants -->
      <section class="demo-section">
        <h3>Column Layouts</h3>
        @for (colCount of columnCounts; track colCount) {
          <div class="demo-example">
            <h4>{{ colCount }} Columns</h4>
            <ui-grid-container [columns]="colCount" gap="md">
              @for (item of getItemsForColumns(colCount); track item.id) {
                <div class="demo-grid-item demo-grid-item--info">{{ item.label }}</div>
              }
            </ui-grid-container>
          </div>
        }
      </section>
      
      <!-- Auto Grid Types -->
      <section class="demo-section">
        <h3>Auto Grid Types</h3>
        
        <div class="demo-example">
          <h4>Auto-fit (Items stretch to fill space)</h4>
          <ui-grid-container columns="auto-fit" gap="md">
            @for (item of autoItems; track item.id) {
              <div class="demo-grid-item demo-grid-item--warning">{{ item.label }}</div>
            }
          </ui-grid-container>
        </div>
        
        <div class="demo-example">
          <h4>Auto-fill (Empty columns maintained)</h4>
          <ui-grid-container columns="auto-fill" gap="md">
            @for (item of autoItems; track item.id) {
              <div class="demo-grid-item demo-grid-item--danger">{{ item.label }}</div>
            }
          </ui-grid-container>
        </div>
      </section>
      
      <!-- Advanced Features -->
      <section class="demo-section">
        <h3>Advanced Features</h3>
        
        <div class="demo-example">
          <h4>Dense Grid (Auto-placement fills gaps)</h4>
          <ui-grid-container [columns]="4" gap="md" [dense]="true">
            <div class="demo-grid-item demo-grid-item--primary ui-grid-item--span-2">Wide Item (2 cols)</div>
            <div class="demo-grid-item demo-grid-item--secondary">Item 1</div>
            <div class="demo-grid-item demo-grid-item--success ui-grid-item--row-span-2">Tall Item</div>
            <div class="demo-grid-item demo-grid-item--info">Item 2</div>
            <div class="demo-grid-item demo-grid-item--warning">Item 3</div>
            <div class="demo-grid-item demo-grid-item--danger ui-grid-item--span-3">Extra Wide (3 cols)</div>
            <div class="demo-grid-item demo-grid-item--primary">Item 4</div>
            <div class="demo-grid-item demo-grid-item--secondary">Item 5</div>
          </ui-grid-container>
        </div>
        
        <div class="demo-example">
          <h4>Grid with Template Areas</h4>
          <ui-grid-container 
            customColumns="1fr 2fr 1fr"
            customRows="auto auto 1fr auto"
            templateAreas="'header header header' 'sidebar main aside' 'sidebar main aside' 'footer footer footer'"
            gap="md"
            padding="lg">
            <div class="demo-grid-item demo-grid-item--primary" style="grid-area: header;">Header</div>
            <div class="demo-grid-item demo-grid-item--secondary" style="grid-area: sidebar;">Sidebar</div>
            <div class="demo-grid-item demo-grid-item--info" style="grid-area: main;">Main Content</div>
            <div class="demo-grid-item demo-grid-item--success" style="grid-area: aside;">Aside</div>
            <div class="demo-grid-item demo-grid-item--warning" style="grid-area: footer;">Footer</div>
          </ui-grid-container>
        </div>
      </section>
      
      <!-- Alignment Options -->
      <section class="demo-section">
        <h3>Alignment Options</h3>
        
        <div class="demo-example">
          <h4>Justify Content: Center</h4>
          <ui-grid-container [columns]="2" gap="md" justifyContent="center" style="height: 200px;">
            <div class="demo-grid-item demo-grid-item--primary">Item 1</div>
            <div class="demo-grid-item demo-grid-item--secondary">Item 2</div>
          </ui-grid-container>
        </div>
        
        <div class="demo-example">
          <h4>Align Items: Center</h4>
          <ui-grid-container [columns]="3" gap="md" alignItems="center" style="height: 150px;">
            <div class="demo-grid-item demo-grid-item--success">Centered</div>
            <div class="demo-grid-item demo-grid-item--info">Items</div>
            <div class="demo-grid-item demo-grid-item--warning">Vertically</div>
          </ui-grid-container>
        </div>
      </section>
      
      <!-- Row Modes -->
      <section class="demo-section">
        <h3>Row Modes</h3>
        @for (rowMode of rowModes; track rowMode) {
          <div class="demo-example">
            <h4>{{ rowMode }} Rows</h4>
            <ui-grid-container [columns]="3" gap="md" [rowMode]="rowMode" style="height: 200px;">
              <div class="demo-grid-item demo-grid-item--primary">
                @if (rowMode === 'min-content') {
                  Short
                } @else if (rowMode === 'max-content') {
                  This is longer content to demonstrate max-content behavior
                } @else {
                  Content for {{ rowMode }}
                }
              </div>
              <div class="demo-grid-item demo-grid-item--secondary">Item 2</div>
              <div class="demo-grid-item demo-grid-item--success">Item 3</div>
            </ui-grid-container>
          </div>
        }
      </section>
      
      <!-- Interactive Example -->
      <section class="demo-section">
        <h3>Interactive Grid Builder</h3>
        
        <div class="demo-controls">
          <div class="demo-control-group">
            <label>Columns:</label>
            <select [(ngModel)]="interactiveConfig.columns">
              @for (col of allColumns; track col) {
                <option [value]="col">{{ col }}</option>
              }
            </select>
          </div>
          
          <div class="demo-control-group">
            <label>Gap:</label>
            <select [(ngModel)]="interactiveConfig.gap">
              @for (gap of gaps; track gap) {
                <option [value]="gap">{{ gap }}</option>
              }
            </select>
          </div>
          
          <div class="demo-control-group">
            <label>Dense:</label>
            <input type="checkbox" [(ngModel)]="interactiveConfig.dense">
          </div>
        </div>
        
        <ui-grid-container 
          [columns]="interactiveConfig.columns"
          [gap]="interactiveConfig.gap"
          [dense]="interactiveConfig.dense"
          style="border: 2px dashed #ccc; min-height: 200px;">
          @for (item of interactiveItems; track item.id) {
            <div 
              class="demo-grid-item"
              [class]="'demo-grid-item--' + item.variant"
              [class.ui-grid-item--span-2]="item.span === 2"
              [class.ui-grid-item--span-3]="item.span === 3"
              [class.ui-grid-item--row-span-2]="item.rowSpan === 2">
              {{ item.label }}
              @if (item.span > 1) {
                <small>({{ item.span }} cols)</small>
              }
              @if (item.rowSpan > 1) {
                <small>({{ item.rowSpan }} rows)</small>
              }
            </div>
          }
        </ui-grid-container>
      </section>
    </div>
  `,
  styleUrl: './grid-container-demo.component.scss'
})
export class GridContainerDemoComponent {
  gaps = ['sm', 'md', 'lg'] as const;
  columnCounts = [1, 2, 3, 4, 5, 6] as const;
  allColumns = [1, 2, 3, 4, 5, 6, 'auto-fit', 'auto-fill'] as const;
  rowModes = ['auto', 'equal', 'min-content', 'max-content'] as const;
  
  basicItems = [
    { id: 1, label: 'Item 1' },
    { id: 2, label: 'Item 2' },
    { id: 3, label: 'Item 3' },
    { id: 4, label: 'Item 4' },
    { id: 5, label: 'Item 5' },
    { id: 6, label: 'Item 6' },
    { id: 7, label: 'Item 7' },
    { id: 8, label: 'Item 8' }
  ];
  
  shortItems = [
    { id: 1, label: 'A' },
    { id: 2, label: 'B' },
    { id: 3, label: 'C' }
  ];
  
  autoItems = [
    { id: 1, label: 'Auto Item 1' },
    { id: 2, label: 'Auto Item 2' },
    { id: 3, label: 'Auto Item 3' },
    { id: 4, label: 'Auto Item 4' }
  ];
  
  interactiveConfig = {
    columns: 'auto-fit' as const,
    gap: 'md' as const,
    dense: false
  };
  
  interactiveItems = [
    { id: 1, label: 'Regular', variant: 'primary', span: 1, rowSpan: 1 },
    { id: 2, label: 'Wide', variant: 'secondary', span: 2, rowSpan: 1 },
    { id: 3, label: 'Tall', variant: 'success', span: 1, rowSpan: 2 },
    { id: 4, label: 'Extra Wide', variant: 'info', span: 3, rowSpan: 1 },
    { id: 5, label: 'Normal', variant: 'warning', span: 1, rowSpan: 1 },
    { id: 6, label: 'Regular', variant: 'danger', span: 1, rowSpan: 1 },
    { id: 7, label: 'Wide', variant: 'primary', span: 2, rowSpan: 1 },
    { id: 8, label: 'Normal', variant: 'secondary', span: 1, rowSpan: 1 }
  ];
  
  getItemsForColumns(colCount: number) {
    const count = Math.min(colCount * 2, this.basicItems.length);
    return this.basicItems.slice(0, count);
  }
}