@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

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

@@ -3,10 +3,10 @@ import { InjectionToken, signal, computed, input, booleanAttribute, linkedSignal
 
 const RdxDismissableLayersContextToken = new InjectionToken('RdxDismissableLayersContextToken', {
     factory() {
-        const layersRoot = signal([], ...(ngDevMode ? [{ debugName: "layersRoot" }] : []));
+        const layersRoot = signal([], ...(ngDevMode ? [{ debugName: "layersRoot" }] : /* istanbul ignore next */ []));
         return {
             layersRoot,
-            layersWithOutsidePointerEventsDisabled: computed(() => layersRoot().filter((i) => i.disableOutsidePointerEvents())),
+            layersWithOutsidePointerEventsDisabled: computed(() => layersRoot().filter((i) => i.isOutsidePointerEventsDisabled())),
             branches: signal([])
         };
     }
@@ -50,13 +50,13 @@ class RdxFocusOutside {
         return this.#enabled();
     }
     constructor() {
-        this.enabledInput = input(true, ...(ngDevMode ? [{ debugName: "enabledInput", transform: booleanAttribute, alias: 'enabled' }] : [{ transform: booleanAttribute, alias: 'enabled' }]));
-        this.#enabled = linkedSignal(() => this.enabledInput(), ...(ngDevMode ? [{ debugName: "#enabled" }] : []));
+        this.enabledInput = input(true, { ...(ngDevMode ? { debugName: "enabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enabled' });
+        this.#enabled = linkedSignal(() => this.enabledInput(), ...(ngDevMode ? [{ debugName: "#enabled" }] : /* istanbul ignore next */ []));
         this.focusOutside = output();
         /*
          * Flag to indicate if the focus is currently within the DOM subtree
          */
-        this.isFocusInsideDOMTree = signal(false, ...(ngDevMode ? [{ debugName: "isFocusInsideDOMTree" }] : []));
+        this.isFocusInsideDOMTree = signal(false, ...(ngDevMode ? [{ debugName: "isFocusInsideDOMTree" }] : /* istanbul ignore next */ []));
         /*
          * Handles capturing the focus event to mark focus as inside the DOM subtree
          */
@@ -83,6 +83,9 @@ class RdxFocusOutside {
                 if (!elementRef?.nativeElement) {
                     return;
                 }
+                // Defer past the focus settling: the first microtask lets the matching capture
+                // `focus`/`blur` handler update `isFocusInsideDOMTree`, the second lets the browser
+                // finish moving focus, so the check below reflects the final focus target.
                 await Promise.resolve();
                 await Promise.resolve();
                 const target = event.target;
@@ -111,16 +114,16 @@ class RdxFocusOutside {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxFocusOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxFocusOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxFocusOutside, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxFocusOutside, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxFocusOutside]',
                     exportAs: 'rdxFocusOutside'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { enabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }] } });
 /**
  * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`
  * to mimic layer dismissing behavior present in OS.
@@ -138,16 +141,25 @@ class RdxPointerDownOutside {
     }
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.enabledInput = input(true, ...(ngDevMode ? [{ debugName: "enabledInput", transform: booleanAttribute, alias: 'enabled' }] : [{ transform: booleanAttribute, alias: 'enabled' }]));
-        this.#enabled = linkedSignal(() => this.enabledInput(), ...(ngDevMode ? [{ debugName: "#enabled" }] : []));
+        this.enabledInput = input(true, { ...(ngDevMode ? { debugName: "enabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enabled' });
+        this.#enabled = linkedSignal(() => this.enabledInput(), ...(ngDevMode ? [{ debugName: "#enabled" }] : /* istanbul ignore next */ []));
         this.pointerDownOutside = output();
-        this.isPointerInsideDOMTree = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInsideDOMTree" }] : []));
+        this.isPointerInsideDOMTree = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInsideDOMTree" }] : /* istanbul ignore next */ []));
         this.handleAndDispatchPointerDownOutsideEvent = (e) => () => this.pointerDownOutside.emit(e);
         effect((onCleanup) => {
             if (!this.#enabled()) {
                 return;
             }
             const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
+            // Avoid the global `window` so this stays safe under SSR; `globalThis` provides
+            // `setTimeout`/`clearTimeout` in both the browser and Node.
+            const ownerWindow = ownerDocument.defaultView ?? globalThis;
+            const removeClickListener = () => {
+                if (this.handleClick) {
+                    ownerDocument.removeEventListener('click', this.handleClick);
+                    this.handleClick = undefined;
+                }
+            };
             const handlePointerDown = async (event) => {
                 if (event.target && !this.isPointerInsideDOMTree()) {
                     /**
@@ -163,7 +175,7 @@ class RdxPointerDownOutside {
                      * certain that it was raised, and therefore cleaned-up.
                      */
                     if (event.pointerType === 'touch') {
-                        ownerDocument.removeEventListener('click', this.handleClick);
+                        removeClickListener();
                         this.handleClick = this.handleAndDispatchPointerDownOutsideEvent(event);
                         ownerDocument.addEventListener('click', this.handleClick, {
                             once: true
@@ -176,7 +188,7 @@ class RdxPointerDownOutside {
                 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);
+                    removeClickListener();
                 }
                 this.isPointerInsideDOMTree.set(false);
             };
@@ -193,7 +205,7 @@ class RdxPointerDownOutside {
              *   })
              * });
              */
-            const timerId = window.setTimeout(() => {
+            const timerId = ownerWindow.setTimeout(() => {
                 ownerDocument.addEventListener('pointerdown', handlePointerDown);
             }, 0);
             const onPointerDownCapture = () => {
@@ -204,31 +216,31 @@ class RdxPointerDownOutside {
             };
             this.elementRef.nativeElement.addEventListener('pointerdown', onPointerDownCapture, { capture: true });
             onCleanup(() => {
-                window.clearTimeout(timerId);
+                ownerWindow.clearTimeout(timerId);
                 ownerDocument.removeEventListener('pointerdown', handlePointerDown);
-                ownerDocument.removeEventListener('click', this.handleClick);
+                removeClickListener();
                 this.elementRef.nativeElement.removeEventListener('pointerdown', onPointerDownCapture, {
                     capture: true
                 });
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPointerDownOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPointerDownOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "20.3.3", ngImport: i0, type: RdxPointerDownOutside, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPointerDownOutside, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxPointerDownOutside]',
                     exportAs: 'rdxPointerDownOutside'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { enabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
 class RdxEscapeKeyDown {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
         this.escapeKeyDown = output();
-        this.afterNextRender = afterNextRender(() => {
+        afterNextRender(() => {
             const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
             const handleKeyDown = (event) => {
                 if (event.key === 'Escape') {
@@ -243,18 +255,24 @@ class RdxEscapeKeyDown {
             }));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxEscapeKeyDown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxEscapeKeyDown, isStandalone: true, selector: "[rdxEscapeKeyDown]", outputs: { escapeKeyDown: "escapeKeyDown" }, exportAs: ["rdxEscapeKeyDown"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxEscapeKeyDown, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxEscapeKeyDown, isStandalone: true, selector: "[rdxEscapeKeyDown]", outputs: { escapeKeyDown: "escapeKeyDown" }, exportAs: ["rdxEscapeKeyDown"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxEscapeKeyDown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxEscapeKeyDown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxEscapeKeyDown]',
                     exportAs: 'rdxEscapeKeyDown'
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }] } });
 
-let originalBodyPointerEvents;
+/**
+ * Shared across all layers. Holds the body's original `pointer-events` value while at least one
+ * layer disables outside pointer events. `null` means the body is not currently overridden — it
+ * doubles as the "ownership" flag so stacked layers don't overwrite the saved original with
+ * `none`.
+ */
+let originalBodyPointerEvents = null;
 class RdxDismissableLayer {
     constructor() {
         this.elementRef = inject(ElementRef);
@@ -295,48 +313,26 @@ class RdxDismissableLayer {
          * the `DismissableLayer`. Users will need to click twice on outside elements to
          * interact with them: once to close the `DismissableLayer`, and again to trigger the element.
          */
-        this.disableOutsidePointerEvents = input(this.config.disableOutsidePointerEvents(), ...(ngDevMode ? [{ debugName: "disableOutsidePointerEvents", transform: booleanAttribute }] : [{
-                transform: booleanAttribute
-            }]));
-        this.layers = computed(() => this.context.layersRoot, ...(ngDevMode ? [{ debugName: "layers" }] : []));
-        this.isBodyPointerEventsDisabled = computed(() => this.context.layersWithOutsidePointerEventsDisabled().length > 0, ...(ngDevMode ? [{ debugName: "isBodyPointerEventsDisabled" }] : []));
+        this.disableOutsidePointerEvents = input(undefined, { ...(ngDevMode ? { debugName: "disableOutsidePointerEvents" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+        this.isOutsidePointerEventsDisabled = computed(() => this.disableOutsidePointerEvents() ?? this.config.disableOutsidePointerEvents(), ...(ngDevMode ? [{ debugName: "isOutsidePointerEventsDisabled" }] : /* istanbul ignore next */ []));
+        this.isBodyPointerEventsDisabled = computed(() => this.context.layersWithOutsidePointerEventsDisabled().length > 0, ...(ngDevMode ? [{ debugName: "isBodyPointerEventsDisabled" }] : /* istanbul ignore next */ []));
         this.isPointerEventsEnabled = computed(() => {
-            const localLayers = this.layers();
-            const [highestLayerWithOutsidePointerEventsDisabled] = [
-                ...this.context.layersWithOutsidePointerEventsDisabled()
-            ].slice(-1);
-            const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers().indexOf(highestLayerWithOutsidePointerEventsDisabled);
-            return this.index() >= highestLayerWithOutsidePointerEventsDisabledIndex;
-        }, ...(ngDevMode ? [{ debugName: "isPointerEventsEnabled" }] : []));
-        this.index = computed(() => this.context.layersRoot().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : []));
-        this.afterNextRender = afterNextRender(() => {
-            const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
-            let lastDisabledCount = 0;
-            untracked(() => {
-                this.context.layersRoot.update((v) => (v.includes(this) ? v : [...v, this]));
-            });
-            this.destroyRef.onDestroy(() => {
-                untracked(() => {
-                    this.context.layersRoot.update((v) => v.filter((x) => x !== this));
-                });
-            });
-            effect((onCleanup) => {
-                const disabledCount = this.context.layersWithOutsidePointerEventsDisabled().length;
-                if (lastDisabledCount === 0 && disabledCount > 0) {
-                    originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-                    ownerDocument.body.style.pointerEvents = 'none';
-                }
-                onCleanup(() => {
-                    const next = untracked(() => this.context.layersWithOutsidePointerEventsDisabled().length);
-                    if (lastDisabledCount > 0 && next === 0) {
-                        ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
-                    }
-                    lastDisabledCount = next;
-                });
-                lastDisabledCount = disabledCount;
-            }, { injector: this.injector });
-        });
+            const layers = this.context.layersRoot();
+            const disabledLayers = this.context.layersWithOutsidePointerEventsDisabled();
+            const highestDisabledLayer = disabledLayers[disabledLayers.length - 1];
+            return this.index() >= layers.indexOf(highestDisabledLayer);
+        }, ...(ngDevMode ? [{ debugName: "isPointerEventsEnabled" }] : /* istanbul ignore next */ []));
+        this.index = computed(() => this.context.layersRoot().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /** The topmost layer in the stack — the only one that should react to the Escape key. */
+        this.isHighestLayer = computed(() => {
+            const layers = this.context.layersRoot();
+            return layers.indexOf(this) === layers.length - 1;
+        }, ...(ngDevMode ? [{ debugName: "isHighestLayer" }] : /* istanbul ignore next */ []));
         this.context.layersRoot.update((v) => [...v, this]);
+        this.destroyRef.onDestroy(() => {
+            this.context.layersRoot.update((v) => v.filter((i) => i !== this));
+        });
+        this.setupBodyPointerEvents();
         this.rdxPointerDownOutside.pointerDownOutside.subscribe((event) => {
             const isPointerDownOnBranch = this.context
                 .branches()
@@ -364,20 +360,46 @@ class RdxDismissableLayer {
             }
         });
         this.rdxEscapeKeyDown.escapeKeyDown.subscribe((event) => {
+            // Only the topmost layer is dismissed by Escape; stacked layers close one at a time.
+            if (!this.isHighestLayer()) {
+                return;
+            }
             this.escapeKeyDown.emit(event);
             if (!event.defaultPrevented) {
                 event.preventDefault();
                 this.dismiss.emit();
             }
         });
-        this.destroyRef.onDestroy(() => {
-            this.context.layersRoot.update((v) => v.filter((i) => i !== this));
+    }
+    /**
+     * Toggles `pointer-events: none` on the document body while any layer has
+     * `disableOutsidePointerEvents`. Ownership is shared across all layers via
+     * {@link originalBodyPointerEvents}: the original value is saved only on the global
+     * `0 -> >0` transition and restored only when the count returns to `0`.
+     */
+    setupBodyPointerEvents() {
+        afterNextRender(() => {
+            const ownerDocument = this.elementRef.nativeElement.ownerDocument ?? globalThis.document;
+            effect((onCleanup) => {
+                const disabledCount = this.context.layersWithOutsidePointerEventsDisabled().length;
+                if (disabledCount > 0 && originalBodyPointerEvents === null) {
+                    originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                    ownerDocument.body.style.pointerEvents = 'none';
+                }
+                onCleanup(() => {
+                    const remaining = untracked(() => this.context.layersWithOutsidePointerEventsDisabled().length);
+                    if (remaining === 0 && originalBodyPointerEvents !== null) {
+                        ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+                        originalBodyPointerEvents = null;
+                    }
+                });
+            }, { injector: this.injector });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDismissableLayer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxDismissableLayer, isStandalone: true, selector: "[rdxDismissableLayer]", inputs: { disableOutsidePointerEvents: { classPropertyName: "disableOutsidePointerEvents", publicName: "disableOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", dismiss: "dismiss" }, host: { attributes: { "data-dismissable-layer": "" }, properties: { "style": "{\n            pointerEvents: isBodyPointerEventsDisabled() ? (isPointerEventsEnabled() ? 'auto' : 'none') : undefined\n        }" } }, exportAs: ["rdxDismissableLayer"], hostDirectives: [{ directive: RdxPointerDownOutside }, { directive: RdxFocusOutside }, { directive: RdxEscapeKeyDown }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxDismissableLayer, isStandalone: true, selector: "[rdxDismissableLayer]", inputs: { disableOutsidePointerEvents: { classPropertyName: "disableOutsidePointerEvents", publicName: "disableOutsidePointerEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside", dismiss: "dismiss" }, host: { attributes: { "data-dismissable-layer": "" }, properties: { "style": "{\n            pointerEvents: isBodyPointerEventsDisabled() ? (isPointerEventsEnabled() ? 'auto' : 'none') : undefined\n        }" } }, exportAs: ["rdxDismissableLayer"], hostDirectives: [{ directive: RdxPointerDownOutside }, { directive: RdxFocusOutside }, { directive: RdxEscapeKeyDown }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDismissableLayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDismissableLayer]',
@@ -390,7 +412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }`
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], disableOutsidePointerEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOutsidePointerEvents", required: false }] }] } });
 
 class RdxDismissableLayerBranch {
     constructor() {
@@ -400,10 +422,10 @@ class RdxDismissableLayerBranch {
         this.dismissableLayersContext.branches.update((elements) => [...elements, this.elementRef.nativeElement]);
         this.destroyRef.onDestroy(() => this.dismissableLayersContext.branches.update((elements) => elements.filter((el) => el !== this.elementRef.nativeElement)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDismissableLayerBranch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxDismissableLayerBranch, isStandalone: true, selector: "[rdxDismissableLayerBranch]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayerBranch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxDismissableLayerBranch, isStandalone: true, selector: "[rdxDismissableLayerBranch]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxDismissableLayerBranch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxDismissableLayerBranch, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxDismissableLayerBranch]'