Interactive Components

/**
 * Container component for collapsible content panels
 */
@Component({
  selector: 'accordion'
})
class AccordionComponent {
  /** Enable/disable animations for panel transitions */
  @Input() isAnimated: boolean = false;
  /** Close other panels when one opens */
  @Input() closeOthers: boolean = false;

  /** Add a panel to the accordion */
  addGroup(group: AccordionPanelComponent): void;
  /** Remove a panel from the accordion */
  removeGroup(group: AccordionPanelComponent): void;
  /** Close all panels except the specified one */
  closeOtherPanels(openGroup: AccordionPanelComponent): void;
}

/**
 * Individual collapsible panel within an accordion
 */
@Component({
  selector: 'accordion-group, accordion-panel'
})
class AccordionPanelComponent {
  /** Panel header text */
  @Input() heading: string;
  /** Bootstrap panel CSS class */
  @Input() panelClass: string = 'panel-default';
  /** Disable the panel */
  @Input() isDisabled: boolean = false;
  /** Panel open/close state (two-way binding) */
  @Input() isOpen: boolean = false;
  /** Event emitted when panel open state changes */
  @Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();

  /** Toggle panel open/close state */
  toggleOpen(): void;
}

/**
 * Angular module for accordion functionality
 */
@NgModule({
  declarations: [AccordionComponent, AccordionPanelComponent],
  exports: [AccordionComponent, AccordionPanelComponent]
})
class AccordionModule {}

/**
 * Global configuration service for accordion components
 */
@Injectable()
class AccordionConfig {
  /** Default close others behavior */
  closeOthers: boolean = false;
  /** Default animation behavior */
  isAnimated: boolean = false;
}

import { AccordionModule } from 'ngx-bootstrap/accordion';

@Component({
  template: `
    <accordion [closeOthers]="true" [isAnimated]="true">
      <accordion-panel 
        heading="Panel 1" 
        [isOpen]="panel1Open" 
        (isOpenChange)="panel1Open = $event">
        Content for panel 1
      </accordion-panel>
      <accordion-panel heading="Panel 2" [isDisabled]="false">
        Content for panel 2
      </accordion-panel>
    </accordion>
  `,
  imports: [AccordionModule]
})
export class MyComponent {
  panel1Open = true;
}

/**
 * Service for programmatic modal management
 */
@Injectable()
class BsModalService {
  /** Show a modal with the specified component */
  show<T>(component: ComponentType<T>, config?: Partial<ModalOptions>): BsModalRef<T>;
  /** Hide a modal by ID or hide the top modal */
  hide(id?: number): void;
  /** Get the count of currently displayed modals */
  getModalsCount(): number;
  /** Set global modal configuration */
  setDismissReason(reason: string): void;

  /** Event emitted when a modal is about to be shown */
  onShow: EventEmitter<BsModalRef>;
  /** Event emitted when a modal has been shown */
  onShown: EventEmitter<BsModalRef>;
  /** Event emitted when a modal is about to be hidden */
  onHide: EventEmitter<BsModalRef>;
  /** Event emitted when a modal has been hidden */
  onHidden: EventEmitter<BsModalRef>;
}

/**
 * Reference to an opened modal instance
 */
class BsModalRef<T = any> {
  /** Content component instance */
  content?: T;
  /** Modal ID */
  id?: number;

  /** Close the modal */
  hide(): void;
  /** Set CSS classes on the modal */
  setClass(newClass: string): void;
}

/**
 * Template-driven modal directive
 */
@Directive({
  selector: '[bsModal]'
})
class ModalDirective {
  /** Modal configuration options */
  @Input() config: ModalOptions;
  /** Show/hide the modal */
  @Input() bsModal: boolean;

  /** Event emitted when modal is shown */
  @Output() onShow: EventEmitter<ModalDirective>;
  /** Event emitted when modal is hidden */
  @Output() onHide: EventEmitter<ModalDirective>;

  /** Show the modal */
  show(): void;
  /** Hide the modal */
  hide(): void;
  /** Toggle modal visibility */
  toggle(): void;
}

/**
 * Configuration options for modals
 */
