@radix-ng/primitives 0.40.0 → 0.41.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/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>;
+        "__#14558@#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;
+        "__#14558@#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;
+        "__#14558@#registerOnDestroyCallbacks"(): void;
+        "__#14558@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -88,10 +88,18 @@
       "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"
+    },
     "./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>;
+        "__#18898@#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;
+        "__#18898@#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;
+        "__#18898@#registerOnDestroyCallbacks"(): void;
+        "__#18898@#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>;
+        "__#22743@#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;
+        "__#22743@#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;
+        "__#22743@#registerOnDestroyCallbacks"(): void;
+        "__#22743@#listenToClickDomRootEvent"(): void;
     } | null;
     /** @ignore */
     readonly destroyRef: DestroyRef;