@basis-ng/primitives 0.0.1-alpha.145 → 0.0.1-alpha.146

package/fesm2022/basis-ng-primitives.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, inject, ElementRef, signal, model, computed, viewChildren, booleanAttribute, ChangeDetectionStrategy, contentChildren, effect, Injectable, contentChild, ViewEncapsulation, HostListener, Directive, linkedSignal, TemplateRef, ChangeDetectorRef, Pipe, afterRenderEffect, RendererFactory2, PLATFORM_ID } from '@angular/core';
+import { input, output, Component, inject, ElementRef, signal, model, computed, viewChildren, booleanAttribute, ChangeDetectionStrategy, contentChildren, effect, Injectable, contentChild, ViewEncapsulation, viewChild, Directive, linkedSignal, TemplateRef, ChangeDetectorRef, Pipe, afterRenderEffect, RendererFactory2, PLATFORM_ID } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideX, lucideChevronRight, lucideChevronLeft, lucideLoaderCircle, lucideLoader, lucideGripVertical } from '@ng-icons/lucide';
 import { GridCellWidget, Grid, GridRow, GridCell } from '@angular/aria/grid';
@@ -1468,6 +1468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * A draggable floating drawer that can slide from any side.
  */
 class Drawer {
+    panel = viewChild.required('panel');
     /**
      * Model indicating whether the drawer is open.
      */
@@ -1505,32 +1506,13 @@ class Drawer {
      */
     transform = computed(() => this.getTransform(this.currentProgress()), ...(ngDevMode ? [{ debugName: "transform" }] : []));
     /**
-     * Current progress to use for the rendered transform.
-     */
-    currentProgress = computed(() => this.isDragging() ? this.dragProgress() : this.isOpen() ? 0 : 100, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
-    /**
-     * Element reference to the host component.
+     * Backdrop opacity that tracks the drawer open progress.
      */
-    el = inject(ElementRef);
+    backdropOpacity = computed(() => ((100 - this.currentProgress()) / 100) * 0.14, ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : []));
     /**
-     * Close the drawer when clicking outside of it.
-     * The stopPropagation in the drawer-content prevents clicks inside from closing it.
-     * @param event - Click event.
+     * Current progress to use for the rendered transform.
      */
-    closeOnOutsideClick(event) {
-        if (!this.isOpen())
-            return;
-        const target = event.target;
-        // Check if click is inside the drawer
-        if (this.el.nativeElement.contains(target)) {
-            return;
-        }
-        // Check if click is inside a CDK overlay (select dropdown, dialogs, etc.)
-        if (target.closest('.cdk-overlay-container')) {
-            return;
-        }
-        this.close();
-    }
+    currentProgress = computed(() => this.isDragging() ? this.dragProgress() : this.isOpen() ? 0 : 100, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
     /**
      * Begin tracking pointer movement for drag-to-dismiss.
      * @param event - Pointer down event.
@@ -1563,7 +1545,7 @@ class Drawer {
      * @param event - Current pointer event.
      */
     updateDrag(event) {
-        const host = this.el.nativeElement;
+        const host = this.panel().nativeElement;
         const pointerOffset = this.getPointerOffset(event);
         const deltaPx = (pointerOffset - this.startOffset()) * this.getCloseDirection();
         const size = this.isHorizontal() ? host.offsetWidth : host.offsetHeight;
@@ -1579,7 +1561,7 @@ class Drawer {
      */
     snapToOpenOrClose() {
         if (this.dragProgress() > this.closeThreshold()) {
-            this.close();
+            this.requestClose();
         }
         else {
             this.isOpen.set(true);
@@ -1588,7 +1570,7 @@ class Drawer {
     /**
      * Closes the drawer and emits the close event.
      */
-    close() {
+    requestClose() {
         this.isOpen.set(false);
         this.closeSheet.emit();
     }
@@ -1627,14 +1609,30 @@ class Drawer {
         return this.side() === 'top' || this.side() === 'left' ? -1 : 1;
     }
     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.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>
-      </div>
+    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: { properties: { "class.bottom": "side() === \"bottom\"", "class.dragging": "isDragging()", "class.left": "side() === \"left\"", "class.open": "isOpen()", "class.right": "side() === \"right\"", "class.top": "side() === \"top\"" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isOpen() || isDragging()) {
+      <div
+        class="drawer-backdrop"
+        [style.opacity]="backdropOpacity()"
+        (click)="requestClose()"
+      ></div>
     }
-    <div class="drawer-content" (click)="$event.stopPropagation()">
-      <ng-content />
+
+    <div
+      #panel
+      class="drawer-panel"
+      [style.transform]="transform()"
+      (click)="$event.stopPropagation()"
+    >
+      @if (draggable()) {
+        <div class="drag-section" (pointerdown)="startDrag($event)">
+          <div class="drag-indicator"></div>
+        </div>
+      }
+
+      <div class="drawer-content" (click)="$event.stopPropagation()">
+        <ng-content />
+      </div>
     </div>
   `, isInline: true });
 }
@@ -1645,13 +1643,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     standalone: true,
                     imports: [],
                     template: `
-    @if (draggable()) {
-      <div class="drag-section" (pointerdown)="startDrag($event)">
-        <div class="drag-indicator"></div>
-      </div>
+    @if (isOpen() || isDragging()) {
+      <div
+        class="drawer-backdrop"
+        [style.opacity]="backdropOpacity()"
+        (click)="requestClose()"
+      ></div>
     }
-    <div class="drawer-content" (click)="$event.stopPropagation()">
-      <ng-content />
+
+    <div
+      #panel
+      class="drawer-panel"
+      [style.transform]="transform()"
+      (click)="$event.stopPropagation()"
+    >
+      @if (draggable()) {
+        <div class="drag-section" (pointerdown)="startDrag($event)">
+          <div class="drag-indicator"></div>
+        </div>
+      }
+
+      <div class="drawer-content" (click)="$event.stopPropagation()">
+        <ng-content />
+      </div>
     </div>
   `,
                     host: {
@@ -1661,13 +1675,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.open]': 'isOpen()',
                         '[class.right]': 'side() === "right"',
                         '[class.top]': 'side() === "top"',
-                        '[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: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
+        }], propDecorators: { panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], 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 }] }] } });
 
 /**
  * Wrapper for grouping input-related elements.