Layout Components

import { 
  NgbCollapseModule,
  NgbOffcanvasModule,
  NgbPaginationModule,
  NgbDropdownModule,
  NgbProgressbarModule,
  NgbScrollSpyModule
} from '@ng-bootstrap/ng-bootstrap';

@Directive({
  selector: '[ngbCollapse]',
  exportAs: 'ngbCollapse'
})
class NgbCollapse {
  /** Controls collapsed state */
  @Input() ngbCollapse: boolean;
  
  /** Enable/disable animations */
  @Input() animation: boolean;
  
  /** Event emitted when collapse state changes */
  @Output() ngbCollapseChange: EventEmitter<boolean>;
  
  /** Toggle collapsed state */
  toggle(): void;
}

@Injectable({ providedIn: 'root' })
class NgbOffcanvas {
  /** Open an offcanvas panel */
  open(content: any, options?: NgbOffcanvasOptions): NgbOffcanvasRef;
  
  /** Dismiss all open offcanvas panels */
  dismissAll(reason?: any): void;
  
  /** Check if there are any open offcanvas panels */
  hasOpenOffcanvas(): boolean;
}

class NgbOffcanvasRef {
  /** Instance of the component if offcanvas contains a component */
  componentInstance?: any;
  
  /** Promise that resolves when offcanvas is closed or dismissed */
  result: Promise<any>;
  
  /** Close the offcanvas with a result */
  close(result?: any): void;
  
  /** Dismiss the offcanvas with a reason */
  dismiss(reason?: any): void;
}

@Injectable()
class NgbActiveOffcanvas {
  /** Close the offcanvas with a result */
  close(result?: any): void;
  
  /** Dismiss the offcanvas with a reason */
  dismiss(reason?: any): void;
}

@Component({
  selector: 'ngb-pagination',
  exportAs: 'ngbPagination'
})
class NgbPagination {
  /** If true, pagination links will be disabled */
  @Input() disabled: boolean;
  
  /** If true, the "First" and "Last" page links are shown */
  @Input() boundaryLinks: boolean;
  
  /** If true, the "Next" and "Previous" page links are shown */
  @Input() directionLinks: boolean;
  
  /** If true, ellipsis symbols and first/last page numbers shown when maxSize > pages */
  @Input() ellipses: boolean;
  
  /** Whether to rotate pages when maxSize > number of pages */
  @Input() rotate: boolean;
  
  /** The number of items in your paginated collection (required) */
  @Input({ required: true }) collectionSize: number;
  
  /** The maximum number of pages to display */
  @Input() maxSize: number;
  
  /** The current page (starts with 1) */
  @Input() page: number;
  
  /** The number of items per page */
  @Input() pageSize: number;
  
  /** The pagination display size: 'sm', 'lg', or custom string */
  @Input() size: 'sm' | 'lg' | string | null;
  
  /** Event fired when page is changed */
  @Output() pageChange: EventEmitter<number>;
  
  /** Total number of pages */
  pageCount: number;
  
  /** Array of page numbers to display */
  pages: number[];
  
  /** Navigate to specific page */
  selectPage(pageNumber: number): void;
  
  /** Check if there's a previous page */
  hasPrevious(): boolean;
  
  /** Check if there's a next page */
  hasNext(): boolean;
  
  /** Check if next button should be disabled */
  nextDisabled(): boolean;
  
  /** Check if previous button should be disabled */
  previousDisabled(): boolean;
}

/** Template directive for ellipsis (...) */
@Directive({ selector: 'ng-template[ngbPaginationEllipsis]' })
class NgbPaginationEllipsis {
  templateRef: TemplateRef<NgbPaginationLinkContext>;
}

/** Template directive for first page link */
@Directive({ selector: 'ng-template[ngbPaginationFirst]' })
class NgbPaginationFirst {
  templateRef: TemplateRef<NgbPaginationLinkContext>;
}

/** Template directive for last page link */
@Directive({ selector: 'ng-template[ngbPaginationLast]' })
class NgbPaginationLast {
  templateRef: TemplateRef<NgbPaginationLinkContext>;
}

