Overlays & Popovers

/**
 * Tooltip directive for displaying contextual information
 */
@Directive({
  selector: '[tooltip], [tooltipHtml]'
})
class TooltipDirective implements OnInit, OnDestroy {
  /** Tooltip content */
  @Input() tooltip: string | TemplateRef<any>;
  /** HTML tooltip content */
  @Input() tooltipHtml: string | TemplateRef<any>;
  /** Tooltip placement */
  @Input() placement: string = 'top';
  /** Trigger events */
  @Input() triggers: string = 'hover focus';
  /** Container for tooltip */
  @Input() container: string = 'body';
  /** Disable tooltip */
  @Input() isDisabled: boolean = false;
  /** Show/hide delay */
  @Input() delay: number = 0;
  /** Custom CSS class */
  @Input() customClass: string = '';
  /** Tooltip context for template */
  @Input() tooltipContext: any;
  /** Popup delay */
  @Input() tooltipPopupDelay: number = 0;
  /** Fade transition */
  @Input() tooltipFadeDuration: number = 150;
  /** Enable adaptive positioning */
  @Input() adaptivePosition: boolean = true;

  /** Event emitted when tooltip is shown */
  @Output() onShown: EventEmitter<TooltipDirective> = new EventEmitter();
  /** Event emitted when tooltip is hidden */
  @Output() onHidden: EventEmitter<TooltipDirective> = new EventEmitter();
  /** Event emitted when tooltip state changes */
  @Output() tooltipStateChanged: EventEmitter<boolean> = new EventEmitter();

  /** Show tooltip */
  show(): void;
  /** Hide tooltip */
  hide(): void;
  /** Toggle tooltip */
  toggle(): void;
  /** Check if tooltip is open */
  isOpen(): boolean;
}

/**
 * Tooltip container component
 */
@Component({
  selector: 'bs-tooltip-container'
})
class TooltipContainerComponent implements OnInit {
  /** Tooltip placement */
  placement: string;
  /** Tooltip content */
  htmlContent: string | TemplateRef<any>;
  /** Content template */
  content: string | TemplateRef<any>;
  /** CSS classes */
  classMap: { [key: string]: boolean };
  /** Animation state */
  animationState: string;
  /** Show state */
  show: boolean;
}

/**
 * Global configuration for tooltips
 */
@Injectable()
class TooltipConfig {
  /** Default placement */
  placement: string = 'top';
  /** Default triggers */
  triggers: string = 'hover focus';
  /** Default container */
  container: string = 'body';
  /** Default delay */
  delay: number = 0;
  /** Default adaptive positioning */
  adaptivePosition: boolean = true;
}

/**
 * Angular module for tooltip functionality
 */
@NgModule({
  declarations: [TooltipDirective, TooltipContainerComponent],
  exports: [TooltipDirective]
})
class TooltipModule {}

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@Component({
  template: `
    <!-- Basic tooltip -->
    <button 
      type="button" 
      class="btn btn-primary"
      tooltip="This is a tooltip">
      Hover for tooltip
    </button>

    <!-- HTML tooltip -->
    <button 
      type="button" 
      class="btn btn-info"
      tooltipHtml="<strong>Bold</strong> and <em>italic</em> text"
      placement="bottom"
      triggers="click">
      Click for HTML tooltip
    </button>

    <!-- Template tooltip -->
    <button 
      type="button" 
      class="btn btn-success"
      [tooltip]="tooltipTemplate"
      [tooltipContext]="tooltipData"
      placement="right"
      customClass="custom-tooltip">
      Template tooltip
    </button>

    <ng-template #tooltipTemplate let-data="data">
      <div>
        <h6>{{data.title}}</h6>
        <p>{{data.description}}</p>
        <small>{{data.timestamp}}</small>
      </div>
    </ng-template>

    <!-- Conditional tooltip -->
    <button 
      type="button" 
      class="btn btn-warning"
      tooltip="Conditional tooltip"
      [isDisabled]="tooltipDisabled"
      [delay]="500"
      (onShown)="onTooltipShown()"
      (onHidden)="onTooltipHidden()">
      Conditional tooltip
    </button>
  `,
  imports: [TooltipModule]
})
export class MyComponent {
  tooltipDisabled = false;
  
  tooltipData = {
    title: 'Custom Tooltip',
    description: 'This is a template-based tooltip with custom data.',
    timestamp: new Date().toLocaleString()
  };

  onTooltipShown() {
    console.log('Tooltip shown');
  }

  onTooltipHidden() {
    console.log('Tooltip hidden');
  }

