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

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, viewChild, 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, HostListener, 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,7 +1468,6 @@ 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,14 +1504,31 @@ class Drawer {
      * Computed CSS transform for the drawer based on drag/open state.
      */
     transform = computed(() => this.getTransform(this.currentProgress()), ...(ngDevMode ? [{ debugName: "transform" }] : []));
-    /**
-     * Backdrop opacity that tracks the drawer open progress.
-     */
-    backdropOpacity = computed(() => ((100 - this.currentProgress()) / 100) * 0.14, ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : []));
     /**
      * 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.
+     */
+    el = inject(ElementRef);
+    /**
+     * Close the drawer when clicking outside of it.
+     * The stopPropagation in the drawer-content prevents clicks inside from closing it.
+     * @param event - Click event.
+     */
+    closeOnOutsideClick(event) {
+        if (!this.isOpen())
+            return;
+        const target = event.target;
+        if (this.el.nativeElement.contains(target)) {
+            return;
+        }
+        if (target.closest('.cdk-overlay-container')) {
+            return;
+        }
+        this.requestClose();
+    }
     /**
      * Begin tracking pointer movement for drag-to-dismiss.
      * @param event - Pointer down event.
@@ -1545,7 +1561,7 @@ class Drawer {
      * @param event - Current pointer event.
      */
     updateDrag(event) {
-        const host = this.panel().nativeElement;
+        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;
@@ -1609,30 +1625,15 @@ 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: { 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>
+    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: `
+    @if (draggable()) {
+      <div class="drag-section" (pointerdown)="startDrag($event)">
+        <div class="drag-indicator"></div>
+      </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 class="drawer-content" (click)="$event.stopPropagation()">
+      <ng-content />
     </div>
   `, isInline: true });
 }
@@ -1643,41 +1644,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     standalone: true,
                     imports: [],
                     template: `
-    @if (isOpen() || isDragging()) {
-      <div
-        class="drawer-backdrop"
-        [style.opacity]="backdropOpacity()"
-        (click)="requestClose()"
-      ></div>
+    @if (draggable()) {
+      <div class="drag-section" (pointerdown)="startDrag($event)">
+        <div class="drag-indicator"></div>
+      </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 class="drawer-content" (click)="$event.stopPropagation()">
+      <ng-content />
     </div>
   `,
                     host: {
                         '[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()',
                     },
                 }]
-        }], 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 }] }] } });
+        }], 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']]
+            }] } });
 
 /**
  * Wrapper for grouping input-related elements.
@@ -1694,6 +1685,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * A full-viewport backdrop layer that can dim background content behind projected overlays.
+ */
+class Backdrop {
+    /**
+     * Whether the backdrop is active.
+     */
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /**
+     * Optional open progress from 0 (open) to 100 (closed).
+     */
+    progress = input(null, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    /**
+     * Maximum darkness applied when fully open.
+     */
+    maxOpacity = input(0.14, ...(ngDevMode ? [{ debugName: "maxOpacity" }] : []));
+    /**
+     * Whether clicking the backdrop closes it automatically.
+     */
+    closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : {}), transform: booleanAttribute });
+    /**
+     * Whether opacity changes should animate.
+     */
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : {}), transform: booleanAttribute });
+    /**
+     * Emitted whenever the backdrop surface is clicked.
+     */
+    backdropClick = output();
+    /**
+     * Current effective opacity based on explicit progress or open state.
+     */
+    opacity = computed(() => {
+        const progress = this.progress();
+        if (progress === null) {
+            return this.isOpen() ? this.maxOpacity() : 0;
+        }
+        return ((100 - progress) / 100) * this.maxOpacity();
+    }, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
+    handleBackdropClick() {
+        this.backdropClick.emit();
+        if (this.closeOnClick()) {
+            this.isOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Backdrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: Backdrop, isStandalone: true, selector: "b-backdrop", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, maxOpacity: { classPropertyName: "maxOpacity", publicName: "maxOpacity", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", backdropClick: "backdropClick" }, host: { properties: { "class.b-open": "isOpen()", "class.b-animated": "animated()" } }, ngImport: i0, template: `
+    <div class="b-backdrop-layer" [style.opacity]="opacity()" (click)="handleBackdropClick()"></div>
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Backdrop, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-backdrop',
+                    template: `
+    <div class="b-backdrop-layer" [style.opacity]="opacity()" (click)="handleBackdropClick()"></div>
+    <ng-content />
+  `,
+                    host: {
+                        '[class.b-open]': 'isOpen()',
+                        '[class.b-animated]': 'animated()',
+                    },
+                }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], maxOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOpacity", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }] } });
+
 /**
  * Root menu container that applies CDK menu behavior.
  */
@@ -3122,6 +3178,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }] });
 
+/**
+ * A loading directive that overlays a skeleton shimmer on the host element while preserving size.
+ */
+class Skeleton {
+    /**
+     * Whether the host should display the skeleton state.
+     */
+    loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : {}), alias: 'bSkeleton', transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Skeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: Skeleton, isStandalone: true, selector: "[bSkeleton]", inputs: { loading: { classPropertyName: "loading", publicName: "bSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading()", "class.b-skeleton": "true", "class.b-loading": "loading()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Skeleton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bSkeleton]',
+                    host: {
+                        '[attr.aria-busy]': 'loading()',
+                        '[class.b-skeleton]': 'true',
+                        '[class.b-loading]': 'loading()',
+                    },
+                }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "bSkeleton", required: false }] }] } });
+
 /**
  * A spinner component to indicate loading states.
  */
@@ -4203,5 +4282,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, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
+export { Alert, Backdrop, 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, Skeleton, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
 //# sourceMappingURL=basis-ng-primitives.mjs.map