/** Template directive for next page link */
@Directive({ selector: 'ng-template[ngbPaginationNext]' })
class NgbPaginationNext {
  templateRef: TemplateRef<NgbPaginationLinkContext>;
}

/** Template directive for page number links */
@Directive({ selector: 'ng-template[ngbPaginationNumber]' })
class NgbPaginationNumber {
  templateRef: TemplateRef<NgbPaginationNumberContext>;
}

/** Template directive for previous page link */
@Directive({ selector: 'ng-template[ngbPaginationPrevious]' })
class NgbPaginationPrevious {
  templateRef: TemplateRef<NgbPaginationLinkContext>;
}

/** Template directive for all pages content */
@Directive({ selector: 'ng-template[ngbPaginationPages]' })
class NgbPaginationPages {
  templateRef: TemplateRef<NgbPaginationPagesContext>;
}

interface NgbPaginationLinkContext {
  /** Page number displayed by the current link */
  currentPage: number;
  /** If true, the current link is disabled */
  disabled: boolean;
}

interface NgbPaginationNumberContext extends NgbPaginationLinkContext {
  /** The page number, displayed by the current page link */
  $implicit: number;
}

interface NgbPaginationPagesContext {
  /** The currently selected page number */
  $implicit: number;
  /** If true, pagination is disabled */
  disabled: boolean;
  /** Pages numbers that should be rendered starting with 1 */
  pages: number[];
}

@Injectable({ providedIn: 'root' })
class NgbPaginationConfig {
  disabled: boolean;
  boundaryLinks: boolean;
  directionLinks: boolean;
  ellipses: boolean;
  maxSize: number;
  pageSize: number;
  rotate: boolean;
  size: 'sm' | 'lg' | string | null;
}

@Directive({
  selector: '[ngbDropdown]',
  exportAs: 'ngbDropdown'
})
class NgbDropdown {
  /** Auto-close behavior: true, false, 'inside', or 'outside' */
  @Input() autoClose: boolean | 'outside' | 'inside';
  
  /** Custom class applied to dropdown container */
  @Input() dropdownClass: string;
  
  /** Initial open state */
  @Input('open') _open: boolean;
  
  /** Preferred placement of dropdown menu */
  @Input() placement: PlacementArray;
  
  /** Popper options modifier function */
  @Input() popperOptions: (options: Partial<Options>) => Partial<Options>;
  
  /** Container element, currently only supports 'body' */
  @Input() container: null | 'body';
  
  /** Positioning behavior: 'dynamic' or 'static' */
  @Input() display: 'dynamic' | 'static';
  
  /** Event emitted when dropdown opens or closes */
  @Output() openChange: EventEmitter<boolean>;
  
  /** Check if dropdown is open */
  isOpen(): boolean;
  
  /** Open the dropdown */
  open(): void;
  
  /** Close the dropdown */
  close(): void;
  
  /** Toggle dropdown state */
  toggle(): void;
}

@Directive({
  selector: '[ngbDropdownToggle]'
})
class NgbDropdownToggle {
  nativeElement: HTMLElement;
}

@Directive({
  selector: '[ngbDropdownAnchor]'
})
class NgbDropdownAnchor {
  nativeElement: HTMLElement;
}

@Directive({
  selector: '[ngbDropdownMenu]'
})
class NgbDropdownMenu {
  menuItems: QueryList<NgbDropdownItem>;
  nativeElement: HTMLElement;
}

@Directive({
  selector: '[ngbDropdownItem]'
})
class NgbDropdownItem {
  /** Tab index for keyboard navigation */
  @Input() tabindex: string | number;
  
  /** Disabled state */
  @Input() disabled: boolean;
  
  nativeElement: HTMLElement;
}

@Directive({
  selector: 'button[ngbDropdownItem]'
})
class NgbDropdownButtonItem {
  item: NgbDropdownItem;
}

@Injectable({ providedIn: 'root' })
class NgbDropdownConfig {
  autoClose: boolean | 'outside' | 'inside';
  placement: PlacementArray;
  popperOptions: (options: Partial<Options>) => Partial<Options>;
  container: null | 'body';
}

