@radix-ng/primitives 0.40.0 → 0.42.0

package/dismissible-layer/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/dismissible-layer

package/dismissible-layer/index.d.ts

@@ -0,0 +1 @@
+export * from './src/utils';

package/dismissible-layer/src/utils.d.ts

@@ -0,0 +1,38 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+/**
+ * Listens for when focus happens outside a DOM subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */
+export declare class RdxFocusOutside {
+    #private;
+    readonly enabledInput: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    set enabled(value: boolean);
+    get enabled(): boolean;
+    readonly focusOutside: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    private readonly isFocusInsideDOMTree;
+    private readonly focusCaptureHandler;
+    private readonly blurCaptureHandler;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFocusOutside, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFocusOutside, "[rdxFocusOutside]", ["rdxFocusOutside"], { "enabledInput": { "alias": "enabled"; "required": false; "isSignal": true; }; }, { "focusOutside": "focusOutside"; }, never, never, true, never>;
+}
+/**
+ * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behavior present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */
+export declare class RdxPointerDownOutside {
+    #private;
+    private readonly elementRef;
+    readonly enabledInput: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    set enabled(value: boolean);
+    get enabled(): boolean;
+    readonly pointerDownOutside: import("@angular/core").OutputEmitterRef<PointerEvent>;
+    private readonly isPointerInsideDOMTree;
+    private readonly handleAndDispatchPointerDownOutsideEvent;
+    private handleClick;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxPointerDownOutside, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxPointerDownOutside, "[rdxPointerDownOutside]", ["rdxPointerDownOutside"], { "enabledInput": { "alias": "enabled"; "required": false; "isSignal": true; }; }, { "pointerDownOutside": "pointerDownOutside"; }, never, never, true, never>;
+}

package/editable/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/editable

package/editable/index.d.ts

@@ -0,0 +1 @@
+export * from './src/editable-root';

package/editable/src/editable-root.d.ts

@@ -0,0 +1,67 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { Signal, WritableSignal } from '@angular/core';
+import { RdxPointerDownOutside } from '@radix-ng/primitives/dismissible-layer';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/dismissible-layer";
+type EditableRootContext = {
+    disabled: Signal<boolean>;
+    value: Signal<string | null | undefined>;
+    inputValue: WritableSignal<string | undefined>;
+    placeholder: Signal<{
+        edit: string;
+        preview: string;
+    }>;
+    isEditing: Signal<boolean>;
+    submitMode: Signal<SubmitMode>;
+    activationMode: Signal<ActivationMode>;
+    edit: () => void;
+    cancel: () => void;
+    submit: () => void;
+    maxLength: Signal<number | undefined>;
+    startWithEditMode: Signal<boolean>;
+    isEmpty: Signal<boolean>;
+    readonly: Signal<boolean>;
+    selectOnFocus: Signal<boolean>;
+    autoResize: Signal<boolean>;
+    inputRef: WritableSignal<HTMLInputElement | undefined>;
+};
+export declare const injectEditableRootContext: (optional?: boolean) => EditableRootContext | null, provideEditableRootContext: (useFactory: () => EditableRootContext) => import("@angular/core").Provider;
+type ActivationMode = 'focus' | 'dblclick' | 'none';
+type SubmitMode = 'blur' | 'enter' | 'none' | 'both';
+/**
+ * @group Components
+ */
+export declare class RdxEditableRoot {
+    private readonly focusOutside;
+    readonly pointerDownOutside: RdxPointerDownOutside;
+    readonly value: import("@angular/core").ModelSignal<string | undefined>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly selectOnFocus: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly submitMode: import("@angular/core").InputSignal<SubmitMode>;
+    readonly maxLength: import("@angular/core").InputSignalWithTransform<number | undefined, NumberInput>;
+    /**
+     * Whether to start with the edit mode active
+     */
+    readonly startWithEditMode: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly activationMode: import("@angular/core").InputSignal<ActivationMode>;
+    readonly autoResize: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly isEmpty: Signal<boolean>;
+    readonly $placeholder: Signal<string | {
+        edit: string;
+        preview: string;
+    }>;
+    readonly isEditing: WritableSignal<boolean>;
+    readonly inputValue: WritableSignal<string | undefined>;
+    readonly inputRef: WritableSignal<HTMLInputElement | undefined>;
+    constructor();
+    handleDismiss(): void;
+    submit(): void;
+    cancel(): void;
+    edit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxEditableRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxEditableRoot, "[rdxEditableRoot]", ["rdxEditableRoot"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; "isSignal": true; }; "submitMode": { "alias": "submitMode"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "startWithEditMode": { "alias": "startWithEditMode"; "required": false; "isSignal": true; }; "activationMode": { "alias": "activationMode"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof i1.RdxFocusOutside; inputs: {}; outputs: {}; }, { directive: typeof i1.RdxPointerDownOutside; inputs: {}; outputs: {}; }]>;
+}
+export {};

package/fesm2022/radix-ng-primitives-dismissible-layer.mjs

