@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-tooltip.mjs

@@ -0,0 +1,716 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Renderer2, computed, linkedSignal, viewChild, TemplateRef, input, output, afterRenderEffect, Component, ElementRef, EnvironmentInjector, signal, createComponent, Directive, ChangeDetectionStrategy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { PopupService, fadePopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { take, takeUntil, Subscription, fromEvent, tap } from 'rxjs';
+import { cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+const tooltipBaseVariants = cva(`
+        flex items-center justify-center relative
+        bg-background border border-border
+        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const tooltipArrowVariants = cva(`
+        absolute w-3 h-3 box-border
+        pointer-events-none
+        transform-center rotate-45
+        z-0 bg-background
+
+        border border-border
+
+        data-[position="top"]:-bottom-1.5
+        data-[position="top"]:border-t-0
+        data-[position="top"]:border-l-0
+        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
+
+        data-[position="bottom"]:-top-1.5
+        data-[position="bottom"]:border-b-0
+        data-[position="bottom"]:border-r-0
+        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
+
+        data-[position="left"]:-right-1.5
+        data-[position="left"]:border-l-0
+        data-[position="left"]:border-b-0
+        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
+
+        data-[position="right"]:-left-1.5
+        data-[position="right"]:border-r-0
+        data-[position="right"]:border-t-0
+        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
+    `);
+
+const tooltipBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tooltipBaseVariants;
+        default:
+            return tooltipBaseVariants;
+    }
+};
+const tooltipArrowThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return tooltipArrowVariants;
+        default:
+            return tooltipArrowVariants;
+    }
+};
+
+/**
+ * Derives the tooltip arrow position from a ConnectionPositionPair.
+ * This function determines where the arrow should be positioned based on
+ * how the popup is actually positioned relative to its anchor.
+ */
+function getArrowPositionFromConnectionPair(connectionPair) {
+    const { originX, originY, overlayX, overlayY } = connectionPair;
+    // Tooltip is above the anchor (arrow points down)
+    if (originY === "top" && overlayY === "bottom") {
+        return "top";
+    }
+    // Tooltip is below the anchor (arrow points up)
+    if (originY === "bottom" && overlayY === "top") {
+        return "bottom";
+    }
+    // Tooltip is to the left of the anchor (arrow points right)
+    if (originX === "start" && overlayX === "end") {
+        return "left";
+    }
+    // Tooltip is to the right of the anchor (arrow points left)
+    if (originX === "end" && overlayX === "start") {
+        return "right";
+    }
+    // For center-aligned tooltips, prioritize vertical positioning
+    if (overlayY === "bottom") {
+        return "top";
+    }
+    if (overlayY === "top") {
+        return "bottom";
+    }
+    if (overlayX === "end") {
+        return "left";
+    }
+    if (overlayX === "start") {
+        return "right";
+    }
+    return "top";
+}
+/**
+ * Gets the appropriate offset for a tooltip based on its position.
+ * The offset ensures proper spacing between the tooltip and its anchor element.
+ */
+function getOffsetForPosition(position, arrowVisible) {
+    const arrowOffset = arrowVisible ? 12 : 4;
+    switch (position) {
+        case "top":
+            return { horizontal: 0, vertical: -arrowOffset };
+        case "bottom":
+            return { horizontal: 0, vertical: arrowOffset };
+        case "right":
+            return { horizontal: arrowOffset, vertical: 0 };
+        case "left":
+            return { horizontal: -arrowOffset, vertical: 0 };
+    }
+}
+function getPositionConnectionPoints(position) {
+    switch (position) {
+        case "top":
+            return { anchor: "topcenter", popup: "bottomcenter" };
+        case "bottom":
+            return { anchor: "bottomcenter", popup: "topcenter" };
+        case "right":
+            return { anchor: "centerright", popup: "centerleft" };
+        case "left":
+            return { anchor: "centerleft", popup: "centerright" };
+    }
+}
+
+class TooltipComponent {
+    #destroyRef;
+    #document;
+    #popupService;
+    #renderer;
+    #themeService;
+    #currentAnchor;
+    #eventSubscription;
+    #hideTimeoutId;
+    #mutationObserver;
+    #popupRef;
+    #showTimeoutId;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#popupService = inject(PopupService);
+        this.#renderer = inject(Renderer2);
+        this.#themeService = inject(ThemeService);
+        this.#currentAnchor = null;
+        this.#eventSubscription = null;
+        this.#hideTimeoutId = null;
+        this.#mutationObserver = null;
+        this.#popupRef = null;
+        this.#showTimeoutId = null;
+        this.arrowClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return tooltipArrowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return tooltipBaseThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.currentArrowPosition = linkedSignal(() => this.position(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentArrowPosition" }] : /* istanbul ignore next */ []));
+        this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+        this.tooltipId = createElementControlId();
+        /**
+         * @description Whether the tooltip is disabled. When disabled, the tooltip will not be shown.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the tooltip popup is hidden.
+         */
+        this.hidden = output();
+        /**
+         * @description The delay in milliseconds before hiding the tooltip after the trigger event ends.
+         */
+        this.hideDelay = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The position of the tooltip relative to the target element.
+         */
+        this.position = input("top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The border radius of the tooltip.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The delay in milliseconds before showing the tooltip after the trigger event.
+         */
+        this.showDelay = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the tooltip popup is shown.
+         */
+        this.shown = output();
+        /**
+         * @description The target element(s) to which the tooltip is attached.
+         * Can be an Element, ElementRef, or CSS selector string.
+         */
+        this.target = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        afterRenderEffect({
+            read: () => {
+                this.target();
+                this.position(); // reactive dependency: re-run when position changes
+                this.#currentAnchor = null;
+                this.#popupRef?.close();
+                this.#refreshSubscription();
+                this.#mutationObserver?.disconnect();
+                this.#mutationObserver = null;
+                if (typeof this.target() === "string") {
+                    this.#mutationObserver = new MutationObserver(() => this.#refreshSubscription());
+                    this.#mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
+                }
+            }
+        });
+        this.#destroyRef.onDestroy(() => {
+            if (this.#showTimeoutId != null) {
+                clearTimeout(this.#showTimeoutId);
+                this.#showTimeoutId = null;
+            }
+            if (this.#hideTimeoutId != null) {
+                clearTimeout(this.#hideTimeoutId);
+                this.#hideTimeoutId = null;
+            }
+            this.#mutationObserver?.disconnect();
+            this.#mutationObserver = null;
+            this.#popupRef?.close();
+        });
+    }
+    #createTooltip(anchor) {
+        this.#currentAnchor = anchor;
+        this.currentArrowPosition.set(this.position());
+        const connectionPoints = getPositionConnectionPoints(this.position());
+        const offset = getOffsetForPosition(this.position(), true);
+        const popupRef = this.#popupService.create({
+            anchor,
+            anchorConnectionPoint: connectionPoints.anchor,
+            animation: fadePopupAnimation,
+            closeOnEscape: true,
+            closeOnMouseLeave: false,
+            closeOnOutsideClick: true,
+            content: this.templateRef(),
+            hasBackdrop: false,
+            offset,
+            popupConnectionPoint: connectionPoints.popup,
+            restoreFocus: false,
+            withPush: false
+        });
+        this.#popupRef = popupRef;
+        this.#renderer.setAttribute(anchor, "aria-describedby", this.tooltipId);
+        popupRef.opened.pipe(take(1)).subscribe(() => this.shown.emit());
+        popupRef.closed.pipe(take(1)).subscribe(() => {
+            if (this.#popupRef === popupRef) {
+                this.#popupRef = null;
+                this.#currentAnchor = null;
+            }
+            this.#renderer.removeAttribute(anchor, "aria-describedby");
+            this.hidden.emit();
+        });
+        popupRef.positionChanges
+            .pipe(takeUntil(popupRef.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(connectionPair => {
+            const newArrowPosition = getArrowPositionFromConnectionPair(connectionPair);
+            this.currentArrowPosition.set(newArrowPosition);
+        });
+    }
+    #getAnchorElement(anchor) {
+        if (anchor instanceof HTMLElement) {
+            return anchor;
+        }
+        if (typeof anchor === "object" && "nativeElement" in anchor && anchor.nativeElement instanceof HTMLElement) {
+            return anchor.nativeElement;
+        }
+        return null;
+    }
+    #handleHide() {
+        if (!this.#popupRef) {
+            return;
+        }
+        const hideDelay = this.hideDelay();
+        if (hideDelay > 0) {
+            const popupRef = this.#popupRef;
+            this.#hideTimeoutId = setTimeout(() => {
+                this.#hideTimeoutId = null;
+                if (this.#popupRef === popupRef) {
+                    popupRef.close();
+                }
+            }, hideDelay);
+        }
+        else {
+            this.#popupRef.close();
+        }
+    }
+    #handleShow(element) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.#popupRef && this.#currentAnchor === element) {
+            return;
+        }
+        this.#popupRef?.close();
+        const showDelay = this.showDelay();
+        if (showDelay > 0) {
+            this.#showTimeoutId = setTimeout(() => {
+                this.#showTimeoutId = null;
+                if (!this.#popupRef || this.#currentAnchor !== element) {
+                    this.#createTooltip(element);
+                }
+            }, showDelay);
+        }
+        else {
+            this.#createTooltip(element);
+        }
+    }
+    #refreshSubscription() {
+        this.#eventSubscription?.unsubscribe();
+        this.#eventSubscription = null;
+        const target = this.target();
+        if (typeof target === "string") {
+            const elements = Array.from(this.#document.querySelectorAll(target));
+            const composite = new Subscription();
+            for (const element of elements) {
+                composite.add(this.#subscribeToElement(element));
+            }
+            this.#eventSubscription = composite;
+        }
+        else {
+            const element = this.#getAnchorElement(target);
+            if (element) {
+                this.#eventSubscription = this.#subscribeToElement(element);
+            }
+        }
+    }
+    #subscribeToElement(element) {
+        const composite = new Subscription();
+        composite.add(fromEvent(element, "pointerenter")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#handleShow(element)));
+        composite.add(fromEvent(element, "pointerleave")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#handleHide()));
+        composite.add(fromEvent(element, "focusin")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#handleShow(element)));
+        composite.add(fromEvent(element, "focusout")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#handleHide()));
+        return composite;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipComponent, isStandalone: true, selector: "mona-tooltip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tooltip", template: "<ng-template>\r\n    <div role=\"tooltip\" [id]=\"tooltipId\" [class]=\"baseClasses()\">\r\n        <div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n        <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Output, args: ["hidden"] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }] } });
+
+class TooltipDirective {
+    #destroyRef;
+    #host;
+    #injector;
+    #popupService;
+    #renderer;
+    #currentAnchor;
+    #hideTimeoutId;
+    #mutationObserver;
+    #popupRef;
+    #showTimeoutId;
+    #subscription;
+    #tooltipId;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#host = inject((ElementRef));
+        this.#injector = inject(EnvironmentInjector);
+        this.#popupService = inject(PopupService);
+        this.#renderer = inject(Renderer2);
+        this.#currentAnchor = null;
+        this.#hideTimeoutId = null;
+        this.#mutationObserver = null;
+        this.#popupRef = null;
+        this.#showTimeoutId = null;
+        this.#subscription = null;
+        this.#tooltipId = createElementControlId();
+        this.originalTitle = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originalTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the tooltip is disabled. When disabled, the tooltip will not be shown.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The filter to select elements that will have tooltips.
+         * It can be a CSS selector that matches elements within the host element.
+         * Only applies when `mode` is set to `content`.
+         * @default "[title]"
+         */
+        this.filter = input("[title]", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The delay in milliseconds before hiding the tooltip.
+         * @default 0
+         */
+        this.hideDelay = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The mode of the tooltip.
+         * "host" mode receives the tooltip from the host element's title attribute.
+         * "content" mode uses the title attribute of elements matching the filter.
+         * @default "host"
+         */
+        this.mode = input("host", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The position of the tooltip relative to the target element.
+         * @default "top"
+         */
+        this.position = input("top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The border radius of the tooltip.
+         * @default "medium"
+         */
+        this.rounded = input("medium", { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), alias: "tooltipRounded" });
+        /**
+         * @description The delay in milliseconds before showing the tooltip after the trigger event.
+         * @default 0
+         */
+        this.showDelay = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the tooltip popup is hidden.
+         */
+        this.hidden = output();
+        /**
+         * @description Emitted when the tooltip popup is shown.
+         */
+        this.shown = output();
+        afterRenderEffect({
+            read: () => {
+                this.mode();
+                this.position();
+                this.#currentAnchor = null;
+                this.#popupRef?.close();
+                this.#refreshSubscription();
+                this.#mutationObserver?.disconnect();
+                this.#mutationObserver = null;
+                if (this.mode() === "content") {
+                    this.#mutationObserver = new MutationObserver(() => this.#refreshSubscription());
+                    this.#mutationObserver.observe(this.#host.nativeElement, { childList: true, subtree: true });
+                }
+            }
+        });
+        this.#destroyRef.onDestroy(() => {
+            if (this.#showTimeoutId != null) {
+                clearTimeout(this.#showTimeoutId);
+                this.#showTimeoutId = null;
+            }
+            if (this.#hideTimeoutId != null) {
+                clearTimeout(this.#hideTimeoutId);
+                this.#hideTimeoutId = null;
+            }
+            this.#mutationObserver?.disconnect();
+            this.#mutationObserver = null;
+            this.#popupRef?.close();
+        });
+    }
+    #createTooltip(text, anchor) {
+        this.#currentAnchor = anchor;
+        const component = this.#createTooltipTemplate(text);
+        if (!component) {
+            return;
+        }
+        const connectionPoints = getPositionConnectionPoints(this.position());
+        const offset = getOffsetForPosition(this.position(), true);
+        const popupRef = this.#popupService.create({
+            anchor,
+            anchorConnectionPoint: connectionPoints.anchor,
+            animation: fadePopupAnimation,
+            closeOnEscape: true,
+            closeOnMouseLeave: false,
+            closeOnOutsideClick: true,
+            content: component.instance.templateRef(),
+            hasBackdrop: false,
+            popupConnectionPoint: connectionPoints.popup,
+            offset,
+            restoreFocus: false,
+            withPush: false
+        });
+        this.#popupRef = popupRef;
+        this.#renderer.setAttribute(anchor, "aria-describedby", this.#tooltipId);
+        popupRef.opened.pipe(take(1)).subscribe(() => this.shown.emit());
+        popupRef.positionChanges
+            .pipe(takeUntil(popupRef.closed), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(connectionPair => {
+            const newArrowPosition = getArrowPositionFromConnectionPair(connectionPair);
+            component.instance.currentArrowPosition.set(newArrowPosition);
+        });
+        popupRef.closed.pipe(take(1)).subscribe(() => {
+            if (this.#popupRef === popupRef) {
+                this.#popupRef = null;
+                this.#currentAnchor = null;
+            }
+            this.#renderer.removeAttribute(anchor, "aria-describedby");
+            this.#renderer.setAttribute(anchor, "title", text);
+            component.destroy();
+            this.hidden.emit();
+        });
+    }
+    #createTooltipTemplate(text) {
+        if (!text) {
+            return null;
+        }
+        const component = createComponent(TooltipTemplateComponent, {
+            environmentInjector: this.#injector
+        });
+        component.setInput("content", text);
+        component.setInput("position", this.position());
+        component.setInput("rounded", this.rounded());
+        component.setInput("tooltipId", this.#tooltipId);
+        return component;
+    }
+    #handleHide() {
+        if (!this.#popupRef) {
+            return;
+        }
+        const hideDelay = this.hideDelay();
+        if (hideDelay > 0) {
+            const popupRef = this.#popupRef;
+            this.#hideTimeoutId = setTimeout(() => {
+                this.#hideTimeoutId = null;
+                if (this.#popupRef === popupRef) {
+                    popupRef.close();
+                }
+            }, hideDelay);
+        }
+        else {
+            this.#popupRef.close();
+        }
+    }
+    #handleShow(targetElement) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.#popupRef && this.#currentAnchor === targetElement) {
+            return;
+        }
+        this.#popupRef?.close();
+        const title = targetElement.getAttribute("title") || "";
+        this.#renderer.removeAttribute(targetElement, "title");
+        if (this.mode() === "host") {
+            this.originalTitle.set(title);
+        }
+        if (title) {
+            const showDelay = this.showDelay();
+            if (showDelay > 0) {
+                this.#showTimeoutId = setTimeout(() => {
+                    this.#showTimeoutId = null;
+                    if (!this.#popupRef || this.#currentAnchor !== targetElement) {
+                        this.#createTooltip(title, targetElement);
+                    }
+                }, showDelay);
+            }
+            else {
+                this.#createTooltip(title, targetElement);
+            }
+        }
+    }
+    #refreshSubscription() {
+        if (this.#subscription) {
+            this.#subscription.unsubscribe();
+            this.#subscription = null;
+        }
+        this.#setSubscription();
+    }
+    #setSubscription() {
+        const composite = new Subscription();
+        let elements;
+        if (this.mode() === "host") {
+            elements = [this.#host.nativeElement];
+        }
+        else {
+            elements = Array.from(this.#host.nativeElement.querySelectorAll(this.filter()));
+        }
+        composite.add(fromEvent(elements, "pointerenter")
+            .pipe(tap(event => {
+            const targetElement = event.currentTarget;
+            this.#handleShow(targetElement);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe());
+        composite.add(fromEvent(elements, "pointerleave")
+            .pipe(tap(() => this.#handleHide()), takeUntilDestroyed(this.#destroyRef))
+            .subscribe());
+        composite.add(fromEvent(elements, "focusin")
+            .pipe(tap(event => {
+            const targetElement = event.currentTarget;
+            this.#handleShow(targetElement);
+        }), takeUntilDestroyed(this.#destroyRef))
+            .subscribe());
+        composite.add(fromEvent(elements, "focusout")
+            .pipe(tap(() => this.#handleHide()), takeUntilDestroyed(this.#destroyRef))
+            .subscribe());
+        this.#subscription = composite;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TooltipDirective, isStandalone: true, selector: "[monaTooltip]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "tooltipRounded", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hidden: "hidden", shown: "shown" }, host: { properties: { "attr.data-mona-title": "originalTitle()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaTooltip]",
+                    host: {
+                        "[attr.data-mona-title]": "originalTitle()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipRounded", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hidden: [{ type: i0.Output, args: ["hidden"] }], shown: [{ type: i0.Output, args: ["shown"] }] } });
+class TooltipTemplateComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.arrowClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return tooltipArrowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const userClasses = `p-2`;
+            const variants = tooltipBaseThemeVariants(theme)({ rounded });
+            return twMerge(variants, userClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.currentArrowPosition = linkedSignal(() => this.position(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentArrowPosition" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The text content displayed in the tooltip.
+         */
+        this.content = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The position of the tooltip relative to the target element.
+         */
+        this.position = input("top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The border radius of the tooltip.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The unique id for the tooltip element, used for aria-describedby linkage.
+         */
+        this.tooltipId = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
+        this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TooltipTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TooltipTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    template: `
+        <ng-template>
+            <div role="tooltip" [id]="tooltipId()" [class]="baseClasses()">
+                <div>
+                    {{ content() }}
+                </div>
+                <div [class]="arrowClasses()" [attr.data-position]="currentArrowPosition()"></div>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/tooltip
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TooltipComponent, TooltipDirective, getOffsetForPosition, getPositionConnectionPoints, tooltipArrowThemeVariants };
+//# sourceMappingURL=nanahoshi-mona-ui-tooltip.mjs.map