@Component({
  selector: 'ngb-progressbar',
  exportAs: 'ngbProgressbar'
})
class NgbProgressbar {
  /** The current value for the progress bar (required) */
  @Input({ required: true }) value: number;
  
  /** The maximal value to be displayed (default: 100) */
  @Input() max: number;
  
  /** If true, the stripes are animated */
  @Input() animated: boolean;
  
  /** The accessible progress bar name */
  @Input() ariaLabel: string;
  
  /** If true, the progress bar will be displayed as striped */
  @Input() striped: boolean;
  
  /** If true, the current percentage will be shown in xx% format */
  @Input() showValue: boolean;
  
  /** Optional text variant type for text color */
  @Input() textType: string;
  
  /** The type/color of the progress bar (Bootstrap variants) */
  @Input() type: string;
  
  /** The height of the progress bar (accepts CSS values) */
  @Input() height: string;
  
  /** Get the current value within the valid range */
  getValue(): number;
  
  /** Get the current percentage value */
  getPercentValue(): number;
}

@Component({
  selector: 'ngb-progressbar-stacked',
  exportAs: 'ngbProgressbarStacked'
})
class NgbProgressbarStacked {
  // Container component - no inputs, only provides stacking context
}

@Injectable({ providedIn: 'root' })
class NgbProgressbarConfig {
  max: number;
  animated: boolean;
  ariaLabel: string;
  striped: boolean;
  textType: string;
  type: string;
  showValue: boolean;
  height: string;
}

@Directive({
  selector: '[ngbScrollSpy]',
  exportAs: 'ngbScrollSpy'
})
class NgbScrollSpy {
  /** Custom process changes function */
  @Input() processChanges: NgbScrollSpyProcessChanges;
  
  /** Scroll behavior for programmatic scrolling */
  @Input() scrollBehavior: 'auto' | 'smooth';
  
  /** Current active fragment id */
  get active(): string;
  
  /** Observable of active fragment changes */
  get active$(): Observable<string>;
  
  /** Scroll to a specific fragment */
  scrollTo(fragment: string | HTMLElement, options?: NgbScrollToOptions): void;
}

@Directive({
  selector: '[ngbScrollSpyItem]',
  exportAs: 'ngbScrollSpyItem'
})
class NgbScrollSpyItem {
  /** Reference to scroll spy, fragment id, and optional parent */
  @Input('ngbScrollSpyItem') data: NgbScrollSpy | string | [NgbScrollSpy, string, string?];
  
  /** The id of the associated fragment */
  @Input() fragment: string;
  
  /** The id of parent menu item for nested navigation */
  @Input() parent: string;
  
  /** Check if this item is currently active */
  isActive(): boolean;
  
  /** Scroll to the associated fragment */
  scrollTo(): void;
}

@Directive({
  selector: '[ngbScrollSpyMenu]',
  exportAs: 'ngbScrollSpyMenu'
})
class NgbScrollSpyMenu {
  /** Reference to the scroll spy directive */
  @Input('ngbScrollSpyMenu') scrollSpy: NgbScrollSpy;
  
  /** Current active fragment id */
  get active(): string;
  
  /** Observable of active fragment changes */
  get active$(): Observable<string>;
  
  /** Scroll to a specific fragment */
  scrollTo(fragment: string | HTMLElement, options?: NgbScrollToOptions): void;
}

@Directive({
  selector: '[ngbScrollSpyFragment]'
})
class NgbScrollSpyFragment {
  /** The unique id of the fragment */
  @Input('ngbScrollSpyFragment') id: string;
}

@Injectable({ providedIn: 'root' })
class NgbScrollSpyService {
  /** Current active fragment id */
  get active(): string;
  
  /** Observable of active fragment changes */
  get active$(): Observable<string>;
  
  /** Scroll to a specific fragment */
  scrollTo(fragment: string | HTMLElement, options?: NgbScrollToOptions): void;
  
  /** Start observing fragments */
  start(options: NgbScrollSpyOptions): void;
  
  /** Stop observing fragments */
  stop(): void;
}

