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

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ColumnComponent } from '../../../../../ui-essentials/src/lib/components/layout/column';

@Component({
  selector: 'ui-column-demo',
  standalone: true,
  imports: [CommonModule, FormsModule, ColumnComponent],
  template: `
    <div class="demo-container">
      <h2>Column Layout Demo</h2>
      
      <!-- Column Count Variants -->
      <section class="demo-section">
        <h3>Column Counts</h3>
        <div class="demo-row">
          @for (count of columnCounts; track count) {
            <div class="demo-card">
              <h4>{{ count }} Column{{ count !== '1' ? 's' : '' }}</h4>
              <ui-column [count]="count" [gap]="'md'" class="demo-content">
                <p>{{ sampleText }}</p>
              </ui-column>
            </div>
          }
        </div>
      </section>
      
      <!-- Gap Variants -->
      <section class="demo-section">
        <h3>Gap Sizes (2 Columns)</h3>
        <div class="demo-row">
          @for (gap of gaps; track gap) {
            <div class="demo-card">
              <h4>Gap: {{ gap }}</h4>
              <ui-column [count]="'2'" [gap]="gap" class="demo-content">
                <p>{{ shortText }}</p>
              </ui-column>
            </div>
          }
        </div>
      </section>
      
      <!-- Rule Variants -->
      <section class="demo-section">
        <h3>Column Rules (3 Columns)</h3>
        <div class="demo-row">
          @for (rule of rules; track rule) {
            <div class="demo-card">
              <h4>Rule: {{ rule }}</h4>
              <ui-column [count]="'3'" [gap]="'lg'" [rule]="rule" [ruleWidth]="'2'" class="demo-content">
                <p>{{ mediumText }}</p>
              </ui-column>
            </div>
          }
        </div>
      </section>
      
      <!-- Fill Variants -->
      <section class="demo-section">
        <h3>Fill Types (3 Columns)</h3>
        <div class="demo-row">
          @for (fill of fills; track fill) {
            <div class="demo-card">
              <h4>Fill: {{ fill }}</h4>
              <ui-column [count]="'3'" [gap]="'md'" [fill]="fill" class="demo-content">
                <p>{{ variableText }}</p>
              </ui-column>
            </div>
          }
        </div>
      </section>
      
      <!-- Responsive Behavior -->
      <section class="demo-section">
        <h3>Responsive Layout</h3>
        <p class="demo-note">Resize your browser to see responsive column behavior</p>
        <div class="demo-card">
          <h4>Responsive 4-Column Layout</h4>
          <ui-column [count]="'4'" [gap]="'md'" [responsive]="true" [rule]="'solid'" class="demo-content">
            <h5>Section 1</h5>
            <p>{{ sampleText }}</p>
            <h5>Section 2</h5>
            <p>{{ shortText }}</p>
            <h5>Section 3</h5>
            <p>{{ mediumText }}</p>
            <h5>Section 4</h5>
            <p>{{ variableText }}</p>
          </ui-column>
        </div>
      </section>
      
      <!-- Real-world Example -->
      <section class="demo-section">
        <h3>Article Layout Example</h3>
        <div class="demo-card">
          <ui-column [count]="'2'" [gap]="'xl'" [rule]="'solid'" [ruleWidth]="'1'" class="demo-content">
            <h4>The Future of Web Development</h4>
            <p>{{ longText }}</p>
            <p>{{ mediumText }}</p>
            <h5>Key Benefits</h5>
            <ul>
              <li>Improved readability through better text flow</li>
              <li>Enhanced visual hierarchy with column structures</li>
              <li>Responsive design that adapts to screen sizes</li>
              <li>Better content organization for long-form text</li>
            </ul>
            <p>{{ shortText }}</p>
          </ui-column>
        </div>
      </section>
      
      <!-- Interactive Controls -->
      <section class="demo-section">
        <h3>Interactive Example</h3>
        <div class="demo-controls">
          <label>
            Columns:
            <select [(ngModel)]="selectedCount" class="demo-select">
              @for (count of columnCounts; track count) {
                <option [value]="count">{{ count }}</option>
              }
            </select>
          </label>
          <label>
            Gap:
            <select [(ngModel)]="selectedGap" class="demo-select">
              @for (gap of gaps; track gap) {
                <option [value]="gap">{{ gap }}</option>
              }
            </select>
          </label>
          <label>
            Rule:
            <select [(ngModel)]="selectedRule" class="demo-select">
              @for (rule of rules; track rule) {
                <option [value]="rule">{{ rule }}</option>
              }
            </select>
          </label>
          <label>
            <input type="checkbox" [(ngModel)]="selectedResponsive">
            Responsive
          </label>
        </div>
        <div class="demo-card">
          <ui-column 
            [count]="selectedCount" 
            [gap]="selectedGap" 
            [rule]="selectedRule" 
            [ruleWidth]="'2'"
            [responsive]="selectedResponsive" 
            class="demo-content">
            <h4>Interactive Column Layout</h4>
            <p>{{ sampleText }}</p>
            <p>{{ mediumText }}</p>
            <p>{{ shortText }}</p>
          </ui-column>
        </div>
      </section>
    </div>
  `,
  styleUrl: './column-demo.component.scss'
})
export class ColumnDemoComponent {
  columnCounts = ['1', '2', '3', '4', '5', '6'] as const;
  gaps = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
  rules = ['none', 'solid', 'dashed', 'dotted'] as const;
  fills = ['auto', 'balance', 'balance-all'] as const;
  
  // Interactive controls
  selectedCount = '3' as const;
  selectedGap = 'md' as const;
  selectedRule = 'solid' as const;
  selectedResponsive = true;
  
  // Sample text content
  shortText = "This is a short paragraph to demonstrate column layout behavior with minimal text content.";
  
  mediumText = "This is a medium-length paragraph that provides a good example of how text flows within column layouts. It contains enough content to show wrapping and distribution across multiple columns while remaining readable.";
  
  sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
  
  longText = "Web development has evolved significantly over the past decade, with new frameworks, tools, and methodologies emerging to help developers create more efficient and maintainable applications. Modern web development practices emphasize component-based architecture, responsive design, and accessibility as core principles. The adoption of TypeScript has brought static typing to JavaScript, reducing runtime errors and improving developer productivity. CSS Grid and Flexbox have revolutionized layout design, making it easier to create complex, responsive layouts without relying on external frameworks.";
  
  variableText = "This text demonstrates variable length content. Some paragraphs are longer, others shorter. This variation helps test how well the column layout handles different content lengths and maintains visual balance across columns.";
}