Navigation & Layout

/**
 * Bootstrap pagination component
 */
@Component({
  selector: 'pagination'
})
class PaginationComponent implements ControlValueAccessor, OnInit {
  /** Align pagination to center */
  @Input() align: boolean = false;
  /** Show boundary links (first/last) */
  @Input() boundaryLinks: boolean = false;
  /** Show direction links (prev/next) */
  @Input() directionLinks: boolean = true;
  /** Disable pagination */
  @Input() disabled: boolean = false;
  /** First page link text */
  @Input() firstText: string = 'First';
  /** Last page link text */
  @Input() lastText: string = 'Last';
  /** Maximum number of page links to display */
  @Input() maxSize: number = undefined;
  /** Next page link text */
  @Input() nextText: string = 'Next';
  /** Previous page link text */
  @Input() previousText: string = 'Previous';
  /** Rotate pages when maxSize exceeded */
  @Input() rotate: boolean = true;
  /** Total number of items */
  @Input() totalItems: number = 0;
  /** Items per page */
  @Input() itemsPerPage: number = 10;
  /** Pagination size */
  @Input() pageBtnClass: string = '';
  /** Custom CSS class */
  @Input() customPageTemplate: TemplateRef<PaginationLinkContext>;
  /** Custom number template */
  @Input() customNumberTemplate: TemplateRef<PaginationNumberLinkContext>;

  /** Event emitted when number of pages changes */
  @Output() numPages: EventEmitter<number> = new EventEmitter();
  /** Event emitted when page changes */
  @Output() pageChanged: EventEmitter<PageChangedEvent> = new EventEmitter();

  /** Pages model */
  pages: PagesModel[] = [];
  /** Total pages */
  totalPages: number = 0;
  /** Current page */
  page: number = 1;

  /** Select page */
  selectPage(page: number, event?: Event): void;
  /** Get text for page */
  getText(key: string): string;
  /** Navigate to page */
  noPrevious(): boolean;
  /** Navigate to next */
  noNext(): boolean;
}

/**
 * Simple pager component with previous/next buttons
 */
@Component({
  selector: 'pager'
})
class PagerComponent extends PaginationComponent {
  /** Align pager buttons to edges */
  @Input() pageBtnClass: string = '';
  /** Previous button alignment */
  @Input() previousClass: string = '';
  /** Next button alignment */
  @Input() nextClass: string = '';

  /** Previous button text */
  @Input() previousText: string = '« Previous';
  /** Next button text */
  @Input() nextText: string = 'Next »';
}

/**
 * Event emitted when page changes
 */
interface PageChangedEvent {
  /** Current page number */
  page: number;
  /** Items per page */
  itemsPerPage: number;
}

/**
 * Template context for pagination links
 */
interface PaginationLinkContext {
  /** Page number */
  $implicit: PagesModel;
  /** Disabled state */
  disabled: boolean;
}

/**
 * Template context for pagination number links
 */
interface PaginationNumberLinkContext extends PaginationLinkContext {
  /** Page content */
  $implicit: PagesModel;
}

/**
 * Page model for pagination
 */
interface PagesModel {
  /** Page text */
  text: string;
  /** Page number */
  number: number;
  /** Active state */
  active: boolean;
  /** Disabled state */
  disabled: boolean;
}

/**
 * Global configuration for pagination
 */
@Injectable()
class PaginationConfig {
  /** Default main class */
  main: any = {
    align: false,
    boundaryLinks: false,
    directionLinks: true,
    firstText: 'First',
    itemsPerPage: 10,
    lastText: 'Last',
    maxSize: undefined,
    nextText: 'Next',
    pageBtnClass: '',
    previousText: 'Previous',
    rotate: true,
    totalItems: 0
  };
  /** Default pager class */
  pager: any = {
    align: true,
    itemsPerPage: 15,
    nextClass: '',
    nextText: 'Next »',
    pageBtnClass: 'btn-default',
    previousClass: '',
    previousText: '« Previous'
  };
}

/**
 * Angular module for pagination functionality
 */
@NgModule({
  declarations: [PaginationComponent, PagerComponent],
  exports: [PaginationComponent, PagerComponent]
})
class PaginationModule {}

import { PaginationModule } from 'ngx-bootstrap/pagination';