@Injectable({ providedIn: 'root' })
class NgbScrollSpyConfig {
  scrollBehavior: 'auto' | 'smooth';
  processChanges: NgbScrollSpyProcessChanges;
}

@Injectable({ providedIn: 'root' })
class NgbCollapseConfig {
  /** Default animation setting */
  animation: boolean;
}

@Injectable({ providedIn: 'root' })
class NgbOffcanvasConfig {
  /** Default backdrop behavior */
  backdrop: boolean | 'static';
  
  /** Default keyboard support */
  keyboard: boolean;
  
  /** Default position */
  position: 'start' | 'end' | 'top' | 'bottom';
  
  /** Default scroll behavior */
  scroll: boolean;
  
  /** Default animation setting */
  animation: boolean;
}

@Injectable({ providedIn: 'root' })
class NgbPaginationConfig {
  /** Default disabled state */
  disabled: boolean;
  
  /** Default boundary links setting */
  boundaryLinks: boolean;
  
  /** Default direction links setting */
  directionLinks: boolean;
  
  /** Default max size */
  maxSize: number;
  
  /** Default page size */
  pageSize: number;
  
  /** Default rotate setting */
  rotate: boolean;
  
  /** Default size */
  size: 'sm' | 'lg';
}

interface NgbOffcanvasOptions {
  /** Backdrop behavior */
  backdrop?: boolean | 'static';
  
  /** Keyboard support */
  keyboard?: boolean;
  
  /** Position of offcanvas */
  position?: 'start' | 'end' | 'top' | 'bottom';
  
  /** Allow body scrolling */
  scroll?: boolean;
  
  /** Animation setting */
  animation?: boolean;
  
  /** CSS class for offcanvas */
  panelClass?: string;
  
  /** Container element */
  container?: string | Element;
  
  /** Injector for component content */
  injector?: Injector;
}

enum OffcanvasDismissReasons {
  /** Offcanvas dismissed by clicking backdrop */
  BACKDROP_CLICK,
  
  /** Offcanvas dismissed by pressing ESC key */
  ESC
}

@Component({
  template: `
    <div class="mb-3">
      <button 
        class="btn btn-primary"
        (click)="isCollapsed = !isCollapsed">
        Toggle collapse
      </button>
    </div>
    
    <div [ngbCollapse]="isCollapsed">
      <div class="card card-body">
        This content can be collapsed and expanded.
        <p>More content here...</p>
      </div>
    </div>
    
    <p class="mt-3">Collapsed: {{ isCollapsed }}</p>
  `
})
export class BasicCollapseComponent {
  isCollapsed = false;
}

@Component({
  template: `
    <button class="btn btn-primary" (click)="openOffcanvas(content)">
      Open offcanvas
    </button>
    
    <ng-template #content let-offcanvas>
      <div class="offcanvas-header">
        <h4 class="offcanvas-title">Offcanvas Title</h4>
        <button type="button" class="btn-close" (click)="offcanvas.dismiss()"></button>
      </div>
      
      <div class="offcanvas-body">
        <p>This is the offcanvas content.</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </ng-template>
  `
})
export class BasicOffcanvasComponent {
  constructor(private offcanvasService: NgbOffcanvas) {}
  
  openOffcanvas(content: any) {
    const offcanvasRef = this.offcanvasService.open(content, {
      position: 'start',
      backdrop: true,
      keyboard: true
    });
    
    offcanvasRef.result.then((result) => {
      console.log('Offcanvas closed:', result);
    }).catch((error) => {
      console.log('Offcanvas dismissed:', error);
    });
  }
}

@Component({
  template: `
    <ngb-pagination
      [(page)]="currentPage"
      [collectionSize]="totalItems"
      [pageSize]="itemsPerPage"
      [maxSize]="5"
      [rotate]="true"
      [boundaryLinks]="true"
      (pageChange)="onPageChange($event)">
    </ngb-pagination>
    
    <p>Current page: {{ currentPage }} of {{ totalPages }}</p>
    <p>Showing items {{ startItem }} - {{ endItem }} of {{ totalItems }}</p>
  `
})
export class BasicPaginationComponent {
  currentPage = 1;
  totalItems = 200;
  itemsPerPage = 10;
  
