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

package/fesm2022/basis-ng-primitives.mjs

@@ -1521,15 +1521,13 @@ class Drawer {
         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();
+        this.requestClose();
     }
     /**
      * Begin tracking pointer movement for drag-to-dismiss.
@@ -1579,7 +1577,7 @@ class Drawer {
      */
     snapToOpenOrClose() {
         if (this.dragProgress() > this.closeThreshold()) {
-            this.close();
+            this.requestClose();
         }
         else {
             this.isOpen.set(true);
@@ -1588,7 +1586,7 @@ class Drawer {
     /**
      * Closes the drawer and emits the close event.
      */
-    close() {
+    requestClose() {
         this.isOpen.set(false);
         this.closeSheet.emit();
     }
@@ -1633,6 +1631,7 @@ class Drawer {
         <div class="drag-indicator"></div>
       </div>
     }
+
     <div class="drawer-content" (click)="$event.stopPropagation()">
       <ng-content />
     </div>
@@ -1650,6 +1649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         <div class="drag-indicator"></div>
       </div>
     }
+
     <div class="drawer-content" (click)="$event.stopPropagation()">
       <ng-content />
     </div>
@@ -1684,6 +1684,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.
  */
@@ -3112,6 +3177,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.
  */
@@ -4193,5 +4281,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