@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-tooltip.mjs

@@ -0,0 +1,555 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, booleanAttribute, signal, inject, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, Directive } from '@angular/core';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+
+/**
+ * Constants for validation
+ */
+const TOOLTIP_POSITIONS = [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end',
+];
+const TOOLTIP_SIZES = ['sm', 'md', 'lg'];
+const TOOLTIP_TRIGGERS = ['hover', 'focus', 'click', 'manual'];
+
+/**
+ * @component FuiTooltipComponent
+ * @selector fui-tooltip
+ * @description Internal tooltip component rendered by FuiTooltipDirective via the overlay system.
+ * Not intended for direct use; created programmatically by the directive.
+ *
+ * @input content - (required) Tooltip text content.
+ * @input position - (required) Tooltip position relative to the trigger element.
+ * @input size - (required) Tooltip size variant.
+ * @input maxWidth - (required) Maximum CSS width of the tooltip.
+ * @input arrow - (required) Whether to render an arrow indicator.
+ * @input tooltipId - (required) Unique ID for ARIA accessibility linking.
+ *
+ * @example
+ * <!-- Used internally by FuiTooltipDirective -->
+ * <button fuiTooltip="Save your changes">Save</button>
+ *
+ * @internal
+ */
+class FuiTooltipComponent {
+    /**
+     * Tooltip content text
+     */
+    content = input.required(...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /**
+     * Tooltip position
+     */
+    position = input.required(...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Tooltip size
+     */
+    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum width of the tooltip
+     */
+    maxWidth = input.required(...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to show arrow
+     */
+    arrow = input.required(...(ngDevMode ? [{ debugName: "arrow" }] : /* istanbul ignore next */ []));
+    /**
+     * Tooltip ID for accessibility
+     */
+    tooltipId = input.required(...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed CSS classes for the tooltip
+     */
+    computedClasses = computed(() => {
+        const classes = ['fui-tooltip', `fui-tooltip--${this.size()}`, `fui-tooltip--${this.position()}`];
+        if (this.arrow()) {
+            classes.push('fui-tooltip--with-arrow');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed arrow classes based on position
+     */
+    arrowClasses = computed(() => {
+        const position = this.position();
+        const baseClass = 'fui-tooltip__arrow';
+        if (position.startsWith('top')) {
+            return `${baseClass} ${baseClass}--bottom`;
+        }
+        else if (position.startsWith('bottom')) {
+            return `${baseClass} ${baseClass}--top`;
+        }
+        else if (position.startsWith('left')) {
+            return `${baseClass} ${baseClass}--right`;
+        }
+        else if (position.startsWith('right')) {
+            return `${baseClass} ${baseClass}--left`;
+        }
+        return baseClass;
+    }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTooltipComponent, isStandalone: true, selector: "fui-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "computedClasses()", "id": "tooltipId()", "attr.role": "\"tooltip\"", "style.max-width": "maxWidth()" }, classAttribute: "fui-tooltip" }, ngImport: i0, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}::ng-deep .fui-tooltip{--fui-tooltip-border-radius: var(--fui-border-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-03);--fui-tooltip-font-size: var(--fui-font-size-02);--fui-tooltip-padding-x: var(--fui-spacing-04);--fui-tooltip-padding-y: var(--fui-spacing-03);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition:opacity var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast-02) ease-out forwards}::ng-deep .fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}::ng-deep .fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip--right{transform:translate(-50%)}::ng-deep .fui-tooltip--top-start .fui-tooltip__arrow,::ng-deep .fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-tooltip--top-end .fui-tooltip__arrow,::ng-deep .fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-tooltip--left-start .fui-tooltip__arrow,::ng-deep .fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-tooltip--left-end .fui-tooltip__arrow,::ng-deep .fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}::ng-deep .fui-tooltip--sm{font-size:var(--fui-font-size-01)}::ng-deep .fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-02) var(--fui-spacing-03)}::ng-deep .fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}::ng-deep .fui-tooltip--md{font-size:var(--fui-font-size-02)}::ng-deep .fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-03) var(--fui-spacing-04)}::ng-deep .fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}::ng-deep .fui-tooltip--lg{font-size:var(--fui-font-size-03)}::ng-deep .fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-04) var(--fui-spacing-05)}::ng-deep .fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){::ng-deep .fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-tooltip{animation:none;opacity:1}}@media print{::ng-deep .fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-tooltip', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-tooltip',
+                        '[class]': 'computedClasses()',
+                        '[id]': 'tooltipId()',
+                        '[attr.role]': '"tooltip"',
+                        '[style.max-width]': 'maxWidth()',
+                    }, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}::ng-deep .fui-tooltip{--fui-tooltip-border-radius: var(--fui-border-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-03);--fui-tooltip-font-size: var(--fui-font-size-02);--fui-tooltip-padding-x: var(--fui-spacing-04);--fui-tooltip-padding-y: var(--fui-spacing-03);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-family-sans);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-body);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition:opacity var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast-02) ease-out forwards}::ng-deep .fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}::ng-deep .fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}::ng-deep .fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}::ng-deep .fui-tooltip--right{transform:translate(-50%)}::ng-deep .fui-tooltip--top-start .fui-tooltip__arrow,::ng-deep .fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-04);transform:none}::ng-deep .fui-tooltip--top-end .fui-tooltip__arrow,::ng-deep .fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-04);left:auto;transform:none}::ng-deep .fui-tooltip--left-start .fui-tooltip__arrow,::ng-deep .fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-04);transform:none}::ng-deep .fui-tooltip--left-end .fui-tooltip__arrow,::ng-deep .fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-04);top:auto;transform:none}::ng-deep .fui-tooltip--sm{font-size:var(--fui-font-size-01)}::ng-deep .fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-02) var(--fui-spacing-03)}::ng-deep .fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}::ng-deep .fui-tooltip--md{font-size:var(--fui-font-size-02)}::ng-deep .fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-03) var(--fui-spacing-04)}::ng-deep .fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}::ng-deep .fui-tooltip--lg{font-size:var(--fui-font-size-03)}::ng-deep .fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-04) var(--fui-spacing-05)}::ng-deep .fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){::ng-deep .fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-04)}}@media(prefers-reduced-motion:reduce){::ng-deep .fui-tooltip{animation:none;opacity:1}}@media print{::ng-deep .fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: true }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: true }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }] } });
+
+/**
+ * # Tooltip Directive
+ *
+ * A professional tooltip directive that provides contextual information on hover, focus, or click.
+ * Follows Material Design patterns with full accessibility support and advanced positioning.
+ *
+ * ## Features
+ * - Multiple positioning options (12 positions)
+ * - Configurable trigger events (hover, focus, click, manual)
+ * - Multiple variants for different semantic meanings
+ * - Flexible sizing options
+ * - Smart positioning with collision detection
+ * - Customizable delays and animations
+ * - Full accessibility support (ARIA attributes, keyboard navigation)
+ * - Arrow indicator support
+ * - Responsive design with max-width control
+ * - Theme support (light/dark)
+ *
+ * ## Usage
+ *
+ * ### Basic Tooltip
+ * ```html
+ * <button fuiTooltip="Save your changes">Save</button>
+ * ```
+ *
+ * ### Advanced Configuration
+ * ```html
+ * <button fuiTooltip="Delete this item permanently"
+ *         fuiTooltipPosition="top"
+ *         fuiTooltipVariant="error"
+ *         fuiTooltipSize="lg"
+ *         [fuiTooltipShowDelay]="500">
+ *   Delete
+ * </button>
+ * ```
+ *
+ * ### Click Trigger
+ * ```html
+ * <span fuiTooltip="Click to copy"
+ *       fuiTooltipTrigger="click"
+ *       fuiTooltipPosition="bottom">
+ *   📋 Copy to clipboard
+ * </span>
+ * ```
+ *
+ * ### Manual Control
+ * ```html
+ * <div fuiTooltip="Manual tooltip"
+ *      fuiTooltipTrigger="manual"
+ *      [fuiTooltipShow]="showTooltip">
+ *   Hover me
+ * </div>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { FuiTooltipDirective } from '@raintonic/formaui/components/tooltip';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [FuiTooltipDirective],
+ *   template: `
+ *     <button fuiTooltip="This will save your work"
+ *             fuiTooltipPosition="top"
+ *             fuiTooltipVariant="info">
+ *       Save Document
+ *     </button>
+ *   `
+ * })
+ * export class MyComponent { }
+ * ```
+ */
+class FuiTooltipDirective {
+    static _nextId = 0;
+    /**
+     * Tooltip content text
+     */
+    fuiTooltip = input.required(...(ngDevMode ? [{ debugName: "fuiTooltip" }] : /* istanbul ignore next */ []));
+    /**
+     * Tooltip position relative to the trigger element
+     * @default 'top'
+     */
+    fuiTooltipPosition = input('top', { ...(ngDevMode ? { debugName: "fuiTooltipPosition" } : /* istanbul ignore next */ {}), transform: (v) => (TOOLTIP_POSITIONS.includes(v) ? v : 'top') });
+    /**
+     * Tooltip size
+     * @default 'md'
+     */
+    fuiTooltipSize = input('md', { ...(ngDevMode ? { debugName: "fuiTooltipSize" } : /* istanbul ignore next */ {}), transform: (v) => (TOOLTIP_SIZES.includes(v) ? v : 'md') });
+    /**
+     * Tooltip trigger event
+     * @default 'hover'
+     */
+    fuiTooltipTrigger = input('hover', { ...(ngDevMode ? { debugName: "fuiTooltipTrigger" } : /* istanbul ignore next */ {}), transform: (v) => (TOOLTIP_TRIGGERS.includes(v) ? v : 'hover') });
+    /**
+     * Delay before showing tooltip (in milliseconds)
+     * @default 500
+     */
+    fuiTooltipShowDelay = input(500, { ...(ngDevMode ? { debugName: "fuiTooltipShowDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Delay before hiding tooltip (in milliseconds)
+     * @default 0
+     */
+    fuiTooltipHideDelay = input(0, { ...(ngDevMode ? { debugName: "fuiTooltipHideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether the tooltip is disabled
+     * @default false
+     */
+    fuiTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "fuiTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Maximum width of the tooltip
+     * @default '200px'
+     */
+    fuiTooltipMaxWidth = input('200px', ...(ngDevMode ? [{ debugName: "fuiTooltipMaxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Offset distance from the trigger element (in pixels)
+     * @default 8
+     */
+    fuiTooltipOffset = input(8, { ...(ngDevMode ? { debugName: "fuiTooltipOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to show an arrow pointing to the trigger element
+     * @default true
+     */
+    fuiTooltipArrow = input(true, { ...(ngDevMode ? { debugName: "fuiTooltipArrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Manual control for showing/hiding tooltip (only works with trigger="manual")
+     * @default false
+     */
+    fuiTooltipShow = input(false, { ...(ngDevMode ? { debugName: "fuiTooltipShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Internal state
+    _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : /* istanbul ignore next */ []));
+    _tooltipId = signal('', ...(ngDevMode ? [{ debugName: "_tooltipId" }] : /* istanbul ignore next */ []));
+    _overlayRef = null;
+    _tooltipComponent = null;
+    _showTimeout = null;
+    _hideTimeout = null;
+    _isHoveringTooltip = false;
+    // Computed properties
+    isVisible = computed(() => this._isVisible(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+    tooltipId = computed(() => this._tooltipId(), ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+    // Injected dependencies
+    _elementRef = inject(ElementRef);
+    _overlayService = inject(FuiOverlayService);
+    _environmentInjector = inject(EnvironmentInjector);
+    constructor() {
+        // Generate unique tooltip ID
+        this._tooltipId.set(`fui-tooltip-${FuiTooltipDirective._nextId++}`);
+        // Handle manual control
+        effect(() => {
+            if (this.fuiTooltipTrigger() === 'manual') {
+                if (this.fuiTooltipShow()) {
+                    this._showTooltip();
+                }
+                else {
+                    this._hideTooltip();
+                }
+            }
+        });
+        // Handle disabled state
+        effect(() => {
+            if (this.fuiTooltipDisabled() && this._isVisible()) {
+                this._hideTooltip();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._clearTimeouts();
+        this._destroyTooltip();
+    }
+    onMouseEnter() {
+        if (this.fuiTooltipTrigger() === 'hover' && !this.fuiTooltipDisabled()) {
+            this._scheduleShow();
+        }
+    }
+    onMouseLeave() {
+        if (this.fuiTooltipTrigger() === 'hover' && !this.fuiTooltipDisabled()) {
+            this._scheduleHide();
+        }
+    }
+    onFocus() {
+        if ((this.fuiTooltipTrigger() === 'focus' || this.fuiTooltipTrigger() === 'hover') && !this.fuiTooltipDisabled()) {
+            this._scheduleShow();
+        }
+    }
+    onBlur() {
+        if ((this.fuiTooltipTrigger() === 'focus' || this.fuiTooltipTrigger() === 'hover') && !this.fuiTooltipDisabled()) {
+            this._scheduleHide();
+        }
+    }
+    onClick() {
+        if (this.fuiTooltipTrigger() === 'click' && !this.fuiTooltipDisabled()) {
+            if (this._isVisible()) {
+                this._hideTooltip();
+            }
+            else {
+                this._showTooltip();
+            }
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this._isVisible()) {
+            this._hideTooltip();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Programmatically show the tooltip
+     */
+    show() {
+        if (!this.fuiTooltipDisabled()) {
+            this._showTooltip();
+        }
+    }
+    /**
+     * Programmatically hide the tooltip
+     */
+    hide() {
+        this._hideTooltip();
+    }
+    /**
+     * Toggle tooltip visibility
+     */
+    toggle() {
+        if (this._isVisible()) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    _scheduleShow() {
+        this._clearTimeouts();
+        if (this.fuiTooltipShowDelay() > 0) {
+            this._showTimeout = window.setTimeout(() => {
+                this._showTooltip();
+            }, this.fuiTooltipShowDelay());
+        }
+        else {
+            this._showTooltip();
+        }
+    }
+    _scheduleHide() {
+        this._clearTimeouts();
+        if (this.fuiTooltipHideDelay() > 0) {
+            this._hideTimeout = window.setTimeout(() => {
+                if (!this._isHoveringTooltip) {
+                    this._hideTooltip();
+                }
+            }, this.fuiTooltipHideDelay());
+        }
+        else {
+            if (!this._isHoveringTooltip) {
+                this._hideTooltip();
+            }
+        }
+    }
+    _showTooltip() {
+        if (this._isVisible() || this.fuiTooltipDisabled() || !this.fuiTooltip().trim()) {
+            return;
+        }
+        this._createTooltip();
+        this._isVisible.set(true);
+        // Add click outside listener for click trigger
+        if (this.fuiTooltipTrigger() === 'click') {
+            setTimeout(() => {
+                document.addEventListener('click', this._onDocumentClick, true);
+            });
+        }
+    }
+    _hideTooltip() {
+        if (!this._isVisible()) {
+            return;
+        }
+        this._isVisible.set(false);
+        this._destroyTooltip();
+        document.removeEventListener('click', this._onDocumentClick, true);
+    }
+    _createTooltip() {
+        if (this._overlayRef) {
+            return;
+        }
+        // Create tooltip component first
+        this._tooltipComponent = createComponent(FuiTooltipComponent, {
+            environmentInjector: this._environmentInjector,
+        });
+        // Set tooltip properties immediately
+        this._tooltipComponent.setInput('content', this.fuiTooltip());
+        this._tooltipComponent.setInput('position', this.fuiTooltipPosition());
+        this._tooltipComponent.setInput('size', this.fuiTooltipSize());
+        this._tooltipComponent.setInput('maxWidth', this.fuiTooltipMaxWidth());
+        this._tooltipComponent.setInput('arrow', this.fuiTooltipArrow());
+        this._tooltipComponent.setInput('tooltipId', this.tooltipId());
+        // Trigger change detection to ensure component is rendered with correct props
+        this._tooltipComponent.changeDetectorRef.detectChanges();
+        // Now create overlay with positioning strategy
+        const positions = this._getPositionsForTooltipPosition(this.fuiTooltipPosition());
+        const positionStrategy = this._overlayService
+            .position()
+            .connectedTo(this._elementRef, positions)
+            .withPush(true)
+            .withViewportMargin(8);
+        // Create overlay
+        this._overlayRef = this._overlayService.create({
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.reposition(20),
+            panelClass: 'fui-tooltip-panel',
+        });
+        // Attach component to overlay
+        this._overlayRef.attach(this._tooltipComponent);
+        // Set up hover events for tooltip persistence
+        const tooltipElement = this._tooltipComponent.location.nativeElement;
+        tooltipElement.addEventListener('mouseenter', () => {
+            this._isHoveringTooltip = true;
+            this._clearTimeouts();
+        });
+        tooltipElement.addEventListener('mouseleave', () => {
+            this._isHoveringTooltip = false;
+            if (this.fuiTooltipTrigger() === 'hover') {
+                this._scheduleHide();
+            }
+        });
+    }
+    _getPositionsForTooltipPosition(position) {
+        const offset = this.fuiTooltipOffset();
+        const positionMap = {
+            top: [
+                { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+                { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+            ],
+            'top-start': [
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+            ],
+            'top-end': [
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+            ],
+            bottom: [
+                { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: offset },
+                { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset },
+            ],
+            'bottom-start': [
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+            ],
+            'bottom-end': [
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+            ],
+            left: [
+                { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+                { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
+            ],
+            'left-start': [
+                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
+                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
+            ],
+            'left-end': [
+                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset },
+                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
+            ],
+            right: [
+                { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset },
+                { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset },
+            ],
+            'right-start': [
+                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: offset },
+                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -offset },
+            ],
+            'right-end': [
+                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: offset },
+                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -offset },
+            ],
+        };
+        return positionMap[position] || positionMap.top;
+    }
+    _destroyTooltip() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
+        if (this._tooltipComponent) {
+            this._tooltipComponent.destroy();
+            this._tooltipComponent = null;
+        }
+    }
+    _clearTimeouts() {
+        if (this._showTimeout) {
+            clearTimeout(this._showTimeout);
+            this._showTimeout = null;
+        }
+        if (this._hideTimeout) {
+            clearTimeout(this._hideTimeout);
+            this._hideTimeout = null;
+        }
+    }
+    _onDocumentClick = (event) => {
+        const target = event.target;
+        const triggerElement = this._elementRef.nativeElement;
+        const tooltipElement = this._tooltipComponent?.location.nativeElement;
+        if (target && !triggerElement.contains(target) && !tooltipElement?.contains(target)) {
+            this._hideTooltip();
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiTooltipDirective, isStandalone: true, selector: "[fuiTooltip]", inputs: { fuiTooltip: { classPropertyName: "fuiTooltip", publicName: "fuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, fuiTooltipPosition: { classPropertyName: "fuiTooltipPosition", publicName: "fuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipSize: { classPropertyName: "fuiTooltipSize", publicName: "fuiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTrigger: { classPropertyName: "fuiTooltipTrigger", publicName: "fuiTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShowDelay: { classPropertyName: "fuiTooltipShowDelay", publicName: "fuiTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipHideDelay: { classPropertyName: "fuiTooltipHideDelay", publicName: "fuiTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipDisabled: { classPropertyName: "fuiTooltipDisabled", publicName: "fuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipMaxWidth: { classPropertyName: "fuiTooltipMaxWidth", publicName: "fuiTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipOffset: { classPropertyName: "fuiTooltipOffset", publicName: "fuiTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipArrow: { classPropertyName: "fuiTooltipArrow", publicName: "fuiTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShow: { classPropertyName: "fuiTooltipShow", publicName: "fuiTooltipShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "isVisible() ? tooltipId() : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fuiTooltip]',
+                    standalone: true,
+                    host: {
+                        '[attr.aria-describedby]': 'isVisible() ? tooltipId() : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fuiTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltip", required: true }] }], fuiTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipPosition", required: false }] }], fuiTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipSize", required: false }] }], fuiTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipTrigger", required: false }] }], fuiTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShowDelay", required: false }] }], fuiTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipHideDelay", required: false }] }], fuiTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipDisabled", required: false }] }], fuiTooltipMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipMaxWidth", required: false }] }], fuiTooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipOffset", required: false }] }], fuiTooltipArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipArrow", required: false }] }], fuiTooltipShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShow", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+// Public API for tooltip component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiTooltipComponent, FuiTooltipDirective, TOOLTIP_POSITIONS, TOOLTIP_SIZES, TOOLTIP_TRIGGERS };
+//# sourceMappingURL=raintonic-formaui-components-tooltip.mjs.map