interface ModalOptions {
  /** Enable/disable backdrop */
  backdrop?: boolean | 'static';
  /** Enable/disable keyboard ESC key */
  keyboard?: boolean;
  /** Focus modal when shown */
  focus?: boolean;
  /** Show modal immediately */
  show?: boolean;
  /** Ignore backdrop clicks */
  ignoreBackdropClick?: boolean;
  /** CSS class for modal */
  class?: string;
  /** CSS class for modal container */
  containerClass?: string;
  /** Enable/disable animations */
  animated?: boolean;
  /** Data to pass to modal component */
  data?: any;
  /** Initial state for modal component */
  initialState?: any;
  /** Additional providers for modal */
  providers?: StaticProvider[];
  /** ARIA described by */
  ariaDescribedby?: string;
  /** ARIA labelled by */
  ariaLabelledBy?: string;
  /** ARIA label */
  ariaLabel?: string;
}

/**
 * Modal backdrop options for backdrop configuration
 */
class ModalBackdropOptions {
  /** Enable/disable backdrop animation */
  animate: boolean = true;

  constructor(options: ModalBackdropOptions);
}

/**
 * Function type for intercepting modal close operations
 */
type CloseInterceptorFn = () => Promise<void>;

/**
 * Angular module for modal functionality
 */
@NgModule({
  declarations: [ModalDirective, ModalContainerComponent, ModalBackdropComponent],
  exports: [ModalDirective],
  providers: [BsModalService]
})
class ModalModule {}

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  template: `
    <button (click)="openModal()" class="btn btn-primary">
      Open Modal
    </button>
  `
})
export class MyComponent {
  modalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

  openModal() {
    this.modalRef = this.modalService.show(MyModalComponent, {
      class: 'modal-lg',
      backdrop: 'static',
      keyboard: false,
      initialState: {
        title: 'My Modal Title',
        data: { key: 'value' }
      }
    });

    this.modalRef.onHide?.subscribe(() => {
      console.log('Modal closed');
    });
  }
}

/**
 * Main dropdown container directive
 */
@Directive({
  selector: '[bsDropdown], [dropdown]'
})
class BsDropdownDirective {
  /** Dropdown placement */
  @Input() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';
  /** Trigger events */
  @Input() triggers: string = 'click';
  /** Container selector for dropdown */
  @Input() container: string;
  /** Show dropdown above trigger (deprecated, use placement) */
  @Input() dropup: boolean = false;
  /** Auto close behavior */
  @Input() autoClose: boolean | 'outside' | 'inside' = true;
  /** Handle inside clicks */
  @Input() insideClick: boolean = false;
  /** Disable dropdown */
  @Input() isDisabled: boolean = false;
  /** Open/close state */
  @Input() isOpen: boolean = false;

  /** Event emitted when dropdown is shown */
  @Output() onShown: EventEmitter<BsDropdownDirective>;
  /** Event emitted when dropdown is hidden */
  @Output() onHidden: EventEmitter<BsDropdownDirective>;
  /** Event emitted when open state changes */
  @Output() isOpenChange: EventEmitter<boolean>;

  /** Show the dropdown */
  show(): void;
  /** Hide the dropdown */
  hide(): void;
  /** Toggle dropdown visibility */
  toggle(): void;
}

/**
 * Dropdown menu content directive
 */
@Directive({
  selector: '[bsDropdownMenu], [dropdownMenu]'
})
class BsDropdownMenuDirective {}

/**
 * Dropdown toggle trigger directive
 */
@Directive({
  selector: '[bsDropdownToggle], [dropdownToggle]'
})
class BsDropdownToggleDirective {
  /** Disable the toggle */
  @Input() isDisabled: boolean = false;

  /** Event emitted on click */
  @Output() onClick: EventEmitter<MouseEvent>;
}

/**
 * Dropdown state management service
 */
@Injectable()
class BsDropdownState {
  /** Current dropdown direction */
  direction: 'down' | 'up';
  /** Auto close behavior */
  autoClose: boolean | 'outside' | 'inside';
  /** Inside click handling */
  insideClick: boolean;
  /** Open state */
  isOpenChange: EventEmitter<boolean>;
  /** Animation state */
  isAnimated: boolean;

