ng-blatui 1.13.0 → 1.15.0

package/fesm2022/ng-blatui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild } from '@angular/core';
+import { input, computed, Directive, Component, signal, model, inject, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender } from '@angular/core';
 import { cva } from 'class-variance-authority';
 export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
 export { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
@@ -10,6 +10,8 @@ import { isPlatformBrowser } from '@angular/common';
 import { _IdGenerator } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { Menu } from '@angular/aria/menu';
+export { Menu, MenuBar, MenuContent, MenuItem, MenuTrigger } from '@angular/aria/menu';
 
 /**
  * Merge class names with `clsx` semantics and resolve Tailwind conflicts with
@@ -69,8 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const BASE = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
-const SIZES$2 = {
+const BASE$1 = 'inline-flex items-center justify-center rounded-md border font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden';
+const SIZES$3 = {
     sm: 'px-1.5 py-px text-[0.625rem]',
     default: 'px-2 py-0.5 text-xs',
     lg: 'px-3 py-1 text-sm [&>svg]:size-3.5',
@@ -144,7 +146,7 @@ class BuiBadge {
     computedClass = computed(() => {
         const tone = this.tone();
         const toneOrVariant = tone === null ? brandClass(this.variant()) : TONES$2[tone][intensityFor(this.variant())];
-        return cn(BASE, SIZES$2[this.size()], toneOrVariant, this.userClass());
+        return cn(BASE$1, SIZES$3[this.size()], toneOrVariant, this.userClass());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -2343,7 +2345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES$1 = {
+const SIZES$2 = {
     sm: 'max-w-3xl',
     md: 'max-w-5xl',
     lg: 'max-w-6xl',
@@ -2356,7 +2358,7 @@ class BuiContainer {
     size = input('lg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$1[this.size()], this.userClass()), /* @ts-ignore */
+    computedClass = computed(() => cn('mx-auto w-full px-4 sm:px-6 lg:px-8', SIZES$2[this.size()], this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiContainer, isStandalone: true, selector: "[buiContainer]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "container" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
@@ -3043,7 +3045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
-const SIZES = {
+const SIZES$1 = {
     sm: { box: 'size-6', overlap: '-ms-2', ring: 'ring-1', text: 'text-xs' },
     default: { box: 'size-8', overlap: '-ms-2.5', ring: 'ring-2', text: 'text-sm' },
     lg: { box: 'size-12', overlap: '-ms-3', ring: 'ring-2', text: 'text-base' },
@@ -3075,11 +3077,11 @@ class BuiAvatarGroup {
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     toInitials = initials;
     itemClass(index) {
-        const size = SIZES[this.size()];
+        const size = SIZES$1[this.size()];
         return cn(size.box, size.ring, 'ring-background', index > 0 && size.overlap);
     }
     moreClass() {
-        const size = SIZES[this.size()];
+        const size = SIZES$1[this.size()];
         return cn('relative z-10 flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-foreground', size.box, size.ring, 'ring-background', size.text, this.shown().length > 0 && size.overlap);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4498,6 +4500,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/**
+ * Confirm dialog styling (`role="alertdialog"`). Open it with the CDK `Dialog` service
+ * (re-exported from `ng-blatui`) on a template whose root carries `buiAlertDialogContent`.
+ */
+class BuiAlertDialogContent {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('relative grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogContent, isStandalone: true, selector: "[buiAlertDialogContent]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-content", "role": "alertdialog" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDialogContent]',
+                    host: { 'data-slot': 'alert-dialog-content', role: 'alertdialog', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertDialogHeader {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogHeader, isStandalone: true, selector: "[buiAlertDialogHeader]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-header" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDialogHeader]',
+                    host: { 'data-slot': 'alert-dialog-header', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertDialogTitle {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-lg font-semibold', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogTitle, isStandalone: true, selector: "[buiAlertDialogTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-title" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDialogTitle]',
+                    host: { 'data-slot': 'alert-dialog-title', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertDialogDescription {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('text-sm text-muted-foreground', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogDescription, isStandalone: true, selector: "[buiAlertDialogDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-description" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDialogDescription]',
+                    host: { 'data-slot': 'alert-dialog-description', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiAlertDialogFooter {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogFooter, isStandalone: true, selector: "[buiAlertDialogFooter]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "alert-dialog-footer" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiAlertDialogFooter]',
+                    host: { 'data-slot': 'alert-dialog-footer', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Primary confirm action button. */
+class BuiAlertDialogAction {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(buttonVariants(), this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogAction, isStandalone: true, selector: "button[buiAlertDialogAction]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-slot": "alert-dialog-action" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiAlertDialogAction]',
+                    host: { type: 'button', 'data-slot': 'alert-dialog-action', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+/** Cancel (dismiss) button. */
+class BuiAlertDialogCancel {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn(buttonVariants({ variant: 'outline' }), this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAlertDialogCancel, isStandalone: true, selector: "button[buiAlertDialogCancel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-slot": "alert-dialog-cancel" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAlertDialogCancel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[buiAlertDialogCancel]',
+                    host: { type: 'button', 'data-slot': 'alert-dialog-cancel', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const BASE = 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 flex w-full resize-none overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50';
+const SIZES = {
+    sm: 'min-h-14 px-2.5 py-1.5 text-sm',
+    default: 'min-h-16 px-3 py-2 text-base md:text-sm',
+    lg: 'min-h-20 px-4 py-2.5 text-base',
+};
+/**
+ * A textarea that grows with its content. SSR-safe — the height is measured only in the
+ * browser (via `afterNextRender` and the `input` event).
+ */
+class BuiAutosizeTextarea {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    maxRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    host = inject(ElementRef);
+    computedClass = computed(() => cn(BASE, SIZES[this.size()], this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.resize();
+        });
+    }
+    resize() {
+        const element = this.host.nativeElement;
+        element.style.height = 'auto';
+        let target = element.scrollHeight;
+        const maxRows = this.maxRows();
+        if (maxRows !== null) {
+            const styles = getComputedStyle(element);
+            let lineHeight = Number.parseFloat(styles.lineHeight);
+            if (Number.isNaN(lineHeight)) {
+                lineHeight = Number.parseFloat(styles.fontSize) * 1.2;
+            }
+            const padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
+            const border = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
+            const cap = lineHeight * maxRows + padding + border;
+            if (target > cap) {
+                target = cap;
+                element.style.overflowY = 'auto';
+            }
+            else {
+                element.style.overflowY = 'hidden';
+            }
+        }
+        element.style.height = `${target}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiAutosizeTextarea, isStandalone: true, selector: "textarea[buiAutosizeTextarea]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "autosize-textarea" }, listeners: { "input": "resize()" }, properties: { "attr.data-size": "size()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiAutosizeTextarea, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[buiAutosizeTextarea]',
+                    host: {
+                        'data-slot': 'autosize-textarea',
+                        '[attr.data-size]': 'size()',
+                        '[class]': 'computedClass()',
+                        '(input)': 'resize()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class BuiDropdownMenu {
+    menu = inject(Menu);
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('absolute z-50 mt-1 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenu, isStandalone: true, selector: "[buiDropdownMenu]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu" }, properties: { "hidden": "!menu.visible()", "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDropdownMenu]',
+                    host: {
+                        'data-slot': 'dropdown-menu',
+                        '[hidden]': '!menu.visible()',
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDropdownMenuItem {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenuItem, isStandalone: true, selector: "[buiDropdownMenuItem]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu-item" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDropdownMenuItem]',
+                    host: { 'data-slot': 'dropdown-menu-item', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDropdownMenuLabel {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('px-2 py-1.5 text-sm font-medium', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenuLabel, isStandalone: true, selector: "[buiDropdownMenuLabel]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu-label" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDropdownMenuLabel]',
+                    host: { 'data-slot': 'dropdown-menu-label', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class BuiDropdownMenuSeparator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('-mx-1 my-1 h-px bg-border', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: BuiDropdownMenuSeparator, isStandalone: true, selector: "[buiDropdownMenuSeparator]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dropdown-menu-separator", "role": "separator" }, properties: { "class": "computedClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDropdownMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiDropdownMenuSeparator]',
+                    host: { 'data-slot': 'dropdown-menu-separator', role: 'separator', '[class]': 'computedClass()' },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -4506,5 +4739,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map