ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-tooltip.mjs

@@ -0,0 +1,625 @@
+import * as i0 from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, inject, ElementRef, ViewContainerRef, Injector, DestroyRef, Renderer2, PLATFORM_ID, input, numberAttribute, booleanAttribute, output, Directive } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * CVA variants for the tooltip panel wrapper.
+ *
+ * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border`
+ */
+const tooltipPanelVariants = cva([
+    'com-tooltip-panel',
+    'z-50',
+    'pointer-events-auto',
+    'select-none',
+    'leading-normal',
+], {
+    variants: {
+        color: {
+            default: 'bg-tooltip text-tooltip-foreground',
+            primary: 'bg-primary text-primary-foreground',
+            accent: 'bg-accent text-accent-foreground',
+            warn: 'bg-warn text-warn-foreground',
+            invert: 'bg-popover text-popover-foreground border border-border shadow-md',
+        },
+        size: {
+            sm: 'px-2 py-1 text-xs max-w-48 rounded-md',
+            md: 'px-3 py-1.5 text-sm max-w-64 rounded-lg',
+            lg: 'px-4 py-2.5 text-sm max-w-80 rounded-xl',
+        },
+    },
+    defaultVariants: {
+        color: 'default',
+        size: 'md',
+    },
+});
+/**
+ * CVA variants for the tooltip arrow element.
+ * The arrow points toward the trigger element.
+ *
+ * @tokens `--color-tooltip`, `--color-primary`, `--color-accent`, `--color-warn`,
+ *         `--color-popover`, `--color-border`
+ */
+const tooltipArrowVariants = cva('absolute size-2 rotate-45', {
+    variants: {
+        color: {
+            default: 'bg-tooltip',
+            primary: 'bg-primary',
+            accent: 'bg-accent',
+            warn: 'bg-warn',
+            invert: 'bg-popover border-l border-t border-border',
+        },
+        side: {
+            // Arrow points DOWN (tooltip is above trigger)
+            top: 'left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2',
+            // Arrow points UP (tooltip is below trigger)
+            bottom: 'left-1/2 -translate-x-1/2 top-0 -translate-y-1/2',
+            // Arrow points RIGHT (tooltip is left of trigger)
+            left: 'top-1/2 -translate-y-1/2 right-0 translate-x-1/2',
+            // Arrow points LEFT (tooltip is right of trigger)
+            right: 'top-1/2 -translate-y-1/2 left-0 -translate-x-1/2',
+        },
+    },
+    compoundVariants: [
+        // Invert arrow needs different rotation for border visibility
+        { color: 'invert', side: 'top', class: 'rotate-[225deg]' },
+        { color: 'invert', side: 'bottom', class: 'rotate-45' },
+        { color: 'invert', side: 'left', class: 'rotate-[135deg]' },
+        { color: 'invert', side: 'right', class: '-rotate-45' },
+    ],
+    defaultVariants: {
+        color: 'default',
+        side: 'top',
+    },
+});
+
+let tooltipIdCounter = 0;
+/**
+ * Generate a unique ID for a tooltip instance.
+ */
+function generateTooltipId() {
+    return `tooltip-${++tooltipIdCounter}`;
+}
+
+/**
+ * Internal tooltip panel component rendered inside the CDK overlay.
+ * Receives content (string or template) and variant inputs from the directive.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border`
+ */
+class TooltipPanelComponent {
+    /** Plain text content to display. */
+    textContent = signal('', ...(ngDevMode ? [{ debugName: "textContent" }] : []));
+    /** Optional template for rich content. */
+    templateRef = signal(null, ...(ngDevMode ? [{ debugName: "templateRef" }] : []));
+    /** Color variant. */
+    color = signal('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Size variant. */
+    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Whether to show the arrow. */
+    showArrow = signal(true, ...(ngDevMode ? [{ debugName: "showArrow" }] : []));
+    /** Which side the tooltip is positioned on. */
+    activeSide = signal('top', ...(ngDevMode ? [{ debugName: "activeSide" }] : []));
+    /** Unique ID for accessibility. */
+    tooltipId = signal('', ...(ngDevMode ? [{ debugName: "tooltipId" }] : []));
+    /** Whether the tooltip is visible (for animation state). */
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /** Function to hide the tooltip (passed to template context). */
+    hideFn = signal(() => { }, ...(ngDevMode ? [{ debugName: "hideFn" }] : []));
+    /** Computed template context. */
+    templateContext = computed(() => ({
+        $implicit: this.textContent(),
+        hide: this.hideFn(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    /** Computed panel CSS classes. */
+    panelClasses = computed(() => mergeClasses(tooltipPanelVariants({
+        color: this.color(),
+        size: this.size(),
+    })), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Computed arrow CSS classes. */
+    arrowClasses = computed(() => mergeClasses(tooltipArrowVariants({
+        color: this.color(),
+        side: this.activeSide(),
+    })), ...(ngDevMode ? [{ debugName: "arrowClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TooltipPanelComponent, isStandalone: true, selector: "com-tooltip-panel", ngImport: i0, template: `
+    <div
+      class="relative"
+      [attr.data-state]="visible() ? 'visible' : 'hidden'"
+      [attr.data-side]="activeSide()"
+    >
+      @if (showArrow()) {
+        <span [class]="arrowClasses()" aria-hidden="true"></span>
+      }
+      <div
+        [class]="panelClasses()"
+        role="tooltip"
+        [attr.id]="tooltipId()"
+      >
+        @if (templateRef()) {
+          <ng-container
+            [ngTemplateOutlet]="templateRef()!"
+            [ngTemplateOutletContext]="templateContext()"
+          />
+        } @else {
+          {{ textContent() }}
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=visible]{animation:tooltip-in .12s ease-out}[data-state=hidden]{animation:tooltip-out 80ms ease-in forwards}[data-side=top]{transform-origin:bottom center}[data-side=bottom]{transform-origin:top center}[data-side=left]{transform-origin:right center}[data-side=right]{transform-origin:left center}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){[data-state=visible],[data-state=hidden]{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-tooltip-panel', template: `
+    <div
+      class="relative"
+      [attr.data-state]="visible() ? 'visible' : 'hidden'"
+      [attr.data-side]="activeSide()"
+    >
+      @if (showArrow()) {
+        <span [class]="arrowClasses()" aria-hidden="true"></span>
+      }
+      <div
+        [class]="panelClasses()"
+        role="tooltip"
+        [attr.id]="tooltipId()"
+      >
+        @if (templateRef()) {
+          <ng-container
+            [ngTemplateOutlet]="templateRef()!"
+            [ngTemplateOutletContext]="templateContext()"
+          />
+        } @else {
+          {{ textContent() }}
+        }
+      </div>
+    </div>
+  `, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=visible]{animation:tooltip-in .12s ease-out}[data-state=hidden]{animation:tooltip-out 80ms ease-in forwards}[data-side=top]{transform-origin:bottom center}[data-side=bottom]{transform-origin:top center}[data-side=left]{transform-origin:right center}[data-side=right]{transform-origin:left center}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){[data-state=visible],[data-state=hidden]{animation:none}}\n"] }]
+        }] });
+
+/** Default show delay in milliseconds. */
+const DEFAULT_SHOW_DELAY = 200;
+/** Default hide delay in milliseconds. */
+const DEFAULT_HIDE_DELAY = 100;
+/** Offset between trigger and tooltip in pixels. */
+const TOOLTIP_OFFSET = 8;
+/** Viewport margin in pixels. */
+const VIEWPORT_MARGIN = 8;
+/**
+ * Build position strategy entries for the tooltip.
+ * Primary position is the preferred direction, with fallbacks.
+ */
+function buildTooltipPositions(position) {
+    const positions = {
+        top: [
+            // Top center (preferred)
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },
+            // Bottom center (flip)
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },
+            // Right center (fallback)
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },
+            // Left center (fallback)
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },
+        ],
+        bottom: [
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },
+        ],
+        left: [
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },
+        ],
+        right: [
+            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: TOOLTIP_OFFSET },
+            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -TOOLTIP_OFFSET },
+            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -TOOLTIP_OFFSET },
+            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: TOOLTIP_OFFSET },
+        ],
+    };
+    return positions[position];
+}
+/**
+ * Derive the tooltip side from a position change event.
+ */
+function deriveSideFromPosition(pair) {
+    if (pair.originY === 'top' && pair.overlayY === 'bottom')
+        return 'top';
+    if (pair.originY === 'bottom' && pair.overlayY === 'top')
+        return 'bottom';
+    if (pair.originX === 'start' && pair.overlayX === 'end')
+        return 'left';
+    if (pair.originX === 'end' && pair.overlayX === 'start')
+        return 'right';
+    return 'top';
+}
+/**
+ * Tooltip directive — displays supplementary information on hover/focus.
+ *
+ * Applied as an attribute directive to any trigger element. The tooltip panel
+ * is rendered via CDK Overlay when triggered by mouse hover, keyboard focus,
+ * or programmatically.
+ *
+ * @tokens `--color-tooltip`, `--color-tooltip-foreground`, `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-warn`, `--color-warn-foreground`,
+ *         `--color-popover`, `--color-popover-foreground`, `--color-border`
+ *
+ * @example Simple text tooltip
+ * ```html
+ * <button comTooltip="Save your changes">
+ *   <com-icon name="save" />
+ * </button>
+ * ```
+ *
+ * @example Positioned
+ * ```html
+ * <button comTooltip="Settings" comTooltipPosition="right">
+ *   <com-icon name="settings" />
+ * </button>
+ * ```
+ *
+ * @example Color variants
+ * ```html
+ * <com-icon name="alert-triangle" comTooltip="3 warnings found" comTooltipColor="warn" />
+ * ```
+ *
+ * @example Custom template
+ * ```html
+ * <button
+ *   comTooltip="Keyboard shortcuts"
+ *   [comTooltipTpl]="shortcutsTpl"
+ *   comTooltipSize="lg"
+ * >
+ *   <com-icon name="keyboard" />
+ * </button>
+ *
+ * <ng-template #shortcutsTpl let-hide="hide">
+ *   <div class="flex flex-col gap-1">
+ *     <span>Press Ctrl+S to save</span>
+ *     <button (click)="hide()">Got it</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @example Programmatic control
+ * ```html
+ * <input
+ *   #tooltipRef="comTooltip"
+ *   comTooltip="Invalid email"
+ *   comTooltipColor="warn"
+ *   [comTooltipDisabled]="true"
+ * />
+ * ```
+ *
+ * ```ts
+ * // Show tooltip on validation error
+ * if (emailInvalid) {
+ *   this.tooltipRef.show();
+ * }
+ * ```
+ */
+class ComTooltip {
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    overlayRef = null;
+    panelInstance = null;
+    showTimeoutId = null;
+    hideTimeoutId = null;
+    touchTimeoutId = null;
+    tooltipId = generateTooltipId();
+    /** Current active side (updated from position changes). */
+    activeSide = signal('top', ...(ngDevMode ? [{ debugName: "activeSide" }] : []));
+    /** Whether the tooltip is currently visible. */
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    // ─── Content Inputs ───
+    /** Simple text content for the tooltip. Also serves as the directive selector. */
+    comTooltip = input.required(...(ngDevMode ? [{ debugName: "comTooltip" }] : []));
+    /** Custom template for rich tooltip content. Takes precedence over text when provided. */
+    comTooltipTpl = input(null, ...(ngDevMode ? [{ debugName: "comTooltipTpl" }] : []));
+    // ─── Positioning Inputs ───
+    /** Preferred position direction. Default: 'top'. */
+    comTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "comTooltipPosition" }] : []));
+    // ─── Behavior Inputs ───
+    /** Delay in ms before showing the tooltip. Default: 200. */
+    comTooltipShowDelay = input(DEFAULT_SHOW_DELAY, { ...(ngDevMode ? { debugName: "comTooltipShowDelay" } : {}), transform: numberAttribute });
+    /** Delay in ms before hiding the tooltip. Default: 100. */
+    comTooltipHideDelay = input(DEFAULT_HIDE_DELAY, { ...(ngDevMode ? { debugName: "comTooltipHideDelay" } : {}), transform: numberAttribute });
+    /** Disable the tooltip entirely. Default: false. */
+    comTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "comTooltipDisabled" } : {}), transform: booleanAttribute });
+    /** Touch device handling. Default: 'auto'. */
+    comTooltipTouchGestures = input('auto', ...(ngDevMode ? [{ debugName: "comTooltipTouchGestures" }] : []));
+    // ─── Variant Inputs ───
+    /** Color variant. Default: 'default'. */
+    comTooltipColor = input('default', ...(ngDevMode ? [{ debugName: "comTooltipColor" }] : []));
+    /** Size variant. Default: 'md'. */
+    comTooltipSize = input('md', ...(ngDevMode ? [{ debugName: "comTooltipSize" }] : []));
+    /** Whether to show the arrow/caret. Default: true. */
+    comTooltipHasArrow = input(true, { ...(ngDevMode ? { debugName: "comTooltipHasArrow" } : {}), transform: booleanAttribute });
+    // ─── Outputs ───
+    /** Emitted when the tooltip becomes visible (after delay + animation). */
+    comTooltipShown = output();
+    /** Emitted when the tooltip is fully hidden. */
+    comTooltipHidden = output();
+    constructor() {
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.clearTimers();
+            this.disposeOverlay();
+        });
+    }
+    // ─── Public API ───
+    /** Programmatically show the tooltip (ignores disabled state for error validation use cases). */
+    show() {
+        if (this.isVisible())
+            return;
+        this.clearTimers();
+        this.createOverlay();
+        this.attachPanel();
+    }
+    /** Programmatically hide the tooltip. */
+    hide() {
+        if (!this.isVisible())
+            return;
+        this.clearTimers();
+        this.detachPanel();
+    }
+    // ─── Event Handlers ───
+    onMouseEnter() {
+        if (this.comTooltipDisabled())
+            return;
+        this.scheduleShow(this.comTooltipShowDelay());
+    }
+    onMouseLeave() {
+        this.scheduleHide(this.comTooltipHideDelay());
+    }
+    onFocusIn() {
+        if (this.comTooltipDisabled())
+            return;
+        // Keyboard users get instant feedback
+        this.scheduleShow(0);
+    }
+    onFocusOut() {
+        this.scheduleHide(this.comTooltipHideDelay());
+    }
+    onEscapeKey() {
+        if (this.isVisible()) {
+            this.hide();
+        }
+    }
+    onTouchStart(event) {
+        const touchMode = this.comTooltipTouchGestures();
+        if (touchMode === 'off' || this.comTooltipDisabled())
+            return;
+        // Long-press to show (500ms)
+        this.clearTimers();
+        this.touchTimeoutId = setTimeout(() => {
+            this.show();
+            // Set up tap-elsewhere to hide
+            const touchEndHandler = (e) => {
+                const touch = e.changedTouches?.[0];
+                if (touch) {
+                    const target = this.document.elementFromPoint(touch.clientX, touch.clientY);
+                    if (!this.overlayRef?.overlayElement.contains(target)) {
+                        this.hide();
+                    }
+                }
+                this.document.removeEventListener('touchend', touchEndHandler);
+            };
+            this.document.addEventListener('touchend', touchEndHandler);
+        }, 500);
+        // Cancel long-press if finger moves
+        const touchMoveHandler = () => {
+            this.clearTouchTimeout();
+            this.document.removeEventListener('touchmove', touchMoveHandler);
+        };
+        this.document.addEventListener('touchmove', touchMoveHandler);
+        // Cancel long-press if finger lifts before timeout
+        const touchEndCancelHandler = () => {
+            this.clearTouchTimeout();
+            this.document.removeEventListener('touchend', touchEndCancelHandler);
+        };
+        this.document.addEventListener('touchend', touchEndCancelHandler);
+    }
+    // ─── Panel Mouse Events ───
+    /** Called when mouse enters the tooltip panel. */
+    onPanelMouseEnter() {
+        // Cancel hide timer when hovering over panel (for interactive templates)
+        this.clearHideTimeout();
+    }
+    /** Called when mouse leaves the tooltip panel. */
+    onPanelMouseLeave() {
+        this.scheduleHide(this.comTooltipHideDelay());
+    }
+    // ─── Timer Management ───
+    scheduleShow(delay) {
+        this.clearTimers();
+        if (delay === 0) {
+            this.createOverlay();
+            this.attachPanel();
+        }
+        else {
+            this.showTimeoutId = setTimeout(() => {
+                this.createOverlay();
+                this.attachPanel();
+            }, delay);
+        }
+    }
+    scheduleHide(delay) {
+        this.clearShowTimeout();
+        if (!this.isVisible())
+            return;
+        if (delay === 0) {
+            this.detachPanel();
+        }
+        else {
+            this.hideTimeoutId = setTimeout(() => {
+                this.detachPanel();
+            }, delay);
+        }
+    }
+    clearTimers() {
+        this.clearShowTimeout();
+        this.clearHideTimeout();
+        this.clearTouchTimeout();
+    }
+    clearShowTimeout() {
+        if (this.showTimeoutId !== null) {
+            clearTimeout(this.showTimeoutId);
+            this.showTimeoutId = null;
+        }
+    }
+    clearHideTimeout() {
+        if (this.hideTimeoutId !== null) {
+            clearTimeout(this.hideTimeoutId);
+            this.hideTimeoutId = null;
+        }
+    }
+    clearTouchTimeout() {
+        if (this.touchTimeoutId !== null) {
+            clearTimeout(this.touchTimeoutId);
+            this.touchTimeoutId = null;
+        }
+    }
+    // ─── Overlay Management ───
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(buildTooltipPositions(this.comTooltipPosition()))
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(VIEWPORT_MARGIN);
+        const scrollStrategy = this.overlay.scrollStrategies.reposition({ autoClose: true });
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            panelClass: 'com-tooltip-overlay',
+            hasBackdrop: false,
+        });
+        // Track position changes for arrow orientation
+        positionStrategy.positionChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((change) => {
+            const side = deriveSideFromPosition(change.connectionPair);
+            this.activeSide.set(side);
+            if (this.panelInstance) {
+                this.panelInstance.activeSide.set(side);
+            }
+        });
+        // Close when overlay detaches
+        this.overlayRef
+            .detachments()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.handleDetachment();
+        });
+    }
+    attachPanel() {
+        if (!this.overlayRef || this.overlayRef.hasAttached())
+            return;
+        const portal = new ComponentPortal(TooltipPanelComponent, this.viewContainerRef, this.injector);
+        const componentRef = this.overlayRef.attach(portal);
+        this.panelInstance = componentRef.instance;
+        // Configure panel inputs
+        this.panelInstance.textContent.set(this.comTooltip());
+        this.panelInstance.templateRef.set(this.comTooltipTpl());
+        this.panelInstance.color.set(this.comTooltipColor());
+        this.panelInstance.size.set(this.comTooltipSize());
+        this.panelInstance.showArrow.set(this.comTooltipHasArrow());
+        this.panelInstance.activeSide.set(this.activeSide());
+        this.panelInstance.tooltipId.set(this.tooltipId);
+        this.panelInstance.hideFn.set(() => this.hide());
+        // Set up panel mouse events for interactive templates
+        const overlayElement = this.overlayRef.overlayElement;
+        this.renderer.listen(overlayElement, 'mouseenter', () => this.onPanelMouseEnter());
+        this.renderer.listen(overlayElement, 'mouseleave', () => this.onPanelMouseLeave());
+        // Set ARIA on trigger
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-describedby', this.tooltipId);
+        // Trigger show animation after a microtask (allows initial styles to apply)
+        requestAnimationFrame(() => {
+            if (this.panelInstance) {
+                this.panelInstance.visible.set(true);
+            }
+        });
+        this.isVisible.set(true);
+        this.comTooltipShown.emit();
+    }
+    detachPanel() {
+        if (!this.panelInstance)
+            return;
+        // Trigger hide animation
+        this.panelInstance.visible.set(false);
+        // Wait for animation to complete before detaching
+        setTimeout(() => {
+            this.disposeOverlay();
+        }, 80); // Match animation duration
+    }
+    handleDetachment() {
+        // Remove ARIA from trigger
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');
+        this.isVisible.set(false);
+        this.panelInstance = null;
+        this.comTooltipHidden.emit();
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        this.panelInstance = null;
+        this.isVisible.set(false);
+        // Remove ARIA from trigger
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComTooltip, isStandalone: true, selector: "[comTooltip]", inputs: { comTooltip: { classPropertyName: "comTooltip", publicName: "comTooltip", isSignal: true, isRequired: true, transformFunction: null }, comTooltipTpl: { classPropertyName: "comTooltipTpl", publicName: "comTooltipTpl", isSignal: true, isRequired: false, transformFunction: null }, comTooltipPosition: { classPropertyName: "comTooltipPosition", publicName: "comTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, comTooltipShowDelay: { classPropertyName: "comTooltipShowDelay", publicName: "comTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, comTooltipHideDelay: { classPropertyName: "comTooltipHideDelay", publicName: "comTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, comTooltipDisabled: { classPropertyName: "comTooltipDisabled", publicName: "comTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, comTooltipTouchGestures: { classPropertyName: "comTooltipTouchGestures", publicName: "comTooltipTouchGestures", isSignal: true, isRequired: false, transformFunction: null }, comTooltipColor: { classPropertyName: "comTooltipColor", publicName: "comTooltipColor", isSignal: true, isRequired: false, transformFunction: null }, comTooltipSize: { classPropertyName: "comTooltipSize", publicName: "comTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, comTooltipHasArrow: { classPropertyName: "comTooltipHasArrow", publicName: "comTooltipHasArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comTooltipShown: "comTooltipShown", comTooltipHidden: "comTooltipHidden" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscapeKey()", "touchstart": "onTouchStart($event)" } }, exportAs: ["comTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comTooltip]',
+                    exportAs: 'comTooltip',
+                    host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focusin)': 'onFocusIn()',
+                        '(focusout)': 'onFocusOut()',
+                        '(keydown.escape)': 'onEscapeKey()',
+                        '(touchstart)': 'onTouchStart($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { comTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltip", required: true }] }], comTooltipTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipTpl", required: false }] }], comTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipPosition", required: false }] }], comTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipShowDelay", required: false }] }], comTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipHideDelay", required: false }] }], comTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipDisabled", required: false }] }], comTooltipTouchGestures: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipTouchGestures", required: false }] }], comTooltipColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipColor", required: false }] }], comTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipSize", required: false }] }], comTooltipHasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "comTooltipHasArrow", required: false }] }], comTooltipShown: [{ type: i0.Output, args: ["comTooltipShown"] }], comTooltipHidden: [{ type: i0.Output, args: ["comTooltipHidden"] }] } });
+
+// Public API for the tooltip directive
+// Main directive
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComTooltip, tooltipArrowVariants, tooltipPanelVariants };
+//# sourceMappingURL=ngx-com-components-tooltip.mjs.map