@tolle_/tolle-ui 0.0.13-beta → 0.0.15-beta

package/esm2022/lib/dropdown-item.component.mjs

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DropdownItemComponent {
+    class = '';
+    cn = (c1, c2) => `${c1} ${c2}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "tolle-dropdown-item", inputs: { class: "class" }, ngImport: i0, template: `
+    <div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-item', standalone: true, imports: [], template: `
+    <div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
+      <ng-content></ng-content>
+    </div>
+  ` }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24taXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQWEvQyxNQUFNLE9BQU8scUJBQXFCO0lBQ3ZCLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDVCxFQUFFLEdBQUcsQ0FBQyxFQUFVLEVBQUUsRUFBVSxFQUFFLEVBQUUsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQzt3R0FGdkQscUJBQXFCOzRGQUFyQixxQkFBcUIsMkdBUHRCOzs7O0dBSVQ7OzRGQUdVLHFCQUFxQjtrQkFYakMsU0FBUzsrQkFDRSxxQkFBcUIsY0FDbkIsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUOzhCQUlRLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWRyb3Bkb3duLWl0ZW0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtjbGFzc109XCJjbigncmVsYXRpdmUgZmxleCBjdXJzb3ItZGVmYXVsdCBzZWxlY3Qtbm9uZSBpdGVtcy1jZW50ZXIgcm91bmRlZC1zbSBweC0yIHB5LTEuNSB0ZXh0LXNtIG91dGxpbmUtbm9uZSB0cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpiZy1hY2NlbnQgaG92ZXI6dGV4dC1hY2NlbnQtZm9yZWdyb3VuZCBkYXRhLVtkaXNhYmxlZF06cG9pbnRlci1ldmVudHMtbm9uZSBkYXRhLVtkaXNhYmxlZF06b3BhY2l0eS01MCcsIGNsYXNzKVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IGBgXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duSXRlbUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgPSAnJztcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGNuID0gKGMxOiBzdHJpbmcsIGMyOiBzdHJpbmcpID0+IGAke2MxfSAke2MyfWA7XG59XG4iXX0=

package/esm2022/lib/dropdown-label.component.mjs

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DropdownLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownLabelComponent, isStandalone: true, selector: "tolle-dropdown-label", ngImport: i0, template: `
+    <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-label', standalone: true, imports: [], template: `
+    <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+      <ng-content></ng-content>
+    </div>
+  ` }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG9sbGUvc3JjL2xpYi9kcm9wZG93bi1sYWJlbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFhMUMsTUFBTSxPQUFPLHNCQUFzQjt3R0FBdEIsc0JBQXNCOzRGQUF0QixzQkFBc0IsZ0ZBUHZCOzs7O0dBSVQ7OzRGQUdVLHNCQUFzQjtrQkFYbEMsU0FBUzsrQkFDRSxzQkFBc0IsY0FDcEIsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWRyb3Bkb3duLWxhYmVsJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInB4LTIgcHktMS41IHRleHQteHMgZm9udC1zZW1pYm9sZCB0ZXh0LW11dGVkLWZvcmVncm91bmQgdXBwZXJjYXNlIHRyYWNraW5nLXdpZGVyXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogYGBcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25MYWJlbENvbXBvbmVudCB7XG5cbn1cbiJdfQ==

package/esm2022/lib/dropdown-menu.component.mjs

@@ -0,0 +1,27 @@
+import { Component, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DropdownMenuComponent {
+    templateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "tolle-dropdown-menu", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template #menuTemplate>
+      <div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-menu', standalone: true, imports: [], template: `
+    <ng-template #menuTemplate>
+      <div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  ` }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLW1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQWVoRSxNQUFNLE9BQU8scUJBQXFCO0lBQ0wsV0FBVyxDQUFvQjt3R0FEL0MscUJBQXFCOzRGQUFyQixxQkFBcUIsNExBVHRCOzs7Ozs7R0FNVDs7NEZBR1UscUJBQXFCO2tCQWJqQyxTQUFTOytCQUNFLHFCQUFxQixjQUNuQixJQUFJLFdBQ1AsRUFBRSxZQUNEOzs7Ozs7R0FNVDs4QkFJMEIsV0FBVztzQkFBckMsU0FBUzt1QkFBQyxjQUFjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0b2xsZS1kcm9wZG93bi1tZW51JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLXRlbXBsYXRlICNtZW51VGVtcGxhdGU+XG4gICAgICA8ZGl2IGNsYXNzPVwiei1bMTAwMF0gbWluLXctWzEycmVtXSBvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBiZy1wb3BvdmVyIHAtMSB0ZXh0LXBvcG92ZXItZm9yZWdyb3VuZCBzaGFkb3ctbWQgYW5pbWF0ZS1pbiBmYWRlLWluIHpvb20taW4tOTVcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgYCxcbiAgc3R5bGVzOiBgYFxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93bk1lbnVDb21wb25lbnQge1xuICBAVmlld0NoaWxkKCdtZW51VGVtcGxhdGUnKSB0ZW1wbGF0ZVJlZiE6IFRlbXBsYXRlUmVmPGFueT47XG59XG4iXX0=

package/esm2022/lib/dropdown-separator.component.mjs

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class DropdownSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownSeparatorComponent, isStandalone: true, selector: "tolle-dropdown-separator", ngImport: i0, template: `<div class="-mx-1 my-1 h-px bg-border"></div>`, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-separator', standalone: true, imports: [], template: `<div class="-mx-1 my-1 h-px bg-border"></div>` }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9saWIvZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVMxQyxNQUFNLE9BQU8sMEJBQTBCO3dHQUExQiwwQkFBMEI7NEZBQTFCLDBCQUEwQixvRkFIM0IsK0NBQStDOzs0RkFHOUMsMEJBQTBCO2tCQVB0QyxTQUFTOytCQUNFLDBCQUEwQixjQUN4QixJQUFJLFdBQ1AsRUFBRSxZQUNELCtDQUErQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0b2xsZS1kcm9wZG93bi1zZXBhcmF0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwiLW14LTEgbXktMSBoLXB4IGJnLWJvcmRlclwiPjwvZGl2PmAsXG4gIHN0eWxlczogYGBcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25TZXBhcmF0b3JDb21wb25lbnQge1xuXG59XG4iXX0=

package/esm2022/lib/dropdown-trigger.directive.mjs

@@ -0,0 +1,76 @@
+import { Directive, Input, HostListener } from '@angular/core';
+import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+import * as i0 from "@angular/core";
+export class DropdownTriggerDirective {
+    el;
+    vcr;
+    menu;
+    cleanup;
+    isOpen = false;
+    menuElement;
+    constructor(el, vcr) {
+        this.el = el;
+        this.vcr = vcr;
+    }
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        // Create the menu view
+        const view = this.vcr.createEmbeddedView(this.menu.templateRef);
+        this.menuElement = view.rootNodes[0];
+        document.body.appendChild(this.menuElement);
+        // Floating UI positioning logic
+        this.cleanup = autoUpdate(this.el.nativeElement, this.menuElement, () => {
+            computePosition(this.el.nativeElement, this.menuElement, {
+                placement: 'bottom-end',
+                middleware: [
+                    offset(4), // Space between trigger and menu
+                    flip(), // Flip to top if space is tight
+                    shift({ padding: 8 }) // Prevent menu from hitting screen edges
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(this.menuElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    position: 'absolute'
+                });
+            });
+        });
+        // Close on outside click
+        setTimeout(() => {
+            document.addEventListener('click', this.outsideClick);
+        });
+    }
+    close() {
+        this.isOpen = false;
+        this.cleanup?.();
+        this.menuElement?.remove();
+        document.removeEventListener('click', this.outsideClick);
+    }
+    outsideClick = (event) => {
+        if (!this.el.nativeElement.contains(event.target) && !this.menuElement?.contains(event.target)) {
+            this.close();
+        }
+    };
+    ngOnDestroy() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[tolleDropdownTrigger]", inputs: { menu: ["tolleDropdownTrigger", "menu"] }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tolleDropdownTrigger]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { menu: [{
+                type: Input,
+                args: ['tolleDropdownTrigger']
+            }], toggle: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tdHJpZ2dlci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLXRyaWdnZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUF5QixZQUFZLEVBQW9CLE1BQU0sZUFBZSxDQUFDO0FBQ3hHLE9BQU8sRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7O0FBT3BGLE1BQU0sT0FBTyx3QkFBd0I7SUFRekI7SUFDQTtJQVJxQixJQUFJLENBQXlCO0lBRXBELE9BQU8sQ0FBYztJQUNyQixNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2YsV0FBVyxDQUFlO0lBRWxDLFlBQ1UsRUFBYyxFQUNkLEdBQXFCO1FBRHJCLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxRQUFHLEdBQUgsR0FBRyxDQUFrQjtJQUM1QixDQUFDO0lBR0osTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzNDLENBQUM7SUFFTyxJQUFJO1FBQ1YsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFFbkIsdUJBQXVCO1FBQ3ZCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFnQixDQUFDO1FBQ3BELFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUU1QyxnQ0FBZ0M7UUFDaEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsRUFBRSxHQUFHLEVBQUU7WUFDdEUsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxXQUFZLEVBQUU7Z0JBQ3hELFNBQVMsRUFBRSxZQUFZO2dCQUN2QixVQUFVLEVBQUU7b0JBQ1YsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLGlDQUFpQztvQkFDNUMsSUFBSSxFQUFFLEVBQUksZ0NBQWdDO29CQUMxQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyx5Q0FBeUM7aUJBQ2hFO2FBQ0YsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUU7Z0JBQ25CLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVksQ0FBQyxLQUFLLEVBQUU7b0JBQ3JDLElBQUksRUFBRSxHQUFHLENBQUMsSUFBSTtvQkFDZCxHQUFHLEVBQUUsR0FBRyxDQUFDLElBQUk7b0JBQ2IsUUFBUSxFQUFFLFVBQVU7aUJBQ3JCLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7UUFFSCx5QkFBeUI7UUFDekIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3hELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLEtBQUs7UUFDWCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsV0FBVyxFQUFFLE1BQU0sRUFBRSxDQUFDO1FBQzNCLFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzNELENBQUM7SUFFTyxZQUFZLEdBQUcsQ0FBQyxLQUFpQixFQUFFLEVBQUU7UUFDM0MsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBYyxDQUFDLEVBQUUsQ0FBQztZQUN2RyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDO0lBQ0gsQ0FBQyxDQUFDO0lBRUYsV0FBVztRQUNULElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNmLENBQUM7d0dBaEVVLHdCQUF3Qjs0RkFBeEIsd0JBQXdCOzs0RkFBeEIsd0JBQXdCO2tCQUpwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4R0FFZ0MsSUFBSTtzQkFBbEMsS0FBSzt1QkFBQyxzQkFBc0I7Z0JBWTdCLE1BQU07c0JBREwsWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgRWxlbWVudFJlZiwgT25EZXN0cm95LCBIb3N0TGlzdGVuZXIsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNvbXB1dGVQb3NpdGlvbiwgZmxpcCwgc2hpZnQsIG9mZnNldCwgYXV0b1VwZGF0ZSB9IGZyb20gJ0BmbG9hdGluZy11aS9kb20nO1xuaW1wb3J0IHsgRHJvcGRvd25NZW51Q29tcG9uZW50IH0gZnJvbSAnLi9kcm9wZG93bi1tZW51LmNvbXBvbmVudCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t0b2xsZURyb3Bkb3duVHJpZ2dlcl0nLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duVHJpZ2dlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgndG9sbGVEcm9wZG93blRyaWdnZXInKSBtZW51ITogRHJvcGRvd25NZW51Q29tcG9uZW50O1xuXG4gIHByaXZhdGUgY2xlYW51cD86ICgpID0+IHZvaWQ7XG4gIHByaXZhdGUgaXNPcGVuID0gZmFsc2U7XG4gIHByaXZhdGUgbWVudUVsZW1lbnQ/OiBIVE1MRWxlbWVudDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgdmNyOiBWaWV3Q29udGFpbmVyUmVmXG4gICkge31cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIHRvZ2dsZSgpIHtcbiAgICB0aGlzLmlzT3BlbiA/IHRoaXMuY2xvc2UoKSA6IHRoaXMub3BlbigpO1xuICB9XG5cbiAgcHJpdmF0ZSBvcGVuKCkge1xuICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcblxuICAgIC8vIENyZWF0ZSB0aGUgbWVudSB2aWV3XG4gICAgY29uc3QgdmlldyA9IHRoaXMudmNyLmNyZWF0ZUVtYmVkZGVkVmlldyh0aGlzLm1lbnUudGVtcGxhdGVSZWYpO1xuICAgIHRoaXMubWVudUVsZW1lbnQgPSB2aWV3LnJvb3ROb2Rlc1swXSBhcyBIVE1MRWxlbWVudDtcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMubWVudUVsZW1lbnQpO1xuXG4gICAgLy8gRmxvYXRpbmcgVUkgcG9zaXRpb25pbmcgbG9naWNcbiAgICB0aGlzLmNsZWFudXAgPSBhdXRvVXBkYXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5tZW51RWxlbWVudCwgKCkgPT4ge1xuICAgICAgY29tcHV0ZVBvc2l0aW9uKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5tZW51RWxlbWVudCEsIHtcbiAgICAgICAgcGxhY2VtZW50OiAnYm90dG9tLWVuZCcsXG4gICAgICAgIG1pZGRsZXdhcmU6IFtcbiAgICAgICAgICBvZmZzZXQoNCksIC8vIFNwYWNlIGJldHdlZW4gdHJpZ2dlciBhbmQgbWVudVxuICAgICAgICAgIGZsaXAoKSwgICAvLyBGbGlwIHRvIHRvcCBpZiBzcGFjZSBpcyB0aWdodFxuICAgICAgICAgIHNoaWZ0KHsgcGFkZGluZzogOCB9KSAvLyBQcmV2ZW50IG1lbnUgZnJvbSBoaXR0aW5nIHNjcmVlbiBlZGdlc1xuICAgICAgICBdXG4gICAgICB9KS50aGVuKCh7IHgsIHkgfSkgPT4ge1xuICAgICAgICBPYmplY3QuYXNzaWduKHRoaXMubWVudUVsZW1lbnQhLnN0eWxlLCB7XG4gICAgICAgICAgbGVmdDogYCR7eH1weGAsXG4gICAgICAgICAgdG9wOiBgJHt5fXB4YCxcbiAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJ1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0pO1xuXG4gICAgLy8gQ2xvc2Ugb24gb3V0c2lkZSBjbGlja1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLm91dHNpZGVDbGljayk7XG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGNsb3NlKCkge1xuICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XG4gICAgdGhpcy5jbGVhbnVwPy4oKTtcbiAgICB0aGlzLm1lbnVFbGVtZW50Py5yZW1vdmUoKTtcbiAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMub3V0c2lkZUNsaWNrKTtcbiAgfVxuXG4gIHByaXZhdGUgb3V0c2lkZUNsaWNrID0gKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKCF0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSAmJiAhdGhpcy5tZW51RWxlbWVudD8uY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpKSB7XG4gICAgICB0aGlzLmNsb3NlKCk7XG4gICAgfVxuICB9O1xuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuY2xvc2UoKTtcbiAgfVxufVxuIl19

package/esm2022/lib/toaster.component.mjs

@@ -0,0 +1,94 @@
+// projects/tolle/src/lib/toast-container.component.ts
+import { Component, inject, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToastService } from './toast.service';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class ToastContainerComponent {
+    toastService = inject(ToastService);
+    position = 'bottom-right';
+    toasts$ = this.toastService.toasts$;
+    get positionClasses() {
+        const pos = {
+            'top-right': 'top-0 right-0 flex-col-reverse',
+            'top-left': 'top-0 left-0 flex-col-reverse',
+            'bottom-right': 'bottom-0 right-0',
+            'bottom-left': 'bottom-0 left-0',
+            'top-center': 'top-0 left-1/2 -translate-x-1/2 flex-col-reverse',
+            'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
+        };
+        return pos[this.position];
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToastContainerComponent, isStandalone: true, selector: "tolle-toaster", inputs: { position: "position" }, ngImport: i0, template: `
+    <div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
+      <div
+        *ngFor="let toast of toasts$ | async"
+        (mouseenter)="toastService.setPaused(toast.id, true)"
+        (mouseleave)="toastService.setPaused(toast.id, false)"
+        [class]="cn(
+          'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
+          toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
+        )"
+      >
+        <div class="grid gap-1">
+          <div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
+          <div class="text-xs opacity-90">{{ toast.description }}</div>
+        </div>
+
+        <button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
+          <i class="ri-close-line"></i>
+        </button>
+
+        <div
+          class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
+          [style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
+          [class.bg-destructive]="toast.variant === 'destructive'"
+          [class.bg-primary]="toast.variant !== 'destructive'"
+        ></div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-toaster',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
+      <div
+        *ngFor="let toast of toasts$ | async"
+        (mouseenter)="toastService.setPaused(toast.id, true)"
+        (mouseleave)="toastService.setPaused(toast.id, false)"
+        [class]="cn(
+          'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
+          toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
+        )"
+      >
+        <div class="grid gap-1">
+          <div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
+          <div class="text-xs opacity-90">{{ toast.description }}</div>
+        </div>
+
+        <button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
+          <i class="ri-close-line"></i>
+        </button>
+
+        <div
+          class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
+          [style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
+          [class.bg-destructive]="toast.variant === 'destructive'"
+          [class.bg-primary]="toast.variant !== 'destructive'"
+        ></div>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3Rlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL3RvYXN0ZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHNEQUFzRDtBQUN0RCxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxZQUFZLEVBQXVCLE1BQU0saUJBQWlCLENBQUM7QUFDbkUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQzs7O0FBb0NoQyxNQUFNLE9BQU8sdUJBQXVCO0lBQ2xDLFlBQVksR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDM0IsUUFBUSxHQUFrQixjQUFjLENBQUM7SUFDbEQsT0FBTyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDO0lBQ3BDLElBQUksZUFBZTtRQUNqQixNQUFNLEdBQUcsR0FBRztZQUNWLFdBQVcsRUFBRSxnQ0FBZ0M7WUFDN0MsVUFBVSxFQUFFLCtCQUErQjtZQUMzQyxjQUFjLEVBQUUsa0JBQWtCO1lBQ2xDLGFBQWEsRUFBRSxpQkFBaUI7WUFDaEMsWUFBWSxFQUFFLGtEQUFrRDtZQUNoRSxlQUFlLEVBQUUsb0NBQW9DO1NBQ3RELENBQUM7UUFDRixPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUNTLEVBQUUsR0FBRyxFQUFFLENBQUM7d0dBZlAsdUJBQXVCOzRGQUF2Qix1QkFBdUIsMkdBOUJ4Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVCwyREE3QlMsWUFBWTs7NEZBK0JYLHVCQUF1QjtrQkFsQ25DLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRCVDtpQkFDRjs4QkFHVSxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLy8gcHJvamVjdHMvdG9sbGUvc3JjL2xpYi90b2FzdC1jb250YWluZXIuY29tcG9uZW50LnRzXG5pbXBvcnQge0NvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtUb2FzdFNlcnZpY2UsIFRvYXN0LCBUb2FzdFBvc2l0aW9ufSBmcm9tICcuL3RvYXN0LnNlcnZpY2UnO1xuaW1wb3J0IHsgY24gfSBmcm9tICcuL3V0aWxzL2NuJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndG9sbGUtdG9hc3RlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2NsYXNzXT1cImNuKCdmaXhlZCB6LVsxMDBdIGZsZXggZmxleC1jb2wgZ2FwLTIgdy1mdWxsIG1heC13LVszODBweF0gcC00JywgcG9zaXRpb25DbGFzc2VzKVwiPlxuICAgICAgPGRpdlxuICAgICAgICAqbmdGb3I9XCJsZXQgdG9hc3Qgb2YgdG9hc3RzJCB8IGFzeW5jXCJcbiAgICAgICAgKG1vdXNlZW50ZXIpPVwidG9hc3RTZXJ2aWNlLnNldFBhdXNlZCh0b2FzdC5pZCwgdHJ1ZSlcIlxuICAgICAgICAobW91c2VsZWF2ZSk9XCJ0b2FzdFNlcnZpY2Uuc2V0UGF1c2VkKHRvYXN0LmlkLCBmYWxzZSlcIlxuICAgICAgICBbY2xhc3NdPVwiY24oXG4gICAgICAgICAgJ3JlbGF0aXZlIG92ZXJmbG93LWhpZGRlbiBwLTQgcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBzaGFkb3ctbGcgZmxleCBpdGVtcy1zdGFydCBqdXN0aWZ5LWJldHdlZW4gZ2FwLTQgdHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tMzAwIGJnLWJhY2tncm91bmQgdGV4dC1mb3JlZ3JvdW5kJyxcbiAgICAgICAgICB0b2FzdC52YXJpYW50ID09PSAnZGVzdHJ1Y3RpdmUnICYmICdib3JkZXItZGVzdHJ1Y3RpdmUvNTAgdGV4dC1kZXN0cnVjdGl2ZSdcbiAgICAgICAgKVwiXG4gICAgICA+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdhcC0xXCI+XG4gICAgICAgICAgPGRpdiAqbmdJZj1cInRvYXN0LnRpdGxlXCIgY2xhc3M9XCJ0ZXh0LXNtIGZvbnQtc2VtaWJvbGRcIj57eyB0b2FzdC50aXRsZSB9fTwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXhzIG9wYWNpdHktOTBcIj57eyB0b2FzdC5kZXNjcmlwdGlvbiB9fTwvZGl2PlxuICAgICAgICA8L2Rpdj5cblxuICAgICAgICA8YnV0dG9uIChjbGljayk9XCJ0b2FzdFNlcnZpY2UucmVtb3ZlKHRvYXN0LmlkKVwiIGNsYXNzPVwib3BhY2l0eS01MCBob3ZlcjpvcGFjaXR5LTEwMFwiPlxuICAgICAgICAgIDxpIGNsYXNzPVwicmktY2xvc2UtbGluZVwiPjwvaT5cbiAgICAgICAgPC9idXR0b24+XG5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzPVwiYWJzb2x1dGUgYm90dG9tLTAgbGVmdC0wIGgtMSB0cmFuc2l0aW9uLWFsbCBkdXJhdGlvbi0xMDAgZWFzZS1saW5lYXJcIlxuICAgICAgICAgIFtzdHlsZS53aWR0aC4lXT1cIih0b2FzdC5yZW1haW5pbmdUaW1lIC8gKHRvYXN0LmR1cmF0aW9uIHx8IDMwMDApKSAqIDEwMFwiXG4gICAgICAgICAgW2NsYXNzLmJnLWRlc3RydWN0aXZlXT1cInRvYXN0LnZhcmlhbnQgPT09ICdkZXN0cnVjdGl2ZSdcIlxuICAgICAgICAgIFtjbGFzcy5iZy1wcmltYXJ5XT1cInRvYXN0LnZhcmlhbnQgIT09ICdkZXN0cnVjdGl2ZSdcIlxuICAgICAgICA+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBUb2FzdENvbnRhaW5lckNvbXBvbmVudCB7XG4gIHRvYXN0U2VydmljZSA9IGluamVjdChUb2FzdFNlcnZpY2UpO1xuICBASW5wdXQoKSBwb3NpdGlvbjogVG9hc3RQb3NpdGlvbiA9ICdib3R0b20tcmlnaHQnO1xuICB0b2FzdHMkID0gdGhpcy50b2FzdFNlcnZpY2UudG9hc3RzJDtcbiAgZ2V0IHBvc2l0aW9uQ2xhc3NlcygpIHtcbiAgICBjb25zdCBwb3MgPSB7XG4gICAgICAndG9wLXJpZ2h0JzogJ3RvcC0wIHJpZ2h0LTAgZmxleC1jb2wtcmV2ZXJzZScsXG4gICAgICAndG9wLWxlZnQnOiAndG9wLTAgbGVmdC0wIGZsZXgtY29sLXJldmVyc2UnLFxuICAgICAgJ2JvdHRvbS1yaWdodCc6ICdib3R0b20tMCByaWdodC0wJyxcbiAgICAgICdib3R0b20tbGVmdCc6ICdib3R0b20tMCBsZWZ0LTAnLFxuICAgICAgJ3RvcC1jZW50ZXInOiAndG9wLTAgbGVmdC0xLzIgLXRyYW5zbGF0ZS14LTEvMiBmbGV4LWNvbC1yZXZlcnNlJyxcbiAgICAgICdib3R0b20tY2VudGVyJzogJ2JvdHRvbS0wIGxlZnQtMS8yIC10cmFuc2xhdGUteC0xLzInXG4gICAgfTtcbiAgICByZXR1cm4gcG9zW3RoaXMucG9zaXRpb25dO1xuICB9XG4gIHByb3RlY3RlZCBjbiA9IGNuO1xufVxuIl19

package/esm2022/public-api.mjs

@@ -15,6 +15,7 @@ export * from './lib/skeleton.component';
 export * from './lib/checkbox.component';
 export * from './lib/tooltip.directive';
 export * from './lib/toast.service';
+export * from './lib/toaster.component';
 export * from './lib/tolle-config';
 export * from './lib/multi-select.component';
 export * from './lib/calendar.component';
@@ -34,4 +35,9 @@ export * from './lib/button-group.component';
 export * from './lib/date-range-picker.component';
 export * from './lib/range-calendar.component';
 export * from './lib/theme.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFBO0FBQ25DLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLDBCQUEwQixDQUFBO0FBQ3hDLGNBQWMsOEJBQThCLENBQUE7QUFDNUMsY0FBYyw2QkFBNkIsQ0FBQTtBQUMzQyxjQUFjLDRCQUE0QixDQUFBO0FBQzFDLGNBQWMsNEJBQTRCLENBQUE7QUFDMUMsY0FBYyw0QkFBNEIsQ0FBQTtBQUMxQyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsMkJBQTJCLENBQUE7QUFDekMsY0FBYyx1QkFBdUIsQ0FBQTtBQUNyQyxjQUFjLGlCQUFpQixDQUFBO0FBQy9CLGNBQWMscUJBQXFCLENBQUE7QUFDbkMsY0FBYywyQkFBMkIsQ0FBQTtBQUN6QyxjQUFjLGFBQWEsQ0FBQTtBQUMzQixjQUFjLDhCQUE4QixDQUFBO0FBQzVDLGNBQWMsbUNBQW1DLENBQUE7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQTtBQUM5QyxjQUFjLHFCQUFxQixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB0b2xsZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3V0aWxzL2NuJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW5wdXQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NhcmQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LWl0ZW0uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC1ncm91cC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LXNlcGFyYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3dpdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9iYWRnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2tlbGV0b24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NoZWNrYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b29sdGlwLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b2FzdC5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9sbGUtY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL211bHRpLXNlbGVjdC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jYWxlbmRhci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXNrZWQtaW5wdXQuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcGFnaW5hdGlvbi5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kYXRhLXRhYmxlLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RvbGxlLWNlbGwuZGlyZWN0aXZlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLXJlZidcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLnNlcnZpY2UnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC1zdGFjay5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24tZ3JvdXAuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1yYW5nZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcmFuZ2UtY2FsZW5kYXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdGhlbWUuc2VydmljZSdcbiJdfQ==
+export * from './lib/dropdown-item.component';
+export * from './lib/dropdown-label.component';
+export * from './lib/dropdown-menu.component';
+export * from './lib/dropdown-separator.component';
+export * from './lib/dropdown-trigger.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFBO0FBQ25DLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLDhCQUE4QixDQUFBO0FBQzVDLGNBQWMsMEJBQTBCLENBQUE7QUFDeEMsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLDZCQUE2QixDQUFBO0FBQzNDLGNBQWMsNEJBQTRCLENBQUE7QUFDMUMsY0FBYyw0QkFBNEIsQ0FBQTtBQUMxQyxjQUFjLDRCQUE0QixDQUFBO0FBQzFDLGNBQWMsZ0NBQWdDLENBQUE7QUFDOUMsY0FBYywyQkFBMkIsQ0FBQTtBQUN6QyxjQUFjLHVCQUF1QixDQUFBO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUE7QUFDL0IsY0FBYyxxQkFBcUIsQ0FBQTtBQUNuQyxjQUFjLDJCQUEyQixDQUFBO0FBQ3pDLGNBQWMsYUFBYSxDQUFBO0FBQzNCLGNBQWMsOEJBQThCLENBQUE7QUFDNUMsY0FBYyxtQ0FBbUMsQ0FBQTtBQUNqRCxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMscUJBQXFCLENBQUE7QUFDbkMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsK0JBQStCLENBQUE7QUFDN0MsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLGtDQUFrQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB0b2xsZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3V0aWxzL2NuJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2J1dHRvbi5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvaW5wdXQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NhcmQuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LWl0ZW0uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC1ncm91cC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2VsZWN0LXNlcGFyYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc3dpdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9iYWRnZS5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvc2tlbGV0b24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NoZWNrYm94LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b29sdGlwLmRpcmVjdGl2ZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi90b2FzdC5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9hc3Rlci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9sbGUtY29uZmlnJztcbmV4cG9ydCAqIGZyb20gJy4vbGliL211bHRpLXNlbGVjdC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jYWxlbmRhci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tYXNrZWQtaW5wdXQuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcGFnaW5hdGlvbi5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kYXRhLXRhYmxlLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RvbGxlLWNlbGwuZGlyZWN0aXZlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYWNjb3JkaW9uLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLXJlZidcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsLnNlcnZpY2UnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC1zdGFjay5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24tZ3JvdXAuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0ZS1yYW5nZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvcmFuZ2UtY2FsZW5kYXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdGhlbWUuc2VydmljZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLWxhYmVsLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLW1lbnUuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kcm9wZG93bi10cmlnZ2VyLmRpcmVjdGl2ZSc7XG4iXX0=

package/fesm2022/tolle_-tolle-ui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, inject, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector } from '@angular/core';
+import { Component, Input, forwardRef, Injectable, Optional, HostListener, ViewChild, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { cva } from 'class-variance-authority';
@@ -1159,6 +1159,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+// projects/tolle/src/lib/toast-container.component.ts
+class ToastContainerComponent {
+    toastService = inject(ToastService);
+    position = 'bottom-right';
+    toasts$ = this.toastService.toasts$;
+    get positionClasses() {
+        const pos = {
+            'top-right': 'top-0 right-0 flex-col-reverse',
+            'top-left': 'top-0 left-0 flex-col-reverse',
+            'bottom-right': 'bottom-0 right-0',
+            'bottom-left': 'bottom-0 left-0',
+            'top-center': 'top-0 left-1/2 -translate-x-1/2 flex-col-reverse',
+            'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2'
+        };
+        return pos[this.position];
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ToastContainerComponent, isStandalone: true, selector: "tolle-toaster", inputs: { position: "position" }, ngImport: i0, template: `
+    <div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
+      <div
+        *ngFor="let toast of toasts$ | async"
+        (mouseenter)="toastService.setPaused(toast.id, true)"
+        (mouseleave)="toastService.setPaused(toast.id, false)"
+        [class]="cn(
+          'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
+          toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
+        )"
+      >
+        <div class="grid gap-1">
+          <div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
+          <div class="text-xs opacity-90">{{ toast.description }}</div>
+        </div>
+
+        <button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
+          <i class="ri-close-line"></i>
+        </button>
+
+        <div
+          class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
+          [style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
+          [class.bg-destructive]="toast.variant === 'destructive'"
+          [class.bg-primary]="toast.variant !== 'destructive'"
+        ></div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tolle-toaster',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `
+    <div [class]="cn('fixed z-[100] flex flex-col gap-2 w-full max-w-[380px] p-4', positionClasses)">
+      <div
+        *ngFor="let toast of toasts$ | async"
+        (mouseenter)="toastService.setPaused(toast.id, true)"
+        (mouseleave)="toastService.setPaused(toast.id, false)"
+        [class]="cn(
+          'relative overflow-hidden p-4 rounded-md border border-border shadow-lg flex items-start justify-between gap-4 transition-all duration-300 bg-background text-foreground',
+          toast.variant === 'destructive' && 'border-destructive/50 text-destructive'
+        )"
+      >
+        <div class="grid gap-1">
+          <div *ngIf="toast.title" class="text-sm font-semibold">{{ toast.title }}</div>
+          <div class="text-xs opacity-90">{{ toast.description }}</div>
+        </div>
+
+        <button (click)="toastService.remove(toast.id)" class="opacity-50 hover:opacity-100">
+          <i class="ri-close-line"></i>
+        </button>
+
+        <div
+          class="absolute bottom-0 left-0 h-1 transition-all duration-100 ease-linear"
+          [style.width.%]="(toast.remainingTime / (toast.duration || 3000)) * 100"
+          [class.bg-destructive]="toast.variant === 'destructive'"
+          [class.bg-primary]="toast.variant !== 'destructive'"
+        ></div>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { position: [{
+                type: Input
+            }] } });
+
 class ThemeService {
     document;
     platformId;
@@ -3722,6 +3810,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['document:mousedown', ['$event']]
             }] } });
 