  toggleTooltip() {
    this.tooltipDisabled = !this.tooltipDisabled;
  }
}

/**
 * Popover directive for displaying rich contextual content
 */
@Directive({
  selector: '[popover], [popoverHtml]'
})
class PopoverDirective implements OnInit, OnDestroy {
  /** Popover content */
  @Input() popover: string | TemplateRef<any>;
  /** HTML popover content */
  @Input() popoverHtml: string | TemplateRef<any>;
  /** Popover title */
  @Input() popoverTitle: string;
  /** Popover placement */
  @Input() placement: string = 'top';
  /** Trigger events */
  @Input() triggers: string = 'click';
  /** Container for popover */
  @Input() container: string = 'body';
  /** Disable popover */
  @Input() isDisabled: boolean = false;
  /** Show/hide delay */
  @Input() delay: number = 0;
  /** Custom CSS class */
  @Input() customClass: string = '';
  /** Popover context for template */
  @Input() popoverContext: any;
  /** Close on outside click */
  @Input() outsideClick: boolean = false;
  /** Enable adaptive positioning */
  @Input() adaptivePosition: boolean = true;

  /** Event emitted when popover is shown */
  @Output() onShown: EventEmitter<PopoverDirective> = new EventEmitter();
  /** Event emitted when popover is hidden */
  @Output() onHidden: EventEmitter<PopoverDirective> = new EventEmitter();

  /** Show popover */
  show(): void;
  /** Hide popover */
  hide(): void;
  /** Toggle popover */
  toggle(): void;
  /** Check if popover is open */
  isOpen(): boolean;
}

/**
 * Popover container component
 */
@Component({
  selector: 'popover-container'
})
class PopoverContainerComponent implements OnInit {
  /** Popover placement */
  placement: string;
  /** Popover title */
  title: string;
  /** HTML content */
  htmlContent: string | TemplateRef<any>;
  /** Content template */
  content: string | TemplateRef<any>;
  /** CSS classes */
  classMap: { [key: string]: boolean };
  /** Animation state */
  containerClass: string;
  /** Show state */
  show: boolean;
}

/**
 * Global configuration for popovers
 */
@Injectable()
class PopoverConfig {
  /** Default placement */
  placement: string = 'top';
  /** Default triggers */
  triggers: string = 'click';
  /** Default container */
  container: string = 'body';
  /** Default delay */
  delay: number = 0;
  /** Default adaptive positioning */
  adaptivePosition: boolean = true;
}

/**
 * Angular module for popover functionality
 */
@NgModule({
  declarations: [PopoverDirective, PopoverContainerComponent],
  exports: [PopoverDirective]
})
class PopoverModule {}

import { PopoverModule } from 'ngx-bootstrap/popover';

@Component({
  template: `
    <!-- Basic popover -->
    <button 
      type="button" 
      class="btn btn-primary"
      popover="This is popover content"
      popoverTitle="Popover Title"
      placement="bottom">
      Click for popover
    </button>

    <!-- HTML popover -->
    <button 
      type="button" 
      class="btn btn-info"
      popoverHtml="<strong>HTML content</strong><br><em>with formatting</em>"
      popoverTitle="HTML Popover"
      placement="right"
      triggers="hover">
      Hover for HTML popover
    </button>

    <!-- Template popover -->
    <button 
      type="button" 
      class="btn btn-success"
      [popover]="popoverTemplate"
      [popoverContext]="popoverData"
      popoverTitle="Custom Popover"
      placement="left"
      customClass="custom-popover"
      [outsideClick]="true">
      Template popover
    </button>

    <ng-template #popoverTemplate let-data="data">
      <div class="popover-content">
        <ul class="list-unstyled">
          <li><strong>Name:</strong> {{data.name}}</li>
          <li><strong>Email:</strong> {{data.email}}</li>
          <li><strong>Status:</strong> 
            <span [class]="'badge badge-' + data.statusClass">
              {{data.status}}
            </span>
          </li>
        </ul>
        <div class="mt-2">
          <button class="btn btn-sm btn-primary" (click)="editUser(data)">
            Edit
          </button>
          <button class="btn btn-sm btn-secondary ml-1" (click)="viewProfile(data)">
            View Profile
          </button>
        </div>
      </div>
    </ng-template>

    <!-- Programmatic popover -->
    <button 
      type="button" 
      class="btn btn-warning"
      #programmaticPopover="bs-popover"
      popover="Programmatically controlled"
      popoverTitle="Manual Control"
      triggers="manual"
      (onShown)="onPopoverShown()"
      (onHidden)="onPopoverHidden()">
      Manual popover
    </button>
    
    <div class="mt-2">
      <button class="btn btn-sm btn-success" (click)="programmaticPopover.show()">
        Show
      </button>
      <button class="btn btn-sm btn-danger ml-1" (click)="programmaticPopover.hide()">
        Hide
      </button>
      <button class="btn btn-sm btn-info ml-1" (click)="programmaticPopover.toggle()">
        Toggle
      </button>
    </div>
  `,
  imports: [PopoverModule]
})
export class MyComponent {
  popoverData = {
    name: 'John Doe',
    email: 'john.doe@example.com',
    status: 'Active',
    statusClass: 'success'
  };