@Component({
  template: `
    <!-- Full pagination -->
    <pagination 
      [(ngModel)]="currentPage"
      [totalItems]="totalItems"
      [itemsPerPage]="itemsPerPage"
      [maxSize]="maxSize"
      [boundaryLinks]="true"
      [directionLinks]="true"
      [rotate]="false"
      (pageChanged)="onPageChanged($event)"
      (numPages)="onNumPagesChanged($event)">
    </pagination>

    <!-- Simple pager -->
    <pager 
      [(ngModel)]="currentPage"
      [totalItems]="totalItems"
      [itemsPerPage]="pageSize"
      [previousText]="'‹ Previous'"
      [nextText]="'Next ›'"
      (pageChanged)="onPageChanged($event)">
    </pager>

    <!-- Display current data -->
    <div>
      Showing {{startItem}} to {{endItem}} of {{totalItems}} items
    </div>
  `,
  imports: [PaginationModule]
})
export class MyComponent {
  currentPage = 1;
  totalItems = 100;
  itemsPerPage = 10;
  pageSize = 5;
  maxSize = 5;

  get startItem(): number {
    return (this.currentPage - 1) * this.itemsPerPage + 1;
  }

  get endItem(): number {
    return Math.min(this.currentPage * this.itemsPerPage, this.totalItems);
  }

  onPageChanged(event: PageChangedEvent) {
    console.log('Page changed to:', event.page);
    this.currentPage = event.page;
    // Load data for current page
    this.loadPageData(event.page);
  }

  onNumPagesChanged(numPages: number) {
    console.log('Total pages:', numPages);
  }

  loadPageData(page: number) {
    // Implement data loading logic
  }
}

/**
 * Bootstrap carousel component
 */
@Component({
  selector: 'carousel'
})
class CarouselComponent implements OnDestroy, AfterViewInit {
  /** Prevent looping to first slide */
  @Input() noWrap: boolean = false;
  /** Disable pause on hover */
  @Input() noPause: boolean = false;
  /** Show slide indicators */
  @Input() showIndicators: boolean = true;
  /** Auto-slide interval in milliseconds */
  @Input() interval: number = 5000;
  /** Pause on focus */
  @Input() pauseOnFocus: boolean = false;
  /** Wrap indicators by chunk */
  @Input() indicatorsByChunk: boolean = false;
  /** Items per slide */
  @Input() itemsPerSlide: number = 1;
  /** Single slide offset */
  @Input() singleSlideOffset: boolean = false;
  /** Start from index */
  @Input() startFromIndex: number = 0;

  /** Event emitted when active slide changes */
  @Output() activeSlideChange: EventEmitter<number> = new EventEmitter();
  /** Event emitted when slide range changes */
  @Output() slideRangeChange: EventEmitter<number[]> = new EventEmitter();

  /** Current active slide index */
  activeSlide: number = 0;
  /** Collection of slides */
  slides: SlideComponent[] = [];
  /** Slides currently displayed */
  currentInterval: any;
  /** Is playing */
  isPlaying: boolean = false;

  /** Add slide to carousel */
  addSlide(slide: SlideComponent): void;
  /** Remove slide from carousel */
  removeSlide(slide: SlideComponent): void;
  /** Navigate to next slide */
  nextSlide(force?: boolean): void;
  /** Navigate to previous slide */
  previousSlide(force?: boolean): void;
  /** Navigate to specific slide */
  selectSlide(index: number): void;
  /** Play carousel */
  play(): void;
  /** Pause carousel */
  pause(): void;
  /** Get current slides */
  getCurrentSlides(): SlideComponent[];
  /** Check if first slide */
  isFirst(index: number): boolean;
  /** Check if last slide */
  isLast(index: number): boolean;
}

/**
 * Individual slide component
 */
@Component({
  selector: 'slide'
})
class SlideComponent implements OnInit, OnDestroy {
  /** Slide active state */
  @Input() active: boolean = false;
  /** Slide index */
  @Input() index: number;

  /** Slide direction */
  direction: string;
  /** Slide class */
  addClass: boolean = false;
}

/**
 * Global configuration for carousel
 */
@Injectable()
class CarouselConfig {
  /** Default slide interval */
  interval: number = 5000;
  /** Default no pause setting */
  noPause: boolean = false;
  /** Default no wrap setting */
  noWrap: boolean = false;
  /** Default indicators display */
  showIndicators: boolean = true;
  /** Default pause on focus */
  pauseOnFocus: boolean = false;
  /** Default indicators by chunk */
  indicatorsByChunk: boolean = false;
  /** Default items per slide */
  itemsPerSlide: number = 1;
  /** Default single slide offset */
  singleSlideOffset: boolean = false;
  /** Default starting index */
  startFromIndex: number = 0;
}

/**
 * Angular module for carousel functionality
 */
@NgModule({
  declarations: [CarouselComponent, SlideComponent],
  exports: [CarouselComponent, SlideComponent]
})
class CarouselModule {}

import { CarouselModule } from 'ngx-bootstrap/carousel';

