forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-tooltip.mjs

@@ -0,0 +1,672 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, Injectable, model, input, numberAttribute, booleanAttribute, signal, DestroyRef, Directive, ElementRef, effect } from '@angular/core';
+import { createDefaults, SkipDelayCoordinator, IdGenerator, ANCHORED_POSITIONING_DEFAULTS, injectPrefersReducedMotion, forceCloseWhenDisabled, createHoverIntent, adoptHostId, resolveGraceSide, buildSubmenuGracePolygon, attachPointerGrace, injectOverlayShell, toFloatingPositioner, registerHandle } from 'forty-cdk/core';
+
+const FOR_TOOLTIP_CONTEXT = new InjectionToken('FOR_TOOLTIP_CONTEXT');
+function injectTooltipContext(piece) {
+    const ctx = inject(FOR_TOOLTIP_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/tooltip] ${piece} must be used inside a [forTooltip] element. ` +
+            "If it is declared inside an ng-template, DI resolves at the template's declaration site — " +
+            'not where it is stamped (e.g. via ngTemplateOutlet) — so declare the template inside the ' +
+            '[forTooltip] root.');
+    }
+    return ctx;
+}
+/**
+ * Resolves the trigger's root context: the explicit reference when the
+ * `[forTooltipTrigger]` input carries one, the injected `FOR_TOOLTIP_CONTEXT`
+ * otherwise. The orphan error only fires when neither resolves, on first read
+ * of the returned signal. Must be called in an injection context.
+ */
+function injectTooltipTriggerContext(explicitRoot) {
+    const injected = inject(FOR_TOOLTIP_CONTEXT, { optional: true });
+    return computed(() => {
+        const explicit = explicitRoot();
+        if (explicit !== '') {
+            return explicit;
+        }
+        if (injected) {
+            return injected;
+        }
+        throw new Error('[forty-cdk/tooltip] ForTooltipTrigger could not resolve its [forTooltip] root: ' +
+            'no FOR_TOOLTIP_CONTEXT provider is visible and no explicit root reference was passed. ' +
+            "If this trigger is declared inside an ng-template, DI resolves at the template's declaration " +
+            'site — not where it is stamped — so either declare the template inside the root or pass the ' +
+            'root explicitly: [forTooltipTrigger]="root" with #root="forTooltip".');
+    });
+}
+
+/**
+ * Library fallback for tooltip defaults, read at the root injector when no
+ * consumer has called `provideForTooltipDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_TOOLTIP_FALLBACK_DEFAULTS = {
+    openDelay: 700,
+    closeDelay: 300,
+    skipDelayDuration: 300,
+    side: 'top',
+    align: 'center',
+    sideOffset: 8,
+    collisionPadding: 8,
+    showOnOverflow: false,
+    hoverableContent: false,
+};
+const { token, provideDefaults } = createDefaults('FOR_TOOLTIP_DEFAULTS', FOR_TOOLTIP_FALLBACK_DEFAULTS);
+/** Token holding the resolved tooltip defaults for the current scope. */
+const FOR_TOOLTIP_DEFAULTS = token;
+/**
+ * Per-injector-scope state owned by forty-cdk tooltip. Thin subclass of the
+ * shared `SkipDelayCoordinator` bound to this primitive's own DI token, so
+ * each call to `provideForTooltipDefaults` re-provides it and the
+ * corresponding subtree gets its own skip-delay window, independent from any
+ * hover-card scope. Tooltips inject it on construction.
+ */
+class TooltipCoordinator extends SkipDelayCoordinator {
+    constructor() {
+        super(inject(FOR_TOOLTIP_DEFAULTS));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipCoordinator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipCoordinator, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TooltipCoordinator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Configures forty-cdk tooltip defaults for this injector scope.
+ * Partial overrides inherit unspecified keys from the parent scope (or
+ * library defaults at the root). Each call establishes a new
+ * coordinator scope: peer tooltips inside the scope share a skip-delay
+ * window; tooltips in other scopes don't.
+ *
+ * @example
+ * ```ts
+ * // application-level
+ * bootstrapApplication(App, {
+ *   providers: [provideForTooltipDefaults({ openDelay: 500 })],
+ * });
+ *
+ * // component-level override (e.g. a toolbar with its own cadence)
+ * @Component({
+ *   providers: [provideForTooltipDefaults({ skipDelayDuration: 100 })],
+ *   ...
+ * })
+ * class Toolbar {}
+ * ```
+ */
+function provideForTooltipDefaults(defaults = {}) {
+    return [...provideDefaults(defaults), TooltipCoordinator];
+}
+
+/**
+ * Headless implementation of the [WAI-ARIA Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/).
+ *
+ * Wrapper directive that owns open / closed state, hover / focus delays, and
+ * placement. Provides the shared context to `ForTooltipTrigger`,
+ * `ForTooltipContent`, and the optional `ForTooltipArrow`.
+ *
+ * Tooltip content is portaled to `document.body` and positioned via
+ * `@floating-ui/dom`. Per APG, content must NOT be interactive — for
+ * interactive popups use a Popover primitive (not yet shipped).
+ */
+class ForTooltip {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_TOOLTIP_DEFAULTS);
+    /**
+     * Two-way bindable. Whether the tooltip is currently shown. The `model()`
+     * change emitter (`(openChange)`) fires only on internal transitions
+     * (hover/focus delays, Escape, and the force-close that runs when `disabled`
+     * flips to true), never on consumer writes through `[(open)]` — observe
+     * state changes without binding back.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-tooltip override for the side the tooltip is anchored to. Pair with
+     * `align` for the full positioning API. When `undefined` (default), falls
+     * back to `ForTooltipDefaults.side` from the surrounding
+     * `provideForTooltipDefaults` scope (`'top'` unless configured).
+     *
+     * The input is aliased to `side`; consumers bind `[side]="..."` and read
+     * the effective value via the public `side` computed below.
+     */
+    _sideInput = input(undefined, { ...(ngDevMode ? { debugName: "_sideInput" } : /* istanbul ignore next */ {}), alias: 'side' });
+    /** Effective anchor side: the `side` input when set, else the scope default. */
+    side = computed(() => this._sideInput() ?? this.#defaults.side, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-tooltip override for the alignment along the chosen `side`. When
+     * `undefined` (default), falls back to `ForTooltipDefaults.align` from the
+     * surrounding `provideForTooltipDefaults` scope (`'center'` unless
+     * configured).
+     *
+     * The input is aliased to `align`; consumers bind `[align]="..."` and read
+     * the effective value via the public `align` computed below.
+     */
+    _alignInput = input(undefined, { ...(ngDevMode ? { debugName: "_alignInput" } : /* istanbul ignore next */ {}), alias: 'align' });
+    /** Effective alignment: the `align` input when set, else the scope default. */
+    align = computed(() => this._alignInput() ?? this.#defaults.align, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-tooltip override for the gap (px) between trigger and content along
+     * the main axis. When `undefined` (default),
+     * falls back to `ForTooltipDefaults.sideOffset` from the surrounding
+     * `provideForTooltipDefaults` scope (`8` unless configured).
+     *
+     * The input is aliased to `sideOffset`; consumers bind `[sideOffset]="..."`
+     * and read the effective value via the public `sideOffset` computed below.
+     */
+    _sideOffsetInput = input(undefined, { ...(ngDevMode ? { debugName: "_sideOffsetInput" } : /* istanbul ignore next */ {}), alias: 'sideOffset',
+        transform: (v) => (v == null ? undefined : numberAttribute(v)) });
+    /** Effective main-axis gap (px): the `sideOffset` input when set, else the scope default. */
+    sideOffset = computed(() => this._sideOffsetInput() ?? this.#defaults.sideOffset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    /** Gap (px) along the cross axis (parallel to `side`). Default `0`. */
+    alignOffset = input(ANCHORED_POSITIONING_DEFAULTS.alignOffset, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * When `true` (default), `flip` and `shift` keep the tooltip inside the
+     * viewport. Disable for strict positioning where overflow is acceptable.
+     */
+    avoidCollisions = input(ANCHORED_POSITIONING_DEFAULTS.avoidCollisions, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Per-tooltip override for the padding (px) applied uniformly to the
+     * `flip`, `shift`, and `size` middlewares. When `undefined` (default),
+     * falls back to `ForTooltipDefaults.collisionPadding` from the surrounding
+     * `provideForTooltipDefaults` scope (`8` unless configured).
+     *
+     * The input is aliased to `collisionPadding`; consumers bind
+     * `[collisionPadding]="..."` and read the effective value via the public
+     * `collisionPadding` computed below.
+     */
+    _collisionPaddingInput = input(undefined, { ...(ngDevMode ? { debugName: "_collisionPaddingInput" } : /* istanbul ignore next */ {}), alias: 'collisionPadding',
+        transform: (v) => (v == null ? undefined : numberAttribute(v)) });
+    /** Effective collision padding (px): the `collisionPadding` input when set, else the scope default. */
+    collisionPadding = computed(() => this._collisionPaddingInput() ?? this.#defaults.collisionPadding, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+    /** Padding (px) for the `arrow` middleware. Default `0`. */
+    arrowPadding = input(ANCHORED_POSITIONING_DEFAULTS.arrowPadding, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Stickiness behaviour for `shift`. `'partial'` (default) lets the
+     * tooltip shift to stay visible. `'always'` keeps the requested
+     * placement even off-screen.
+     */
+    sticky = input(ANCHORED_POSITIONING_DEFAULTS.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, sets `data-detached=""` while the trigger has scrolled
+     * off all clipping ancestors.
+     */
+    hideWhenDetached = input(ANCHORED_POSITIONING_DEFAULTS.hideWhenDetached, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When `true` (default), the content is clipped until floating-ui resolves
+     * its first position, preventing a flash at the viewport corner. Set to
+     * `false` so a dramatic `animate.enter` plays from its first frame (the
+     * surface may flash briefly at the unresolved position while positioning
+     * computes).
+     */
+    clipUntilPositioned = input(ANCHORED_POSITIONING_DEFAULTS.clipUntilPositioned, { ...(ngDevMode ? { debugName: "clipUntilPositioned" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Per-tooltip override for the open delay (ms). When `undefined`
+     * (default), falls back to `ForTooltipDefaults.openDelay` from the
+     * surrounding `provideForTooltipDefaults` scope (700ms unless configured).
+     */
+    openDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-tooltip override for the close delay (ms) after hover or focus
+     * leaves. `Escape` ignores this. When `undefined` (default), falls back to
+     * `ForTooltipDefaults.closeDelay` from the surrounding
+     * `provideForTooltipDefaults` scope (300ms unless configured).
+     */
+    closeDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    /** When true, all hover / focus interaction is ignored and any open tooltip is forced closed. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Per-tooltip override for whether the tooltip shows only when the
+     * trigger's own text is truncated (`scrollWidth > clientWidth`) — the
+     * common pattern for ellipsized labels where the tooltip adds nothing once
+     * the full text is visible. When `undefined` (default), falls back to
+     * `ForTooltipDefaults.showOnOverflow` from the surrounding
+     * `provideForTooltipDefaults` scope (`false` unless configured).
+     *
+     * The input is aliased to `showOnOverflow`; consumers bind
+     * `[showOnOverflow]="..."` (or the bare attribute) and read the effective
+     * value via the public `showOnOverflow` computed below.
+     */
+    _showOnOverflowInput = input(undefined, { ...(ngDevMode ? { debugName: "_showOnOverflowInput" } : /* istanbul ignore next */ {}), alias: 'showOnOverflow',
+        transform: (v) => (v == null ? undefined : booleanAttribute(v)) });
+    /** Effective overflow gate: the `showOnOverflow` input when set, else the scope default. */
+    showOnOverflow = computed(() => this._showOnOverflowInput() ?? this.#defaults.showOnOverflow, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showOnOverflow" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-tooltip override for whether the pointer may move into the content
+     * without dismissing the tooltip. When `true`, the content drops its
+     * default `pointer-events: none` while open and a pointer-grace "safe
+     * triangle" bridges the gap between trigger and content so a slow diagonal
+     * traversal doesn't close it. When `undefined` (default), falls back to
+     * `ForTooltipDefaults.hoverableContent` from the surrounding
+     * `provideForTooltipDefaults` scope (`false` unless configured).
+     *
+     * Per APG the content must stay non-interactive; this only allows the
+     * pointer to rest over descriptive text (e.g. to select it).
+     *
+     * The input is aliased to `hoverableContent`; consumers bind
+     * `[hoverableContent]="..."` (or the bare attribute) and read the effective
+     * value via the public `hoverableContent` computed below.
+     */
+    _hoverableContentInput = input(undefined, { ...(ngDevMode ? { debugName: "_hoverableContentInput" } : /* istanbul ignore next */ {}), alias: 'hoverableContent',
+        transform: (v) => (v == null ? undefined : booleanAttribute(v)) });
+    /** Effective hoverable-content flag: the `hoverableContent` input when set, else the scope default. */
+    hoverableContent = computed(() => this._hoverableContentInput() ?? this.#defaults.hoverableContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverableContent" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the user has requested reduced motion via the OS
+     * `prefers-reduced-motion: reduce` media query. Reflected as the boolean
+     * `data-reduced-motion` attribute on the root and content so consumers can
+     * disable their own `animate.enter` / `animate.leave` and CSS transitions
+     * without re-deriving the media query. Tooltip's JS-coordinated timing (the
+     * open / close hover-intent delays) is intent debouncing, not motion, so it
+     * is deliberately unchanged under reduced motion.
+     */
+    reducedMotion = injectPrefersReducedMotion();
+    #generatedTriggerId = this.#idGen.next('for-tooltip-trigger');
+    /**
+     * Id of the trigger element. A consumer-set `id` on the trigger host is
+     * adopted at registration and preserved; the generated
+     * `for-tooltip-trigger-*` id is only assigned when the host has none.
+     */
+    triggerId = signal(this.#generatedTriggerId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    /** Generated id of the content element, wired to the trigger's `aria-describedby` while open. */
+    contentId = signal(this.#idGen.next('for-tooltip-content'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    #triggerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#triggerEl" }] : /* istanbul ignore next */ []));
+    trigger = this.#triggerEl.asReadonly();
+    #contentEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#contentEl" }] : /* istanbul ignore next */ []));
+    #arrowEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#arrowEl" }] : /* istanbul ignore next */ []));
+    arrow = this.#arrowEl.asReadonly();
+    #coordinator = inject(TooltipCoordinator);
+    #hoverIntent;
+    #triggerHovered = false;
+    #triggerFocused = false;
+    #contentHovered = false;
+    #detachGrace = null;
+    constructor() {
+        forceCloseWhenDisabled({
+            open: this.open,
+            disabled: this.disabled,
+            onForceClose: () => this.cancelPending(),
+        });
+        this.#hoverIntent = createHoverIntent({
+            open: this.open,
+            isDisabled: () => this.disabled(),
+            openDelay: () => this.openDelay() ?? this.#coordinator.openDelay,
+            closeDelay: () => this.closeDelay() ?? this.#coordinator.closeDelay,
+            coordinator: this.#coordinator,
+        });
+        inject(DestroyRef).onDestroy(() => this.cancelPending());
+    }
+    /**
+     * Registers the trigger host element. Adopts a pre-existing consumer-set
+     * `id` as the trigger id so external references (anchors, `aria-labelledby`,
+     * label `for`) keep resolving; falls back to the generated id otherwise.
+     */
+    registerTrigger(el) {
+        adoptHostId(el, this.triggerId);
+        this.#triggerEl.set(el);
+    }
+    unregisterTrigger(el) {
+        if (this.#triggerEl() === el) {
+            this.#triggerEl.set(null);
+        }
+    }
+    /** Registers the content host element so the hoverable-content grace polygon can measure it. */
+    registerContent(el) {
+        this.#contentEl.set(el);
+    }
+    unregisterContent(el) {
+        if (this.#contentEl() === el) {
+            this.#contentEl.set(null);
+        }
+    }
+    /** Adopts a consumer-set static `id` on the content host into `contentId`. */
+    adoptContentId(el) {
+        adoptHostId(el, this.contentId);
+    }
+    registerArrow(el) {
+        this.#arrowEl.set(el);
+    }
+    unregisterArrow(el) {
+        if (this.#arrowEl() === el) {
+            this.#arrowEl.set(null);
+        }
+    }
+    pointerEnterTrigger() {
+        this.#triggerHovered = true;
+        this.#disarmContentGrace();
+        if (this.#suppressedByOverflow()) {
+            return;
+        }
+        this.#hoverIntent.scheduleOpen();
+    }
+    pointerLeaveTrigger(cursor) {
+        this.#triggerHovered = false;
+        if (this.#triggerFocused) {
+            return;
+        }
+        if (this.hoverableContent() && this.open() && this.#contentEl()) {
+            this.#armContentGrace(cursor);
+            return;
+        }
+        this.#scheduleCloseIfInactive();
+    }
+    focusTrigger() {
+        this.#triggerFocused = true;
+        if (this.#suppressedByOverflow()) {
+            return;
+        }
+        this.#hoverIntent.scheduleOpen();
+    }
+    blurTrigger() {
+        this.#triggerFocused = false;
+        this.#scheduleCloseIfInactive();
+    }
+    pointerEnterContent() {
+        if (!this.hoverableContent()) {
+            return;
+        }
+        this.#contentHovered = true;
+        this.#disarmContentGrace();
+        this.#hoverIntent.cancelPending();
+    }
+    pointerLeaveContent() {
+        if (!this.hoverableContent()) {
+            return;
+        }
+        this.#contentHovered = false;
+        this.#scheduleCloseIfInactive();
+    }
+    scheduleOpen(_reason) {
+        this.#hoverIntent.scheduleOpen();
+    }
+    scheduleClose(reason) {
+        this.#disarmContentGrace();
+        this.#hoverIntent.scheduleClose(reason === 'escape');
+    }
+    cancelPending() {
+        this.#disarmContentGrace();
+        this.#hoverIntent.cancelPending();
+    }
+    /**
+     * Imperatively opens the tooltip — for programmatic control beyond hover and
+     * focus (e.g. a design-system wrapper driving the tooltip from a
+     * text-truncation observer). Schedules the show after the resolved
+     * `openDelay` (instant when the delay is `0` or the scope's skip-delay window
+     * is active) and applies the same gates as a hover / focus open: a no-op
+     * while `disabled`, and a no-op under `showOnOverflow` when the trigger's own
+     * text is not truncated. For an instant, unconditional open that bypasses the
+     * delay and both gates, write the `[(open)]` model directly (`open.set(true)`).
+     */
+    show() {
+        if (this.#suppressedByOverflow()) {
+            return;
+        }
+        this.#hoverIntent.scheduleOpen();
+    }
+    /**
+     * Imperatively closes the tooltip, mirroring a hover-leave / blur close:
+     * schedules the hide after the resolved `closeDelay` (instant when the delay
+     * is `0`) and disarms the hoverable-content grace bridge. For an instant
+     * close that ignores `closeDelay`, write the `[(open)]` model directly
+     * (`open.set(false)`).
+     */
+    hide() {
+        this.scheduleClose('hover');
+    }
+    /** Close only when no keep-alive source (trigger hover/focus, content hover) is active. */
+    #scheduleCloseIfInactive() {
+        if (this.#triggerHovered || this.#triggerFocused || this.#contentHovered) {
+            return;
+        }
+        this.#hoverIntent.scheduleClose(false);
+    }
+    /** True when `showOnOverflow` is on and the trigger's text is NOT truncated. */
+    #suppressedByOverflow() {
+        if (!this.showOnOverflow()) {
+            return false;
+        }
+        const el = this.#triggerEl();
+        return el !== null && el.scrollWidth <= el.clientWidth;
+    }
+    /**
+     * Arms a pointer-grace "safe triangle" from `cursor` toward the content so
+     * the pointer can travel across the trigger / content gap without closing.
+     * On exit (or when content hover takes over) the grace disarms and a close
+     * is scheduled if nothing else keeps the tooltip alive.
+     */
+    #armContentGrace(cursor) {
+        const content = this.#contentEl();
+        if (!content) {
+            this.#scheduleCloseIfInactive();
+            return;
+        }
+        const rect = content.getBoundingClientRect();
+        const trigger = this.#triggerEl();
+        const side = trigger ? resolveGraceSide(trigger.getBoundingClientRect(), rect) : this.side();
+        const polygon = buildSubmenuGracePolygon(cursor, rect, side);
+        this.#disarmContentGrace();
+        this.#detachGrace = attachPointerGrace(content.ownerDocument, polygon, () => {
+            this.#disarmContentGrace();
+            this.#scheduleCloseIfInactive();
+        });
+    }
+    #disarmContentGrace() {
+        if (this.#detachGrace) {
+            this.#detachGrace();
+            this.#detachGrace = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTooltip, isStandalone: true, selector: "[forTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, _sideInput: { classPropertyName: "_sideInput", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, _alignInput: { classPropertyName: "_alignInput", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, _sideOffsetInput: { classPropertyName: "_sideOffsetInput", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, _collisionPaddingInput: { classPropertyName: "_collisionPaddingInput", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, clipUntilPositioned: { classPropertyName: "clipUntilPositioned", publicName: "clipUntilPositioned", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _showOnOverflowInput: { classPropertyName: "_showOnOverflowInput", publicName: "showOnOverflow", isSignal: true, isRequired: false, transformFunction: null }, _hoverableContentInput: { classPropertyName: "_hoverableContentInput", publicName: "hoverableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-reduced-motion": "reducedMotion() ? \"\" : null" } }, providers: [{ provide: FOR_TOOLTIP_CONTEXT, useExisting: ForTooltip }], exportAs: ["forTooltip"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTooltip]',
+                    exportAs: 'forTooltip',
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-reduced-motion]': 'reducedMotion() ? "" : null',
+                    },
+                    providers: [{ provide: FOR_TOOLTIP_CONTEXT, useExisting: ForTooltip }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], _sideInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], _alignInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], _sideOffsetInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], _collisionPaddingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], clipUntilPositioned: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipUntilPositioned", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _showOnOverflowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnOverflow", required: false }] }], _hoverableContentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverableContent", required: false }] }] } });
+
+/**
+ * Element that activates the tooltip on mouse hover or keyboard focus. Apply on
+ * a focusable element — preferably a `<button>` so keyboard users can reach it.
+ * Receives `aria-describedby` only while the tooltip is open, per APG.
+ *
+ * A touch tap does NOT open the tooltip: touch pointers are filtered out of
+ * both the hover-open path and the focus-open path, because a tap is not a
+ * hover and the APG flags hover-tooltips as problematic on touch (no hover, no
+ * separate focus affordance, no obvious dismiss). Keyboard focus stays the
+ * touch-accessible fallback for descriptive content.
+ *
+ * The root is normally resolved via DI from the enclosing `[forTooltip]`.
+ * When the trigger is declared inside an `ng-template` stamped into the root
+ * (e.g. via `ngTemplateOutlet`), DI resolves at the template's declaration
+ * site and misses the root — pass it explicitly through the selector input,
+ * `routerLink`-style: `[forTooltipTrigger]="root"` with `#root="forTooltip"`.
+ */
+class ForTooltipTrigger {
+    #host = inject(ElementRef);
+    /**
+     * Optional explicit reference to the `[forTooltip]` root, named after the
+     * selector `routerLink`-style. The bare valueless attribute keeps resolving
+     * the enclosing root via DI; pass the root explicitly
+     * (`[forTooltipTrigger]="root"`, with `#root="forTooltip"`) when the trigger
+     * is declared in an `ng-template` stamped inside the root — DI resolves at
+     * the template's declaration site, so the enclosing root is invisible there.
+     * The empty string (what the valueless attribute yields) is treated as unset.
+     */
+    forTooltipTrigger = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forTooltipTrigger" }] : /* istanbul ignore next */ []));
+    ctx = injectTooltipTriggerContext(this.forTooltipTrigger);
+    #lastPointerType = null;
+    constructor() {
+        const el = this.#host.nativeElement;
+        // Registration is an imperative call into the resolved root's registry,
+        // not state derivation — the effect only re-registers the element when the
+        // resolved root changes (explicit reference swapped at runtime).
+        effect((onCleanup) => {
+            const ctx = this.ctx();
+            ctx.registerTrigger(el);
+            onCleanup(() => ctx.unregisterTrigger(el));
+        });
+    }
+    onPointerEnter(event) {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        this.ctx().pointerEnterTrigger();
+    }
+    onPointerDown(event) {
+        this.#lastPointerType = event.pointerType;
+    }
+    onPointerLeave(event) {
+        this.ctx().pointerLeaveTrigger({ x: event.clientX, y: event.clientY });
+    }
+    onFocus() {
+        const touchInduced = this.#lastPointerType === 'touch';
+        this.#lastPointerType = null;
+        if (touchInduced) {
+            return;
+        }
+        this.ctx().focusTrigger();
+    }
+    onBlur() {
+        this.#lastPointerType = null;
+        this.ctx().blurTrigger();
+    }
+    onEscape(event) {
+        if (this.ctx().open()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.ctx().scheduleClose('escape');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTooltipTrigger, isStandalone: true, selector: "[forTooltipTrigger]", inputs: { forTooltipTrigger: { classPropertyName: "forTooltipTrigger", publicName: "forTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerdown": "onPointerDown($event)", "pointerleave": "onPointerLeave($event)", "focus": "onFocus()", "blur": "onBlur()", "keydown.escape": "onEscape($event)" }, properties: { "id": "ctx().triggerId()", "attr.aria-describedby": "ctx().open() ? ctx().contentId() : null", "attr.data-state": "ctx().open() ? \"open\" : \"closed\"" } }, exportAs: ["forTooltipTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTooltipTrigger]',
+                    exportAs: 'forTooltipTrigger',
+                    host: {
+                        '[id]': 'ctx().triggerId()',
+                        '[attr.aria-describedby]': 'ctx().open() ? ctx().contentId() : null',
+                        '[attr.data-state]': 'ctx().open() ? "open" : "closed"',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(keydown.escape)': 'onEscape($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "forTooltipTrigger", required: false }] }] } });
+
+/**
+ * The tooltip bubble. Carries `role="tooltip"`, is portaled to
+ * `document.body`, and is positioned by `@floating-ui/dom` (via the shared
+ * `injectOverlayShell` helper) while mounted.
+ *
+ * Default `pointer-events: none` is applied via host styles so the bubble
+ * layers above content without intercepting hover. When the root opts in with
+ * `hoverableContent`, `pointer-events` is dropped while open so the pointer
+ * can rest over the bubble without dismissing it. Override with your own CSS
+ * if needed — but per APG, do not put interactive elements inside.
+ *
+ * The directive does not manage DOM presence — wrap with
+ * `@if (tip.open())` (using a template ref on `[forTooltip]`) so the
+ * bubble mounts and unmounts with the open state and `animate.enter` /
+ * `animate.leave` work natively.
+ *
+ * Tooltips have no dismissable layer (Escape is a tooltip controller
+ * concern, not an outside-pointer/focus one), no initial focus move, and
+ * no return focus on destroy — only the floating positioner is wired.
+ */
+class ForTooltipContent {
+    ctx = injectTooltipContext('ForTooltipContent');
+    constructor() {
+        const el = inject(ElementRef).nativeElement;
+        this.ctx.adoptContentId(el);
+        this.ctx.registerContent(el);
+        inject(DestroyRef).onDestroy(() => this.ctx.unregisterContent(el));
+        injectOverlayShell({
+            positioner: toFloatingPositioner(this.ctx, this.ctx.trigger),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTooltipContent, isStandalone: true, selector: "[forTooltipContent]", host: { attributes: { "role": "tooltip" }, listeners: { "pointerenter": "ctx.pointerEnterContent()", "pointerleave": "ctx.pointerLeaveContent()" }, properties: { "id": "ctx.contentId()", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"", "attr.data-reduced-motion": "ctx.reducedMotion() ? \"\" : null", "style.pointer-events": "ctx.hoverableContent() ? null : \"none\"" } }, exportAs: ["forTooltipContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTooltipContent]',
+                    exportAs: 'forTooltipContent',
+                    host: {
+                        role: 'tooltip',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                        '[attr.data-reduced-motion]': 'ctx.reducedMotion() ? "" : null',
+                        '[style.pointer-events]': 'ctx.hoverableContent() ? null : "none"',
+                        '(pointerenter)': 'ctx.pointerEnterContent()',
+                        '(pointerleave)': 'ctx.pointerLeaveContent()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional visual arrow inside `ForTooltipContent`. Registers itself with
+ * the tooltip context so floating-ui's `arrow` middleware can position it
+ * along the bubble edge that points at the trigger. Style size and color
+ * yourself — the directive only sets `position`, `left`/`top`, and the
+ * opposite-side offset.
+ */
+class ForTooltipArrow {
+    #ctx = injectTooltipContext('ForTooltipArrow');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.#ctx.registerArrow(el), (el) => this.#ctx.unregisterArrow(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTooltipArrow, isStandalone: true, selector: "[forTooltipArrow]", host: { attributes: { "aria-hidden": "true", "data-tooltip-arrow": "" } }, exportAs: ["forTooltipArrow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTooltipArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTooltipArrow]',
+                    exportAs: 'forTooltipArrow',
+                    host: {
+                        'aria-hidden': 'true',
+                        'data-tooltip-arrow': '',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_TOOLTIP_CONTEXT, FOR_TOOLTIP_DEFAULTS, ForTooltip, ForTooltipArrow, ForTooltipContent, ForTooltipTrigger, provideForTooltipDefaults };
+//# sourceMappingURL=forty-cdk-tooltip.mjs.map