@frame-ui-ng/components 0.2.0-beta.0 → 0.4.0-beta.0

package/fesm2022/frame-ui-ng-components-tooltip.mjs

@@ -1,7 +1,9 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, input, booleanAttribute, Directive, ElementRef, output, signal, computed, afterNextRender, ChangeDetectionStrategy, Component, effect, NgModule } from '@angular/core';
-import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { NgTemplateOutlet } from '@angular/common';
+import { inject, DestroyRef, ElementRef, PLATFORM_ID, input, booleanAttribute, numberAttribute, signal, effect, Directive, TemplateRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { parseCssPixelValue, clampNumber } from '@frame-ui-ng/components/utils';
 
 function buildTooltipPositions(options) {
     const primary = buildPosition(options.side, options);
@@ -54,76 +56,7 @@ function oppositeSide(side) {
     return 'left';
 }
 
-const FR_TOOLTIP_CONTROLLER = new InjectionToken('FR_TOOLTIP_CONTROLLER');
-
-let nextTooltipId = 0;
-class FrTooltipContent {
-    templateRef = inject((TemplateRef));
-    id = `frame-tooltip-${nextTooltipId++}`;
-    align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset" }] : /* istanbul ignore next */ []));
-    arrow = input(false, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    side = input('top', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    sideOffset = input(8, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
-    getPositions() {
-        return buildTooltipPositions({
-            align: this.align(),
-            alignOffset: this.alignOffset(),
-            side: this.side(),
-            sideOffset: this.sideOffset(),
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrTooltipContent, isStandalone: true, selector: "ng-template[frTooltipContent]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["frTooltipContent"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipContent, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[frTooltipContent]',
-                    exportAs: 'frTooltipContent',
-                }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
-class FrTooltipPanel {
-    content = inject(FrTooltipContent);
-    root = inject(FR_TOOLTIP_CONTROLLER);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrTooltipPanel, isStandalone: true, selector: "[frTooltipPanel]", host: { attributes: { "role": "tooltip" }, properties: { "id": "content.id", "attr.data-side": "root.overlaySide()", "attr.data-arrow": "content.arrow() ? \"\" : null" }, classAttribute: "frame-tooltip__content" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipPanel, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[frTooltipPanel]',
-                    host: {
-                        class: 'frame-tooltip__content',
-                        role: 'tooltip',
-                        '[id]': 'content.id',
-                        '[attr.data-side]': 'root.overlaySide()',
-                        '[attr.data-arrow]': 'content.arrow() ? "" : null',
-                    },
-                }]
-        }] });
-class FrTooltipShortcut {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrTooltipShortcut, isStandalone: true, selector: "[frTooltipShortcut]", host: { classAttribute: "frame-tooltip__shortcut" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipShortcut, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[frTooltipShortcut]',
-                    host: {
-                        class: 'frame-tooltip__shortcut',
-                    },
-                }]
-        }] });
-
-const DEFAULT_POSITIONS = buildTooltipPositions({
-    align: 'center',
-    alignOffset: 0,
-    side: 'top',
-    sideOffset: 8,
-});
-const TOOLTIP_TOKEN_NAMES = [
+const FR_TOOLTIP_TOKEN_NAMES = [
     '--frame-tooltip-content-bg',
     '--frame-tooltip-content-color',
     '--frame-tooltip-content-border',
@@ -140,34 +73,107 @@ const TOOLTIP_TOKEN_NAMES = [
     '--frame-tooltip-motion-scale',
     '--frame-tooltip-motion-easing',
 ];
-class FrTooltipRoot {
+
+let nextInlineTooltipId = 0;
+class FrTooltipDirective {
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
     elementRef = inject(ElementRef);
-    openDelay = input(700, ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
-    closeDelay = input(0, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
-    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    openChange = output();
+    overlay = inject(Overlay);
+    platformId = inject(PLATFORM_ID);
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'frTooltip' });
+    align = input('center', { ...(ngDevMode ? { debugName: "align" } : /* istanbul ignore next */ {}), alias: 'frTooltipAlign' });
+    alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), alias: 'frTooltipAlignOffset' });
+    arrow = input(false, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), alias: 'frTooltipArrow', transform: booleanAttribute });
+    closeDelay = input(0, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), alias: 'frTooltipCloseDelay' });
+    openDelay = input(0, { ...(ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {}), alias: 'frTooltipOpenDelay', transform: numberAttribute });
+    side = input('top', { ...(ngDevMode ? { debugName: "side" } : /* istanbul ignore next */ {}), alias: 'frTooltipSide' });
+    sideOffset = input(8, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), alias: 'frTooltipSideOffset' });
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-    overlaySide = signal('top', ...(ngDevMode ? [{ debugName: "overlaySide" }] : /* istanbul ignore next */ []));
-    openTimer = null;
+    tooltipId = `frame-tooltip-inline-${nextInlineTooltipId++}`;
     closeTimer = null;