+class DropdownItemComponent {
+    class = '';
+    cn = (c1, c2) => `${c1} ${c2}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "tolle-dropdown-item", inputs: { class: "class" }, ngImport: i0, template: `
+    <div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-item', standalone: true, imports: [], template: `
+    <div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
+      <ng-content></ng-content>
+    </div>
+  ` }]
+        }], propDecorators: { class: [{
+                type: Input
+            }] } });
+
+class DropdownLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownLabelComponent, isStandalone: true, selector: "tolle-dropdown-label", ngImport: i0, template: `
+    <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-label', standalone: true, imports: [], template: `
+    <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+      <ng-content></ng-content>
+    </div>
+  ` }]
+        }] });
+
+class DropdownMenuComponent {
+    templateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "tolle-dropdown-menu", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: `
+    <ng-template #menuTemplate>
+      <div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-menu', standalone: true, imports: [], template: `
+    <ng-template #menuTemplate>
+      <div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  ` }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }] } });
+
+class DropdownSeparatorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownSeparatorComponent, isStandalone: true, selector: "tolle-dropdown-separator", ngImport: i0, template: `<div class="-mx-1 my-1 h-px bg-border"></div>`, isInline: true, styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-dropdown-separator', standalone: true, imports: [], template: `<div class="-mx-1 my-1 h-px bg-border"></div>` }]
+        }] });
+
+class DropdownTriggerDirective {
+    el;
+    vcr;
+    menu;
+    cleanup;
+    isOpen = false;
+    menuElement;
+    constructor(el, vcr) {
+        this.el = el;
+        this.vcr = vcr;
+    }
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+    open() {
+        this.isOpen = true;
+        // Create the menu view
+        const view = this.vcr.createEmbeddedView(this.menu.templateRef);
+        this.menuElement = view.rootNodes[0];
+        document.body.appendChild(this.menuElement);
+        // Floating UI positioning logic
+        this.cleanup = autoUpdate(this.el.nativeElement, this.menuElement, () => {
+            computePosition(this.el.nativeElement, this.menuElement, {
+                placement: 'bottom-end',
+                middleware: [
+                    offset(4), // Space between trigger and menu
+                    flip(), // Flip to top if space is tight
+                    shift({ padding: 8 }) // Prevent menu from hitting screen edges
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(this.menuElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    position: 'absolute'
+                });
+            });
+        });
+        // Close on outside click
+        setTimeout(() => {
+            document.addEventListener('click', this.outsideClick);
+        });
+    }
+    close() {
+        this.isOpen = false;
+        this.cleanup?.();
+        this.menuElement?.remove();
+        document.removeEventListener('click', this.outsideClick);
+    }
+    outsideClick = (event) => {
+        if (!this.el.nativeElement.contains(event.target) && !this.menuElement?.contains(event.target)) {
+            this.close();
+        }
+    };
+    ngOnDestroy() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[tolleDropdownTrigger]", inputs: { menu: ["tolleDropdownTrigger", "menu"] }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tolleDropdownTrigger]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { menu: [{
+                type: Input,
+                args: ['tolleDropdownTrigger']
+            }], toggle: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -3730,5 +3963,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle_-tolle-ui.mjs.map