@basis-ng/primitives 0.0.1-alpha.144 → 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';
@@ -1465,13 +1465,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         }], ctorParameters: () => [] });
 
 /**
- * A draggable bottom sheet drawer with open/close and drag-to-dismiss behavior.
+ * A draggable floating drawer that can slide from any side.
  */
 class Drawer {
+    panel = viewChild.required('panel');
     /**
      * Model indicating whether the drawer is open.
      */
     isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /**
+     * Side of the viewport the drawer appears from.
+     */
+    side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
+    /**
+     * Whether the drawer can be dragged closed.
+     */
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : {}), transform: booleanAttribute });
     /**
      * Emitted when the sheet is closed.
      */
@@ -1481,66 +1490,49 @@ class Drawer {
      */
     isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     /**
-     * Starting Y position of the pointer when drag begins.
+     * Starting pointer coordinate for the active drag axis.
      */
-    startY = signal(0, ...(ngDevMode ? [{ debugName: "startY" }] : []));
+    startOffset = signal(0, ...(ngDevMode ? [{ debugName: "startOffset" }] : []));
     /**
-     * Current vertical translation of the drawer.
+     * Current close progress of the drawer, from 0 (open) to 100 (closed).
      */
-    translateY = signal(100, ...(ngDevMode ? [{ debugName: "translateY" }] : []));
+    dragProgress = signal(100, ...(ngDevMode ? [{ debugName: "dragProgress" }] : []));
     /**
-     * Vertical drag threshold (percentage) to trigger close on release.
+     * Drag threshold (percentage) to trigger close on release.
      */
     closeThreshold = input(30, ...(ngDevMode ? [{ debugName: "closeThreshold" }] : []));
     /**
      * Computed CSS transform for the drawer based on drag/open state.
      */
-    transform = computed(() => this.isDragging()
-        ? `translateY(${this.translateY()}%)`
-        : this.isOpen()
-            ? 'translateY(0%)'
-            : 'translateY(100%)', ...(ngDevMode ? [{ debugName: "transform" }] : []));
+    transform = computed(() => this.getTransform(this.currentProgress()), ...(ngDevMode ? [{ debugName: "transform" }] : []));
     /**
-     * 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;
-        }
-        // Close the drawer
-        this.isOpen.set(false);
-        this.closeSheet.emit();
-    }
+    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.
      */
     startDrag(event) {
+        if (!this.draggable()) {
+            return;
+        }
+        event.preventDefault();
         this.isDragging.set(true);
-        this.startY.set(event.clientY);
-        // Initialize translateY based on the current state:
-        this.translateY.set(this.isOpen() ? 0 : 100);
-        // Disable text selection for better UX
+        this.startOffset.set(this.getPointerOffset(event));
+        this.dragProgress.set(this.isOpen() ? 0 : 100);
         document.body.style.userSelect = 'none';
-        const move = (e) => this.updateDrag(e.clientY);
+        const move = (e) => {
+            e.preventDefault();
+            this.updateDrag(e);
+        };
         const end = () => {
             this.isDragging.set(false);
             this.snapToOpenOrClose();
-            // Restore text selection
             document.body.style.userSelect = '';
             window.removeEventListener('pointermove', move);
             window.removeEventListener('pointerup', end);
@@ -1550,34 +1542,97 @@ class Drawer {
     }
     /**
      * Update drawer position during drag.
-     * @param clientY - Current pointer Y position.
-     */
-    updateDrag(clientY) {
-        const deltaPx = clientY - this.startY();
-        const sheetHeight = this.el.nativeElement.offsetHeight;
-        // Convert the pixel delta to a percentage relative to the sheet height
-        const deltaPercent = (deltaPx / sheetHeight) * 100;
-        // If open, the initial position is 0%; if closed, it is 100%
-        const newPos = Math.min(100, Math.max(0, this.isOpen() ? 0 + deltaPercent : 100 + deltaPercent));
-        this.translateY.set(newPos);
-    } /**
+     * @param event - Current pointer event.
+     */
+    updateDrag(event) {
+        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;
+        if (!size) {
+            return;
+        }
+        const deltaPercent = (deltaPx / size) * 100;
+        const nextProgress = Math.min(100, Math.max(0, deltaPercent));
+        this.dragProgress.set(nextProgress);
+    }
+    /**
      * Snap the drawer to open or closed based on threshold.
      */
     snapToOpenOrClose() {
-        if (this.translateY() > this.closeThreshold()) {
-            this.isOpen.set(false);
+        if (this.dragProgress() > this.closeThreshold()) {
+            this.requestClose();
         }
         else {
             this.isOpen.set(true);
         }
     }
+    /**
+     * Closes the drawer and emits the close event.
+     */
+    requestClose() {
+        this.isOpen.set(false);
+        this.closeSheet.emit();
+    }
+    /**
+     * Maps the current side to the transform axis and sign.
+     */
+    getTransform(progress) {
+        switch (this.side()) {
+            case 'top':
+                return `translateY(-${progress}%)`;
+            case 'left':
+                return `translateX(-${progress}%)`;
+            case 'right':
+                return `translateX(${progress}%)`;
+            case 'bottom':
+            default:
+                return `translateY(${progress}%)`;
+        }
+    }
+    /**
+     * Returns the pointer coordinate relevant to the active drag axis.
+     */
+    getPointerOffset(event) {
+        return this.isHorizontal() ? event.clientX : event.clientY;
+    }
+    /**
+     * Indicates whether the drawer moves horizontally.
+     */
+    isHorizontal() {
+        return this.side() === 'left' || this.side() === 'right';
+    }
+    /**
+     * Returns the positive pointer direction that closes the drawer.
+     */
+    getCloseDirection() {
+        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.1.0", version: "21.0.8", type: Drawer, isStandalone: true, selector: "b-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", 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.dragging": "isDragging()", "class.open": "isOpen()", "style.transform": "transform()" } }, ngImport: i0, template: `
-    <div class="drag-section" (pointerdown)="startDrag($event)">
-      <div class="drag-indicator"></div>
-    </div>
-    <div class="drawer-content" (click)="$event.stopPropagation()">
-      <ng-content />
+    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
+      #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 });
 }
@@ -1588,23 +1643,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     standalone: true,
                     imports: [],
                     template: `
-    <div class="drag-section" (pointerdown)="startDrag($event)">
-      <div class="drag-indicator"></div>
-    </div>
-    <div class="drawer-content" (click)="$event.stopPropagation()">
-      <ng-content />
+    @if (isOpen() || isDragging()) {
+      <div
+        class="drawer-backdrop"
+        [style.opacity]="backdropOpacity()"
+        (click)="requestClose()"
+      ></div>
+    }
+
+    <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: {
+                        '[class.bottom]': 'side() === "bottom"',
                         '[class.dragging]': 'isDragging()',
+                        '[class.left]': 'side() === "left"',
                         '[class.open]': 'isOpen()',
-                        '[style.transform]': 'transform()',
+                        '[class.right]': 'side() === "right"',
+                        '[class.top]': 'side() === "top"',
                     },
                 }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], 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.
@@ -3049,97 +3122,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
-/**
- * Slide-in sheet panel used for side or bottom panels with optional backdrop.
- */
-class Sheet {
-    /**
-     * Whether the sheet is open. Can be two-way bound.
-     */
-    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    /**
-     * Side of the sheet panel.
-     */
-    side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : []));
-    /**
-     * Whether the sheet is positioned on the right side.
-     */
-    isRight = computed(() => this.side() === 'right', ...(ngDevMode ? [{ debugName: "isRight" }] : []));
-    /**
-     * Emitted when the sheet is closed.
-     */
-    closeSheet = output();
-    /**
-     * Reference to the host element.
-     */
-    el = inject(ElementRef);
-    /**
-     * Closes the sheet when clicking outside of it.
-     */
-    closeOnOutsideClick(event) {
-        if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {
-            this.isOpen.set(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Sheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Sheet, isStandalone: true, selector: "b-sheet", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.left": "side() === \"left\"", "class.right": "side() === \"right\"", "class.open": "isOpen()" } }, ngImport: i0, template: `
-    <button class="close-button" (click)="isOpen.set(false)">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="0.094rem"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-x"
-      >
-        <path d="M18 6 6 18" />
-        <path d="m6 6 12 12" />
-      </svg>
-    </button>
-    <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Sheet, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-sheet',
-                    standalone: true,
-                    imports: [],
-                    template: `
-    <button class="close-button" (click)="isOpen.set(false)">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="0.094rem"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-x"
-      >
-        <path d="M18 6 6 18" />
-        <path d="m6 6 12 12" />
-      </svg>
-    </button>
-    <ng-content />
-  `,
-                    host: {
-                        '[class.left]': 'side() === "left"',
-                        '[class.right]': 'side() === "right"',
-                        '[class.open]': 'isOpen()',
-                    },
-                }]
-        }], 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 }] }], closeSheet: [{ type: i0.Output, args: ["closeSheet"] }], closeOnOutsideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
 /**
  * A spinner component to indicate loading states.
  */
@@ -4221,5 +4203,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, Badge, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogContent, DialogManager, Drawer, Input, InputGroup, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, Overlay, OverlayOrigin, OverlayTrigger, Popover, PopoverTrigger, Range, ResponsiveManager, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
+export { Alert, Badge, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogContent, DialogManager, Drawer, Input, InputGroup, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, Overlay, OverlayOrigin, OverlayTrigger, Popover, PopoverTrigger, Range, ResponsiveManager, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
 //# sourceMappingURL=basis-ng-primitives.mjs.map