  get totalPages() {
    return Math.ceil(this.totalItems / this.itemsPerPage);
  }
  
  get startItem() {
    return (this.currentPage - 1) * this.itemsPerPage + 1;
  }
  
  get endItem() {
    return Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
  }
  
  onPageChange(page: number) {
    console.log('Page changed to:', page);
    // Load data for the new page
  }
}

@Component({
  template: `
    <div class="mb-3">
      <label>Simple progress bar:</label>
      <ngb-progressbar 
        [value]="progress" 
        [max]="100"
        type="success"
        [showValue]="true">
      </ngb-progressbar>
    </div>
    
    <div class="mb-3">
      <label>Striped and animated:</label>
      <ngb-progressbar 
        [value]="progress" 
        [max]="100"
        type="info"
        [striped]="true"
        [animated]="true">
      </ngb-progressbar>
    </div>
    
    <div class="mb-3">
      <label>Stacked progress bars:</label>
      <ngb-progressbar-stacked [max]="100">
        <ngb-progressbar [value]="25" type="success"></ngb-progressbar>
        <ngb-progressbar [value]="35" type="warning"></ngb-progressbar>
        <ngb-progressbar [value]="20" type="danger"></ngb-progressbar>
      </ngb-progressbar-stacked>
    </div>
    
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="increaseProgress()">
        Increase
      </button>
      <button class="btn btn-secondary" (click)="resetProgress()">
        Reset
      </button>
    </div>
  `
})
export class ProgressBarComponent {
  progress = 45;
  
  increaseProgress() {
    this.progress = Math.min(this.progress + 10, 100);
  }
  
  resetProgress() {
    this.progress = 0;
  }
}

@Component({
  template: `
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-primary" ngbDropdownToggle>
        Dropdown menu
      </button>
      
      <div ngbDropdownMenu>
        <button ngbDropdownItem (click)="onAction('action1')">
          Action 1
        </button>
        <button ngbDropdownItem (click)="onAction('action2')">
          Action 2
        </button>
        <div class="dropdown-divider"></div>
        <button ngbDropdownItem [disabled]="true">
          Disabled action
        </button>
      </div>
    </div>
    
    <p *ngIf="lastAction" class="mt-3">
      Last action: {{ lastAction }}
    </p>
  `
})
export class DropdownComponent {
  lastAction: string = '';
  
  onAction(action: string) {
    this.lastAction = action;
    console.log('Action selected:', action);
  }
}

@Component({
  template: `
    <div class="row">
      <div class="col-3">
        <nav class="nav nav-pills flex-column sticky-top">
          <a class="nav-link" [class.active]="activeSection === 'section1'" 
             (click)="scrollTo('section1')">Section 1</a>
          <a class="nav-link" [class.active]="activeSection === 'section2'" 
             (click)="scrollTo('section2')">Section 2</a>
          <a class="nav-link" [class.active]="activeSection === 'section3'" 
             (click)="scrollTo('section3')">Section 3</a>
        </nav>
      </div>
      
      <div class="col-9">
        <div ngbScrollSpy 
             [ngbScrollSpy]="['section1', 'section2', 'section3']"
             (activeChange)="onActiveChange($event)"
             style="height: 400px; overflow-y: auto;">
          
          <div id="section1" style="height: 300px; background-color: #f8f9fa;">
            <h3>Section 1</h3>
            <p>Content for section 1...</p>
          </div>
          
          <div id="section2" style="height: 300px; background-color: #e9ecef;">
            <h3>Section 2</h3>
            <p>Content for section 2...</p>
          </div>
          
          <div id="section3" style="height: 300px; background-color: #dee2e6;">
            <h3>Section 3</h3>
            <p>Content for section 3...</p>
          </div>
        </div>
      </div>
    </div>
  `
})
export class ScrollSpyComponent {
  activeSection: string = 'section1';
  
  onActiveChange(activeId: string) {
    this.activeSection = activeId;
  }
  
  scrollTo(sectionId: string) {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}