@@ -0,0 +1,211 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, linkedSignal, output, signal, inject, ElementRef, effect, Directive } from '@angular/core';
+
+function isLayerExist(layerElement, targetElement) {
+    const targetLayer = targetElement.closest('[data-dismissable-layer]');
+    const mainLayer = layerElement.dataset['dismissableLayer'] === ''
+        ? layerElement
+        : layerElement.querySelector('[data-dismissable-layer]');
+    const nodeList = Array.from(layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'));
+    if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+/**
+ * Listens for when focus happens outside a DOM subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */
+class RdxFocusOutside {
+    #enabled;
+    set enabled(value) {
+        if (this.#enabled() !== value) {
+            this.#enabled.set(value);
+        }
+    }
+    get enabled() {
+        return this.#enabled();
+    }
+    constructor() {
+        this.enabledInput = input(true, { transform: booleanAttribute, alias: 'enabled' });
+        this.#enabled = linkedSignal(() => this.enabledInput());
+        this.focusOutside = output();
+        /*
+         * Flag to indicate if the focus is currently within the DOM subtree
+         */
+        this.isFocusInsideDOMTree = signal(false);
+        /*
+         * Handles capturing the focus event to mark focus as inside the DOM subtree
+         */
+        this.focusCaptureHandler = () => {
+            if (!this.enabled)
+                return;
+            this.isFocusInsideDOMTree.set(true);
+        };
+        /*
+         * Handles capturing the blur event to mark focus as outside the DOM subtree
+         */
+        this.blurCaptureHandler = () => {
+            if (!this.enabled)
+                return;
+            this.isFocusInsideDOMTree.set(false);
+        };
+        const elementRef = inject(ElementRef);
+        effect((onCleanup) => {
+            if (!this.#enabled()) {
+                return;
+            }
+            const ownerDocument = elementRef.nativeElement.ownerDocument ?? globalThis.document;
+            const focusHandler = async (event) => {
+                if (!elementRef?.nativeElement) {
+                    return;
+                }
+                await Promise.resolve();
+                await Promise.resolve();
+                const target = event.target;
+                if (!elementRef.nativeElement || !target || isLayerExist(elementRef.nativeElement, target)) {
+                    return;
+                }
+                if (target && !this.isFocusInsideDOMTree()) {
+                    this.focusOutside.emit(event);
+                }
+            };
+            elementRef.nativeElement.addEventListener('focus', this.focusCaptureHandler, {
+                capture: true
+            });
+            elementRef.nativeElement.addEventListener('blur', this.blurCaptureHandler, {
+                capture: true
+            });
+            ownerDocument.addEventListener('focusin', focusHandler);
+            onCleanup(() => {
+                elementRef.nativeElement.removeEventListener('focus', this.focusCaptureHandler, {
+                    capture: true
+                });
+                elementRef.nativeElement.removeEventListener('blur', this.blurCaptureHandler, {
+                    capture: true
+                });
+                ownerDocument.removeEventListener('focusin', focusHandler);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxFocusOutside, isStandalone: true, selector: "[rdxFocusOutside]", inputs: { enabledInput: { classPropertyName: "enabledInput", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focusOutside: "focusOutside" }, exportAs: ["rdxFocusOutside"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusOutside, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxFocusOutside]',
+                    exportAs: 'rdxFocusOutside'
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behavior present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */
+class RdxPointerDownOutside {
+    #enabled;
+    set enabled(value) {
+        if (this.#enabled() !== value) {
+            this.#enabled.set(value);
+        }
+    }
+    get enabled() {
+        return this.#enabled();
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.enabledInput = input(true, { transform: booleanAttribute, alias: 'enabled' });
+        this.#enabled = linkedSignal(() => this.enabledInput());
+        this.pointerDownOutside = output();
+        this.isPointerInsideDOMTree = signal(false);
+        this.handleAndDispatchPointerDownOutsideEvent = (e) => () => this.pointerDownOutside.emit(e);
+        effect((onCleanup) => {
+            if (!this.#enabled()) {
+                return;
+            }
+            const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
+            const handlePointerDown = async (event) => {
+                if (event.target && !this.isPointerInsideDOMTree()) {
+                    /**
+                     * On touch devices, we need to wait for a click event because browsers implement
+                     * a ~350ms delay between the time the user stops touching the display and when the
+                     * browser executres events. We need to ensure we don't reactivate pointer-events within
+                     * this timeframe otherwise the browser may execute events that should have been prevented.
+                     *
+                     * Additionally, this also lets us deal automatically with cancellations when a click event
+                     * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+                     *
+                     * This is why we also continuously remove the previous listener, because we cannot be
+                     * certain that it was raised, and therefore cleaned-up.
+                     */
+                    if (event.pointerType === 'touch') {
+                        ownerDocument.removeEventListener('click', this.handleClick);
+                        this.handleClick = this.handleAndDispatchPointerDownOutsideEvent(event);
+                        ownerDocument.addEventListener('click', this.handleClick, {
+                            once: true
+                        });
+                    }
+                    else {
+                        this.pointerDownOutside.emit(event);
+                    }
+                }
+                else {
+                    // We need to remove the event listener in case the outside click has been canceled.
+                    // See: https://github.com/radix-ui/primitives/issues/2171
+                    ownerDocument.removeEventListener('click', this.handleClick);
+                }
+                this.isPointerInsideDOMTree.set(false);
+            };
+            /**
+             * if this directive executes in a component that mounts via a `pointerdown` event, the event
+             * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+             * this by delaying the event listener registration on the document.
+             * This is not Angular specific, but rather how the DOM works, ie:
+             * ```
+             * button.addEventListener('pointerdown', () => {
+             *   console.log('I will log');
+             *   document.addEventListener('pointerdown', () => {
+             *     console.log('I will also log');
+             *   })
+             * });
+             */
+            const timerId = window.setTimeout(() => {
+                ownerDocument.addEventListener('pointerdown', handlePointerDown);
+            }, 0);
+            const onPointerDownCapture = () => {
+                if (!this.enabled) {
+                    return;
+                }
+                this.isPointerInsideDOMTree.set(true);
+            };
+            this.elementRef.nativeElement.addEventListener('pointerdown', onPointerDownCapture, { capture: true });
+            onCleanup(() => {
+                window.clearTimeout(timerId);
+                ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+                ownerDocument.removeEventListener('click', this.handleClick);
+                this.elementRef.nativeElement.removeEventListener('pointerdown', onPointerDownCapture, {
+                    capture: true
+                });
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxPointerDownOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxPointerDownOutside, isStandalone: true, selector: "[rdxPointerDownOutside]", inputs: { enabledInput: { classPropertyName: "enabledInput", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointerDownOutside: "pointerDownOutside" }, exportAs: ["rdxPointerDownOutside"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxPointerDownOutside, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPointerDownOutside]',
+                    exportAs: 'rdxPointerDownOutside'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxFocusOutside, RdxPointerDownOutside };
+//# sourceMappingURL=radix-ng-primitives-dismissible-layer.mjs.map

package/fesm2022/radix-ng-primitives-dismissible-layer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-dismissible-layer.mjs","sources":["../../../packages/primitives/dismissible-layer/src/utils.ts","../../../packages/primitives/dismissible-layer/radix-ng-primitives-dismissible-layer.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    booleanAttribute,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    linkedSignal,\n    output,\n    signal\n} from '@angular/core';\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n    const targetLayer = targetElement.closest('[data-dismissable-layer]');\n\n    const mainLayer =\n        layerElement.dataset['dismissableLayer'] === ''\n            ? layerElement\n            : (layerElement.querySelector('[data-dismissable-layer]') as HTMLElement);\n\n    const nodeList = Array.from(layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'));\n\n    if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {\n        return true;\n    } else {\n        return false;\n    }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\n@Directive({\n    selector: '[rdxFocusOutside]',\n    exportAs: 'rdxFocusOutside'\n})\nexport class RdxFocusOutside {\n    readonly enabledInput = input<boolean, BooleanInput>(true, { transform: booleanAttribute, alias: 'enabled' });\n\n    readonly #enabled = linkedSignal(() => this.enabledInput());\n\n    set enabled(value: boolean) {\n        if (this.#enabled() !== value) {\n            this.#enabled.set(value);\n        }\n    }\n\n    get enabled() {\n        return this.#enabled();\n    }\n\n    readonly focusOutside = output<FocusEvent>();\n\n    /*\n     * Flag to indicate if the focus is currently within the DOM subtree\n     */\n    private readonly isFocusInsideDOMTree = signal(false);\n\n    /*\n     * Handles capturing the focus event to mark focus as inside the DOM subtree\n     */\n    private readonly focusCaptureHandler = () => {\n        if (!this.enabled) return;\n        this.isFocusInsideDOMTree.set(true);\n    };\n\n    /*\n     * Handles capturing the blur event to mark focus as outside the DOM subtree\n     */\n    private readonly blurCaptureHandler = () => {\n        if (!this.enabled) return;\n        this.isFocusInsideDOMTree.set(false);\n    };\n\n    constructor() {\n        const elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n        effect((onCleanup) => {\n            if (!this.#enabled()) {\n                return;\n            }\n\n            const ownerDocument = elementRef.nativeElement.ownerDocument ?? globalThis.document;\n\n            const focusHandler = async (event: FocusEvent) => {\n                if (!elementRef?.nativeElement) {\n                    return;\n                }\n\n                await Promise.resolve();\n                await Promise.resolve();\n\n                const target = event.target as HTMLElement | undefined;\n                if (!elementRef.nativeElement || !target || isLayerExist(elementRef.nativeElement, target)) {\n                    return;\n                }\n\n                if (target && !this.isFocusInsideDOMTree()) {\n                    this.focusOutside.emit(event);\n                }\n            };\n\n            elementRef.nativeElement.addEventListener('focus', this.focusCaptureHandler, {\n                capture: true\n            });\n            elementRef.nativeElement.addEventListener('blur', this.blurCaptureHandler, {\n                capture: true\n            });\n\n            ownerDocument.addEventListener('focusin', focusHandler);\n\n            onCleanup(() => {\n                elementRef.nativeElement.removeEventListener('focus', this.focusCaptureHandler, {\n                    capture: true\n                });\n\n                elementRef.nativeElement.removeEventListener('blur', this.blurCaptureHandler, {\n                    capture: true\n                });\n\n                ownerDocument.removeEventListener('focusin', focusHandler);\n            });\n        });\n    }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behavior present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\n@Directive({\n    selector: '[rdxPointerDownOutside]',\n    exportAs: 'rdxPointerDownOutside'\n})\nexport class RdxPointerDownOutside {\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    readonly enabledInput = input<boolean, BooleanInput>(true, { transform: booleanAttribute, alias: 'enabled' });\n\n    readonly #enabled = linkedSignal(() => this.enabledInput());\n\n    set enabled(value: boolean) {\n        if (this.#enabled() !== value) {\n            this.#enabled.set(value);\n        }\n    }\n\n    get enabled() {\n        return this.#enabled();\n    }\n\n    readonly pointerDownOutside = output<PointerEvent>();\n\n    private readonly isPointerInsideDOMTree = signal(false);\n\n    private readonly handleAndDispatchPointerDownOutsideEvent = (e: PointerEvent) => () =>\n        this.pointerDownOutside.emit(e);\n\n    private handleClick: () => void | undefined;\n\n    constructor() {\n        effect((onCleanup) => {\n            if (!this.#enabled()) {\n                return;\n            }\n\n            const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;\n\n            const handlePointerDown = async (event: PointerEvent) => {\n                if (event.target && !this.isPointerInsideDOMTree()) {\n                    /**\n                     * On touch devices, we need to wait for a click event because browsers implement\n                     * a ~350ms delay between the time the user stops touching the display and when the\n                     * browser executres events. We need to ensure we don't reactivate pointer-events within\n                     * this timeframe otherwise the browser may execute events that should have been prevented.\n                     *\n                     * Additionally, this also lets us deal automatically with cancellations when a click event\n                     * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n                     *\n                     * This is why we also continuously remove the previous listener, because we cannot be\n                     * certain that it was raised, and therefore cleaned-up.\n                     */\n                    if (event.pointerType === 'touch') {\n                        ownerDocument.removeEventListener('click', this.handleClick);\n                        this.handleClick = this.handleAndDispatchPointerDownOutsideEvent(event);\n                        ownerDocument.addEventListener('click', this.handleClick, {\n                            once: true\n                        });\n                    } else {\n                        this.pointerDownOutside.emit(event);\n                    }\n                } else {\n                    // We need to remove the event listener in case the outside click has been canceled.\n                    // See: https://github.com/radix-ui/primitives/issues/2171\n                    ownerDocument.removeEventListener('click', this.handleClick);\n                }\n                this.isPointerInsideDOMTree.set(false);\n            };\n            /**\n             * if this directive executes in a component that mounts via a `pointerdown` event, the event\n             * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n             * this by delaying the event listener registration on the document.\n             * This is not Angular specific, but rather how the DOM works, ie:\n             * ```\n             * button.addEventListener('pointerdown', () => {\n             *   console.log('I will log');\n             *   document.addEventListener('pointerdown', () => {\n             *     console.log('I will also log');\n             *   })\n             * });\n             */\n            const timerId = window.setTimeout(() => {\n                ownerDocument.addEventListener('pointerdown', handlePointerDown);\n            }, 0);\n\n            const onPointerDownCapture = () => {\n                if (!this.enabled) {\n                    return;\n                }\n                this.isPointerInsideDOMTree.set(true);\n            };\n\n            this.elementRef.nativeElement.addEventListener('pointerdown', onPointerDownCapture, { capture: true });\n\n            onCleanup(() => {\n                window.clearTimeout(timerId);\n                ownerDocument.removeEventListener('pointerdown', handlePointerDown);\n                ownerDocument.removeEventListener('click', this.handleClick);\n                this.elementRef.nativeElement.removeEventListener('pointerdown', onPointerDownCapture, {\n                    capture: true\n                });\n            });\n        });\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-editable.mjs

@@ -0,0 +1,118 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, numberAttribute, computed, signal, afterNextRender, Directive } from '@angular/core';
+import { createContext, watch } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/dismissible-layer';
+import { RdxFocusOutside, RdxPointerDownOutside } from '@radix-ng/primitives/dismissible-layer';
+
+const [injectEditableRootContext, provideEditableRootContext] = createContext('EditableRoot');
+const rootContext = () => {
+    const context = inject(RdxEditableRoot);
+    return {
+        disabled: context.disabled,
+        value: context.value,
+        inputValue: context.inputValue,
+        placeholder: context.$placeholder,
+        isEditing: context.isEditing,
+        submitMode: context.submitMode,
+        activationMode: context.activationMode,
+        edit: context.edit,
+        cancel: context.cancel,
+        submit: context.submit,
+        maxLength: context.maxLength,
+        startWithEditMode: context.startWithEditMode,
+        isEmpty: context.isEmpty,
+        readonly: context.readonly,
+        autoResize: context.autoResize,
+        selectOnFocus: context.selectOnFocus,
+        inputRef: context.inputRef
+    };
+};
+/**
+ * @group Components
+ */
+class RdxEditableRoot {
+    constructor() {
+        this.focusOutside = inject(RdxFocusOutside);
+        this.pointerDownOutside = inject(RdxPointerDownOutside);
+        this.value = model();
+        this.placeholder = input('Enter text...');
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.readonly = input(false, { transform: booleanAttribute });
+        this.selectOnFocus = input(false, { transform: booleanAttribute });
+        this.submitMode = input('blur');
+        this.maxLength = input(undefined, { transform: numberAttribute });
+        /**
+         * Whether to start with the edit mode active
+         */
+        this.startWithEditMode = input(false, { transform: booleanAttribute });
+        this.activationMode = input('focus');
+        this.autoResize = input(false, { transform: booleanAttribute });
+        this.required = input(false, { transform: booleanAttribute });
+        this.isEmpty = computed(() => this.value() === '');
+        this.$placeholder = computed(() => {
+            return typeof this.placeholder() === 'string'
+                ? { edit: this.placeholder(), preview: this.placeholder() }
+                : this.placeholder();
+        });
+        this.isEditing = signal(false);
+        this.inputValue = signal(this.value());
+        this.inputRef = signal(undefined);
+        watch([this.value], ([value]) => {
+            if (value) {
+                this.inputValue.set(this.value());
+            }
+        });
+        watch([this.isEditing], ([value]) => {
+            this.pointerDownOutside.enabled = value;
+            this.focusOutside.enabled = value;
+        });
+        this.pointerDownOutside.pointerDownOutside.subscribe(() => this.handleDismiss());
+        this.focusOutside.focusOutside.subscribe(() => this.handleDismiss());
+        afterNextRender(() => {
+            this.isEditing.set(this.startWithEditMode() ?? false);
+            this.inputValue.set(this.value());
+        });
+    }
+    handleDismiss() {
+        if (this.isEditing()) {
+            if (this.submitMode() === 'blur' || this.submitMode() === 'both') {
+                this.submit();
+            }
+            else {
+                this.cancel();
+            }
+        }
+    }
+    submit() {
+        this.value.set(this.inputValue());
+        this.isEditing.set(false);
+    }
+    cancel() {
+        this.isEditing.set(false);
+    }
+    edit() {
+        this.isEditing.set(true);
+        this.inputValue.set(this.value());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxEditableRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxEditableRoot, isStandalone: true, selector: "[rdxEditableRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, submitMode: { classPropertyName: "submitMode", publicName: "submitMode", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, startWithEditMode: { classPropertyName: "startWithEditMode", publicName: "startWithEditMode", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-dismissable-layer": "\"\"" } }, providers: [provideEditableRootContext(rootContext)], exportAs: ["rdxEditableRoot"], hostDirectives: [{ directive: i1.RdxFocusOutside }, { directive: i1.RdxPointerDownOutside }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxEditableRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxEditableRoot]',
+                    exportAs: 'rdxEditableRoot',
+                    providers: [provideEditableRootContext(rootContext)],
+                    hostDirectives: [RdxFocusOutside, RdxPointerDownOutside],
+                    host: {
+                        '[attr.data-dismissable-layer]': '""'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxEditableRoot, injectEditableRootContext, provideEditableRootContext };
+//# sourceMappingURL=radix-ng-primitives-editable.mjs.map

package/fesm2022/radix-ng-primitives-editable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-editable.mjs","sources":["../../../packages/primitives/editable/src/editable-root.ts","../../../packages/primitives/editable/radix-ng-primitives-editable.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    computed,\n    Directive,\n    inject,\n    input,\n    model,\n    numberAttribute,\n    Signal,\n    signal,\n    WritableSignal\n} from '@angular/core';\nimport { createContext, watch } from '@radix-ng/primitives/core';\nimport { RdxFocusOutside, RdxPointerDownOutside } from '@radix-ng/primitives/dismissible-layer';\n\ntype EditableRootContext = {\n    disabled: Signal<boolean>;\n    value: Signal<string | null | undefined>;\n    inputValue: WritableSignal<string | undefined>;\n    placeholder: Signal<{ edit: string; preview: string }>;\n    isEditing: Signal<boolean>;\n    submitMode: Signal<SubmitMode>;\n    activationMode: Signal<ActivationMode>;\n    edit: () => void;\n    cancel: () => void;\n    submit: () => void;\n    maxLength: Signal<number | undefined>;\n    startWithEditMode: Signal<boolean>;\n    isEmpty: Signal<boolean>;\n    readonly: Signal<boolean>;\n    selectOnFocus: Signal<boolean>;\n    autoResize: Signal<boolean>;\n    inputRef: WritableSignal<HTMLInputElement | undefined>;\n};\n\nexport const [injectEditableRootContext, provideEditableRootContext] =\n    createContext<EditableRootContext>('EditableRoot');\n\nconst rootContext = (): EditableRootContext => {\n    const context = inject(RdxEditableRoot);\n    return {\n        disabled: context.disabled,\n        value: context.value,\n        inputValue: context.inputValue,\n        placeholder: context.$placeholder as Signal<{ edit: string; preview: string }>,\n        isEditing: context.isEditing,\n        submitMode: context.submitMode,\n        activationMode: context.activationMode,\n        edit: context.edit,\n        cancel: context.cancel,\n        submit: context.submit,\n        maxLength: context.maxLength,\n        startWithEditMode: context.startWithEditMode,\n        isEmpty: context.isEmpty,\n        readonly: context.readonly,\n        autoResize: context.autoResize,\n        selectOnFocus: context.selectOnFocus,\n        inputRef: context.inputRef\n    };\n};\n\ntype ActivationMode = 'focus' | 'dblclick' | 'none';\ntype SubmitMode = 'blur' | 'enter' | 'none' | 'both';\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxEditableRoot]',\n    exportAs: 'rdxEditableRoot',\n    providers: [provideEditableRootContext(rootContext)],\n    hostDirectives: [RdxFocusOutside, RdxPointerDownOutside],\n    host: {\n        '[attr.data-dismissable-layer]': '\"\"'\n    }\n})\nexport class RdxEditableRoot {\n    private readonly focusOutside = inject(RdxFocusOutside);\n    readonly pointerDownOutside = inject(RdxPointerDownOutside);\n\n    readonly value = model<string>();\n\n    readonly placeholder = input<string>('Enter text...');\n\n    readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly readonly = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly selectOnFocus = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly submitMode = input<SubmitMode>('blur');\n\n    readonly maxLength = input<number, NumberInput>(undefined, { transform: numberAttribute });\n\n    /**\n     * Whether to start with the edit mode active\n     */\n    readonly startWithEditMode = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly activationMode = input<ActivationMode>('focus');\n\n    readonly autoResize = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly required = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    readonly isEmpty = computed(() => this.value() === '');\n\n    readonly $placeholder = computed(() => {\n        return typeof this.placeholder() === 'string'\n            ? { edit: this.placeholder(), preview: this.placeholder() }\n            : this.placeholder();\n    });\n\n    readonly isEditing = signal(false);\n\n    readonly inputValue = signal(this.value());\n\n    readonly inputRef = signal<HTMLInputElement | undefined>(undefined);\n\n    constructor() {\n        watch([this.value], ([value]) => {\n            if (value) {\n                this.inputValue.set(this.value());\n            }\n        });\n\n        watch([this.isEditing], ([value]) => {\n            this.pointerDownOutside.enabled = value;\n            this.focusOutside.enabled = value;\n        });\n\n        this.pointerDownOutside.pointerDownOutside.subscribe(() => this.handleDismiss());\n        this.focusOutside.focusOutside.subscribe(() => this.handleDismiss());\n\n        afterNextRender(() => {\n            this.isEditing.set(this.startWithEditMode() ?? false);\n            this.inputValue.set(this.value());\n        });\n    }\n\n    handleDismiss() {\n        if (this.isEditing()) {\n            if (this.submitMode() === 'blur' || this.submitMode() === 'both') {\n                this.submit();\n            } else {\n                this.cancel();\n            }\n        }\n    }\n\n    submit() {\n        this.value.set(this.inputValue());\n        this.isEditing.set(false);\n    }\n\n    cancel() {\n        this.isEditing.set(false);\n    }\n\n    edit() {\n        this.isEditing.set(true);\n        this.inputValue.set(this.value());\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-focus-scope.mjs

@@ -0,0 +1,336 @@
+import * as i0 from '@angular/core';
+import { signal, inject, Injector, ElementRef, input, booleanAttribute, output, afterNextRender, effect, Directive } from '@angular/core';
+import { getActiveElement, createContext } from '@radix-ng/primitives/core';
+
+function createGlobalState(factory) {
+    const state = factory();
+    return () => state;
+}
+const useFocusStackState = createGlobalState(() => signal([]));
+function createFocusScopesStack() {
+    /** A stack of focus scopes, with the active one at the top */
+    const stack = useFocusStackState();
+    return {
+        add(focusScope) {
+            const current = stack();
+            const active = current[0];
+            if (focusScope !== active) {
+                active?.pause();
+            }
+            const updated = arrayRemove(current, focusScope);
+            updated.unshift(focusScope);
+            stack.set(updated);
+        },
+        remove(focusScope) {
+            const current = stack();
+            const updated = arrayRemove(current, focusScope);
+            stack.set(updated);
+            // после удаления «возобновляем» новый верхний
+            stack()[0]?.resume();
+        }
+    };
+}
+function arrayRemove(array, item) {
+    const copy = [...array];
+    const idx = copy.indexOf(item);
+    if (idx !== -1) {
+        copy.splice(idx, 1);
+    }
+    return copy;
+}
+function removeLinks(items) {
+    return items.filter((el) => el.tagName !== 'A');
+}
+
+const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
+const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+function focusFirst(candidates, { select = false } = {}) {
+    const previouslyFocusedElement = getActiveElement();
+    for (const candidate of candidates) {
+        focus(candidate, { select });
+        if (getActiveElement() !== previouslyFocusedElement)
+            return true;
+    }
+    return;
+}
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+function getTabbableCandidates(container) {
+    const nodes = [];
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';
+            if (node.disabled || node.hidden || isHiddenInput)
+                return NodeFilter.FILTER_SKIP;
+            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+            // runtime's understanding of tabbability, so this automatically accounts
+            // for any kind of element that could be tabbed to.
+            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+    });
+    while (walker.nextNode())
+        nodes.push(walker.currentNode);
+    // we do not take into account the order of nodes with positive `tabIndex` as it
+    // hinders accessibility to have tab order different from visual order.
+    return nodes;
+}
+function isHidden(node, { upTo }) {
+    if (getComputedStyle(node).visibility === 'hidden')
+        return true;
+    while (node) {
+        // we stop at `upTo` (excluding it)
+        if (upTo !== undefined && node === upTo)
+            return false;
+        if (getComputedStyle(node).display === 'none')
+            return true;
+        node = node.parentElement;
+    }
+    return false;
+}
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+function findVisible(elements, container) {
+    for (const element of elements) {
+        // we stop checking if it's hidden at the `container` level (excluding)
+        if (!isHidden(element, { upTo: container }))
+            return element;
+    }
+    return undefined;
+}
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+function getTabbableEdges(container) {
+    const candidates = getTabbableCandidates(container);
+    const first = findVisible(candidates, container);
+    const last = findVisible(candidates.reverse(), container);
+    return [first, last];
+}
+function isSelectableInput(element) {
+    return element instanceof HTMLInputElement && 'select' in element;
+}
+function focus(element, { select = false } = {}) {
+    // only focus if that element is focusable
+    if (element && element.focus) {
+        const previouslyFocusedElement = getActiveElement();
+        // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
+        element.focus({ preventScroll: true });
+        // only select if its not the same element, it supports selection and we need to select
+        if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {
+            element.select();
+        }
+    }
+}
+
+const [injectFocusScopeContext, provideFocusScopeContext] = createContext('FocusScope Context');
+const rootContext = () => {
+    const context = inject(RdxFocusScope);
+    return {
+        loop: context.loop,
+        trapped: context.trapped
+    };
+};
+/**
+ * @group Components
+ */
+class RdxFocusScope {
+    constructor() {
+        this.injector = inject(Injector);
+        this.elementRef = inject(ElementRef);
+        /**
+         * When `true`, tabbing from last item will focus first tabbable
+         * and shift+tab from first item will focus last tababble.
+         *
+         * @group Props
+         * @defaultValue false
+         */
+        this.loop = input(false, { transform: booleanAttribute });
+        /**
+         * When `true`, focus cannot escape the focus scope via keyboard,
+         * pointer, or a programmatic focus.
+         *
+         * @group Props
+         * @defaultValue false
+         */
+        this.trapped = input(false, { transform: booleanAttribute });
+        /**
+         * Event handler called when auto-focusing on mount.
+         * Can be prevented.
+         *
+         * @group Emits
+         */
+        this.mountAutoFocus = output();
+        /**
+         * Event handler called when auto-focusing on unmount.
+         * Can be prevented.
+         *
+         * @group Emits
+         */
+        this.unmountAutoFocus = output();
+        this.lastFocusedElement = signal(null);
+        this.focusScopesStack = createFocusScopesStack();
+        this.focusScope = {
+            paused: signal(false),
+            pause: () => this.focusScope.paused.set(true),
+            resume: () => this.focusScope.paused.set(false)
+        };
+        afterNextRender(() => {
+            effect((onCleanup) => {
+                const container = this.elementRef.nativeElement;
+                if (this.trapped()) {
+                    const handleFocusIn = (event) => {
+                        if (this.focusScope.paused() || !container) {
+                            return;
+                        }
+                        const target = event.target;
+                        if (this.elementRef.nativeElement.contains(target)) {
+                            this.lastFocusedElement.set(target);
+                        }
+                        else {
+                            focus(this.lastFocusedElement(), { select: true });
+                        }
+                    };
+                    const handleFocusOut = (event) => {
+                        if (this.focusScope.paused() || !container) {
+                            return;
+                        }
+                        const relatedTarget = event.relatedTarget;
+                        // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
+                        //
+                        // 1. When the user switches app/tabs/windows/the browser itself loses focus.
+                        // 2. In Google Chrome, when the focused element is removed from the DOM.
+                        //
+                        // We let the browser do its thing here because:
+                        //
+                        // 1. The browser already keeps a memory of what's focused for when the page gets refocused.
+                        // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
+                        //    throws the CPU to 100%, so we avoid doing anything for this reason here too.
+                        if (relatedTarget === null)
+                            return;
+                        // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
+                        // that is outside the container, we move focus to the last valid focused element inside.
+                        if (!container.contains(relatedTarget)) {
+                            focus(this.lastFocusedElement(), { select: true });
+                        }
+                    };
+                    const handleMutations = () => {
+                        const isLastFocusedElementExist = container.contains(this.lastFocusedElement());
+                        if (!isLastFocusedElementExist) {
+                            focus(container);
+                        }
+                    };
+                    const mutationObserver = new MutationObserver(handleMutations);
+                    if (container) {
+                        mutationObserver.observe(container, { childList: true, subtree: true });
+                    }
+                    document.addEventListener('focusin', handleFocusIn);
+                    document.addEventListener('focusout', handleFocusOut);
+                    onCleanup(() => {
+                        document.removeEventListener('focusin', handleFocusIn);
+                        document.removeEventListener('focusout', handleFocusOut);
+                        mutationObserver.disconnect();
+                    });
+                }
+            }, { injector: this.injector });
+            effect(async (onCleanup) => {
+                const container = this.elementRef.nativeElement;
+                await Promise.resolve();
+                if (!container) {
+                    return;
+                }
+                this.focusScopesStack.add(this.focusScope);
+                const previouslyFocusedElement = getActiveElement();
+                const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+                if (!hasFocusedCandidate) {
+                    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+                    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev) => this.mountAutoFocus.emit(ev));
+                    container.dispatchEvent(mountEvent);
+                    if (!mountEvent.defaultPrevented) {
+                        focusFirst(removeLinks(getTabbableCandidates(container)), {
+                            select: true
+                        });
+                        if (getActiveElement() === previouslyFocusedElement)
+                            focus(container);
+                    }
+                }
+                onCleanup(() => {
+                    container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev) => this.mountAutoFocus.emit(ev));
+                    const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+                    const unmountEventHandler = (ev) => this.unmountAutoFocus.emit(ev);
+                    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+                    container.dispatchEvent(unmountEvent);
+                    setTimeout(() => {
+                        if (!unmountEvent.defaultPrevented)
+                            focus(previouslyFocusedElement ?? document.body, { select: true });
+                        // we need to remove the listener after we `dispatchEvent`
+                        container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+                        this.focusScopesStack.remove(this.focusScope);
+                    }, 0);
+                });
+            }, { injector: this.injector });
+        });
+    }
+    handleKeyDown(event) {
+        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
+        const focusedElement = getActiveElement();
+        if (isTabKey && focusedElement) {
+            const container = event.currentTarget;
+            const [first, last] = getTabbableEdges(container);
+            const hasTabbableElementsInside = first && last;
+            // we can only wrap focus if we have tabbable edges
+            if (!hasTabbableElementsInside) {
+                if (focusedElement === container)
+                    event.preventDefault();
+            }
+            else {
+                if (!event.shiftKey && focusedElement === last) {
+                    event.preventDefault();
+                    if (this.loop()) {
+                        focus(first, { select: true });
+                    }
+                }
+                else if (event.shiftKey && focusedElement === first) {
+                    event.preventDefault();
+                    if (this.loop()) {
+                        focus(last, { select: true });
+                    }
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusScope, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxFocusScope, isStandalone: true, selector: "[rdxFocusScope]", inputs: { loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, trapped: { classPropertyName: "trapped", publicName: "trapped", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mountAutoFocus: "mountAutoFocus", unmountAutoFocus: "unmountAutoFocus" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "handleKeyDown($event)" } }, providers: [provideFocusScopeContext(rootContext)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxFocusScope, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxFocusScope]',
+                    providers: [provideFocusScopeContext(rootContext)],
+                    host: {
+                        tabindex: '-1',
+                        '(keydown)': 'handleKeyDown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxFocusScope, injectFocusScopeContext, provideFocusScopeContext };
+//# sourceMappingURL=radix-ng-primitives-focus-scope.mjs.map

package/fesm2022/radix-ng-primitives-focus-scope.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-focus-scope.mjs","sources":["../../../packages/primitives/focus-scope/src/stack.ts","../../../packages/primitives/focus-scope/src/utils.ts","../../../packages/primitives/focus-scope/src/focus-scope.ts","../../../packages/primitives/focus-scope/radix-ng-primitives-focus-scope.ts"],"sourcesContent":["import { signal, WritableSignal } from '@angular/core';\n\nexport function createGlobalState<T>(factory: () => T): () => T {\n    const state = factory();\n    return () => state;\n}\n\nexport interface FocusScopeAPI {\n    paused: WritableSignal<boolean>;\n    pause(): void;\n    resume(): void;\n}\n\nconst useFocusStackState = createGlobalState(() => signal<FocusScopeAPI[]>([]));\n\nexport function createFocusScopesStack() {\n    /** A stack of focus scopes, with the active one at the top */\n    const stack = useFocusStackState();\n\n    return {\n        add(focusScope: FocusScopeAPI) {\n            const current = stack();\n            const active = current[0];\n            if (focusScope !== active) {\n                active?.pause();\n            }\n            const updated = arrayRemove(current, focusScope);\n            updated.unshift(focusScope);\n            stack.set(updated);\n        },\n\n        remove(focusScope: FocusScopeAPI) {\n            const current = stack();\n            const updated = arrayRemove(current, focusScope);\n            stack.set(updated);\n            // после удаления «возобновляем» новый верхний\n            stack()[0]?.resume();\n        }\n    };\n}\n\nexport function arrayRemove<T>(array: T[], item: T): T[] {\n    const copy = [...array];\n    const idx = copy.indexOf(item);\n    if (idx !== -1) {\n        copy.splice(idx, 1);\n    }\n    return copy;\n}\n\nexport function removeLinks(items: HTMLElement[]): HTMLElement[] {\n    return items.filter((el) => el.tagName !== 'A');\n}\n","import { getActiveElement } from '@radix-ng/primitives/core';\n\nexport const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';\nexport const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';\nexport const EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus: () => void };\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nexport function focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n    const previouslyFocusedElement = getActiveElement();\n    for (const candidate of candidates) {\n        focus(candidate, { select });\n        if (getActiveElement() !== previouslyFocusedElement) return true;\n    }\n\n    return;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n    const nodes: HTMLElement[] = [];\n    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n        acceptNode: (node: any) => {\n            const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n            if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n            // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n            // runtime's understanding of tabbability, so this automatically accounts\n            // for any kind of element that could be tabbed to.\n            return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n        }\n    });\n    while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n    // we do not take into account the order of nodes with positive `tabIndex` as it\n    // hinders accessibility to have tab order different from visual order.\n    return nodes;\n}\n\nexport function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n    if (getComputedStyle(node).visibility === 'hidden') return true;\n    while (node) {\n        // we stop at `upTo` (excluding it)\n        if (upTo !== undefined && node === upTo) return false;\n        if (getComputedStyle(node).display === 'none') return true;\n        node = node.parentElement as HTMLElement;\n    }\n    return false;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nexport function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined {\n    for (const element of elements) {\n        // we stop checking if it's hidden at the `container` level (excluding)\n        if (!isHidden(element, { upTo: container })) return element;\n    }\n    return undefined;\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nexport function getTabbableEdges(container: HTMLElement) {\n    const candidates = getTabbableCandidates(container);\n    const first = findVisible(candidates, container);\n    const last = findVisible(candidates.reverse(), container);\n    return [first, last] as const;\n}\n\nexport function isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n    return element instanceof HTMLInputElement && 'select' in element;\n}\n\nexport function focus(element?: FocusableTarget | null, { select = false } = {}) {\n    // only focus if that element is focusable\n    if (element && element.focus) {\n        const previouslyFocusedElement = getActiveElement();\n        // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n        element.focus({ preventScroll: true });\n        // only select if its not the same element, it supports selection and we need to select\n        if (element !== previouslyFocusedElement && isSelectableInput(element) && select) {\n            element.select();\n        }\n    }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n    afterNextRender,\n    booleanAttribute,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    Injector,\n    input,\n    output,\n    Signal,\n    signal\n} from '@angular/core';\nimport { createContext, getActiveElement } from '@radix-ng/primitives/core';\nimport { createFocusScopesStack, FocusScopeAPI, removeLinks } from './stack';\nimport {\n    AUTOFOCUS_ON_MOUNT,\n    AUTOFOCUS_ON_UNMOUNT,\n    EVENT_OPTIONS,\n    focus,\n    focusFirst,\n    getTabbableCandidates,\n    getTabbableEdges\n} from './utils';\n\nexport interface FocusScopeContext {\n    loop?: Signal<boolean>;\n\n    trapped?: Signal<boolean>;\n}\n\nexport const [injectFocusScopeContext, provideFocusScopeContext] =\n    createContext<FocusScopeContext>('FocusScope Context');\n\nconst rootContext = (): FocusScopeContext => {\n    const context = inject(RdxFocusScope);\n\n    return {\n        loop: context.loop,\n        trapped: context.trapped\n    };\n};\n\n/**\n * @group Components\n */\n@Directive({\n    selector: '[rdxFocusScope]',\n    providers: [provideFocusScopeContext(rootContext)],\n    host: {\n        tabindex: '-1',\n        '(keydown)': 'handleKeyDown($event)'\n    }\n})\nexport class RdxFocusScope {\n    private readonly injector = inject(Injector);\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * When `true`, tabbing from last item will focus first tabbable\n     * and shift+tab from first item will focus last tababble.\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    readonly loop = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * When `true`, focus cannot escape the focus scope via keyboard,\n     * pointer, or a programmatic focus.\n     *\n     * @group Props\n     * @defaultValue false\n     */\n    readonly trapped = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n    /**\n     * Event handler called when auto-focusing on mount.\n     * Can be prevented.\n     *\n     * @group Emits\n     */\n    readonly mountAutoFocus = output<Event>();\n\n    /**\n     * Event handler called when auto-focusing on unmount.\n     * Can be prevented.\n     *\n     * @group Emits\n     */\n    readonly unmountAutoFocus = output<Event>();\n\n    readonly lastFocusedElement = signal<HTMLElement | null>(null);\n\n    private readonly focusScopesStack = createFocusScopesStack();\n\n    readonly focusScope: FocusScopeAPI = {\n        paused: signal(false),\n        pause: () => this.focusScope.paused.set(true),\n        resume: () => this.focusScope.paused.set(false)\n    };\n\n    constructor() {\n        afterNextRender(() => {\n            effect(\n                (onCleanup) => {\n                    const container = this.elementRef.nativeElement;\n\n                    if (this.trapped()) {\n                        const handleFocusIn = (event: FocusEvent) => {\n                            if (this.focusScope.paused() || !container) {\n                                return;\n                            }\n\n                            const target = event.target as HTMLElement | null;\n                            if (this.elementRef.nativeElement.contains(target)) {\n                                this.lastFocusedElement.set(target);\n                            } else {\n                                focus(this.lastFocusedElement(), { select: true });\n                            }\n                        };\n\n                        const handleFocusOut = (event: FocusEvent) => {\n                            if (this.focusScope.paused() || !container) {\n                                return;\n                            }\n                            const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n                            // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n                            //\n                            // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n                            // 2. In Google Chrome, when the focused element is removed from the DOM.\n                            //\n                            // We let the browser do its thing here because:\n                            //\n                            // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n                            // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n                            //    throws the CPU to 100%, so we avoid doing anything for this reason here too.\n                            if (relatedTarget === null) return;\n\n                            // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n                            // that is outside the container, we move focus to the last valid focused element inside.\n                            if (!container.contains(relatedTarget)) {\n                                focus(this.lastFocusedElement(), { select: true });\n                            }\n                        };\n\n                        const handleMutations = () => {\n                            const isLastFocusedElementExist = container.contains(this.lastFocusedElement());\n\n                            if (!isLastFocusedElementExist) {\n                                focus(container);\n                            }\n                        };\n\n                        const mutationObserver = new MutationObserver(handleMutations);\n                        if (container) {\n                            mutationObserver.observe(container, { childList: true, subtree: true });\n                        }\n\n                        document.addEventListener('focusin', handleFocusIn);\n                        document.addEventListener('focusout', handleFocusOut);\n\n                        onCleanup(() => {\n                            document.removeEventListener('focusin', handleFocusIn);\n                            document.removeEventListener('focusout', handleFocusOut);\n                            mutationObserver.disconnect();\n                        });\n                    }\n                },\n                { injector: this.injector }\n            );\n\n            effect(\n                async (onCleanup) => {\n                    const container = this.elementRef.nativeElement;\n\n                    await Promise.resolve();\n                    if (!container) {\n                        return;\n                    }\n\n                    this.focusScopesStack.add(this.focusScope);\n\n                    const previouslyFocusedElement = getActiveElement() as HTMLElement | null;\n                    const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n                    if (!hasFocusedCandidate) {\n                        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n                        container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) => this.mountAutoFocus.emit(ev));\n                        container.dispatchEvent(mountEvent);\n\n                        if (!mountEvent.defaultPrevented) {\n                            focusFirst(removeLinks(getTabbableCandidates(container)), {\n                                select: true\n                            });\n                            if (getActiveElement() === previouslyFocusedElement) focus(container);\n                        }\n                    }\n\n                    onCleanup(() => {\n                        container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) => this.mountAutoFocus.emit(ev));\n\n                        const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n                        const unmountEventHandler = (ev: Event) => this.unmountAutoFocus.emit(ev);\n                        container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n                        container.dispatchEvent(unmountEvent);\n\n                        setTimeout(() => {\n                            if (!unmountEvent.defaultPrevented)\n                                focus(previouslyFocusedElement ?? document.body, { select: true });\n\n                            // we need to remove the listener after we `dispatchEvent`\n                            container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);\n\n                            this.focusScopesStack.remove(this.focusScope);\n                        }, 0);\n                    });\n                },\n                { injector: this.injector }\n            );\n        });\n    }\n\n    handleKeyDown(event: KeyboardEvent) {\n        const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;\n\n        const focusedElement = getActiveElement() as HTMLElement | null;\n\n        if (isTabKey && focusedElement) {\n            const container = event.currentTarget as HTMLElement;\n\n            const [first, last] = getTabbableEdges(container);\n            const hasTabbableElementsInside = first && last;\n\n            // we can only wrap focus if we have tabbable edges\n            if (!hasTabbableElementsInside) {\n                if (focusedElement === container) event.preventDefault();\n            } else {\n                if (!event.shiftKey && focusedElement === last) {\n                    event.preventDefault();\n                    if (this.loop()) {\n                        focus(first, { select: true });\n                    }\n                } else if (event.shiftKey && focusedElement === first) {\n                    event.preventDefault();\n                    if (this.loop()) {\n                        focus(last, { select: true });\n                    }\n                }\n            }\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/focus-scope/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/focus-scope

package/focus-scope/index.d.ts

@@ -0,0 +1 @@
+export * from './src/focus-scope';

package/focus-scope/src/focus-scope.d.ts

@@ -0,0 +1,53 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Signal } from '@angular/core';
+import { FocusScopeAPI } from './stack';
+import * as i0 from "@angular/core";
+export interface FocusScopeContext {
+    loop?: Signal<boolean>;
+    trapped?: Signal<boolean>;
+}
+export declare const injectFocusScopeContext: (optional?: boolean) => FocusScopeContext | null, provideFocusScopeContext: (useFactory: () => FocusScopeContext) => import("@angular/core").Provider;
+/**
+ * @group Components
+ */
+export declare class RdxFocusScope {
+    private readonly injector;
+    private readonly elementRef;
+    /**
+     * When `true`, tabbing from last item will focus first tabbable
+     * and shift+tab from first item will focus last tababble.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly loop: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * When `true`, focus cannot escape the focus scope via keyboard,
+     * pointer, or a programmatic focus.
+     *
+     * @group Props
+     * @defaultValue false
+     */
+    readonly trapped: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Event handler called when auto-focusing on mount.
+     * Can be prevented.
+     *
+     * @group Emits
+     */
+    readonly mountAutoFocus: import("@angular/core").OutputEmitterRef<Event>;
+    /**
+     * Event handler called when auto-focusing on unmount.
+     * Can be prevented.
+     *
+     * @group Emits
+     */
+    readonly unmountAutoFocus: import("@angular/core").OutputEmitterRef<Event>;
+    readonly lastFocusedElement: import("@angular/core").WritableSignal<HTMLElement | null>;
+    private readonly focusScopesStack;
+    readonly focusScope: FocusScopeAPI;
+    constructor();
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFocusScope, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFocusScope, "[rdxFocusScope]", never, { "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "trapped": { "alias": "trapped"; "required": false; "isSignal": true; }; }, { "mountAutoFocus": "mountAutoFocus"; "unmountAutoFocus": "unmountAutoFocus"; }, never, never, true, never>;
+}

package/focus-scope/src/stack.d.ts

@@ -0,0 +1,13 @@
+import { WritableSignal } from '@angular/core';
+export declare function createGlobalState<T>(factory: () => T): () => T;
+export interface FocusScopeAPI {
+    paused: WritableSignal<boolean>;
+    pause(): void;
+    resume(): void;
+}
+export declare function createFocusScopesStack(): {
+    add(focusScope: FocusScopeAPI): void;
+    remove(focusScope: FocusScopeAPI): void;
+};
+export declare function arrayRemove<T>(array: T[], item: T): T[];
+export declare function removeLinks(items: HTMLElement[]): HTMLElement[];

package/focus-scope/src/utils.d.ts

@@ -0,0 +1,46 @@
+export declare const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+export declare const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+export declare const EVENT_OPTIONS: {
+    bubbles: boolean;
+    cancelable: boolean;
+};
+type FocusableTarget = HTMLElement | {
+    focus: () => void;
+};
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+export declare function focusFirst(candidates: HTMLElement[], { select }?: {
+    select?: boolean | undefined;
+}): true | undefined;
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export declare function getTabbableCandidates(container: HTMLElement): HTMLElement[];
+export declare function isHidden(node: HTMLElement, { upTo }: {
+    upTo?: HTMLElement;
+}): boolean;
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export declare function findVisible(elements: HTMLElement[], container: HTMLElement): HTMLElement | undefined;
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+export declare function getTabbableEdges(container: HTMLElement): readonly [HTMLElement | undefined, HTMLElement | undefined];
+export declare function isSelectableInput(element: any): element is FocusableTarget & {
+    select: () => void;
+};
+export declare function focus(element?: FocusableTarget | null, { select }?: {
+    select?: boolean | undefined;
+}): void;
+export {};

package/hover-card/src/hover-card-root.directive.d.ts

@@ -93,7 +93,7 @@ export declare class RdxHoverCardRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#14263@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#14839@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -104,9 +104,9 @@ export declare class RdxHoverCardRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#14263@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#14263@#registerOnDestroyCallbacks"(): void;
-        "__#14263@#listenToClickDomRootEvent"(): void;
+        "__#14839@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#14839@#registerOnDestroyCallbacks"(): void;
+        "__#14839@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -88,10 +88,22 @@
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/radix-ng-primitives-dialog.mjs"
     },
+    "./dismissible-layer": {
+      "types": "./dismissible-layer/index.d.ts",
+      "default": "./fesm2022/radix-ng-primitives-dismissible-layer.mjs"
+    },
     "./dropdown-menu": {
       "types": "./dropdown-menu/index.d.ts",
       "default": "./fesm2022/radix-ng-primitives-dropdown-menu.mjs"
     },
+    "./editable": {
+      "types": "./editable/index.d.ts",
+      "default": "./fesm2022/radix-ng-primitives-editable.mjs"
+    },
+    "./focus-scope": {
+      "types": "./focus-scope/index.d.ts",
+      "default": "./fesm2022/radix-ng-primitives-focus-scope.mjs"
+    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "default": "./fesm2022/radix-ng-primitives-hover-card.mjs"

package/popover/src/popover-root.directive.d.ts

@@ -70,7 +70,7 @@ export declare class RdxPopoverRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#18641@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#19150@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -81,9 +81,9 @@ export declare class RdxPopoverRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#18641@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#18641@#registerOnDestroyCallbacks"(): void;
-        "__#18641@#listenToClickDomRootEvent"(): void;
+        "__#19150@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#19150@#registerOnDestroyCallbacks"(): void;
+        "__#19150@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

package/tooltip/src/tooltip-root.directive.d.ts

@@ -79,7 +79,7 @@ export declare class RdxTooltipRootDirective {
         window: Window & typeof globalThis;
         primitiveConfigs?: import("./utils/types").PrimitiveConfigs;
         onDestroyCallbacks: Set<() => void>;
-        "__#22490@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
+        "__#22995@#clickDomRootEventCallbacks": Set<(event: MouseEvent) => void>;
         registerPrimitive<T extends object>(primitiveInstance: T): void;
         deregisterPrimitive<T extends object>(primitiveInstance: T): void;
         preventPrimitiveFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): void;
@@ -90,9 +90,9 @@ export declare class RdxTooltipRootDirective {
         primitivePreventedFromCdkEvent<T extends object>(primitiveInstance: T, eventType: import("./utils/types").EventType): boolean | undefined;
         addClickDomRootEventCallback(callback: (event: MouseEvent) => void): void;
         removeClickDomRootEventCallback(callback: (event: MouseEvent) => void): boolean;
-        "__#22490@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
-        "__#22490@#registerOnDestroyCallbacks"(): void;
-        "__#22490@#listenToClickDomRootEvent"(): void;
+        "__#22995@#setPreventPrimitiveFromCdkEvent"<T extends object, R extends import("./utils/types").EventType, K extends import("./utils/types").PrimitiveConfig[`prevent${Capitalize<R>}`]>(primitiveInstance: T, eventType: R, value: K): void;
+        "__#22995@#registerOnDestroyCallbacks"(): void;
+        "__#22995@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;