forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-popover.mjs

@@ -0,0 +1,698 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, model, input, numberAttribute, booleanAttribute, output, signal, Directive, ElementRef, effect } from '@angular/core';
+import { createDefaults, IdGenerator, ANCHORED_POSITIONING_DEFAULTS, injectPrefersReducedMotion, adoptHostId, emitVetoableNativeEvent, emitVetoableEvent, reflectDisabled, registerHandle, injectOverlayShell, toFloatingPositioner, registerA11yName, registerA11yDescription } from 'forty-cdk/core';
+
+const FOR_POPOVER_CONTEXT = new InjectionToken('FOR_POPOVER_CONTEXT');
+function injectPopoverContext(piece) {
+    const ctx = inject(FOR_POPOVER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/popover] ${piece} must be used inside a [forPopover] 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 ' +
+            '[forPopover] root.');
+    }
+    return ctx;
+}
+/**
+ * Resolves the trigger's root context: the explicit reference when the
+ * `[forPopoverTrigger]` input carries one, the injected `FOR_POPOVER_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 injectPopoverTriggerContext(explicitRoot) {
+    const injected = inject(FOR_POPOVER_CONTEXT, { optional: true });
+    return computed(() => {
+        const explicit = explicitRoot();
+        if (explicit !== '') {
+            return explicit;
+        }
+        if (injected) {
+            return injected;
+        }
+        throw new Error('[forty-cdk/popover] ForPopoverTrigger could not resolve its [forPopover] root: ' +
+            'no FOR_POPOVER_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: [forPopoverTrigger]="root" with #root="forPopover".');
+    });
+}
+
+/**
+ * Library fallback for popover defaults, read at the root injector when no
+ * consumer has called `provideForPopoverDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_POPOVER_FALLBACK_DEFAULTS = {
+    side: 'bottom',
+    align: 'center',
+    sideOffset: 8,
+    collisionPadding: 8,
+};
+const { token, provideDefaults } = createDefaults('FOR_POPOVER_DEFAULTS', FOR_POPOVER_FALLBACK_DEFAULTS);
+/** Token holding the resolved popover defaults for the current scope. */
+const FOR_POPOVER_DEFAULTS = token;
+/**
+ * Configures forty-cdk popover defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForPopoverDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Headless implementation of the [WAI-ARIA Modeless Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/),
+ * positioned against an internal trigger via `@floating-ui/dom`.
+ *
+ * Apply `[forPopover]` on a wrapper (the trigger and the content's `@if`
+ * live inside it). The directive owns open state, ids, and the registries
+ * that wire trigger / content / title / description / arrow together.
+ *
+ * Mount/unmount of the visible content is the consumer's responsibility —
+ * wrap `[forPopoverContent]` with `@if (open())` and let `animate.enter` /
+ * `animate.leave` handle transitions:
+ *
+ * ```html
+ * <div forPopover [(open)]="isOpen">
+ *   <button forPopoverTrigger>Open</button>
+ *   @if (isOpen()) {
+ *     <div forPopoverContent animate.leave="fade-out">…</div>
+ *   }
+ * </div>
+ * ```
+ *
+ * Non-modal: focus is sent into the popover on open and returned to the
+ * trigger on close, but Tab is allowed to leave the surface (use Dialog
+ * if you need a focus trap).
+ */
+class ForPopover {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_POPOVER_DEFAULTS);
+    /**
+     * Two-way bindable. Whether the popover is currently shown. The `model()`
+     * change emitter (`(openChange)`) fires only on internal transitions
+     * (trigger click, Escape, outside dismissal), never on consumer writes
+     * via `[(open)]` — observe state changes without binding back.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-popover override for the side the popover is anchored to. Pair with
+     * `align` for the full positioning API (`side="bottom" align="start"`).
+     * When `undefined` (default), falls back to `ForPopoverDefaults.side` from
+     * the surrounding `provideForPopoverDefaults` scope (`'bottom'` 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-popover override for the alignment along the chosen `side`. When
+     * `undefined` (default), falls back to `ForPopoverDefaults.align` from the
+     * surrounding `provideForPopoverDefaults` 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-popover override for the gap (px) between trigger and content along
+     * the *main* axis (perpendicular to `side`). Forwarded to floating-ui's
+     * `offset` middleware. When `undefined`
+     * (default), falls back to `ForPopoverDefaults.sideOffset` from the
+     * surrounding `provideForPopoverDefaults` 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 popover 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-popover override for the padding (px) applied uniformly to the
+     * `flip`, `shift`, and `size` middlewares. When `undefined` (default),
+     * falls back to
+     * `ForPopoverDefaults.collisionPadding` from the surrounding
+     * `provideForPopoverDefaults` 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 so the arrow stays inside any
+     * rounded corners on the popover content. Default `0`.
+     */
+    arrowPadding = input(ANCHORED_POSITIONING_DEFAULTS.arrowPadding, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Stickiness behaviour for `shift`. `'partial'` (default) lets the
+     * popover shift to stay visible. `'always'` disables `shift` so the
+     * popover keeps its requested placement even off-screen. `false`
+     * is treated as `'partial'`.
+     */
+    sticky = input(ANCHORED_POSITIONING_DEFAULTS.sticky, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, sets `data-detached=""` on the content while the trigger
+     * has scrolled off all clipping ancestors. Use to fade out popovers
+     * tied to scrolled-away triggers.
+     */
+    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 });
+    /**
+     * When true, trigger interaction is ignored and any open popover stays
+     * open until the consumer flips `open` themselves. Disable on the trigger
+     * side; the content side keeps its dismissable behavior unaffected.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true (default), Escape, pointer-down outside, and focus outside
+     * close the popover. Disable for confirm flows that must be answered
+     * via `[forPopoverClose]` (or by setting `open` programmatically).
+     */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true (default), focus returns to the trigger on close. */
+    returnFocus = input(true, { ...(ngDevMode ? { debugName: "returnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Where to send focus when content mounts. `'first'` (default) finds
+     * the first focusable descendant; `'container'` focuses the content
+     * box itself (useful when there's nothing focusable inside).
+     */
+    initialFocus = input('first', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocus" }] : /* istanbul ignore next */ []));
+    /** Manual `aria-label` on the content. Use this when no visible title element exists. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* 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. The popover toggles open / closed
+     * synchronously on trigger click, so it has no JS-coordinated timing to skip.
+     */
+    reducedMotion = injectPrefersReducedMotion();
+    /**
+     * Fires when the user presses Escape while this popover is the topmost
+     * dismissable layer. Call `preventDefault()` on the emitted veto to
+     * suppress the automatic close. The native `KeyboardEvent` is
+     * available on `.event`.
+     */
+    escapeKeyDown = output();
+    /**
+     * Fires when a pointer goes down outside the popover (and outside the
+     * trigger). Call `preventDefault()` on the veto to suppress the
+     * automatic close. The native `PointerEvent` is on `.event`.
+     */
+    pointerDownOutside = output();
+    /**
+     * Fires when focus moves outside the popover and trigger. Call
+     * `preventDefault()` on the veto to suppress the automatic close.
+     */
+    focusOutside = output();
+    /**
+     * Composite event: fires alongside `pointerDownOutside` and
+     * `focusOutside` and shares their veto state — `preventDefault()` on
+     * either one suppresses the automatic close.
+     */
+    interactOutside = output();
+    /**
+     * Fires just before the popover sends focus into itself on mount.
+     * Call `preventDefault()` on the veto to skip the imperative focus
+     * move — useful when opening a popover from an input you want to
+     * keep focused.
+     */
+    autoFocusOnOpen = output();
+    /**
+     * Fires just before focus returns to the trigger on unmount. Call
+     * `preventDefault()` on the veto to suppress the return-focus.
+     */
+    autoFocusOnClose = output();
+    triggerId = signal(this.#idGen.next('for-popover-trigger'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    contentId = signal(this.#idGen.next('for-popover-content'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentId" }] : /* istanbul ignore next */ []));
+    #triggerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#triggerEl" }] : /* istanbul ignore next */ []));
+    trigger = this.#triggerEl.asReadonly();
+    #anchorEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchorEl" }] : /* istanbul ignore next */ []));
+    anchor = this.#anchorEl.asReadonly();
+    /**
+     * The element floating-ui anchors against. Prefers `[forPopoverAnchor]`
+     * when registered, otherwise falls back to the trigger so existing
+     * popovers without an anchor keep their behavior.
+     */
+    reference = computed(() => this.#anchorEl() ?? this.#triggerEl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
+    #arrowEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#arrowEl" }] : /* istanbul ignore next */ []));
+    arrow = this.#arrowEl.asReadonly();
+    #labelIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labelIds" }] : /* istanbul ignore next */ []));
+    #describedByIds = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#describedByIds" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => {
+        const ids = this.#labelIds();
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = this.#describedByIds();
+        return ids.length === 0 ? null : ids.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    registerTrigger(el) {
+        adoptHostId(el, this.triggerId);
+        this.#triggerEl.set(el);
+    }
+    unregisterTrigger(el) {
+        if (this.#triggerEl() === el) {
+            this.#triggerEl.set(null);
+        }
+    }
+    /**
+     * Adopts a consumer-set static `id` on the `[forPopoverContent]` host into
+     * `contentId` (preserving anchors / external `aria-labelledby` references)
+     * instead of letting the `[id]` host binding clobber it.
+     */
+    adoptContentId(el) {
+        adoptHostId(el, this.contentId);
+    }
+    registerAnchor(el) {
+        this.#anchorEl.set(el);
+    }
+    unregisterAnchor(el) {
+        if (this.#anchorEl() === el) {
+            this.#anchorEl.set(null);
+        }
+    }
+    registerArrow(el) {
+        this.#arrowEl.set(el);
+    }
+    unregisterArrow(el) {
+        if (this.#arrowEl() === el) {
+            this.#arrowEl.set(null);
+        }
+    }
+    registerLabel(id) {
+        this.#labelIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));
+    }
+    unregisterLabel(id) {
+        this.#labelIds.update((arr) => arr.filter((x) => x !== id));
+    }
+    registerDescription(id) {
+        this.#describedByIds.update((arr) => (arr.includes(id) ? arr : [...arr, id]));
+    }
+    unregisterDescription(id) {
+        this.#describedByIds.update((arr) => arr.filter((x) => x !== id));
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.open.update((v) => !v);
+    }
+    emitEscapeKeyDown(event) {
+        const vetoed = emitVetoableNativeEvent(this.escapeKeyDown, event);
+        if (!vetoed && this.dismissible()) {
+            event.stopPropagation();
+            this.open.set(false);
+        }
+    }
+    /**
+     * Outside-interaction emit forwarders. The shared `#pendingOutsideVeto`
+     * reuse between the specific outside channels and the composite
+     * `interactOutside` lives in `injectOverlayShell`; these only fire the
+     * matching output with the veto the shell built.
+     */
+    emitPointerDownOutside(veto) {
+        this.pointerDownOutside.emit(veto);
+    }
+    emitFocusOutside(veto) {
+        this.focusOutside.emit(veto);
+    }
+    emitInteractOutside(veto) {
+        this.interactOutside.emit(veto);
+    }
+    /**
+     * Implicit close requested by the shell after an un-vetoed outside
+     * interaction. The directive only owns the close itself.
+     */
+    requestClose() {
+        this.open.set(false);
+    }
+    emitAutoFocusOnOpen() {
+        return emitVetoableEvent(this.autoFocusOnOpen);
+    }
+    emitAutoFocusOnClose() {
+        return emitVetoableEvent(this.autoFocusOnClose);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForPopover, isStandalone: true, selector: "[forPopover]", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, returnFocus: { classPropertyName: "returnFocus", publicName: "returnFocus", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", autoFocusOnOpen: "autoFocusOnOpen", autoFocusOnClose: "autoFocusOnClose" }, host: { properties: { "attr.data-state": "open() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-reduced-motion": "reducedMotion() ? \"\" : null" } }, providers: [{ provide: FOR_POPOVER_CONTEXT, useExisting: ForPopover }], exportAs: ["forPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopover, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopover]',
+                    exportAs: 'forPopover',
+                    host: {
+                        '[attr.data-state]': 'open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-reduced-motion]': 'reducedMotion() ? "" : null',
+                    },
+                    providers: [{ provide: FOR_POPOVER_CONTEXT, useExisting: ForPopover }],
+                }]
+        }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], returnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnFocus", required: false }] }], initialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], autoFocusOnOpen: [{ type: i0.Output, args: ["autoFocusOnOpen"] }], autoFocusOnClose: [{ type: i0.Output, args: ["autoFocusOnClose"] }] } });
+
+/**
+ * Button that toggles the popover when clicked. Apply on a focusable
+ * element — preferably a `<button>` — so keyboard users can reach it.
+ *
+ * Wires `aria-expanded`, `aria-controls`, and `aria-haspopup="dialog"`,
+ * registers the host as the floating-ui anchor, and toggles the open
+ * state on click. The trigger is exempt from the dismissable layer's
+ * outside-pointer / outside-focus checks so its own click never
+ * spuriously closes the popover.
+ *
+ * Disabling: the trigger merges its own `disabled` input OR the root's
+ * `disabled` into `effectiveDisabled`, which drives the native `disabled`
+ * attribute, `aria-disabled`, `data-disabled`, and the click guard.
+ *
+ * The root is normally resolved via DI from the enclosing `[forPopover]`.
+ * 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: `[forPopoverTrigger]="root"` with `#root="forPopover"`.
+ */
+class ForPopoverTrigger {
+    #host = inject(ElementRef);
+    /**
+     * Optional explicit reference to the `[forPopover]` root, named after the
+     * selector `routerLink`-style. The bare valueless attribute keeps resolving
+     * the enclosing root via DI; pass the root explicitly
+     * (`[forPopoverTrigger]="root"`, with `#root="forPopover"`) 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.
+     */
+    forPopoverTrigger = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forPopoverTrigger" }] : /* istanbul ignore next */ []));
+    ctx = injectPopoverTriggerContext(this.forPopoverTrigger);
+    /** Disables this trigger only, in addition to the root's `disabled`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the trigger is disabled — its own `disabled` input OR the root's. */
+    effectiveDisabled = computed(() => this.disabled() || this.ctx().disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    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));
+        });
+        reflectDisabled(this.effectiveDisabled);
+    }
+    onClick() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.ctx().toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForPopoverTrigger, isStandalone: true, selector: "[forPopoverTrigger]", inputs: { forPopoverTrigger: { classPropertyName: "forPopoverTrigger", publicName: "forPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "id": "ctx().triggerId()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "ctx().open() ? \"true\" : \"false\"", "attr.aria-controls": "ctx().open() ? ctx().contentId() : null", "attr.data-state": "ctx().open() ? \"open\" : \"closed\"", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, exportAs: ["forPopoverTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverTrigger]',
+                    exportAs: 'forPopoverTrigger',
+                    host: {
+                        type: 'button',
+                        '[id]': 'ctx().triggerId()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'ctx().open() ? "true" : "false"',
+                        '[attr.aria-controls]': 'ctx().open() ? ctx().contentId() : null',
+                        '[attr.data-state]': 'ctx().open() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { forPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "forPopoverTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Optional positioning anchor. When present, the popover is positioned
+ * against this element instead of `[forPopoverTrigger]` — useful when
+ * "what opens it" and "where it appears" are different elements (a button
+ * opens the popover but it's anchored to a row, a text-selection range,
+ * a cursor follower, etc.).
+ *
+ * Only positioning changes: the trigger still owns `aria-controls`,
+ * `aria-expanded`, the click toggle, and focus return on close. If no
+ * anchor is registered the popover falls back to anchoring against the
+ * trigger, so existing usages are unaffected.
+ *
+ * ```html
+ * <div forPopover [(open)]="open">
+ *   <button forPopoverTrigger>Help</button>
+ *   <span [forPopoverAnchor]>Anchored phrase</span>
+ *   @if (open()) {
+ *     <div forPopoverContent>…</div>
+ *   }
+ * </div>
+ * ```
+ */
+class ForPopoverAnchor {
+    #ctx = injectPopoverContext('ForPopoverAnchor');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.#ctx.registerAnchor(el), (el) => this.#ctx.unregisterAnchor(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverAnchor, isStandalone: true, selector: "[forPopoverAnchor]", exportAs: ["forPopoverAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverAnchor]',
+                    exportAs: 'forPopoverAnchor',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The popover surface. Carries `role="dialog"` (non-modal — `aria-modal` is absent per APG), is
+ * portaled to `document.body`, and is positioned by `@floating-ui/dom`
+ * against the registered `[forPopoverTrigger]`.
+ *
+ * The directive does not manage DOM presence — wrap with
+ * `@if (popoverOpen())` so `animate.enter` / `animate.leave` fire on
+ * the natural mount / unmount cycle. While mounted the directive
+ * activates a `DismissableLayer` (Escape, pointer-down outside, focus
+ * outside) and sends focus to the configured `initialFocus` target;
+ * on unmount it returns focus to the trigger if `returnFocus` is on.
+ *
+ * The trigger is exempt from the layer's outside checks, so clicking
+ * it again just toggles via the trigger directive — no double-close
+ * race.
+ *
+ * The lifecycle (positioner + dismissable layer + initial focus + return
+ * focus) is owned by the shared `injectOverlayShell` helper. The shell's
+ * `'first'` mode routes through the same `findFirstFocusable` helper used
+ * by `FocusTrap`, dropping the local focusable-selector copy that this
+ * directive carried before (see #107).
+ */
+class ForPopoverContent {
+    ctx = injectPopoverContext('ForPopoverContent');
+    constructor() {
+        this.ctx.adoptContentId(inject(ElementRef).nativeElement);
+        injectOverlayShell({
+            positioner: toFloatingPositioner(this.ctx, this.ctx.reference),
+            dismiss: {
+                dismissible: this.ctx.dismissible,
+                requestClose: () => this.ctx.requestClose(),
+                emitEscapeKeyDown: (event) => this.ctx.emitEscapeKeyDown(event),
+                emitPointerDownOutside: (veto) => this.ctx.emitPointerDownOutside(veto),
+                emitFocusOutside: (veto) => this.ctx.emitFocusOutside(veto),
+                emitInteractOutside: (veto) => this.ctx.emitInteractOutside(veto),
+                // The trigger lives outside the portaled content but is logically
+                // "inside" the popover for outside-pointer / outside-focus checks
+                // — without this, clicking the trigger to close would race with
+                // its own toggle and you'd end up reopening immediately.
+                exemptElements: () => {
+                    const trigger = this.ctx.trigger();
+                    return trigger ? [trigger] : [];
+                },
+            },
+            // `initialFocus()` is read once when the content mounts. The directive
+            // re-mounts on every open (consumer wraps with `@if(open())`), so the
+            // value is fresh each time.
+            initialFocus: {
+                move: this.ctx.initialFocus() === 'container' ? 'container' : 'first',
+                veto: () => this.ctx.emitAutoFocusOnOpen(),
+            },
+            returnFocus: {
+                enabled: this.ctx.returnFocus,
+                target: () => this.ctx.trigger(),
+                // `(autoFocusOnClose)` lets the consumer veto the return-focus.
+                veto: () => this.ctx.emitAutoFocusOnClose(),
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverContent, isStandalone: true, selector: "[forPopoverContent]", host: { attributes: { "role": "dialog", "tabindex": "-1" }, properties: { "id": "ctx.contentId()", "attr.aria-label": "ctx.ariaLabel()", "attr.aria-labelledby": "ctx.labelledBy()", "attr.aria-describedby": "ctx.describedBy()", "attr.data-state": "ctx.open() ? \"open\" : \"closed\"", "attr.data-reduced-motion": "ctx.reducedMotion() ? \"\" : null" } }, exportAs: ["forPopoverContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverContent]',
+                    exportAs: 'forPopoverContent',
+                    host: {
+                        role: 'dialog',
+                        '[id]': 'ctx.contentId()',
+                        '[attr.aria-label]': 'ctx.ariaLabel()',
+                        '[attr.aria-labelledby]': 'ctx.labelledBy()',
+                        '[attr.aria-describedby]': 'ctx.describedBy()',
+                        '[attr.data-state]': 'ctx.open() ? "open" : "closed"',
+                        '[attr.data-reduced-motion]': 'ctx.reducedMotion() ? "" : null',
+                        tabindex: '-1',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Convenience: gives the host element a stable id and registers it as the
+ * popover's accessible name (`aria-labelledby`). Apply on a heading element
+ * (`<h2>`, `<h3>`...) inside `[forPopoverContent]`.
+ *
+ * If you don't render a visible title, omit this and pass `ariaLabel` on
+ * the popover root instead.
+ */
+class ForPopoverTitle {
+    id = registerA11yName(injectPopoverContext('ForPopoverTitle'), 'for-popover-title');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverTitle, isStandalone: true, selector: "[forPopoverTitle]", host: { properties: { "id": "id()" } }, exportAs: ["forPopoverTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverTitle]',
+                    exportAs: 'forPopoverTitle',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+/**
+ * Convenience: gives the host element a stable id and registers it as the
+ * popover's accessible description (`aria-describedby`). Apply on a paragraph
+ * or similar text element inside `[forPopoverContent]`.
+ */
+class ForPopoverDescription {
+    id = registerA11yDescription(injectPopoverContext('ForPopoverDescription'), 'for-popover-description');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverDescription, isStandalone: true, selector: "[forPopoverDescription]", host: { properties: { "id": "id()" } }, exportAs: ["forPopoverDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverDescription]',
+                    exportAs: 'forPopoverDescription',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }] });
+
+/**
+ * Button that closes the surrounding popover when clicked. Apply on a
+ * `<button>` inside `[forPopoverContent]`. Bypasses `dismissible` — an
+ * explicit close button is always honored.
+ */
+class ForPopoverClose {
+    #ctx = injectPopoverContext('ForPopoverClose');
+    onClick() {
+        this.#ctx.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverClose, isStandalone: true, selector: "[forPopoverClose]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, exportAs: ["forPopoverClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverClose]',
+                    exportAs: 'forPopoverClose',
+                    host: {
+                        type: 'button',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+/**
+ * Optional visual arrow inside `ForPopoverContent`. Registers itself with
+ * the popover context so floating-ui's `arrow` middleware can position it
+ * along the surface edge that points at the trigger. Style size and color
+ * yourself — the directive only sets `position`, `left`/`top`, and the
+ * opposite-side offset.
+ */
+class ForPopoverArrow {
+    #ctx = injectPopoverContext('ForPopoverArrow');
+    #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: ForPopoverArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForPopoverArrow, isStandalone: true, selector: "[forPopoverArrow]", host: { attributes: { "aria-hidden": "true", "data-popover-arrow": "" } }, exportAs: ["forPopoverArrow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForPopoverArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forPopoverArrow]',
+                    exportAs: 'forPopoverArrow',
+                    host: {
+                        'aria-hidden': 'true',
+                        'data-popover-arrow': '',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_POPOVER_CONTEXT, FOR_POPOVER_DEFAULTS, ForPopover, ForPopoverAnchor, ForPopoverArrow, ForPopoverClose, ForPopoverContent, ForPopoverDescription, ForPopoverTitle, ForPopoverTrigger, provideForPopoverDefaults };
+//# sourceMappingURL=forty-cdk-popover.mjs.map