  onPopoverShown() {
    console.log('Popover shown');
  }

  onPopoverHidden() {
    console.log('Popover hidden');
  }

  editUser(user: any) {
    console.log('Editing user:', user);
  }

  viewProfile(user: any) {
    console.log('Viewing profile:', user);
  }
}

/**
 * Advanced dropdown configurations and utilities
 */
interface BsDropdownMenuDirective {
  /** Template reference */
  templateRef: TemplateRef<any>;
  /** Location in DOM */
  location: ElementRef;
}

/**
 * Dropdown container component for advanced scenarios
 */
@Component({
  selector: 'bs-dropdown-container'
})
class BsDropdownContainerComponent implements OnInit, OnDestroy {
  /** Dropdown placement */
  placement: string;
  /** CSS classes */
  classMap: { [key: string]: boolean };
  /** Animation state */
  direction: 'down' | 'up';
  /** Host element */
  hostElement: ElementRef;

  /** Get dropdown classes */
  get dropdownClass(): { [key: string]: boolean };
  /** Position dropdown */
  position(): void;
  /** Show dropdown */
  show(): void;
  /** Hide dropdown */
  hide(): void;
}

/**
 * Advanced dropdown state with additional properties
 */
interface BsDropdownState {
  /** Dropdown direction */
  direction: 'down' | 'up';
  /** Auto close behavior */
  autoClose: boolean | 'outside' | 'inside';
  /** Inside click handling */
  insideClick: boolean;
  /** Open state change emitter */
  isOpenChange: EventEmitter<boolean>;
  /** Animation enabled */
  isAnimated: boolean;
  /** Stop on outside click */
  stopOnOutsideClick: boolean;
  /** Keyboard navigation */
  keyboardNav: boolean;
  /** Toggle click emitter */
  toggleClick: EventEmitter<boolean>;
  /** Counts of dropdowns */
  counts: number;
}

/**
 * Dropdown events interface
 */
interface BsDropdownEvents {
  /** Before show event */
  onBeforeShow?: () => void;
  /** After show event */
  onAfterShow?: () => void;
  /** Before hide event */
  onBeforeHide?: () => void;
  /** After hide event */
  onAfterHide?: () => void;
}

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

@Component({
  template: `
    <!-- Dropdown with custom positioning -->
    <div class="btn-group" 
         bsDropdown 
         [placement]="'bottom-right'"
         [autoClose]="'outside'"
         (onShown)="onDropdownShown()"
         (onHidden)="onDropdownHidden()">
      
      <button class="btn btn-primary dropdown-toggle" bsDropdownToggle>
        Advanced Dropdown <span class="caret"></span>
      </button>
      
      <div *bsDropdownMenu class="dropdown-menu" role="menu">
        <h6 class="dropdown-header">Navigation</h6>
        <a class="dropdown-item" href="#" (click)="handleAction('home')">Home</a>
        <a class="dropdown-item" href="#" (click)="handleAction('profile')">Profile</a>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Actions</h6>
        <a class="dropdown-item" href="#" (click)="handleAction('settings')">Settings</a>
        <a class="dropdown-item" href="#" (click)="handleAction('logout')">Logout</a>
      </div>
    </div>

    <!-- Nested dropdown -->
    <div class="btn-group" 
         bsDropdown 
         [container]="'body'"
         [insideClick]="true">
      
      <button class="btn btn-secondary dropdown-toggle" bsDropdownToggle>
        Nested Menu <span class="caret"></span>
      </button>
      
      <div *bsDropdownMenu class="dropdown-menu">
        <div class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" 
             bsDropdown 
             [placement]="'right-top'">
            Submenu
          </a>
          <div *bsDropdownMenu class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu Item 1</a>
            <a class="dropdown-item" href="#">Submenu Item 2</a>
          </div>
        </div>
        <a class="dropdown-item" href="#">Regular Item</a>
      </div>
    </div>
  `,
  imports: [BsDropdownModule]
})
export class AdvancedDropdownComponent {
  constructor(private dropdownConfig: BsDropdownConfig) {
    // Configure global dropdown behavior
    this.dropdownConfig.autoClose = 'outside';
    this.dropdownConfig.isAnimated = true;
  }