@Component({
  template: `
    <carousel 
      [interval]="5000" 
      [noWrap]="false"
      [showIndicators]="true"
      [pauseOnFocus]="true"
      (activeSlideChange)="onSlideChange($event)">
      
      <slide *ngFor="let slide of slides; let index = index" [active]="slide.active">
        <img [src]="slide.image" [alt]="slide.text" style="display: block; width: 100%;">
        <div class="carousel-caption">
          <h3>{{slide.text}}</h3>
          <p>{{slide.description}}</p>
        </div>
      </slide>
    </carousel>

    <!-- Multi-item carousel -->
    <carousel 
      [itemsPerSlide]="3"
      [singleSlideOffset]="true"
      [interval]="0"
      [showIndicators]="false">
      
      <slide *ngFor="let item of items">
        <div class="item-content">
          <h4>{{item.title}}</h4>
          <p>{{item.content}}</p>
        </div>
      </slide>
    </carousel>
  `,
  imports: [CarouselModule]
})
export class MyComponent {
  slides = [
    {
      image: 'https://picsum.photos/800/400?random=1',
      text: 'First Slide',
      description: 'Description for first slide',
      active: true
    },
    {
      image: 'https://picsum.photos/800/400?random=2',
      text: 'Second Slide',
      description: 'Description for second slide',
      active: false
    },
    {
      image: 'https://picsum.photos/800/400?random=3',
      text: 'Third Slide',
      description: 'Description for third slide',
      active: false
    }
  ];

  items = [
    { title: 'Item 1', content: 'Content 1' },
    { title: 'Item 2', content: 'Content 2' },
    { title: 'Item 3', content: 'Content 3' },
    { title: 'Item 4', content: 'Content 4' },
    { title: 'Item 5', content: 'Content 5' },
    { title: 'Item 6', content: 'Content 6' }
  ];

  onSlideChange(slideIndex: number) {
    console.log('Active slide changed to:', slideIndex);
  }
}

/**
 * Bootstrap progress bar component
 */
@Component({
  selector: 'progressbar'
})
class ProgressbarComponent implements OnInit {
  /** Maximum progress value */
  @Input() max: number = 100;
  /** Progress bar type */
  @Input() type: string;
  /** Progress value */
  @Input() value: number = 0;
  /** Animated progress bar */
  @Input() animate: boolean = false;
  /** Striped progress bar */
  @Input() striped: boolean = false;

  /** Current percentage */
  percent: number = 0;
  /** Progress class */
  addClass: boolean = true;
}

/**
 * Individual progress bar segment
 */
@Component({
  selector: 'bar'
})
class BarComponent implements OnInit {
  /** Bar type (success, info, warning, danger) */
  @Input() type: string;
  /** Bar value */
  @Input() value: number = 0;

  /** Bar percentage */
  percent: number = 0;
}

/**
 * Progress bar type interface
 */
interface ProgressbarType {
  [key: string]: {
    /** CSS class for progress bar type */
    cssClass: string;
    /** Text color class */
    textClass?: string;
  };
}

/**
 * Global configuration for progress bars
 */
@Injectable()
class ProgressbarConfig {
  /** Default animate setting */
  animate: boolean = false;
  /** Default maximum value */
  max: number = 100;
}

/**
 * Angular module for progress bar functionality
 */
@NgModule({
  declarations: [ProgressbarComponent, BarComponent],
  exports: [ProgressbarComponent, BarComponent]
})
class ProgressbarModule {}

import { ProgressbarModule } from 'ngx-bootstrap/progressbar';

@Component({
  template: `
    <!-- Simple progress bar -->
    <progressbar 
      [value]="progress" 
      [max]="100"
      [type]="'success'"
      [animate]="true"
      [striped]="true">
      {{progress}}%
    </progressbar>

    <!-- Multiple bars -->
    <progressbar [max]="max">
      <bar [value]="stacked[0].value" [type]="stacked[0].type">{{stacked[0].label}}</bar>
      <bar [value]="stacked[1].value" [type]="stacked[1].type">{{stacked[1].label}}</bar>
      <bar [value]="stacked[2].value" [type]="stacked[2].type">{{stacked[2].label}}</bar>
    </progressbar>

    <!-- Dynamic progress bars -->
    <div *ngFor="let bar of dynamicBars">
      <progressbar 
        [value]="bar.value" 
        [type]="bar.type"
        [striped]="bar.striped"
        [animate]="bar.animate">
        <b>{{bar.value}}%</b>
      </progressbar>
    </div>
  `,
  imports: [ProgressbarModule]
})
export class MyComponent {
  progress = 75;
  max = 200;

  stacked = [
    { value: 15, type: 'info', label: 'Type 1' },
    { value: 30, type: 'warning', label: 'Type 2' },
    { value: 20, type: 'danger', label: 'Type 3' }
  ];

