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

package/fesm2022/basis-ng-primitives.mjs

@@ -1465,13 +1465,21 @@ 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 {
     /**
      * 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,25 +1489,25 @@ 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" }] : []));
+    /**
+     * 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.
      */
@@ -1521,26 +1529,28 @@ class Drawer {
         if (target.closest('.cdk-overlay-container')) {
             return;
         }
-        // Close the drawer
-        this.isOpen.set(false);
-        this.closeSheet.emit();
+        this.close();
     }
     /**
      * 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,32 +1560,79 @@ 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.el.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.close();
         }
         else {
             this.isOpen.set(true);
         }
     }
+    /**
+     * Closes the drawer and emits the close event.
+     */
+    close() {
+        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>
+    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>
+    }
     <div class="drawer-content" (click)="$event.stopPropagation()">
       <ng-content />
     </div>
@@ -1588,20 +1645,26 @@ 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>
+    @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>
   `,
                     host: {
+                        '[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()',
                     },
                 }]
-        }], 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: [{
+        }], 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']]
             }] } });
@@ -3049,97 +3112,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.
  */
@@ -3349,12 +3321,12 @@ class Tab {
         this.tabsContainer.selectTab(this.value());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Tab, isStandalone: true, selector: "b-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, hostDirectives: [{ directive: i1$3.Tab, inputs: ["value", "value"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Tab, isStandalone: true, selector: "button[b-tab], [b-tab]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, hostDirectives: [{ directive: i1$3.Tab, inputs: ["value", "value"] }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Tab, decorators: [{
             type: Component,
             args: [{
-                    selector: 'b-tab',
+                    selector: 'button[b-tab], [b-tab]',
                     imports: [],
                     hostDirectives: [
                         {
@@ -4221,5 +4193,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