  onDropdownShown() {
    console.log('Advanced dropdown shown');
  }

  onDropdownHidden() {
    console.log('Advanced dropdown hidden');
  }

  handleAction(action: string) {
    console.log('Dropdown action:', action);
  }
}

/**
 * Focus trap directive for accessibility
 */
@Directive({
  selector: '[focusTrap]'
})
class FocusTrapDirective implements OnInit, OnDestroy {
  /** Enable/disable focus trap */
  @Input() focusTrap: boolean = true;

  /** First focusable element */
  private firstFocusableElement: HTMLElement;
  /** Last focusable element */
  private lastFocusableElement: HTMLElement;
  /** Previously focused element */
  private previouslyFocusedElement: HTMLElement;

  /** Set focus to first element */
  focusFirstElement(): void;
  /** Set focus to last element */
  focusLastElement(): void;
  /** Get focusable elements */
  getFocusableElements(): HTMLElement[];
  /** Handle tab key navigation */
  handleTabKey(event: KeyboardEvent): void;
}

/**
 * Focus trap service for programmatic control
 */
@Injectable()
class FocusTrap {
  /** Current trapped element */
  private trappedElement: HTMLElement;

  /** Enable focus trap on element */
  enable(element: HTMLElement): void;
  /** Disable focus trap */
  disable(): void;
  /** Check if focus trap is active */
  isActive(): boolean;
  /** Get trapped element */
  getTrappedElement(): HTMLElement;
}

/**
 * Angular module for focus trap functionality
 */
@NgModule({
  declarations: [FocusTrapDirective],
  exports: [FocusTrapDirective],
  providers: [FocusTrap]
})
class FocusTrapModule {}

import { FocusTrapModule, FocusTrap } from 'ngx-bootstrap/focus-trap';

@Component({
  template: `
    <!-- Modal with focus trap -->
    <div class="modal" 
         [class.show]="showModal" 
         [style.display]="showModal ? 'block' : 'none'"
         focusTrap
         [focusTrap]="showModal">
      
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Focus Trapped Modal</h5>
            <button type="button" 
                    class="btn-close" 
                    (click)="closeModal()"
                    aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" 
                       class="form-control" 
                       id="firstName" 
                       #firstInput>
              </div>
              
              <div class="mb-3">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" 
                       class="form-control" 
                       id="lastName">
              </div>
              
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" 
                       class="form-control" 
                       id="email">
              </div>
            </form>
          </div>
          
          <div class="modal-footer">
            <button type="button" 
                    class="btn btn-secondary" 
                    (click)="closeModal()">
              Cancel
            </button>
            <button type="button" 
                    class="btn btn-primary"
                    (click)="saveForm()">
              Save
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Trigger button -->
    <button class="btn btn-primary" 
            (click)="openModal()"
            [disabled]="showModal">
      Open Focus Trapped Modal
    </button>

    <!-- Programmatic focus trap -->
    <div class="card mt-3" #trapContainer>
      <div class="card-body">
        <h6 class="card-title">Programmatic Focus Trap</h6>
        <div class="form-group">
          <input type="text" 
                 class="form-control mb-2" 
                 placeholder="Input 1">
          <input type="text" 
                 class="form-control mb-2" 
                 placeholder="Input 2">
          <button class="btn btn-primary me-2" 
                  (click)="enableTrap()">
            Enable Trap
          </button>
          <button class="btn btn-secondary" 
                  (click)="disableTrap()">
            Disable Trap
          </button>
        </div>
      </div>
    </div>
  `,
  imports: [FocusTrapModule]
})
export class FocusTrapExampleComponent {
  showModal = false;

  constructor(private focusTrap: FocusTrap) {}

  @ViewChild('firstInput') firstInput: ElementRef;
  @ViewChild('trapContainer') trapContainer: ElementRef;

  openModal() {
    this.showModal = true;
    // Focus will be automatically trapped when modal becomes visible
    setTimeout(() => {
      this.firstInput?.nativeElement.focus();
    }, 100);
  }

  closeModal() {
    this.showModal = false;
  }

  saveForm() {
    console.log('Form saved');
    this.closeModal();
  }

  enableTrap() {
    this.focusTrap.enable(this.trapContainer.nativeElement);
  }

  disableTrap() {
    this.focusTrap.disable();
  }
}