  /** Toggle dropdown state */
  toggleClick: EventEmitter<boolean>;
  /** Dropdown counts */
  counts: number;
}

/**
 * Global configuration for dropdowns
 */
@Injectable()
class BsDropdownConfig implements BsDropdownState {
  /** Default auto close behavior */
  autoClose: boolean | 'outside' | 'inside' = true;
  /** Default inside click behavior */
  insideClick: boolean = false;
  /** Default animation state */
  isAnimated: boolean = false;
}

/**
 * Angular module for dropdown functionality
 */
@NgModule({
  declarations: [
    BsDropdownDirective,
    BsDropdownMenuDirective,
    BsDropdownToggleDirective,
    BsDropdownContainerComponent
  ],
  exports: [
    BsDropdownDirective,
    BsDropdownMenuDirective,
    BsDropdownToggleDirective
  ]
})
class BsDropdownModule {}

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@Component({
  template: `
    <div bsDropdown class="btn-group" [autoClose]="'outside'">
      <button 
        id="button-basic" 
        bsDropdownToggle 
        type="button" 
        class="btn btn-primary dropdown-toggle">
        Simple dropdown <span class="caret"></span>
      </button>
      <ul *bsDropdownMenu role="menu" class="dropdown-menu">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
  `,
  imports: [BsDropdownModule]
})
export class MyComponent {}

/**
 * Bootstrap tab container component
 */
@Component({
  selector: 'tabset'
})
class TabsetComponent implements OnDestroy {
  /** Vertical tabs */
  @Input() vertical: boolean = false;
  /** Justified tabs */
  @Input() justified: boolean = false;
  /** Tab type */
  @Input() type: string = 'tabs';
  /** Custom class */
  @Input() customClass: string = '';

  /** Collection of tab directives */
  tabs: TabDirective[] = [];

  /** Add a tab */
  addTab(tab: TabDirective): void;
  /** Remove a tab */
  removeTab(tab: TabDirective, options?: { reselect: boolean; emit: boolean }): void;
  /** Get the currently active tab */
  getActive(): TabDirective | undefined;
}

/**
 * Individual tab directive
 */
@Directive({
  selector: 'tab, [tab]'
})
class TabDirective implements OnInit, OnDestroy {
  /** Tab heading text */
  @Input() heading: string;
  /** Tab ID */
  @Input() id: string;
  /** Disable the tab */
  @Input() disabled: boolean = false;
  /** Removable tab */
  @Input() removable: boolean = false;
  /** Active state */
  @Input() active: boolean = false;
  /** Custom CSS class */
  @Input() customClass: string = '';

  /** Event emitted when tab is selected */
  @Output() selectTab: EventEmitter<TabDirective> = new EventEmitter();
  /** Event emitted when tab is deselected */
  @Output() deselect: EventEmitter<TabDirective> = new EventEmitter();
  /** Event emitted when tab is removed */
  @Output() removed: EventEmitter<TabDirective> = new EventEmitter();

  /** Select this tab */
  select(): void;
}

/**
 * Custom tab heading directive
 */
@Directive({
  selector: '[tabHeading]'
})
class TabHeadingDirective {
  /** Template reference */
  templateRef: TemplateRef<any>;
}

/**
 * Global configuration for tabs
 */
@Injectable()
class TabsetConfig {
  /** Default tab type */
  type: string = 'tabs';
  /** Default vertical setting */
  vertical: boolean = false;
  /** Default justified setting */
  justified: boolean = false;
}

/**
 * Angular module for tabs functionality
 */
@NgModule({
  declarations: [
    TabsetComponent,
    TabDirective,
    TabHeadingDirective,
    NgTranscludeDirective
  ],
  exports: [
    TabsetComponent,
    TabDirective,
    TabHeadingDirective
  ]
})
class TabsModule {}

import { TabsModule } from 'ngx-bootstrap/tabs';

