@copilotkitnext/angular 0.0.1 → 0.0.4

package/src/lib/directives/tooltip.directive.ts

@@ -1,292 +0,0 @@
-import {
-  Directive,
-  Input,
-  ElementRef,
-  HostListener,
-  OnDestroy,
-  inject,
-  ViewContainerRef
-} from '@angular/core';
-import {
-  Overlay,
-  OverlayRef,
-  OverlayPositionBuilder,
-  ConnectedPosition
-} from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-
-@Component({
-  selector: 'copilot-tooltip-content',
-  template: `
-    <div class="copilot-tooltip-wrapper" [attr.data-position]="position">
-      <div class="copilot-tooltip">
-        {{ text }}
-      </div>
-      <div class="copilot-tooltip-arrow"></div>
-    </div>
-  `,
-  styles: [`
-    .copilot-tooltip-wrapper {
-      position: relative;
-      display: inline-block;
-      animation: fadeIn 0.15s ease-in-out;
-    }
-    
-    .copilot-tooltip {
-      background-color: #1a1a1a;
-      color: white;
-      padding: 6px 10px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 500;
-      white-space: nowrap;
-      max-width: 200px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-    
-    .copilot-tooltip-arrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-    }
-    
-    /* Arrow for tooltip below element (arrow points up to tooltip) */
-    .copilot-tooltip-wrapper[data-position="below"] .copilot-tooltip-arrow {
-      top: -4px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-width: 0 4px 4px 4px;
-      border-color: transparent transparent #1a1a1a transparent;
-    }
-    
-    /* Arrow for tooltip above element (arrow points down to element) */
-    .copilot-tooltip-wrapper[data-position="above"] .copilot-tooltip-arrow {
-      bottom: -4px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-width: 4px 4px 0 4px;
-      border-color: #1a1a1a transparent transparent transparent;
-    }
-    
-    /* Arrow for tooltip to the left */
-    .copilot-tooltip-wrapper[data-position="left"] .copilot-tooltip-arrow {
-      right: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 4px 0 4px 4px;
-      border-color: transparent transparent transparent #1a1a1a;
-    }
-    
-    /* Arrow for tooltip to the right */
-    .copilot-tooltip-wrapper[data-position="right"] .copilot-tooltip-arrow {
-      left: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-width: 4px 4px 4px 0;
-      border-color: transparent #1a1a1a transparent transparent;
-    }
-    
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(2px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true
-})
-export class TooltipContentComponent {
-  text = '';
-  private _position: 'above' | 'below' | 'left' | 'right' = 'below';
-  
-  get position(): 'above' | 'below' | 'left' | 'right' {
-    return this._position;
-  }
-  
-  set position(value: 'above' | 'below' | 'left' | 'right') {
-    this._position = value;
-    this.cdr.markForCheck();
-  }
-  
-  constructor(private cdr: ChangeDetectorRef) {}
-}
-
-@Directive({
-  selector: '[copilotTooltip]',
-  standalone: true
-})
-export class CopilotTooltipDirective implements OnDestroy {
-  @Input('copilotTooltip') tooltipText = '';
-  @Input() tooltipPosition: 'above' | 'below' | 'left' | 'right' = 'below';
-  @Input() tooltipDelay = 500; // milliseconds
-  
-  private overlay = inject(Overlay);
-  private overlayPositionBuilder = inject(OverlayPositionBuilder);
-  private elementRef = inject(ElementRef);
-  private viewContainerRef = inject(ViewContainerRef);
-  
-  private overlayRef?: OverlayRef;
-  private tooltipTimeout?: number;
-  private originalTitle?: string;
-  
-  @HostListener('mouseenter')
-  onMouseEnter(): void {
-    if (!this.tooltipText) return;
-    
-    // Store and remove native title to prevent OS tooltip
-    const element = this.elementRef.nativeElement;
-    if (element.hasAttribute('title')) {
-      this.originalTitle = element.getAttribute('title');
-      element.removeAttribute('title');
-    }
-    
-    // Clear any existing timeout
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-    }
-    
-    // Set timeout to show tooltip after delay
-    this.tooltipTimeout = window.setTimeout(() => {
-      this.show();
-    }, this.tooltipDelay);
-  }
-  
-  @HostListener('mouseleave')
-  onMouseLeave(): void {
-    // Clear timeout if mouse leaves before tooltip shows
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-      this.tooltipTimeout = undefined;
-    }
-    
-    // Restore original title if it existed
-    if (this.originalTitle !== undefined) {
-      this.elementRef.nativeElement.setAttribute('title', this.originalTitle);
-      this.originalTitle = undefined;
-    }
-    
-    // Hide tooltip if it's showing
-    this.hide();
-  }
-  
-  private show(): void {
-    if (this.overlayRef) {
-      return;
-    }
-    
-    // Create overlay
-    const positionStrategy = this.overlayPositionBuilder
-      .flexibleConnectedTo(this.elementRef)
-      .withPositions(this.getPositions())
-      .withPush(false);
-    
-    this.overlayRef = this.overlay.create({
-      positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.close(),
-      hasBackdrop: false
-    });
-    
-    // Create component portal and attach
-    const portal = new ComponentPortal(TooltipContentComponent, this.viewContainerRef);
-    const componentRef = this.overlayRef.attach(portal);
-    componentRef.instance.text = this.tooltipText;
-    
-    // Detect actual position after overlay is positioned
-    setTimeout(() => {
-      if (this.overlayRef && this.elementRef.nativeElement) {
-        const tooltipRect = this.overlayRef.overlayElement.getBoundingClientRect();
-        const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
-        
-        let actualPosition: 'above' | 'below' | 'left' | 'right' = 'below';
-        
-        // Determine actual position based on relative positions
-        if (tooltipRect.bottom <= elementRect.top) {
-          actualPosition = 'above';
-        } else if (tooltipRect.top >= elementRect.bottom) {
-          actualPosition = 'below';
-        } else if (tooltipRect.right <= elementRect.left) {
-          actualPosition = 'left';
-        } else if (tooltipRect.left >= elementRect.right) {
-          actualPosition = 'right';
-        }
-        
-        componentRef.instance.position = actualPosition;
-      }
-    }, 0);
-  }
-  
-  private hide(): void {
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-      this.overlayRef = undefined;
-    }
-  }
-  
-  private getPositions(): ConnectedPosition[] {
-    const positions: Record<string, ConnectedPosition[]> = {
-      above: [
-        {
-          originX: 'center',
-          originY: 'top',
-          overlayX: 'center',
-          overlayY: 'bottom',
-          offsetY: -12
-        }
-      ],
-      below: [
-        {
-          originX: 'center',
-          originY: 'bottom',
-          overlayX: 'center',
-          overlayY: 'top',
-          offsetY: 12
-        }
-      ],
-      left: [
-        {
-          originX: 'start',
-          originY: 'center',
-          overlayX: 'end',
-          overlayY: 'center',
-          offsetX: -12
-        }
-      ],
-      right: [
-        {
-          originX: 'end',
-          originY: 'center',
-          overlayX: 'start',
-          overlayY: 'center',
-          offsetX: 12
-        }
-      ]
-    };
-    
-    // Prefer below position, but use above as fallback
-    const primary = positions[this.tooltipPosition] || positions.below;
-    // For below position, add above as first fallback
-    const fallbacks = this.tooltipPosition === 'below' 
-      ? [...(positions.above || []), ...(positions.left || []), ...(positions.right || [])]
-      : Object.values(positions).filter(p => p !== primary).flat();
-    
-    return [...(primary || []), ...fallbacks];
-  }
-  
-  ngOnDestroy(): void {
-    if (this.tooltipTimeout) {
-      clearTimeout(this.tooltipTimeout);
-    }
-    // Restore original title if it existed
-    if (this.originalTitle !== undefined) {
-      this.elementRef.nativeElement.setAttribute('title', this.originalTitle);
-    }
-    this.hide();
-  }
-}

package/src/lib/slots/__tests__/slot.utils.spec.ts

@@ -1,377 +0,0 @@
-import { Component, Input, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import {
-  renderSlot,
-  isComponentType,
-  isSlotValue,
-  normalizeSlotValue,
-  createSlotConfig,
-  provideSlots,
-  getSlotConfig,
-  createSlotRenderer
-} from '../slot.utils';
-import { SLOT_CONFIG } from '../slot.types';
-
-// Test components
-@Component({
-  selector: 'default-component',
-  template: `<div class="default">{{ text }}</div>`,
-  standalone: true
-})
-class DefaultComponent {
-  @Input() text = 'Default';
-}
-
-@Component({
-  selector: 'custom-component',
-  template: `<div class="custom">{{ text }}</div>`,
-  standalone: true
-})
-class CustomComponent {
-  @Input() text = 'Custom';
-}
-
-describe('Slot Utilities', () => {
-  describe('renderSlot', () => {
-    let viewContainer: ViewContainerRef;
-
-    beforeEach(() => {
-      @Component({
-        template: `<div #container></div>`,
-        standalone: true
-      })
-      class TestComponent {
-        @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-      viewContainer = fixture.componentInstance.container;
-    });
-
-    it('should render default component when no slot provided', () => {
-      const ref = renderSlot(viewContainer, {
-        defaultComponent: DefaultComponent
-      });
-
-      expect(ref).toBeTruthy();
-      expect(ref?.location.nativeElement.querySelector('.default')).toBeTruthy();
-    });
-
-    it('should render custom component when provided', () => {
-      const ref = renderSlot(viewContainer, {
-        slot: CustomComponent,
-        defaultComponent: DefaultComponent
-      });
-
-      expect(ref).toBeTruthy();
-      expect(ref?.location.nativeElement.querySelector('.custom')).toBeTruthy();
-    });
-
-    it('should render default component when string slot is no longer supported', () => {
-      // String slots are no longer supported - should render default component
-      const ref = renderSlot(viewContainer, {
-        slot: 'fancy-style' as any, // Type assertion needed since strings are no longer valid
-        defaultComponent: DefaultComponent
-      });
-
-      expect(ref).toBeTruthy();
-      // Should render default component, not apply class
-      expect(ref?.location.nativeElement.querySelector('.default')).toBeTruthy();
-    });
-
-    it('should apply props to component using setInput', () => {
-      const ref = renderSlot(viewContainer, {
-        defaultComponent: DefaultComponent,
-        props: { text: 'Hello World' }
-      });
-
-      expect(ref).toBeTruthy();
-      if ('instance' in ref!) {
-        // Props should be set via setInput, which updates the instance
-        expect(ref.instance.text).toBe('Hello World');
-      }
-    });
-
-    it('should render template when provided', () => {
-      @Component({
-        template: `
-          <div #container></div>
-          <ng-template #myTemplate let-props="props">
-            <span class="template">{{ props?.message }}</span>
-          </ng-template>
-        `,
-        standalone: true
-      })
-      class TestComponent {
-        @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
-        @ViewChild('myTemplate') template!: TemplateRef<any>;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      renderSlot(fixture.componentInstance.container, {
-        slot: fixture.componentInstance.template,
-        defaultComponent: DefaultComponent,
-        props: { message: 'Template Content' }
-      });
-      
-      fixture.detectChanges();
-
-      const span = fixture.nativeElement.querySelector('.template');
-      expect(span).toBeTruthy();
-      expect(span.textContent).toBe('Template Content');
-    });
-
-    it('should render default component when object slot is no longer supported', () => {
-      // Object slots are no longer supported - should render default component
-      const ref = renderSlot(viewContainer, {
-        slot: { text: 'Overridden' } as any, // Type assertion needed since objects are no longer valid
-        defaultComponent: DefaultComponent
-      });
-
-      expect(ref).toBeTruthy();
-      if ('instance' in ref!) {
-        // Should use default text, not override
-        expect(ref.instance.text).toBe('Default');
-      }
-    });
-  });
-
-  describe('isComponentType', () => {
-    it('should identify Angular components', () => {
-      // After removing ɵ checks, any function with prototype is considered a component
-      expect(isComponentType(DefaultComponent)).toBe(true);
-      expect(isComponentType(CustomComponent)).toBe(true);
-    });
-
-    it('should reject non-components', () => {
-      expect(isComponentType('string')).toBe(false);
-      expect(isComponentType(123)).toBe(false);
-      expect(isComponentType({})).toBe(false);
-      expect(isComponentType(null)).toBe(false);
-      expect(isComponentType(undefined)).toBe(false);
-      expect(isComponentType(() => {})).toBe(false);
-    });
-  });
-
-  describe('isSlotValue', () => {
-    it('should accept valid slot values', () => {
-      // Only components and templates are valid now
-      expect(isSlotValue(DefaultComponent)).toBe(true);
-      expect(isSlotValue(CustomComponent)).toBe(true);
-      // Strings and objects are no longer valid slot values
-      expect(isSlotValue('css-class')).toBe(false);
-      expect(isSlotValue({ prop: 'value' })).toBe(false);
-    });
-
-    it('should reject invalid slot values', () => {
-      expect(isSlotValue(null)).toBe(false);
-      expect(isSlotValue(undefined)).toBe(false);
-    });
-  });
-
-  describe('normalizeSlotValue', () => {
-    it('should return default component for string (no longer supported)', () => {
-      const result = normalizeSlotValue('custom-class' as any, DefaultComponent);
-      expect(result).toEqual({
-        component: DefaultComponent
-      });
-    });
-
-    it('should normalize component type', () => {
-      const result = normalizeSlotValue(CustomComponent, DefaultComponent);
-      expect(result).toEqual({
-        component: CustomComponent
-      });
-    });
-
-    it('should return default component for object (no longer supported)', () => {
-      const props = { text: 'Test' };
-      const result = normalizeSlotValue(props as any, DefaultComponent);
-      expect(result).toEqual({
-        component: DefaultComponent
-      });
-    });
-
-    it('should handle undefined', () => {
-      const result = normalizeSlotValue(undefined, DefaultComponent);
-      expect(result).toEqual({
-        component: DefaultComponent
-      });
-    });
-  });
-
-  describe('createSlotConfig', () => {
-    it('should create configuration map', () => {
-      const config = createSlotConfig(
-        {
-          button: CustomComponent,
-          toolbar: 'toolbar-class' as any // String no longer supported but test the behavior
-        },
-        {
-          button: DefaultComponent,
-          toolbar: DefaultComponent
-        }
-      );
-
-      expect(config.get('button')).toEqual({
-        component: CustomComponent
-      });
-      // String slots no longer supported - should use default
-      expect(config.get('toolbar')).toEqual({
-        component: DefaultComponent
-      });
-    });
-
-    it('should use defaults when no overrides', () => {
-      const config = createSlotConfig(
-        {},
-        {
-          button: DefaultComponent,
-          toolbar: DefaultComponent
-        }
-      );
-
-      expect(config.get('button')).toEqual({
-        component: DefaultComponent
-      });
-      expect(config.get('toolbar')).toEqual({
-        component: DefaultComponent
-      });
-    });
-  });
-
-  describe('provideSlots', () => {
-    it('should create provider configuration with Map', () => {
-      const provider = provideSlots({
-        button: CustomComponent
-      });
-
-      expect(provider.provide).toBe(SLOT_CONFIG);
-      expect(provider.useValue).toBeInstanceOf(Map);
-      expect(provider.useValue.get('button')).toEqual({
-        component: CustomComponent
-      });
-    });
-  });
-
-  describe('getSlotConfig', () => {
-    it('should retrieve slot configuration from DI', () => {
-      const slots = new Map([
-        ['button', { component: CustomComponent }]
-      ]);
-
-      TestBed.configureTestingModule({
-        providers: [
-          { provide: SLOT_CONFIG, useValue: slots }
-        ]
-      });
-
-      @Component({
-        template: '',
-        standalone: true
-      })
-      class TestComponent {
-        slots = getSlotConfig();
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      expect(fixture.componentInstance.slots).toBe(slots);
-    });
-
-    it('should return null when no config provided', () => {
-      @Component({
-        template: '',
-        standalone: true
-      })
-      class TestComponent {
-        slots = getSlotConfig();
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      expect(fixture.componentInstance.slots).toBe(null);
-    });
-  });
-
-  describe('createSlotRenderer', () => {
-    let viewContainer: ViewContainerRef;
-
-    beforeEach(() => {
-      @Component({
-        template: `<div #container></div>`,
-        standalone: true
-      })
-      class TestComponent {
-        @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-      viewContainer = fixture.componentInstance.container;
-    });
-
-    it('should create a renderer function', () => {
-      const renderer = createSlotRenderer(DefaultComponent);
-      expect(typeof renderer).toBe('function');
-      
-      const ref = renderer(viewContainer, CustomComponent);
-      expect(ref).toBeTruthy();
-      expect(ref?.location.nativeElement.querySelector('.custom')).toBeTruthy();
-    });
-
-    it('should use DI config when slot name provided', () => {
-      const slots = new Map([
-        ['button', { component: CustomComponent }]
-      ]);
-
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule({
-        providers: [
-          { provide: SLOT_CONFIG, useValue: slots }
-        ]
-      });
-
-      @Component({
-        template: `<div #container></div>`,
-        standalone: true
-      })
-      class TestComponent {
-        @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
-        renderButton = createSlotRenderer(DefaultComponent, 'button');
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      const ref = fixture.componentInstance.renderButton(
-        fixture.componentInstance.container
-      );
-
-      expect(ref).toBeTruthy();
-      expect(ref?.location.nativeElement.querySelector('.custom')).toBeTruthy();
-    });
-
-    it('should apply props from renderer', () => {
-      const renderer = createSlotRenderer(DefaultComponent);
-      const ref = renderer(viewContainer, undefined, { text: 'Rendered' });
-
-      expect(ref).toBeTruthy();
-      if ('instance' in ref!) {
-        // Props should be set via setInput
-        expect(ref.instance.text).toBe('Rendered');
-      }
-    });
-
-    it('should apply outputs when provided', () => {
-      const renderer = createSlotRenderer(DefaultComponent);
-      const clickHandler = vi.fn();
-      const ref = renderer(viewContainer, undefined, undefined, { click: clickHandler });
-
-      expect(ref).toBeTruthy();
-      // Outputs would be wired if the component has the corresponding EventEmitter
-    });
-  });
-});