snice 2.1.4 → 2.2.0

package/components/tooltip/snice-tooltip.ts

@@ -1,612 +0,0 @@
-import { element, property, query, on, watch, ready, dispose } from 'snice';
-import css from './snice-tooltip.css?inline';
-import portalCss from './snice-tooltip-portal.css?inline';
-import type { TooltipPosition, TooltipTrigger, SniceTooltipElement } from './snice-tooltip.types';
-
-@element('snice-tooltip')
-export class SniceTooltip extends HTMLElement implements SniceTooltipElement {
-  private static portalStylesInjected = false;
-  @property({ reflect: true })
-  content: string = '';
-
-  @property({ reflect: true })
-  position: TooltipPosition = 'top';
-
-  @property({ reflect: true })
-  trigger: TooltipTrigger = 'hover';
-
-  @property({ type: Number, reflect: true })
-  delay: number = 0;
-
-  @property({ type: Number, attribute: 'hide-delay', reflect: true })
-  hideDelay: number = 0;
-
-  @property({ type: Number, reflect: true })
-  offset: number = 12;
-
-  @property({ type: Boolean, reflect: true })
-  arrow: boolean = true;
-
-  @property({ type: Boolean, reflect: true })
-  open: boolean = false;
-
-  @property({ type: Number, attribute: 'max-width', reflect: true })
-  maxWidth: number = 250;
-
-  @property({ type: Number, attribute: 'z-index', reflect: true })
-  zIndex: number = 10000;
-
-  @property({ type: Boolean, attribute: 'strict-positioning', reflect: true })
-  strictPositioning: boolean = false;
-
-  @query('.tooltip')
-  tooltipElement?: HTMLElement;
-
-  @query('.tooltip__arrow')
-  arrowElement?: HTMLElement;
-
-  private showTimeout?: number;
-  private hideTimeout?: number;
-  private activePosition: TooltipPosition = 'top';
-  private portalElement?: HTMLElement;
-
-  private static ensurePortalStyles() {
-    if (SniceTooltip.portalStylesInjected) return;
-    
-    try {
-      // Use Constructable Stylesheets if supported
-      if ('adoptedStyleSheets' in document && 'CSSStyleSheet' in window) {
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(portalCss);
-        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-      } else {
-        // Fallback for older browsers
-        const style = document.createElement('style');
-        style.textContent = portalCss;
-        document.head.appendChild(style);
-      }
-      
-      SniceTooltip.portalStylesInjected = true;
-    } catch (error) {
-      console.warn('Failed to inject tooltip portal styles:', error);
-    }
-  }
-
-  html() {
-    return /*html*/`
-      <div class="tooltip-trigger">
-        <slot></slot>
-      </div>
-      <div class="tooltip tooltip--${this.position}" role="tooltip" hidden>
-        <div class="tooltip__content">${this.content}</div>
-        <div class="tooltip__arrow"></div>
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @ready()
-  init() {
-    if (this.tooltipElement) {
-      this.tooltipElement.style.setProperty('--tooltip-max-width', `${this.maxWidth}px`);
-      this.tooltipElement.style.setProperty('--tooltip-z-index', `${this.zIndex}`);
-    }
-    
-    if (this.open && this.trigger === 'manual') {
-      this.show();
-    }
-  }
-
-  @dispose()
-  cleanup() {
-    this.clearTimeouts();
-    if (this.portalElement) {
-      this.portalElement.remove();
-      this.portalElement = undefined;
-    }
-  }
-
-  @watch('content')
-  updateContent() {
-    const contentEl = this.shadowRoot?.querySelector('.tooltip__content');
-    if (contentEl) {
-      contentEl.textContent = this.content;
-    }
-  }
-
-  @watch('arrow')
-  updateArrow() {
-    if (this.arrowElement) {
-      if (this.arrow) {
-        this.arrowElement.removeAttribute('hidden');
-      } else {
-        this.arrowElement.setAttribute('hidden', '');
-      }
-    }
-  }
-
-  @watch('maxWidth')
-  updateMaxWidth() {
-    if (this.tooltipElement) {
-      this.tooltipElement.style.setProperty('--tooltip-max-width', `${this.maxWidth}px`);
-    }
-  }
-
-  @watch('zIndex')
-  updateZIndex() {
-    if (this.tooltipElement) {
-      this.tooltipElement.style.setProperty('--tooltip-z-index', `${this.zIndex}`);
-    }
-  }
-
-  @watch('open')
-  handleOpenChange() {
-    if (this.trigger === 'manual') {
-      if (this.open) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    }
-  }
-
-  @on('mouseenter')
-  handleMouseEnter() {
-    if (this.trigger === 'hover') {
-      this.scheduleShow();
-    }
-  }
-
-  @on('mouseleave')
-  handleMouseLeave() {
-    if (this.trigger === 'hover') {
-      this.scheduleHide();
-    }
-  }
-
-  @on('focusin')
-  handleFocusIn() {
-    if (this.trigger === 'focus') {
-      this.scheduleShow();
-    }
-  }
-
-  @on('focusout')
-  handleFocusOut() {
-    if (this.trigger === 'focus') {
-      this.scheduleHide();
-    }
-  }
-
-  @on('click')
-  handleClick() {
-    if (this.trigger === 'click') {
-      this.toggle();
-    }
-  }
-
-  private scheduleShow() {
-    this.clearTimeouts();
-    if (this.delay > 0) {
-      this.showTimeout = window.setTimeout(() => this.show(), this.delay);
-    } else {
-      this.show();
-    }
-  }
-
-  private scheduleHide() {
-    this.clearTimeouts();
-    if (this.hideDelay > 0) {
-      this.hideTimeout = window.setTimeout(() => this.hide(), this.hideDelay);
-    } else {
-      this.hide();
-    }
-  }
-
-  private clearTimeouts() {
-    if (this.showTimeout) {
-      clearTimeout(this.showTimeout);
-      this.showTimeout = undefined;
-    }
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = undefined;
-    }
-  }
-
-  show() {
-    if (!this.content) return;
-
-    // Ensure portal styles are injected
-    SniceTooltip.ensurePortalStyles();
-
-    // Create portal element if it doesn't exist
-    if (!this.portalElement) {
-      this.portalElement = this.createPortalElement();
-      this.updateArrowStyles(this.position);
-    }
-
-    this.portalElement.style.display = 'block';
-    this.updatePortalContent();
-    
-    // Force reflow before adding visible class
-    void this.portalElement.offsetHeight;
-    
-    this.updatePosition();
-    this.portalElement.classList.add('snice-tooltip--visible');
-
-    if (this.trigger === 'click') {
-      // Add click outside listener
-      setTimeout(() => {
-        document.addEventListener('click', this.handleClickOutside);
-      }, 0);
-    }
-  }
-
-  hide() {
-    if (!this.portalElement) return;
-
-    this.portalElement.classList.remove('snice-tooltip--visible');
-    
-    setTimeout(() => {
-      if (this.portalElement) {
-        this.portalElement.style.display = 'none';
-      }
-    }, 200); // Match transition duration
-
-    if (this.trigger === 'click') {
-      document.removeEventListener('click', this.handleClickOutside);
-    }
-  }
-
-  toggle() {
-    if (!this.portalElement || this.portalElement.style.display === 'none') {
-      this.show();
-    } else {
-      this.hide();
-    }
-  }
-
-  updatePosition() {
-    if (!this.portalElement) return;
-
-    // Make sure tooltip is visible but off-screen to get accurate dimensions
-    this.portalElement.style.visibility = 'hidden';
-    this.portalElement.style.left = '-9999px';
-    this.portalElement.style.top = '-9999px';
-    
-    const triggerRect = this.getBoundingClientRect();
-    const tooltipRect = this.portalElement.getBoundingClientRect();
-    
-    // Restore visibility
-    this.portalElement.style.visibility = '';
-    
-    // Calculate position with smart viewport detection
-    const position = this.calculatePosition(triggerRect, tooltipRect);
-    
-    // Update tooltip position class if it changed
-    if (position.adjustedPosition !== this.activePosition) {
-      this.portalElement.classList.remove(`snice-tooltip--${this.activePosition}`);
-      this.portalElement.classList.add(`snice-tooltip--${position.adjustedPosition}`);
-      this.activePosition = position.adjustedPosition;
-      
-      // Update arrow styles for new position
-      this.updateArrowStyles(position.adjustedPosition);
-    }
-
-    // Apply calculated position
-    this.portalElement.style.left = `${position.left}px`;
-    this.portalElement.style.top = `${position.top}px`;
-  }
-  
-  private updateArrowStyles(position: TooltipPosition) {
-    if (!this.portalElement || !this.arrow) return;
-    
-    const arrow = this.portalElement.querySelector('.snice-tooltip__arrow') as HTMLElement;
-    if (!arrow) return;
-    
-    // Reset styles - set to explicit values instead of empty strings
-    arrow.style.top = 'auto';
-    arrow.style.bottom = 'auto';
-    arrow.style.left = 'auto';
-    arrow.style.right = 'auto';
-    arrow.style.transform = 'none';
-    arrow.style.borderTopColor = 'transparent';
-    arrow.style.borderBottomColor = 'transparent';
-    arrow.style.borderLeftColor = 'transparent';
-    arrow.style.borderRightColor = 'transparent';
-    
-    // Apply position-specific styles
-    switch (position) {
-      case 'top':
-      case 'top-start':
-      case 'top-end':
-        arrow.style.bottom = '-6px';
-        arrow.style.borderWidth = '6px 6px 0';
-        arrow.style.borderTopColor = '#333';
-        arrow.style.borderLeftColor = 'transparent';
-        arrow.style.borderRightColor = 'transparent';
-        if (position === 'top') {
-          arrow.style.left = '50%';
-          arrow.style.transform = 'translateX(-50%)';
-        } else if (position === 'top-start') {
-          arrow.style.left = '16px';
-        } else {
-          arrow.style.right = '16px';
-        }
-        break;
-        
-      case 'bottom':
-      case 'bottom-start':
-      case 'bottom-end':
-        arrow.style.top = '-6px';
-        arrow.style.borderWidth = '0 6px 6px';
-        arrow.style.borderBottomColor = '#333';
-        arrow.style.borderLeftColor = 'transparent';
-        arrow.style.borderRightColor = 'transparent';
-        if (position === 'bottom') {
-          arrow.style.left = '50%';
-          arrow.style.transform = 'translateX(-50%)';
-        } else if (position === 'bottom-start') {
-          arrow.style.left = '16px';
-        } else {
-          arrow.style.right = '16px';
-        }
-        break;
-        
-      case 'left':
-      case 'left-start':
-      case 'left-end':
-        arrow.style.right = '-6px';
-        arrow.style.borderWidth = '6px 0 6px 6px';
-        arrow.style.borderLeftColor = '#333';
-        arrow.style.borderTopColor = 'transparent';
-        arrow.style.borderBottomColor = 'transparent';
-        if (position === 'left') {
-          arrow.style.top = '50%';
-          arrow.style.transform = 'translateY(-50%)';
-        } else if (position === 'left-start') {
-          arrow.style.top = '16px';
-        } else {
-          arrow.style.bottom = '16px';
-        }
-        break;
-        
-      case 'right':
-      case 'right-start':
-      case 'right-end':
-        arrow.style.left = '-6px';
-        arrow.style.borderWidth = '6px 6px 6px 0';
-        arrow.style.borderRightColor = '#333';
-        arrow.style.borderTopColor = 'transparent';
-        arrow.style.borderBottomColor = 'transparent';
-        if (position === 'right') {
-          arrow.style.top = '50%';
-          arrow.style.transform = 'translateY(-50%)';
-        } else if (position === 'right-start') {
-          arrow.style.top = '16px';
-        } else {
-          arrow.style.bottom = '16px';
-        }
-        break;
-    }
-  }
-
-  private calculatePosition(triggerRect: DOMRect, tooltipRect: DOMRect) {
-    const viewport = {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      scrollX: window.scrollX,
-      scrollY: window.scrollY
-    };
-
-    let position = this.position;
-    let left = 0;
-    let top = 0;
-
-    // Calculate base position
-    const positions = this.getPositionCoordinates(triggerRect, tooltipRect, position);
-    left = positions.left;
-    top = positions.top;
-
-    // If strict positioning is disabled, check if tooltip fits in viewport
-    if (!this.strictPositioning) {
-      const fitsInViewport = 
-        left >= 0 && 
-        top >= 0 && 
-        left + tooltipRect.width <= viewport.width &&
-        top + tooltipRect.height <= viewport.height;
-
-      // If it doesn't fit, try alternative positions
-      if (!fitsInViewport) {
-        const alternativePositions = this.getAlternativePositions(position);
-        
-        for (const altPosition of alternativePositions) {
-          const altCoords = this.getPositionCoordinates(triggerRect, tooltipRect, altPosition);
-          
-          if (
-            altCoords.left >= 0 &&
-            altCoords.top >= 0 &&
-            altCoords.left + tooltipRect.width <= viewport.width &&
-            altCoords.top + tooltipRect.height <= viewport.height
-          ) {
-            position = altPosition;
-            left = altCoords.left;
-            top = altCoords.top;
-            break;
-          }
-        }
-      }
-    }
-
-    return { left, top, adjustedPosition: position };
-  }
-
-  private getPositionCoordinates(triggerRect: DOMRect, tooltipRect: DOMRect, position: TooltipPosition) {
-    let left = 0;
-    let top = 0;
-
-    const centerX = triggerRect.left + triggerRect.width / 2;
-    const centerY = triggerRect.top + triggerRect.height / 2;
-    
-    // Different offsets for different directions
-    // Left/right need more spacing, top/bottom need less
-    const arrowSize = this.arrow ? 6 : 0;
-    const verticalOffset = this.offset;  // Just base offset for top/bottom
-    const horizontalOffset = this.offset + arrowSize;  // More offset for left/right
-
-    switch (position) {
-      case 'top':
-        left = centerX - tooltipRect.width / 2;
-        top = triggerRect.top - tooltipRect.height - verticalOffset;
-        break;
-      case 'top-start':
-        left = triggerRect.left;
-        top = triggerRect.top - tooltipRect.height - verticalOffset;
-        break;
-      case 'top-end':
-        left = triggerRect.right - tooltipRect.width;
-        top = triggerRect.top - tooltipRect.height - verticalOffset;
-        break;
-      case 'bottom':
-        left = centerX - tooltipRect.width / 2;
-        top = triggerRect.bottom + verticalOffset;
-        break;
-      case 'bottom-start':
-        left = triggerRect.left;
-        top = triggerRect.bottom + verticalOffset;
-        break;
-      case 'bottom-end':
-        left = triggerRect.right - tooltipRect.width;
-        top = triggerRect.bottom + verticalOffset;
-        break;
-      case 'left':
-        left = triggerRect.left - tooltipRect.width - horizontalOffset;
-        top = centerY - tooltipRect.height / 2;
-        break;
-      case 'left-start':
-        left = triggerRect.left - tooltipRect.width - horizontalOffset;
-        top = triggerRect.top;
-        break;
-      case 'left-end':
-        left = triggerRect.left - tooltipRect.width - horizontalOffset;
-        top = triggerRect.bottom - tooltipRect.height;
-        break;
-      case 'right':
-        left = triggerRect.right + horizontalOffset;
-        top = centerY - tooltipRect.height / 2;
-        break;
-      case 'right-start':
-        left = triggerRect.right + horizontalOffset;
-        top = triggerRect.top;
-        break;
-      case 'right-end':
-        left = triggerRect.right + horizontalOffset;
-        top = triggerRect.bottom - tooltipRect.height;
-        break;
-    }
-
-    return { left, top };
-  }
-
-  private getAlternativePositions(position: TooltipPosition): TooltipPosition[] {
-    const opposites: Record<string, TooltipPosition[]> = {
-      'top': ['bottom', 'left', 'right'],
-      'top-start': ['bottom-start', 'left', 'right'],
-      'top-end': ['bottom-end', 'left', 'right'],
-      'bottom': ['top', 'left', 'right'],
-      'bottom-start': ['top-start', 'left', 'right'],
-      'bottom-end': ['top-end', 'left', 'right'],
-      'left': ['right', 'top', 'bottom'],
-      'left-start': ['right-start', 'top', 'bottom'],
-      'left-end': ['right-end', 'top', 'bottom'],
-      'right': ['left', 'top', 'bottom'],
-      'right-start': ['left-start', 'top', 'bottom'],
-      'right-end': ['left-end', 'top', 'bottom']
-    };
-
-    return opposites[position] || ['top', 'bottom', 'left', 'right'];
-  }
-
-  private handleClickOutside = (e: MouseEvent) => {
-    if (!this.contains(e.target as Node)) {
-      this.hide();
-    }
-  };
-
-  private createPortalElement(): HTMLElement {
-    const portal = document.createElement('div');
-    portal.className = `snice-tooltip snice-tooltip--${this.position}`;
-    portal.setAttribute('role', 'tooltip');
-    portal.style.cssText = `
-      position: fixed;
-      z-index: ${this.zIndex};
-      padding: 8px 12px;
-      background: #333;
-      color: white;
-      border-radius: 6px;
-      font-size: 14px;
-      line-height: 1.4;
-      max-width: ${this.maxWidth}px;
-      width: max-content;
-      pointer-events: none;
-      opacity: 0;
-      transform: scale(0.95);
-      transition: opacity 0.2s, transform 0.2s;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-      display: none;
-    `;
-    
-    // Create content element
-    const content = document.createElement('div');
-    content.className = 'snice-tooltip__content';
-    portal.appendChild(content);
-    
-    // Create arrow element if needed
-    if (this.arrow) {
-      const arrow = document.createElement('div');
-      arrow.className = 'snice-tooltip__arrow';
-      arrow.style.cssText = `
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-      `;
-      portal.appendChild(arrow);
-    }
-    
-    // Add to body
-    document.body.appendChild(portal);
-    
-    return portal;
-  }
-
-  private updatePortalContent() {
-    if (!this.portalElement) return;
-    
-    const content = this.portalElement.querySelector('.snice-tooltip__content');
-    if (content) {
-      content.textContent = this.content;
-    }
-    
-    // Update or create arrow if needed
-    let arrow = this.portalElement.querySelector('.snice-tooltip__arrow') as HTMLElement;
-    if (this.arrow && !arrow) {
-      // Create arrow if it doesn't exist but should
-      arrow = document.createElement('div');
-      arrow.className = 'snice-tooltip__arrow';
-      arrow.style.cssText = `
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-      `;
-      this.portalElement.appendChild(arrow);
-    } else if (arrow) {
-      arrow.style.display = this.arrow ? '' : 'none';
-    }
-  }
-}

package/components/tooltip/snice-tooltip.types.ts

@@ -1,32 +0,0 @@
-export type TooltipPosition = 
-  | 'top' 
-  | 'bottom' 
-  | 'left' 
-  | 'right'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left-end'
-  | 'right-start'
-  | 'right-end';
-
-export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
-
-export interface SniceTooltipElement extends HTMLElement {
-  content: string;
-  position: TooltipPosition;
-  trigger: TooltipTrigger;
-  delay: number;
-  hideDelay: number;
-  offset: number;
-  arrow: boolean;
-  open: boolean;
-  maxWidth: number;
-  zIndex: number;
-  show(): void;
-  hide(): void;
-  toggle(): void;
-  updatePosition(): void;
-}