-    triggerElement = null;
-    positions = computed(() => this.content()?.getPositions() ?? DEFAULT_POSITIONS, ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
+    disabledObserver = null;
+    openTimer = null;
+    overlayRef = null;
+    panelRef = null;
+    arrowFrameId = -1;
+    currentSide = this.side();
+    pendingArrowSide = this.side();
+    triggerElement = this.elementRef.nativeElement;
+    wrapped = false;
+    wrapper = null;
+    teardownListeners = [];
     constructor() {
-        afterNextRender(() => {
-            if (this.defaultOpen() || this.debugVisible()) {
-                this.open();
+        this.destroyRef.onDestroy(() => this.destroy());
+        effect(() => {
+            const content = this.content();
+            if (this.panelRef && content) {
+                this.updatePanelInputs();
+            }
+            if (!content) {
+                this.close();
             }
         });
     }
-    registerTrigger(trigger) {
-        this.triggerElement = trigger;
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.ensureDisabledHostWrapper();
+        this.bindTriggerEvents();
+        this.observeDisabledState();
     }
-    setContent(content) {
-        this.content.set(content instanceof FrTooltipContent ? content : null);
+    bindTriggerEvents() {
+        const target = this.triggerElement;
+        this.teardownListeners.push(this.listen(target, 'mouseenter', () => this.openWithDelay()));
+        this.teardownListeners.push(this.listen(target, 'mouseleave', () => this.closeWithDelay()));
+        this.teardownListeners.push(this.listen(target, 'focusin', () => this.openWithDelay()));
+        this.teardownListeners.push(this.listen(target, 'focusout', () => this.closeWithDelay()));
+        this.teardownListeners.push(this.listen(target, 'keydown', (event) => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === 'Escape') {
+                keyboardEvent.preventDefault();
+                this.close();
+            }
+        }));
+    }
+    ensureDisabledHostWrapper() {
+        const element = this.elementRef.nativeElement;
+        if (!('disabled' in element) || !element.hasAttribute('disabled') || this.wrapped) {
+            return;
+        }
+        const parent = element.parentNode;
+        if (!parent) {
+            return;
+        }
+        const wrapper = this.document.createElement('span');
+        wrapper.className = 'frame-tooltip__disabled-trigger';
+        wrapper.tabIndex = 0;
+        parent.insertBefore(wrapper, element);
+        wrapper.appendChild(element);
+        this.triggerElement = wrapper;
+        this.wrapper = wrapper;
+        this.wrapped = true;
+    }
+    observeDisabledState() {
+        const element = this.elementRef.nativeElement;
+        if (!('disabled' in element)) {
+            return;
+        }
+        this.disabledObserver = new MutationObserver(() => {
+            if (!element.hasAttribute('disabled') || this.wrapped) {
+                return;
+            }
+            this.teardownTriggerListeners();
+            this.ensureDisabledHostWrapper();
+            this.bindTriggerEvents();
+        });
+        this.disabledObserver.observe(element, { attributes: true, attributeFilter: ['disabled'] });
     }
     openWithDelay() {
+        if (!this.content()) {
+            return;
+        }
         this.cancelClose();
         this.cancelOpen();
         const delay = Math.max(0, this.openDelay());
@@ -178,9 +184,6 @@ class FrTooltipRoot {
         this.openTimer = setTimeout(() => this.open(), delay);
     }
     closeWithDelay() {
-        if (this.debugVisible()) {
-            return;
-        }
         this.cancelOpen();
         this.cancelClose();
         const delay = Math.max(0, this.closeDelay());
@@ -191,80 +194,97 @@ class FrTooltipRoot {
         this.closeTimer = setTimeout(() => this.close(), delay);
     }
     open() {
-        if (!this.content()) {
+        const content = this.content();
+        if (!content) {
             return;
         }
-        if (!this.isOpen()) {
-            this.isOpen.set(true);
-            this.openChange.emit(true);
-            this.scheduleCustomPropertySync();
+        if (!this.overlayRef) {
+            this.overlayRef = this.createOverlay();
+        }
+        if (!this.overlayRef.hasAttached()) {
+            this.panelRef = this.overlayRef.attach(new ComponentPortal(FrTooltipInlinePanel));
+            this.updatePanelInputs();
+            this.syncCustomPropertiesToOverlay();
+            this.scheduleArrowPosition();
         }
+        this.isOpen.set(true);
     }
     close() {
-        if (this.debugVisible()) {
-            return;
-        }
         this.cancelOpen();
         this.cancelClose();
-        if (this.isOpen()) {
-            this.isOpen.set(false);
-            this.openChange.emit(false);
-        }
+        this.overlayRef?.detach();
+        this.panelRef = null;
+        this.isOpen.set(false);
     }
-    handleOverlayKeydown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.close();
-        }
+    createOverlay() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.triggerElement)
+            .withPositions(this.positions())
+            .withPush(true)
+            .withViewportMargin(8);
+        positionStrategy.positionChanges.subscribe((event) => this.handlePositionChange(event));
+        const overlayRef = this.overlay.create({
+            panelClass: ['frame-tooltip-overlay', `frame-tooltip-overlay--${this.side()}`],
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        return overlayRef;
+    }
+    positions() {
+        return buildTooltipPositions({
+            align: this.align(),
+            alignOffset: this.alignOffset(),
+            side: this.side(),
+            sideOffset: this.sideOffset(),
+        });
     }
     handlePositionChange(event) {
         const pair = event.connectionPair;
-        if (pair.overlayY === 'top') {
-            this.overlaySide.set('bottom');
-            return;
-        }
-        if (pair.overlayY === 'bottom') {
-            this.overlaySide.set('top');
-            return;
-        }
-        this.overlaySide.set(pair.overlayX === 'start' ? 'right' : 'left');
-    }
-    overlayPanelClasses() {
-        return ['frame-tooltip-overlay', `frame-tooltip-overlay--${this.overlaySide()}`];
+        const side = pair.overlayY === 'top'
+            ? 'bottom'
+            : pair.overlayY === 'bottom'
+                ? 'top'
+                : pair.overlayX === 'start'
+                    ? 'right'
+                    : 'left';
+        this.panelRef?.setInput('side', side);
+        this.currentSide = side;
+        this.overlayRef?.removePanelClass(['frame-tooltip-overlay--top', 'frame-tooltip-overlay--right', 'frame-tooltip-overlay--bottom', 'frame-tooltip-overlay--left']);
+        this.overlayRef?.addPanelClass(`frame-tooltip-overlay--${side}`);
+        this.scheduleArrowPosition(side);
     }
-    cancelOpen() {
-        if (this.openTimer) {
-            clearTimeout(this.openTimer);
-            this.openTimer = null;
-        }
-    }
-    cancelClose() {
-        if (this.closeTimer) {
-            clearTimeout(this.closeTimer);
-            this.closeTimer = null;
+    updatePanelInputs() {
+        const panelRef = this.panelRef;
+        if (!panelRef) {
+            return;
         }
+        panelRef.setInput('arrow', this.arrow());
+        panelRef.setInput('content', this.content() ?? '');
+        panelRef.setInput('id', this.tooltipId);
+        panelRef.setInput('side', this.side());
+        this.currentSide = this.side();
     }
     syncCustomPropertiesToOverlay() {
-        const triggerElement = this.triggerElement;
-        const overlayPane = document.querySelector('.cdk-overlay-pane.frame-tooltip-overlay');
+        const overlayPane = this.overlayRef?.overlayElement;
         const panel = overlayPane?.querySelector('.frame-tooltip__content');
-        if (!triggerElement || !overlayPane || !panel) {
+        if (!overlayPane || !panel) {
             return;
         }
         this.copyCustomProperties(this.elementRef.nativeElement, overlayPane, panel);
-        this.copyCustomProperties(triggerElement, overlayPane, panel);
-    }
-    scheduleCustomPropertySync() {
-        queueMicrotask(() => {
-            this.syncCustomPropertiesToOverlay();
-            if (typeof requestAnimationFrame === 'function') {
-                requestAnimationFrame(() => this.syncCustomPropertiesToOverlay());
-            }
-        });
+        if (this.wrapper) {
+            this.copyCustomProperties(this.wrapper, overlayPane, panel);
+        }
     }
     copyCustomProperties(source, overlayPane, panel) {
         const sourceStyles = getComputedStyle(source);
-        for (const propertyName of TOOLTIP_TOKEN_NAMES) {
+        for (const propertyName of FR_TOOLTIP_TOKEN_NAMES) {
             const propertyValue = sourceStyles.getPropertyValue(propertyName);
             if (propertyValue.trim()) {
                 overlayPane.style.setProperty(propertyName, propertyValue);
@@ -281,139 +301,172 @@ class FrTooltipRoot {
             panel.style.setProperty(propertyName, propertyValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipRoot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrTooltipRoot, isStandalone: true, selector: "frame-tooltip", inputs: { openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-tooltip" }, providers: [
-            {
-                provide: FR_TOOLTIP_CONTROLLER,
-                useExisting: FrTooltipRoot,
-            },
-        ], exportAs: ["frTooltip"], ngImport: i0, template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-tooltip__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="8"
-      (detach)="close()"
-      (overlayKeydown)="handleOverlayKeydown($event)"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipRoot, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'frame-tooltip',
-                    exportAs: 'frTooltip',
-                    imports: [CdkConnectedOverlay, CdkOverlayOrigin, NgTemplateOutlet],
-                    providers: [
-                        {
-                            provide: FR_TOOLTIP_CONTROLLER,
-                            useExisting: FrTooltipRoot,
-                        },
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'frame-tooltip',
-                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
-                    },
-                    template: `
-    <span cdkOverlayOrigin #origin="cdkOverlayOrigin" class="frame-tooltip__anchor">
-      <ng-content />
-    </span>
-
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="origin"
-      [cdkConnectedOverlayOpen]="isOpen()"
-      [cdkConnectedOverlayPositions]="positions()"
-      [cdkConnectedOverlayPanelClass]="overlayPanelClasses()"
-      [cdkConnectedOverlayPush]="true"
-      [cdkConnectedOverlayViewportMargin]="8"
-      (detach)="close()"
-      (overlayKeydown)="handleOverlayKeydown($event)"
-      (positionChange)="handlePositionChange($event)"
-    >
-      <ng-container [ngTemplateOutlet]="content()?.templateRef ?? null" />
-    </ng-template>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
-
-class FrTooltipTrigger {
-    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'frTooltipTrigger' });
-    root = inject(FR_TOOLTIP_CONTROLLER);
-    elementRef = inject(ElementRef);
-    constructor() {
-        this.root.registerTrigger(this.elementRef.nativeElement);
-        effect(() => {
-            const content = this.content();
-            if (content) {
-                this.root.setContent(content);
-            }
+    scheduleArrowPosition(side = this.currentSide) {
+        this.pendingArrowSide = side;
+        if (!this.arrow() || this.arrowFrameId !== -1) {
+            return;
+        }
+        this.arrowFrameId = requestAnimationFrame(() => {
+            this.arrowFrameId = -1;
+            this.syncArrowPosition(this.pendingArrowSide);
         });
     }
-    handleMouseEnter() {
-        this.root.setContent(this.content());
-        this.root.openWithDelay();
+    syncArrowPosition(side) {
+        const panel = this.overlayRef?.overlayElement.querySelector('.frame-tooltip__content');
+        if (!panel) {
+            return;
+        }
+        const panelRect = panel.getBoundingClientRect();
+        const triggerRect = this.triggerElement.getBoundingClientRect();
+        if (!panelRect.width || !panelRect.height || !triggerRect.width || !triggerRect.height) {
+            return;
+        }
+        const arrowSize = parseCssPixelValue(getComputedStyle(panel).getPropertyValue('--frame-tooltip-arrow-size'), 8);
+        const edgeInset = arrowSize / 2;
+        if (side === 'top' || side === 'bottom') {
+            const triggerCenter = triggerRect.left + triggerRect.width / 2 - panelRect.left;
+            const arrowX = clampNumber(triggerCenter - arrowSize / 2, edgeInset, panelRect.width - arrowSize - edgeInset);
+            panel.style.setProperty('--frame-tooltip-arrow-x', `${Math.round(arrowX * 100) / 100}px`);
+            return;
+        }
+        const triggerCenter = triggerRect.top + triggerRect.height / 2 - panelRect.top;
+        const arrowY = clampNumber(triggerCenter - arrowSize / 2, edgeInset, panelRect.height - arrowSize - edgeInset);
+        panel.style.setProperty('--frame-tooltip-arrow-y', `${Math.round(arrowY * 100) / 100}px`);
     }
-    handleMouseLeave() {
-        this.root.closeWithDelay();
+    listen(target, eventName, listener) {
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
     }
-    handleFocusIn() {
-        this.root.setContent(this.content());
-        this.root.openWithDelay();
+    cancelOpen() {
+        if (this.openTimer) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    cancelClose() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
     }
-    handleFocusOut() {
-        this.root.closeWithDelay();
+    destroy() {
+        this.close();
+        if (this.arrowFrameId !== -1) {
+            cancelAnimationFrame(this.arrowFrameId);
+            this.arrowFrameId = -1;
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.disabledObserver?.disconnect();
+        this.disabledObserver = null;
+        this.teardownTriggerListeners();
     }
-    handleKeydown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.root.close();
+    teardownTriggerListeners() {
+        for (const teardown of this.teardownListeners) {
+            teardown();
         }
+        this.teardownListeners = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrTooltipTrigger, isStandalone: true, selector: "[frTooltipTrigger]", inputs: { content: { classPropertyName: "content", publicName: "frTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "focusin": "handleFocusIn()", "focusout": "handleFocusOut()", "keydown": "handleKeydown($event)" }, properties: { "attr.aria-describedby": "root.isOpen() ? content()?.id : null", "attr.data-state": "root.isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-tooltip__trigger" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrTooltipDirective, isStandalone: true, selector: "[frTooltip]", inputs: { content: { classPropertyName: "content", publicName: "frTooltip", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "frTooltipAlign", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "frTooltipAlignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "frTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "frTooltipCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "frTooltipOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "frTooltipSide", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "frTooltipSideOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "isOpen() ? tooltipId : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-tooltip__trigger" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[frTooltipTrigger]',
+                    selector: '[frTooltip]',
                     host: {
                         class: 'frame-tooltip__trigger',
-                        '[attr.aria-describedby]': 'root.isOpen() ? content()?.id : null',
-                        '[attr.data-state]': 'root.isOpen() ? "open" : "closed"',
-                        '(mouseenter)': 'handleMouseEnter()',
-                        '(mouseleave)': 'handleMouseLeave()',
-                        '(focusin)': 'handleFocusIn()',
-                        '(focusout)': 'handleFocusOut()',
-                        '(keydown)': 'handleKeydown($event)',
+                        '[attr.aria-describedby]': 'isOpen() ? tooltipId : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltip", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipAlign", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipAlignOffset", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipArrow", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipCloseDelay", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipOpenDelay", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipSide", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipSideOffset", required: false }] }] } });
+class FrTooltipShortcut {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrTooltipShortcut, isStandalone: true, selector: "[frTooltipShortcut]", host: { classAttribute: "frame-tooltip__shortcut" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipShortcut, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frTooltipShortcut]',
+                    host: {
+                        class: 'frame-tooltip__shortcut',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "frTooltipTrigger", required: false }] }] } });
+        }] });
+class FrTooltipInlinePanel {
+    arrow = input(false, { ...(ngDevMode ? { debugName: "arrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    side = input('top', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    templateContent = signal(null, ...(ngDevMode ? [{ debugName: "templateContent" }] : /* istanbul ignore next */ []));
+    textContent = signal('', ...(ngDevMode ? [{ debugName: "textContent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const content = this.content();
+            if (content instanceof TemplateRef) {
+                this.templateContent.set(content);
+                this.textContent.set('');
+                return;
+            }
+            this.templateContent.set(null);
+            this.textContent.set(content ?? '');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipInlinePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrTooltipInlinePanel, isStandalone: true, selector: "frame-tooltip-inline-panel", inputs: { arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="frame-tooltip__content"
+      role="tooltip"
+      [id]="id()"
+      [attr.data-side]="side()"
+      [attr.data-arrow]="arrow() ? '' : null"
+    >
+      @if (templateContent(); as template) {
+        <ng-container [ngTemplateOutlet]="template" />
+      } @else {
+        {{ textContent() }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipInlinePanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'frame-tooltip-inline-panel',
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div
+      class="frame-tooltip__content"
+      role="tooltip"
+      [id]="id()"
+      [attr.data-side]="side()"
+      [attr.data-arrow]="arrow() ? '' : null"
+    >
+      @if (templateContent(); as template) {
+        <ng-container [ngTemplateOutlet]="template" />
+      } @else {
+        {{ textContent() }}
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }] } });
 
 const FR_TOOLTIP_SIDES = ['top', 'right', 'bottom', 'left'];
 const FR_TOOLTIP_ALIGNMENTS = ['start', 'center', 'end'];
 
 class FrTooltipModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipModule, imports: [FrTooltipRoot, FrTooltipTrigger, FrTooltipContent, FrTooltipPanel, FrTooltipShortcut], exports: [FrTooltipRoot, FrTooltipTrigger, FrTooltipContent, FrTooltipPanel, FrTooltipShortcut] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipModule, imports: [FrTooltipDirective, FrTooltipShortcut], exports: [FrTooltipDirective, FrTooltipShortcut] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrTooltipModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [FrTooltipRoot, FrTooltipTrigger, FrTooltipContent, FrTooltipPanel, FrTooltipShortcut],
-                    exports: [FrTooltipRoot, FrTooltipTrigger, FrTooltipContent, FrTooltipPanel, FrTooltipShortcut],
+                    imports: [FrTooltipDirective, FrTooltipShortcut],
+                    exports: [FrTooltipDirective, FrTooltipShortcut],
                 }]
         }] });
 
@@ -421,5 +474,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FR_TOOLTIP_ALIGNMENTS, FR_TOOLTIP_SIDES, FrTooltipRoot as FrTooltip, FrTooltipContent, FrTooltipModule, FrTooltipPanel, FrTooltipShortcut, FrTooltipTrigger };
+export { FR_TOOLTIP_ALIGNMENTS, FR_TOOLTIP_SIDES, FrTooltipDirective, FrTooltipModule, FrTooltipShortcut };
 //# sourceMappingURL=frame-ui-ng-components-tooltip.mjs.map