  dynamicBars = [
    { value: 25, type: 'success', striped: false, animate: false },
    { value: 50, type: 'info', striped: true, animate: true },
    { value: 75, type: 'warning', striped: true, animate: false },
    { value: 100, type: 'danger', striped: false, animate: true }
  ];

  // Update progress
  updateProgress() {
    this.progress = Math.floor(Math.random() * 100) + 1;
  }
}

/**
 * Sortable component for drag-and-drop lists
 */
@Component({
  selector: 'bs-sortable'
})
class SortableComponent implements OnInit {
  /** Sortable items */
  @Input() items: SortableItem[] = [];
  /** Field name for display */
  @Input() fieldName: string = 'value';
  /** Placeholder text when dragging */
  @Input() placeholderItem: string = '';
  /** Placeholder CSS class */
  @Input() placeholderClass: string = '';
  /** Item CSS class */
  @Input() itemClass: string = '';
  /** Active item CSS class */
  @Input() itemActiveClass: string = '';
  /** Item template */
  @Input() itemTemplate: TemplateRef<any>;
  /** Wrap class */
  @Input() wrapperClass: string = '';

  /** Event emitted when items change */
  @Output() onChange: EventEmitter<any[]> = new EventEmitter();

  /** Get item text */
  getItemText(item: SortableItem): string;
  /** Check if item is active */
  isItemActive(item: SortableItem): boolean;
  /** Move item up */
  moveUp(item: SortableItem): void;
  /** Move item down */
  moveDown(item: SortableItem): void;
  /** Remove item */
  removeItem(item: SortableItem): void;
}

/**
 * Sortable item interface
 */
interface SortableItem {
  /** Item ID */
  id: number;
  /** Item value/text */
  value: string;
  /** Active state */
  isActive?: boolean;
  /** Disabled state */
  isDisabled?: boolean;
}

/**
 * Draggable item class
 */
class DraggableItem {
  constructor(
    /** Item data */
    public item: SortableItem,
    /** Item index */
    public index: number
  ) {}

  /** Get item value */
  getValue(): string;
  /** Get item index */
  getIndex(): number;
}

/**
 * Service for handling drag operations
 */
@Injectable()
class DraggableItemService {
  /** Draggable item */
  draggableItem: DraggableItem;

  /** Get draggable item */
  getDraggableItem(): DraggableItem;
  /** Set draggable item */
  setDraggableItem(item: DraggableItem): void;
  /** Clear draggable item */
  clearDraggableItem(): void;
}

/**
 * Angular module for sortable functionality
 */
@NgModule({
  declarations: [SortableComponent],
  exports: [SortableComponent],
  providers: [DraggableItemService]
})
class SortableModule {}

import { SortableModule } from 'ngx-bootstrap/sortable';

@Component({
  template: `
    <bs-sortable 
      [items]="sortableItems"
      [fieldName]="'text'"
      [itemClass]="'list-group-item'"
      [itemActiveClass]="'list-group-item-success'"
      [placeholderItem]="'Drag here'"
      [placeholderClass]="'list-group-item list-group-item-light'"
      [wrapperClass]="'list-group'"
      (onChange)="onSortableChange($event)">
    </bs-sortable>

    <!-- Custom template -->
    <bs-sortable 
      [items]="customItems"
      [itemTemplate]="customTemplate"
      (onChange)="onCustomChange($event)">
    </bs-sortable>

    <ng-template #customTemplate let-item="item" let-index="index">
      <div class="card mb-2">
        <div class="card-body">
          <h6 class="card-title">{{item.title}}</h6>
          <p class="card-text">{{item.description}}</p>
          <small class="text-muted">Item {{index + 1}}</small>
        </div>
      </div>
    </ng-template>
  `,
  imports: [SortableModule]
})
export class MyComponent {
  sortableItems = [
    { id: 1, text: 'First Item', isActive: false },
    { id: 2, text: 'Second Item', isActive: false },
    { id: 3, text: 'Third Item', isActive: true },
    { id: 4, text: 'Fourth Item', isActive: false }
  ];

  customItems = [
    { 
      id: 1, 
      title: 'Task 1', 
      description: 'Complete project documentation',
      value: 'Task 1'
    },
    { 
      id: 2, 
      title: 'Task 2', 
      description: 'Review code changes',
      value: 'Task 2'
    },
    { 
      id: 3, 
      title: 'Task 3', 
      description: 'Deploy to production',
      value: 'Task 3'
    }
  ];

  onSortableChange(items: any[]) {
    console.log('Sortable items changed:', items);
    this.sortableItems = items;
  }

  onCustomChange(items: any[]) {
    console.log('Custom items changed:', items);
    this.customItems = items;
  }
}