Angular Expansion Panel — Collapsed Panels Block Main Thread

// io.thecodeforge — Angular Material Accordion
// Pattern: single activeSectionId string as source of truth.
// Works on Angular 14-18. For Angular 17+ signal variant, see comment at bottom.

import {
  Component,
  OnInit,
  ChangeDetectionStrategy
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';

export interface CheckoutSection {
  id: string;
  label: string;
  isComplete: boolean;
  isDisabled: boolean;
}

@Component({
  selector: 'tcf-checkout-accordion',
  standalone: true,
  imports: [CommonModule, MatExpansionModule, MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- multi="false" is the default but declare it explicitly:
         future developers need to know this is intentional, not an oversight. -->
    <mat-accordion multi="false">

      <!--
        CRITICAL: mat-expansion-panel elements must be DIRECT content children
        of mat-accordion. No *ngIf, no wrapping div, no ng-container between them.
        Any structural directive here breaks ContentChildren query and the
        single-open guarantee silently fails.

        Safe pattern: *ngFor directly on mat-expansion-panel is fine.
        Unsafe: <ng-container *ngIf><mat-expansion-panel> — do NOT do this.
      -->
      <mat-expansion-panel
        *ngFor="let section of checkoutSections; trackBy: trackBySectionId"
        [expanded]="activeSectionId === section.id"
        [disabled]="section.isDisabled"
        (opened)="onSectionOpened(section.id)"
        (closed)="onSectionClosed(section.id)"
      >
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              *ngIf="section.isComplete"
              color="primary"
              aria-hidden="true"
            >check_circle</mat-icon>
            {{ section.label }}
          </mat-panel-title>
          <mat-panel-description *ngIf="section.isDisabled">
            Complete previous steps first
          </mat-panel-description>
        </mat-expansion-panel-header>

        <!--
          *ngIf here (not matExpansionPanelContent) because checkout sections
          contain forms that must reset when closed.
          matExpansionPanelContent would persist form state across closes.
        -->
        <ng-container *ngIf="activeSectionId === section.id">
          <div class="section-placeholder">{{ section.id }} content loads here</div>
        </ng-container>

      </mat-expansion-panel>
    </mat-accordion>
  `
})
export class CheckoutSectionsAccordionComponent implements OnInit {

  checkoutSections: CheckoutSection[] = [
    { id: 'contact',  label: 'Contact Info',    isComplete: false, isDisabled: false },
    { id: 'shipping', label: 'Shipping Address', isComplete: false, isDisabled: true  },
    { id: 'payment',  label: 'Payment Method',  isComplete: false, isDisabled: true  },
    { id: 'review',   label: 'Order Review',    isComplete: false, isDisabled: true  }
  ];

  // Single string — one source of truth, serialisable to URL, testable.
  // Never use boolean[] mapped by array index.
  activeSectionId: string = 'contact';

  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router
  ) {}

  ngOnInit(): void {
    // Restore active panel from URL fragment on page load or back-navigation.
    // Enables deep-linking: /checkout#shipping opens the Shipping panel directly.
    const fragment = this.route.snapshot.fragment;
    if (fragment && this.checkoutSections.some(s => s.id === fragment)) {
      this.activeSectionId = fragment;
    }
  }

  onSectionOpened(sectionId: string): void {
    this.activeSectionId = sectionId;
    // replaceUrl:true — updates the URL without adding a browser history entry.
    // Without replaceUrl, every panel open adds to history and back-button
    // navigates through panel states instead of away from the page.
    this.router.navigate([], {
      fragment: sectionId,
      replaceUrl: true
    });
  }

  onSectionClosed(sectionId: string): void {
    // Only clear activeSectionId if the closing panel was actually the active one.
    // mat-accordion fires (closed) on the previously-open panel when a new one opens —
    // at that moment activeSectionId already holds the new panel's ID.
    if (this.activeSectionId === sectionId) {
      this.activeSectionId = '';
    }
  }

  // TrackBy prevents Angular from destroying and rebuilding all panel DOM nodes
  // when the checkoutSections array reference changes (e.g., after an API update).
  trackBySectionId(_index: number, section: CheckoutSection): string {
    return section.id;
  }

  // — Angular 17+ Signal Variant (alternative to the string field above) —
  // activeSectionId = signal<string>('contact');
  //
  // In the template: [expanded]="activeSectionId() === section.id"
  // In handlers:     this.activeSectionId.set(sectionId);
  //
  // Benefits: integrates with OnPush automatically, no markForCheck() needed,
  // and the signal dependency is tracked per-template-expression rather than
  // per-component. Correct choice for Angular 17+ standalone components.
}

// io.thecodeforge — Lazy Panel Content with Loaded Guard
// Demonstrates matExpansionPanelContent for data panels
// and the loaded guard pattern that prevents duplicate HTTP calls.

import {
  Component,
  Input,
  ChangeDetectionStrategy,
  ChangeDetectorRef
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatListModule } from '@angular/material/list';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { Observable, of, EMPTY } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

export interface TransactionSummary {
  id: string;
  amount: number;
  currency: string;
  timestamp: string;
}

// Simulated service call — replace with your injected HttpClient service.
function fetchUserTransactions(userId: string): Observable<TransactionSummary[]> {
  console.log(
    `[HTTP] Fetching transactions for user ${userId}`,
    '— this line should appear ONCE regardless of how many times the panel opens'
  );
  return of([
    { id: 'txn_001', amount: 149.99, currency: 'USD', timestamp: '2026-03-15T10:22:00Z' },
    { id: 'txn_002', amount:  49.00, currency: 'USD', timestamp: '2026-03-14T08:01:00Z' },
    { id: 'txn_003', amount: 299.00, currency: 'USD', timestamp: '2026-03-10T14:55:00Z' },
  ]);
}

@Component({
  selector: 'tcf-user-profile-sections',
  standalone: true,
  imports: [
    CommonModule,
    MatExpansionModule,
    MatListModule,
    MatProgressSpinnerModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <mat-accordion multi="true">

      <!-- Static content panel — no lazy loading needed, renders immediately -->
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>Account Details</mat-panel-title>
        </mat-expansion-panel-header>
        <p>Email: {{ userEmail }}</p>
        <p>Member since: 2022</p>
      </mat-expansion-panel>

      <!--
        Data panel — lazy loads on first open, persists after close.
        (opened) fires every time the panel opens.
        The transactionsLoaded guard prevents re-fetching on subsequent opens.
      -->
      <mat-expansion-panel (opened)="onTransactionPanelOpened()">
        <mat-expansion-panel-header>
          <mat-panel-title>Transaction History</mat-panel-title>
          <mat-panel-description *ngIf="isLoadingTransactions">
            <mat-spinner diameter="16"></mat-spinner>
            &nbsp;Loading...
          </mat-panel-description>
          <mat-panel-description *ngIf="transactionError">
            Failed to load — click to retry
          </mat-panel-description>
        </mat-expansion-panel-header>

        <!--
          matExpansionPanelContent: content is NOT in the DOM until first open.
          After first open, content persists — the component survives close/reopen.
          Correct for: data tables, charts, read-only displays.
          Wrong for: forms that should reset on close — use *ngIf instead.
        -->
        <ng-template matExpansionPanelContent>

          <div *ngIf="isLoadingTransactions" class="loading-state">
            <mat-spinner diameter="32"></mat-spinner>
          </div>

          <button
            *ngIf="transactionError && !isLoadingTransactions"
            mat-stroked-button
            (click)="retryTransactionLoad()"
          >
            Retry
          </button>

          <mat-list *ngIf="!isLoadingTransactions && !transactionError">
            <mat-list-item
              *ngFor="let txn of transactions; trackBy: trackByTxnId"
            >
              <span matListItemTitle>{{ txn.id }}</span>
              <span matListItemLine>
                {{ txn.amount | currency:txn.currency }}
                &mdash;
                {{ txn.timestamp | date:'mediumDate' }}
              </span>
            </mat-list-item>
          </mat-list>

          <p *ngIf="!isLoadingTransactions && !transactionError && transactions.length === 0">
            No transactions found.
          </p>

        </ng-template>
      </mat-expansion-panel>

    </mat-accordion>
  `
})
export class UserProfileSectionsComponent {
  @Input() userId!: string;
  @Input() userEmail!: string;

  transactions: TransactionSummary[] = [];
  isLoadingTransactions = false;
  transactionError = false;

  // Guard: ensures the HTTP call fires exactly once per component lifetime.
  // matExpansionPanelContent keeps the DOM alive — without this guard,
  // (opened) would re-fetch on every panel open.
  private transactionsLoaded = false;

  constructor(private readonly cdr: ChangeDetectorRef) {}

  onTransactionPanelOpened(): void {
    // Guard check first — this is the pattern that prevents duplicate fetches.
    if (this.transactionsLoaded) {
      return;
    }
    this.loadTransactions();
  }

  retryTransactionLoad(): void {
    // Explicit retry resets the guard and re-fetches.
    // Only called by the user clicking Retry after an error.
    this.transactionsLoaded = false;
    this.transactionError = false;
    this.loadTransactions();
  }

  private loadTransactions(): void {
    this.isLoadingTransactions = true;
    this.transactionError = false;

    fetchUserTransactions(this.userId)
      .pipe(
        catchError(err => {
          console.error('[TransactionPanel] Failed to load transactions:', err);
          this.transactionError = true;
          return EMPTY;
        }),
        finalize(() => {
          this.isLoadingTransactions = false;
          this.transactionsLoaded = true;
          // markForCheck() — not detectChanges() — schedules re-render
          // at the next CD cycle. Never call detectChanges() from async
          // callbacks in OnPush components.
          this.cdr.markForCheck();
        })
      )
      .subscribe(txns => {
        this.transactions = txns;
      });
  }

  trackByTxnId(_index: number, txn: TransactionSummary): string {
    return txn.id;
  }
}

// io.thecodeforge — Settings Form with Validation-Driven Accordion
// Auto-expands the first section containing invalid controls on submit.
// No @ViewChild, no .open(), no subscription to manage.

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
  ReactiveFormsModule
} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// Const assertion gives us a typed union for free.
export const SETTINGS_SECTIONS = [
  'profile',
  'notifications',
  'security'
] as const;

export type SettingsSectionId = typeof SETTINGS_SECTIONS[number];

@Component({
  selector: 'tcf-settings-form-accordion',
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <form [formGroup]="settingsForm" (ngSubmit)="onSubmit()">
      <mat-accordion multi="false">

        <!--
          Profile section.
          [expanded] driven by activeSectionId — no ViewChild, no .open().
          isSectionInvalid() reads the form state to show the error indicator
          in the header without needing to touch the panel DOM.
        -->
        <mat-expansion-panel
          [expanded]="activeSectionId === 'profile'"
          (opened)="activeSectionId = 'profile'"
        >
          <mat-expansion-panel-header>
            <mat-panel-title>Profile</mat-panel-title>
            <mat-panel-description
              *ngIf="isSectionInvalid('profile')"
              class="error-description"
              aria-live="polite"
            >
              Fix errors before saving
            </mat-panel-description>
          </mat-expansion-panel-header>

          <!--
            matExpansionPanelContent here is intentional — this profile section
            shows display data alongside the input, and the form field
            should persist state between opens (user shouldn't lose typed input
            just because they open another panel briefly).
            The Security section uses the same pattern for consistency.
          -->
          <ng-template matExpansionPanelContent>
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Display Name</mat-label>
              <input matInput formControlName="displayName" autocomplete="name" />
              <mat-error *ngIf="settingsForm.get('displayName')?.hasError('required')">
                Display name is required
              </mat-error>
              <mat-error *ngIf="settingsForm.get('displayName')?.hasError('minlength')">
                Minimum 2 characters required
              </mat-error>
            </mat-form-field>
          </ng-template>
        </mat-expansion-panel>

        <!-- Notifications section -->
        <mat-expansion-panel
          [expanded]="activeSectionId === 'notifications'"
          (opened)="activeSectionId = 'notifications'"
        >
          <mat-expansion-panel-header>
            <mat-panel-title>Notifications</mat-panel-title>
            <mat-panel-description
              *ngIf="isSectionInvalid('notifications')"
              class="error-description"
              aria-live="polite"
            >
              Fix errors before saving
            </mat-panel-description>
          </mat-expansion-panel-header>

          <ng-template matExpansionPanelContent>
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Notification Email</mat-label>
              <input matInput formControlName="notificationEmail" type="email" autocomplete="email" />
              <mat-error *ngIf="settingsForm.get('notificationEmail')?.hasError('email')">
                Enter a valid email address
              </mat-error>
            </mat-form-field>
          </ng-template>
        </mat-expansion-panel>

        <!-- Security section -->
        <mat-expansion-panel
          [expanded]="activeSectionId === 'security'"
          (opened)="activeSectionId = 'security'"
        >
          <mat-expansion-panel-header>
            <mat-panel-title>Security</mat-panel-title>
            <mat-panel-description
              *ngIf="isSectionInvalid('security')"
              class="error-description"
              aria-live="polite"
            >
              Fix errors before saving
            </mat-panel-description>
          </mat-expansion-panel-header>

          <ng-template matExpansionPanelContent>
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Current Password</mat-label>
              <input matInput type="password" formControlName="currentPassword" autocomplete="current-password" />
              <mat-error *ngIf="settingsForm.get('currentPassword')?.hasError('required')">
                Current password is required to save changes
              </mat-error>
            </mat-form-field>
          </ng-template>
        </mat-expansion-panel>

      </mat-accordion>

      <div class="form-actions">
        <button mat-raised-button color="primary" type="submit">
          Save Settings
        </button>
      </div>
    </form>
  `
})
export class SettingsFormAccordionComponent implements OnInit, OnDestroy {

  settingsForm!: FormGroup;
  activeSectionId: SettingsSectionId = 'profile';

  private readonly destroy$ = new Subject<void>();

  // Maps each form control name to the section panel it lives in.
  // onSubmit() uses this to find the first section containing an invalid control.
  // Add new controls here when extending the form — the validation-jump logic
  // works automatically without touching onSubmit().
  private readonly controlSectionMap: Record<string, SettingsSectionId> = {
    displayName:       'profile',
    notificationEmail: 'notifications',
    currentPassword:   'security'
  };

  constructor(
    private readonly fb: FormBuilder,
    private readonly cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.settingsForm = this.fb.group({
      displayName:       ['', [Validators.required, Validators.minLength(2)]],
      notificationEmail: ['', [Validators.email]],
      currentPassword:   ['', [Validators.required]]
    });
  }

  // Returns true if any control in the given section is invalid AND touched.
  // Touched check prevents showing errors in sections the user hasn't visited yet.
  // After markAllAsTouched() on submit, all controls become touched.
  isSectionInvalid(sectionId: SettingsSectionId): boolean {
    return Object.entries(this.controlSectionMap)
      .filter(([, section]) => section === sectionId)
      .some(([controlName]) => {
        const control = this.settingsForm.get(controlName);
        return control ? control.invalid && control.touched : false;
      });
  }

  onSubmit(): void {
    // markAllAsTouched() makes all validation errors visible simultaneously.
    // Without this, only controls the user has interacted with show errors.
    this.settingsForm.markAllAsTouched();

    if (this.settingsForm.invalid) {
      // Find the first section (in SETTINGS_SECTIONS order) that has an error.
      // SETTINGS_SECTIONS order defines the visual priority — profile errors
      // surface before notification errors, which surface before security errors.
      const firstInvalidSection = SETTINGS_SECTIONS.find(section =>
        this.isSectionInvalid(section)
      );

      if (firstInvalidSection) {
        // One assignment. No ViewChild. No .open(). No subscription.
        // The template's [expanded] binding opens the correct panel immediately.
        this.activeSectionId = firstInvalidSection;
        // markForCheck() — not detectChanges() — schedules the re-render
        // at the next CD cycle. Required in OnPush when state changes
        // outside Angular's zone or from a synchronous event handler.
        this.cdr.markForCheck();
      }
      return;
    }

    // Form is valid — proceed with save.
    console.log('Saving settings:', this.settingsForm.value);
  }

  ngOnDestroy(): void {
    // destroy$ is here as the standard cleanup subject pattern.
    // In this specific component there are no subscriptions to clean up
    // because we drive everything through [expanded] bindings.
    // If you add takeUntil(this.destroy$) pipes later, this is already here.
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// io.thecodeforge — High-Count Accordion Without Material
// Use this pattern when:
//   - 40+ panels on a single page (Material animation players are measurable overhead)
//   - SSR-first pages where SEO requires server-rendered content
//   - Bundle-sensitive micro-frontends that can't import MatExpansionModule
//
// What you get for free with mat-expansion-panel that you must add manually here:
//   - ARIA: aria-expanded, aria-controls, role=region (added below)
//   - Keyboard: Enter and Space on trigger (added below via keydown bindings)
//   - Animation: CSS max-height transition replaces Material's JS animation player

import {
  Component,
  Input,
  TrackByFunction,
  ChangeDetectionStrategy
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCheckboxModule } from '@angular/material/checkbox';

export interface ComplianceClause {
  id: string;
  title: string;
  content: string;
  requiresAcknowledgement: boolean;
}

@Component({
  selector: 'tcf-compliance-document-viewer',
  standalone: true,
  imports: [CommonModule, MatCheckboxModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  styles: [`
    .clause-panel {
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    /*
      Button reset + full-width layout.
      Using a <button> (not a div) for the trigger gives us keyboard focus,
      Enter/Space activation, and correct button role for free at the HTML level.
    */
    .clause-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      cursor: pointer;
      background: #fafafa;
      border: none;
      width: 100%;
      text-align: left;
      font-size: 0.875rem;
      font-weight: 500;
      transition: background 150ms ease;
    }

    .clause-header:hover,
    .clause-header:focus-visible {
      background: #f0f0f0;
      outline: 2px solid #1976d2;
      outline-offset: -2px;
    }

    /*
      max-height transition: GPU-composited on most browsers.
      Set max-height high enough for your tallest panel.
      Too low = content clipped. Too high = sluggish close animation.
      For variable-height panels, consider max-height:none on .expanded
      with a fixed height on the non-expanded state.
    */
    .clause-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 220ms ease-out, padding 220ms ease-out;
      padding: 0 16px;
    }

    .clause-body.expanded {
      max-height: 1000px;
      padding: 16px;
    }

    .clause-chevron {
      display: inline-block;
      transition: transform 220ms ease;
      font-size: 12px;
      color: #666;
    }

    .clause-chevron.expanded {
      transform: rotate(180deg);
    }
  `],
  template: `
    <div class="compliance-document" role="list">
      <div
        *ngFor="let clause of clauses; trackBy: trackByClauseId"
        class="clause-panel"
        role="listitem"
      >

        <!--
          Use <button> — not <div role="button"> — for the trigger.
          Native button gives keyboard focus, Enter/Space, and button role at zero cost.
          aria-expanded is the ARIA attribute screen readers use to announce state.
          aria-controls links the button to the region it controls.
        -->
        <button
          class="clause-header"
          [id]="'clause-header-' + clause.id"
          [attr.aria-expanded]="openClauseIds.has(clause.id)"
          [attr.aria-controls]="'clause-body-' + clause.id"
          (click)="toggleClause(clause.id)"
        >
          <span>{{ clause.title }}</span>
          <span
            class="clause-chevron"
            [class.expanded]="openClauseIds.has(clause.id)"
            aria-hidden="true"
          >▼</span>
        </button>

        <!--
          role="region" + aria-labelledby links this region to its header button.
          Screen readers announce "[clause title] region" when the user navigates into it.
          This replicates the ARIA structure mat-expansion-panel provides automatically.
        -->
        <div
          [id]="'clause-body-' + clause.id"
          class="clause-body"
          [class.expanded]="openClauseIds.has(clause.id)"
          role="region"
          [attr.aria-labelledby]="'clause-header-' + clause.id"
        >
          <p>{{ clause.content }}</p>

          <mat-checkbox
            *ngIf="clause.requiresAcknowledgement"
            (change)="onAcknowledgement(clause.id, $event.checked)"
          >
            I have read and understood this clause
          </mat-checkbox>
        </div>

      </div>
    </div>
  `
})
export class ComplianceDocumentViewerComponent {
  @Input() clauses: ComplianceClause[] = [];

  // Set<string> gives O(1) lookup for [class.expanded] and [aria-expanded] bindings.
  // Multi-open by default — no single-open enforcement because compliance
  // documents often require users to read multiple clauses simultaneously.
  openClauseIds = new Set<string>();

  trackByClauseId: TrackByFunction<ComplianceClause> = (_, clause) => clause.id;

  toggleClause(clauseId: string): void {
    if (this.openClauseIds.has(clauseId)) {
      this.openClauseIds.delete(clauseId);
    } else {
      this.openClauseIds.add(clauseId);
    }
    // Re-assign the Set reference to trigger OnPush change detection.
    // OnPush checks reference equality for objects — mutating a Set in place
    // does not trigger a re-render. New reference does.
    this.openClauseIds = new Set(this.openClauseIds);
  }

  onAcknowledgement(clauseId: string, acknowledged: boolean): void {
    console.log(`Clause ${clauseId} acknowledged: ${acknowledged}`);
    // In production: emit an output event or dispatch to a store.
  }
}