@Component({
  template: `
    <tabset [justified]="true">
      <tab heading="Tab 1" [active]="true">
        <p>Content of Tab 1</p>
      </tab>
      <tab heading="Tab 2" [disabled]="false">
        <p>Content of Tab 2</p>
      </tab>
      <tab [removable]="true" (removed)="onTabRemoved($event)">
        <ng-template tabHeading>
          <i class="fa fa-bell"></i> Custom Heading
        </ng-template>
        <p>Tab with custom heading and remove button</p>
      </tab>
    </tabset>
  `,
  imports: [TabsModule]
})
export class MyComponent {
  onTabRemoved(tab: TabDirective) {
    console.log('Tab removed:', tab.heading);
  }
}

/**
 * Directive for collapsing/expanding content
 */
@Directive({
  selector: '[collapse]'
})
class CollapseDirective implements OnInit, OnDestroy {
  /** Collapse state */
  @Input() collapse: boolean = false;
  /** Display type when expanded */
  @Input() display: string = 'block';
  /** Animation duration */
  @Input() collapseAnimationDuration: number = 400;
  /** Disable animations */
  @Input() isAnimated: boolean = true;

  /** Event emitted when collapse starts */
  @Output() collapsed: EventEmitter<CollapseDirective> = new EventEmitter();
  /** Event emitted when expand starts */
  @Output() expanded: EventEmitter<CollapseDirective> = new EventEmitter();
  /** Event emitted when collapse finishes */
  @Output() collapses: EventEmitter<CollapseDirective> = new EventEmitter();
  /** Event emitted when expand finishes */
  @Output() expands: EventEmitter<CollapseDirective> = new EventEmitter();

  /** Collapse the element */
  hide(): void;
  /** Expand the element */
  show(): void;
  /** Toggle collapse state */
  toggle(): void;
}

/**
 * Angular module for collapse functionality
 */
@NgModule({
  declarations: [CollapseDirective],
  exports: [CollapseDirective]
})
class CollapseModule {}

import { CollapseModule } from 'ngx-bootstrap/collapse';

@Component({
  template: `
    <button 
      type="button" 
      class="btn btn-primary" 
      (click)="isCollapsed = !isCollapsed">
      Toggle Collapse
    </button>
    <div [collapse]="isCollapsed" class="card card-body">
      This content can be collapsed and expanded.
    </div>
  `,
  imports: [CollapseModule]
})
export class MyComponent {
  isCollapsed = false;
}

/**
 * Alert notification component
 */
@Component({
  selector: 'alert, bs-alert'
})
class AlertComponent implements OnInit {
  /** Alert type (success, info, warning, danger) */
  @Input() type: string = 'warning';
  /** Dismissible alert */
  @Input() dismissible: boolean = false;
  /** Dismiss timeout in milliseconds */
  @Input() dismissOnTimeout: number;
  /** Custom CSS class */
  @Input() customClass: string = '';

  /** Event emitted when alert is closed */
  @Output() onClosed: EventEmitter<AlertComponent> = new EventEmitter();
  /** Event emitted when alert close is initiated */
  @Output() onClose: EventEmitter<AlertComponent> = new EventEmitter();

  /** Close the alert */
  close(): void;
}

/**
 * Global configuration for alerts
 */
@Injectable()
class AlertConfig {
  /** Default alert type */
  type: string = 'warning';
  /** Default dismissible state */
  dismissible: boolean = false;
  /** Default dismiss timeout */
  dismissOnTimeout: number;
}

/**
 * Angular module for alert functionality
 */
@NgModule({
  declarations: [AlertComponent],
  exports: [AlertComponent]
})
class AlertModule {}

import { AlertModule } from 'ngx-bootstrap/alert';

@Component({
  template: `
    <alert type="success" [dismissible]="true" (onClosed)="onAlertClosed()">
      <strong>Success!</strong> Operation completed successfully.
    </alert>
    <alert type="danger" [dismissOnTimeout]="5000">
      <strong>Error!</strong> Something went wrong.
    </alert>
  `,
  imports: [AlertModule]
})
export class MyComponent {
  onAlertClosed() {
    console.log('Alert was closed');
  }
}