@basis-ng/primitives 0.0.1-alpha.148 → 0.0.1-alpha.149

package/fesm2022/basis-ng-primitives.mjs

@@ -1480,6 +1480,12 @@ class Drawer {
      * Whether the drawer can be dragged closed.
      */
     draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : {}), transform: booleanAttribute });
+    /**
+     * Whether clicking outside closes the drawer.
+     * When false, a full-viewport blocking overlay is mounted at body level
+     * so outside clicks (and pointer events) cannot reach other elements.
+     */
+    closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : {}), transform: booleanAttribute });
     /**
      * Emitted when the sheet is closed.
      */
@@ -1512,6 +1518,24 @@ class Drawer {
      * Element reference to the host component.
      */
     el = inject(ElementRef);
+    /**
+     * Body-level blocking overlay used when closable=false to prevent
+     * pointer events from reaching elements behind the open drawer.
+     */
+    blockingOverlay = null;
+    constructor() {
+        effect(() => {
+            if (this.isOpen() && !this.closable()) {
+                this.mountBlockingOverlay();
+            }
+            else {
+                this.removeBlockingOverlay();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removeBlockingOverlay();
+    }
     /**
      * Close the drawer when clicking outside of it.
      * The stopPropagation in the drawer-content prevents clicks inside from closing it.
@@ -1520,6 +1544,8 @@ class Drawer {
     closeOnOutsideClick(event) {
         if (!this.isOpen())
             return;
+        if (!this.closable())
+            return;
         const target = event.target;
         if (this.el.nativeElement.contains(target)) {
             return;
@@ -1624,8 +1650,35 @@ class Drawer {
     getCloseDirection() {
         return this.side() === 'top' || this.side() === 'left' ? -1 : 1;
     }
+    /**
+     * Mounts a transparent full-viewport div at body level that captures all
+     * pointer events, preventing them from reaching elements behind the drawer.
+     */
+    mountBlockingOverlay() {
+        if (this.blockingOverlay)
+            return;
+        const div = document.createElement('div');
+        div.style.cssText = 'position:fixed;inset:0;z-index:998;';
+        div.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        div.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        document.body.appendChild(div);
+        this.blockingOverlay = div;
+    }
+    /**
+     * Removes the blocking overlay from the DOM if present.
+     */
+    removeBlockingOverlay() {
+        this.blockingOverlay?.remove();
+        this.blockingOverlay = null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Drawer, isStandalone: true, selector: "b-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.bottom": "side() === \"bottom\"", "class.draggable": "draggable()", "class.dragging": "isDragging()", "class.left": "side() === \"left\"", "class.open": "isOpen()", "class.right": "side() === \"right\"", "class.top": "side() === \"top\"", "style.transform": "transform()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Drawer, isStandalone: true, selector: "b-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.bottom": "side() === \"bottom\"", "class.draggable": "draggable()", "class.dragging": "isDragging()", "class.left": "side() === \"left\"", "class.open": "isOpen()", "class.right": "side() === \"right\"", "class.top": "side() === \"top\"", "style.transform": "transform()" } }, ngImport: i0, template: `
     @if (draggable()) {
       <div class="drag-section" (pointerdown)="startDrag($event)">
         <div class="drag-indicator"></div>
@@ -1665,7 +1718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[style.transform]': 'transform()',
                     },
                 }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], closeSheet: [{ type: i0.Output, args: ["closeSheet"] }], closeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeThreshold", required: false }] }], closeOnOutsideClick: [{
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeSheet: [{ type: i0.Output, args: ["closeSheet"] }], closeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeThreshold", required: false }] }], closeOnOutsideClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });