@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/tabs/tabs.js

@@ -0,0 +1,195 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, contentChildren, input, output, signal, TemplateRef, viewChild, ViewEncapsulation, } from "@angular/core";
+import { mergeClasses, transform } from "../../core";
+import { AiIcon } from "../icon";
+import { tabButtonVariants, tabIndicatorVariants, tabsGroupVariants, tabsHeaderVariants } from "./tabs.variants";
+import * as i0 from "@angular/core";
+export class AiTab {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    content = viewChild.required(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AiTab, isStandalone: true, selector: "ai-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["aiTab"], ngImport: i0, template: `
+        <ng-template>
+            <ng-content />
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-tab",
+                    exportAs: "aiTab",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <ng-template>
+            <ng-content />
+        </ng-template>
+    `,
+                    host: {
+                        style: "display: none",
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+export class AiTabsGroup {
+    tabs = contentChildren(AiTab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    tabsPosition = input("top", ...(ngDevMode ? [{ debugName: "tabsPosition" }] : []));
+    activePosition = input("bottom", ...(ngDevMode ? [{ debugName: "activePosition" }] : []));
+    alignTabs = input("start", ...(ngDevMode ? [{ debugName: "alignTabs" }] : []));
+    showArrows = input(false, { ...(ngDevMode ? { debugName: "showArrows" } : {}), transform });
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    changeTab = output();
+    selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    canScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : []));
+    canScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : []));
+    hasOverflow = signal(false, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+    resizeObserver;
+    scrollContainer = viewChild("scrollContainer", ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
+    outerContainer = viewChild("outerContainer", ...(ngDevMode ? [{ debugName: "outerContainer" }] : []));
+    arrowsVisible = computed(() => this.showArrows() || this.hasOverflow(), ...(ngDevMode ? [{ debugName: "arrowsVisible" }] : []));
+    classes = computed(() => mergeClasses(tabsGroupVariants({ tabsPosition: this.tabsPosition() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    headerClasses = computed(() => mergeClasses(tabsHeaderVariants({ tabsPosition: this.tabsPosition(), alignTabs: this.alignTabs() }), "overflow-x-auto ai-tabs-scroll flex-1 min-w-0"), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    indicatorClasses = computed(() => mergeClasses(tabIndicatorVariants({ activePosition: this.activePosition() })), ...(ngDevMode ? [{ debugName: "indicatorClasses" }] : []));
+    tabClasses(index) {
+        return mergeClasses(tabButtonVariants({ active: index === this.selectedIndex() }));
+    }
+    ngAfterContentInit() {
+        const tabs = this.tabs();
+        const first = tabs.findIndex(t => !t.disabled());
+        if (first >= 0) {
+            this.selectedIndex.set(first);
+        }
+    }
+    ngAfterViewInit() {
+        const container = this.outerContainer()?.nativeElement;
+        if (container) {
+            this.resizeObserver = new ResizeObserver(() => this.checkOverflow());
+            this.resizeObserver.observe(container);
+        }
+        this.checkOverflow();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    selectTab(index) {
+        const tab = this.tabs()[index];
+        if (tab && !tab.disabled()) {
+            this.selectedIndex.set(index);
+            this.changeTab.emit({ index, label: tab.label() });
+        }
+    }
+    scrollLeft() {
+        const el = this.scrollContainer()?.nativeElement;
+        if (el)
+            el.scrollBy({ left: -150, behavior: "smooth" });
+    }
+    scrollRight() {
+        const el = this.scrollContainer()?.nativeElement;
+        if (el)
+            el.scrollBy({ left: 150, behavior: "smooth" });
+    }
+    updateScrollState() {
+        const el = this.scrollContainer()?.nativeElement;
+        if (!el)
+            return;
+        this.canScrollLeft.set(el.scrollLeft > 0);
+        this.canScrollRight.set(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    }
+    checkOverflow() {
+        const el = this.scrollContainer()?.nativeElement;
+        if (!el)
+            return;
+        this.hasOverflow.set(el.scrollWidth > el.clientWidth);
+        this.updateScrollState();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTabsGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiTabsGroup, isStandalone: true, selector: "ai-tabs-group", inputs: { tabsPosition: { classPropertyName: "tabsPosition", publicName: "tabsPosition", isSignal: true, isRequired: false, transformFunction: null }, activePosition: { classPropertyName: "activePosition", publicName: "activePosition", isSignal: true, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeTab: "changeTab" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "tabs", predicate: AiTab, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "outerContainer", first: true, predicate: ["outerContainer"], descendants: true, isSignal: true }], exportAs: ["aiTabsGroup"], ngImport: i0, template: `
+        <div #outerContainer class="flex items-center w-full relative">
+            @if (arrowsVisible()) {
+                <button
+                    type="button"
+                    class="shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    [disabled]="!canScrollLeft()"
+                    (click)="scrollLeft()"
+                >
+                    <ai-icon icon="arrow-left-s" size="sm" />
+                </button>
+            }
+            <div #scrollContainer [class]="headerClasses()" (scroll)="updateScrollState()">
+                @for (tab of tabs(); track $index) {
+                    <button type="button" [class]="tabClasses($index)" [disabled]="tab.disabled()" (click)="selectTab($index)">
+                        {{ tab.label() }}
+                        @if ($index === selectedIndex()) {
+                            <span [class]="indicatorClasses()"></span>
+                        }
+                    </button>
+                }
+            </div>
+            @if (arrowsVisible()) {
+                <button
+                    type="button"
+                    class="shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    [disabled]="!canScrollRight()"
+                    (click)="scrollRight()"
+                >
+                    <ai-icon icon="arrow-right-s" size="sm" />
+                </button>
+            }
+        </div>
+        <div class="flex-1 min-h-0">
+            @for (tab of tabs(); track $index) {
+                <div [style.display]="$index === selectedIndex() ? 'block' : 'none'" class="p-4">
+                    <ng-container [ngTemplateOutlet]="tab.content()" />
+                </div>
+            }
+        </div>
+    `, isInline: true, styles: [".ai-tabs-scroll::-webkit-scrollbar{display:none}.ai-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTabsGroup, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-tabs-group", exportAs: "aiTabsGroup", imports: [NgTemplateOutlet, AiIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+        <div #outerContainer class="flex items-center w-full relative">
+            @if (arrowsVisible()) {
+                <button
+                    type="button"
+                    class="shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    [disabled]="!canScrollLeft()"
+                    (click)="scrollLeft()"
+                >
+                    <ai-icon icon="arrow-left-s" size="sm" />
+                </button>
+            }
+            <div #scrollContainer [class]="headerClasses()" (scroll)="updateScrollState()">
+                @for (tab of tabs(); track $index) {
+                    <button type="button" [class]="tabClasses($index)" [disabled]="tab.disabled()" (click)="selectTab($index)">
+                        {{ tab.label() }}
+                        @if ($index === selectedIndex()) {
+                            <span [class]="indicatorClasses()"></span>
+                        }
+                    </button>
+                }
+            </div>
+            @if (arrowsVisible()) {
+                <button
+                    type="button"
+                    class="shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none"
+                    [disabled]="!canScrollRight()"
+                    (click)="scrollRight()"
+                >
+                    <ai-icon icon="arrow-right-s" size="sm" />
+                </button>
+            }
+        </div>
+        <div class="flex-1 min-h-0">
+            @for (tab of tabs(); track $index) {
+                <div [style.display]="$index === selectedIndex() ? 'block' : 'none'" class="p-4">
+                    <ng-container [ngTemplateOutlet]="tab.content()" />
+                </div>
+            }
+        </div>
+    `, host: {
+                        "[class]": "classes()",
+                    }, styles: [".ai-tabs-scroll::-webkit-scrollbar{display:none}.ai-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiTab), { isSignal: true }] }], tabsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsPosition", required: false }] }], activePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "activePosition", required: false }] }], alignTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignTabs", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], changeTab: [{ type: i0.Output, args: ["changeTab"] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], outerContainer: [{ type: i0.ViewChild, args: ["outerContainer", { isSignal: true }] }] } });
+//# sourceMappingURL=tabs.js.map

package/esm2022/lib/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tabs/tabs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAGH,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,eAAe,EAEf,KAAK,EAEL,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAS,EACT,iBAAiB,GACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAA+B,iBAAiB,EAAE,oBAAoB,EAAe,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAgB3J,MAAM,OAAO,KAAK;IACL,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;uGAH1C,KAAK;2FAAL,KAAK,0ZAGwB,WAAW,qFAZvC;;;;KAIT;;2FAKQ,KAAK;kBAdjB,SAAS;mBAAC;oBACP,QAAQ,EAAE,QAAQ;oBAClB,QAAQ,EAAE,OAAO;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;KAIT;oBACD,IAAI,EAAE;wBACF,KAAK,EAAE,eAAe;qBACzB;iBACJ;kRAIyC,WAAW;AA+DrD,MAAM,OAAO,WAAW;IACX,IAAI,GAAG,eAAe,CAAC,KAAK,gDAAC,CAAC;IAE9B,YAAY,GAAG,KAAK,CAAc,KAAK,wDAAC,CAAC;IACzC,cAAc,GAAG,KAAK,CAAoB,QAAQ,0DAAC,CAAC;IACpD,SAAS,GAAG,KAAK,CAAW,OAAO,qDAAC,CAAC;IACrC,UAAU,GAAG,KAAK,CAA4B,KAAK,uDAAI,SAAS,GAAG,CAAC;IACpE,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE9B,SAAS,GAAG,MAAM,EAAoC,CAAC;IAEvD,aAAa,GAAG,MAAM,CAAC,CAAC,yDAAC,CAAC;IAC1B,aAAa,GAAG,MAAM,CAAC,KAAK,yDAAC,CAAC;IAC9B,cAAc,GAAG,MAAM,CAAC,KAAK,0DAAC,CAAC;IAEvB,WAAW,GAAG,MAAM,CAAC,KAAK,uDAAC,CAAC;IACrC,cAAc,CAAkB;IAE/B,eAAe,GAAG,SAAS,CAA0B,iBAAiB,2DAAC,CAAC;IACxE,cAAc,GAAG,SAAS,CAA0B,gBAAgB,0DAAC,CAAC;IAE5D,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,yDAAC,CAAC;IAExE,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IAC/G,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC7C,YAAY,CAAC,kBAAkB,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,+CAA+C,CAAC,yDACxJ,CAAC;IACiB,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,oBAAoB,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,4DAAC,CAAC;IAE1H,UAAU,CAAC,KAAa;QAC9B,OAAO,YAAY,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC;IACvF,CAAC;IAED,kBAAkB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACjD,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACL,CAAC;IAED,eAAe;QACX,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa,CAAC;QACvD,IAAI,SAAS,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YACrE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAC3C,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED,WAAW;QACP,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAED,SAAS,CAAC,KAAa;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACvD,CAAC;IACL,CAAC;IAED,UAAU;QACN,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,aAAa,CAAC;QACjD,IAAI,EAAE;YAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,WAAW;QACP,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,aAAa,CAAC;QACjD,IAAI,EAAE;YAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;QACb,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,aAAa,CAAC;QACjD,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IACjF,CAAC;IAEO,aAAa;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,aAAa,CAAC;QACjD,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;uGApFQ,WAAW;2FAAX,WAAW,k2BACY,KAAK,+TA9C3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCT,yLApDS,gBAAgB,oJAAE,MAAM;;2FAyDzB,WAAW;kBA5DvB,SAAS;+BACI,eAAe,YACf,aAAa,WACd,CAAC,gBAAgB,EAAE,MAAM,CAAC,mBAClB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAU3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCT,QACK;wBACF,SAAS,EAAE,WAAW;qBACzB;4FAG+B,KAAK,qnBAiByB,iBAAiB,wEAClB,gBAAgB","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { NgTemplateOutlet } from \"@angular/common\";\r\nimport {\r\n    AfterContentInit,\r\n    AfterViewInit,\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    contentChildren,\r\n    ElementRef,\r\n    input,\r\n    OnDestroy,\r\n    output,\r\n    signal,\r\n    TemplateRef,\r\n    viewChild,\r\n    ViewEncapsulation,\r\n} from \"@angular/core\";\r\n\r\nimport { mergeClasses, transform } from \"../../core\";\r\nimport { AiIcon } from \"../icon\";\r\nimport { TabActivePosition, TabAlign, tabButtonVariants, tabIndicatorVariants, TabPosition, tabsGroupVariants, tabsHeaderVariants } from \"./tabs.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-tab\",\r\n    exportAs: \"aiTab\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <ng-template>\r\n            <ng-content />\r\n        </ng-template>\r\n    `,\r\n    host: {\r\n        style: \"display: none\",\r\n    },\r\n})\r\nexport class AiTab {\r\n    readonly label = input.required<string>();\r\n    readonly disabled = input(false);\r\n    readonly content = viewChild.required(TemplateRef);\r\n}\r\n\r\n@Component({\r\n    selector: \"ai-tabs-group\",\r\n    exportAs: \"aiTabsGroup\",\r\n    imports: [NgTemplateOutlet, AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    styles: `\r\n        .ai-tabs-scroll::-webkit-scrollbar {\r\n            display: none;\r\n        }\r\n        .ai-tabs-scroll {\r\n            -ms-overflow-style: none;\r\n            scrollbar-width: none;\r\n        }\r\n    `,\r\n    template: `\r\n        <div #outerContainer class=\"flex items-center w-full relative\">\r\n            @if (arrowsVisible()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none\"\r\n                    [disabled]=\"!canScrollLeft()\"\r\n                    (click)=\"scrollLeft()\"\r\n                >\r\n                    <ai-icon icon=\"arrow-left-s\" size=\"sm\" />\r\n                </button>\r\n            }\r\n            <div #scrollContainer [class]=\"headerClasses()\" (scroll)=\"updateScrollState()\">\r\n                @for (tab of tabs(); track $index) {\r\n                    <button type=\"button\" [class]=\"tabClasses($index)\" [disabled]=\"tab.disabled()\" (click)=\"selectTab($index)\">\r\n                        {{ tab.label() }}\r\n                        @if ($index === selectedIndex()) {\r\n                            <span [class]=\"indicatorClasses()\"></span>\r\n                        }\r\n                    </button>\r\n                }\r\n            </div>\r\n            @if (arrowsVisible()) {\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"shrink-0 flex items-center justify-center size-8 cursor-pointer text-muted-foreground hover:text-foreground transition-colors disabled:opacity-30 disabled:pointer-events-none\"\r\n                    [disabled]=\"!canScrollRight()\"\r\n                    (click)=\"scrollRight()\"\r\n                >\r\n                    <ai-icon icon=\"arrow-right-s\" size=\"sm\" />\r\n                </button>\r\n            }\r\n        </div>\r\n        <div class=\"flex-1 min-h-0\">\r\n            @for (tab of tabs(); track $index) {\r\n                <div [style.display]=\"$index === selectedIndex() ? 'block' : 'none'\" class=\"p-4\">\r\n                    <ng-container [ngTemplateOutlet]=\"tab.content()\" />\r\n                </div>\r\n            }\r\n        </div>\r\n    `,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiTabsGroup implements AfterContentInit, AfterViewInit, OnDestroy {\r\n    readonly tabs = contentChildren(AiTab);\r\n\r\n    readonly tabsPosition = input<TabPosition>(\"top\");\r\n    readonly activePosition = input<TabActivePosition>(\"bottom\");\r\n    readonly alignTabs = input<TabAlign>(\"start\");\r\n    readonly showArrows = input<boolean, string | boolean>(false, { transform });\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly changeTab = output<{ index: number; label: string }>();\r\n\r\n    readonly selectedIndex = signal(0);\r\n    readonly canScrollLeft = signal(false);\r\n    readonly canScrollRight = signal(false);\r\n\r\n    private readonly hasOverflow = signal(false);\r\n    private resizeObserver?: ResizeObserver;\r\n\r\n    readonly scrollContainer = viewChild<ElementRef<HTMLElement>>(\"scrollContainer\");\r\n    readonly outerContainer = viewChild<ElementRef<HTMLElement>>(\"outerContainer\");\r\n\r\n    protected readonly arrowsVisible = computed(() => this.showArrows() || this.hasOverflow());\r\n\r\n    protected readonly classes = computed(() => mergeClasses(tabsGroupVariants({ tabsPosition: this.tabsPosition() }), this.class()));\r\n    protected readonly headerClasses = computed(() =>\r\n        mergeClasses(tabsHeaderVariants({ tabsPosition: this.tabsPosition(), alignTabs: this.alignTabs() }), \"overflow-x-auto ai-tabs-scroll flex-1 min-w-0\"),\r\n    );\r\n    protected readonly indicatorClasses = computed(() => mergeClasses(tabIndicatorVariants({ activePosition: this.activePosition() })));\r\n\r\n    protected tabClasses(index: number) {\r\n        return mergeClasses(tabButtonVariants({ active: index === this.selectedIndex() }));\r\n    }\r\n\r\n    ngAfterContentInit() {\r\n        const tabs = this.tabs();\r\n        const first = tabs.findIndex(t => !t.disabled());\r\n        if (first >= 0) {\r\n            this.selectedIndex.set(first);\r\n        }\r\n    }\r\n\r\n    ngAfterViewInit() {\r\n        const container = this.outerContainer()?.nativeElement;\r\n        if (container) {\r\n            this.resizeObserver = new ResizeObserver(() => this.checkOverflow());\r\n            this.resizeObserver.observe(container);\r\n        }\r\n        this.checkOverflow();\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        this.resizeObserver?.disconnect();\r\n    }\r\n\r\n    selectTab(index: number) {\r\n        const tab = this.tabs()[index];\r\n        if (tab && !tab.disabled()) {\r\n            this.selectedIndex.set(index);\r\n            this.changeTab.emit({ index, label: tab.label() });\r\n        }\r\n    }\r\n\r\n    scrollLeft() {\r\n        const el = this.scrollContainer()?.nativeElement;\r\n        if (el) el.scrollBy({ left: -150, behavior: \"smooth\" });\r\n    }\r\n\r\n    scrollRight() {\r\n        const el = this.scrollContainer()?.nativeElement;\r\n        if (el) el.scrollBy({ left: 150, behavior: \"smooth\" });\r\n    }\r\n\r\n    updateScrollState() {\r\n        const el = this.scrollContainer()?.nativeElement;\r\n        if (!el) return;\r\n        this.canScrollLeft.set(el.scrollLeft > 0);\r\n        this.canScrollRight.set(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);\r\n    }\r\n\r\n    private checkOverflow() {\r\n        const el = this.scrollContainer()?.nativeElement;\r\n        if (!el) return;\r\n        this.hasOverflow.set(el.scrollWidth > el.clientWidth);\r\n        this.updateScrollState();\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/tabs/tabs.variants.js

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+export const tabsGroupVariants = cva("flex w-full", {
+    variants: {
+        tabsPosition: {
+            top: "flex-col",
+            bottom: "flex-col-reverse",
+            left: "flex-row",
+            right: "flex-row-reverse",
+        },
+    },
+    defaultVariants: {
+        tabsPosition: "top",
+    },
+});
+export const tabsHeaderVariants = cva("flex shrink-0 border-border", {
+    variants: {
+        tabsPosition: {
+            top: "flex-row border-b",
+            bottom: "flex-row border-t",
+            left: "flex-col border-r",
+            right: "flex-col border-l",
+        },
+        alignTabs: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+        },
+    },
+    defaultVariants: {
+        tabsPosition: "top",
+        alignTabs: "start",
+    },
+});
+export const tabButtonVariants = cva("relative inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground", {
+    variants: {
+        active: {
+            true: "text-foreground",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+export const tabIndicatorVariants = cva("absolute bg-primary transition-all duration-200", {
+    variants: {
+        activePosition: {
+            top: "top-0 left-0 right-0 h-0.5",
+            bottom: "bottom-0 left-0 right-0 h-0.5",
+            left: "left-0 top-0 bottom-0 w-0.5",
+            right: "right-0 top-0 bottom-0 w-0.5",
+        },
+    },
+    defaultVariants: {
+        activePosition: "bottom",
+    },
+});
+//# sourceMappingURL=tabs.variants.js.map

package/esm2022/lib/components/tabs/tabs.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tabs/tabs.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,aAAa,EAAE;IAChD,QAAQ,EAAE;QACN,YAAY,EAAE;YACV,GAAG,EAAE,UAAU;YACf,MAAM,EAAE,kBAAkB;YAC1B,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,kBAAkB;SAC5B;KACJ;IACD,eAAe,EAAE;QACb,YAAY,EAAE,KAAK;KACtB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,6BAA6B,EAAE;IACjE,QAAQ,EAAE;QACN,YAAY,EAAE;YACV,GAAG,EAAE,mBAAmB;YACxB,MAAM,EAAE,mBAAmB;YAC3B,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,mBAAmB;SAC7B;QACD,SAAS,EAAE;YACP,KAAK,EAAE,eAAe;YACtB,MAAM,EAAE,gBAAgB;YACxB,GAAG,EAAE,aAAa;SACrB;KACJ;IACD,eAAe,EAAE;QACb,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,OAAO;KACrB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAChC,gOAAgO,EAChO;IACI,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,IAAI,EAAE,iBAAiB;YACvB,KAAK,EAAE,EAAE;SACZ;KACJ;IACD,eAAe,EAAE;QACb,MAAM,EAAE,KAAK;KAChB;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,iDAAiD,EAAE;IACvF,QAAQ,EAAE;QACN,cAAc,EAAE;YACZ,GAAG,EAAE,4BAA4B;YACjC,MAAM,EAAE,+BAA+B;YACvC,IAAI,EAAE,6BAA6B;YACnC,KAAK,EAAE,8BAA8B;SACxC;KACJ;IACD,eAAe,EAAE;QACb,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const tabsGroupVariants = cva(\"flex w-full\", {\r\n    variants: {\r\n        tabsPosition: {\r\n            top: \"flex-col\",\r\n            bottom: \"flex-col-reverse\",\r\n            left: \"flex-row\",\r\n            right: \"flex-row-reverse\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        tabsPosition: \"top\",\r\n    },\r\n});\r\n\r\nexport const tabsHeaderVariants = cva(\"flex shrink-0 border-border\", {\r\n    variants: {\r\n        tabsPosition: {\r\n            top: \"flex-row border-b\",\r\n            bottom: \"flex-row border-t\",\r\n            left: \"flex-col border-r\",\r\n            right: \"flex-col border-l\",\r\n        },\r\n        alignTabs: {\r\n            start: \"justify-start\",\r\n            center: \"justify-center\",\r\n            end: \"justify-end\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        tabsPosition: \"top\",\r\n        alignTabs: \"start\",\r\n    },\r\n});\r\n\r\nexport const tabButtonVariants = cva(\r\n    \"relative inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50 text-muted-foreground hover:text-foreground\",\r\n    {\r\n        variants: {\r\n            active: {\r\n                true: \"text-foreground\",\r\n                false: \"\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            active: false,\r\n        },\r\n    },\r\n);\r\n\r\nexport const tabIndicatorVariants = cva(\"absolute bg-primary transition-all duration-200\", {\r\n    variants: {\r\n        activePosition: {\r\n            top: \"top-0 left-0 right-0 h-0.5\",\r\n            bottom: \"bottom-0 left-0 right-0 h-0.5\",\r\n            left: \"left-0 top-0 bottom-0 w-0.5\",\r\n            right: \"right-0 top-0 bottom-0 w-0.5\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        activePosition: \"bottom\",\r\n    },\r\n});\r\n\r\nexport type TabsGroupVariants = VariantProps<typeof tabsGroupVariants>;\r\nexport type TabPosition = NonNullable<TabsGroupVariants[\"tabsPosition\"]>;\r\nexport type TabAlign = NonNullable<VariantProps<typeof tabsHeaderVariants>[\"alignTabs\"]>;\r\nexport type TabActivePosition = NonNullable<VariantProps<typeof tabIndicatorVariants>[\"activePosition\"]>;\r\n"]}

package/esm2022/lib/components/toast/demo/default.js

@@ -0,0 +1,32 @@
+import { Component, inject } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiToastService } from "../toast.service";
+import * as i0 from "@angular/core";
+export class DemoToastDefaultComponent {
+    #toast = inject(AiToastService);
+    showToast() {
+        this.#toast.default({
+            message: "Toast message",
+            description: "Certifique-se de que os campos estejam válidos.",
+            icon: "alarm-warning",
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoToastDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center justify-center w-full max-w-sm">
+            <ai-button size="sm" (click)="showToast()">Show toast</ai-button>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiButton],
+                    template: `
+        <div class="flex items-center justify-center w-full max-w-sm">
+            <ai-button size="sm" (click)="showToast()">Show toast</ai-button>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/toast/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/toast/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAUlD,MAAM,OAAO,yBAAyB;IAClC,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEhC,SAAS;QACL,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;YAChB,OAAO,EAAE,eAAe;YACxB,WAAW,EAAE,iDAAiD;YAC9D,IAAI,EAAE,eAAe;SACxB,CAAC,CAAC;IACP,CAAC;uGATQ,yBAAyB;2FAAzB,yBAAyB,wEANxB;;;;KAIT,4DALS,QAAQ;;2FAOT,yBAAyB;kBARrC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component, inject } from \"@angular/core\";\r\nimport { AiButton } from \"../../button\";\r\nimport { AiToastService } from \"../toast.service\";\r\n\r\n@Component({\r\n    imports: [AiButton],\r\n    template: `\r\n        <div class=\"flex items-center justify-center w-full max-w-sm\">\r\n            <ai-button size=\"sm\" (click)=\"showToast()\">Show toast</ai-button>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoToastDefaultComponent {\r\n    #toast = inject(AiToastService);\r\n\r\n    showToast() {\r\n        this.#toast.default({\r\n            message: \"Toast message\",\r\n            description: \"Certifique-se de que os campos estejam válidos.\",\r\n            icon: \"alarm-warning\",\r\n        });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/toast/demo/position.js

@@ -0,0 +1,63 @@
+import { Component, inject } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiToastService } from "../toast.service";
+import * as i0 from "@angular/core";
+export class DemoToastPositionComponent {
+    #toast = inject(AiToastService);
+    showTopLeft() {
+        this.#toast.default({ message: "Toast top left", position: "top-left" });
+    }
+    showTopRight() {
+        this.#toast.default({ message: "Toast top right", position: "top-right" });
+    }
+    showTopCenter() {
+        this.#toast.default({ message: "Toast top center", position: "top-center" });
+    }
+    showBottomLeft() {
+        this.#toast.default({ message: "Toast bottom left", position: "bottom-left" });
+    }
+    showBottomRight() {
+        this.#toast.default({ message: "Toast bottom right", position: "bottom-right" });
+    }
+    showBottomCenter() {
+        this.#toast.default({ message: "Toast bottom center", position: "bottom-center" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastPositionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoToastPositionComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center flex-col gap-y-4">
+            <div class="flex items-center gap-x-2">
+                <ai-button size="sm" (click)="showTopLeft()">top-left</ai-button>
+                <ai-button size="sm" (click)="showTopCenter()">top-center</ai-button>
+                <ai-button size="sm" (click)="showTopRight()">top-right</ai-button>
+            </div>
+
+            <div class="flex items-center gap-x-2">
+                <ai-button size="sm" (click)="showBottomLeft()">bottom-left</ai-button>
+                <ai-button size="sm" (click)="showBottomCenter()">bottom-center</ai-button>
+                <ai-button size="sm" (click)="showBottomRight()">bottom-right</ai-button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastPositionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiButton],
+                    template: `
+        <div class="flex items-center flex-col gap-y-4">
+            <div class="flex items-center gap-x-2">
+                <ai-button size="sm" (click)="showTopLeft()">top-left</ai-button>
+                <ai-button size="sm" (click)="showTopCenter()">top-center</ai-button>
+                <ai-button size="sm" (click)="showTopRight()">top-right</ai-button>
+            </div>
+
+            <div class="flex items-center gap-x-2">
+                <ai-button size="sm" (click)="showBottomLeft()">bottom-left</ai-button>
+                <ai-button size="sm" (click)="showBottomCenter()">bottom-center</ai-button>
+                <ai-button size="sm" (click)="showBottomRight()">bottom-right</ai-button>
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=position.js.map

package/esm2022/lib/components/toast/demo/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/toast/demo/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAoBlD,MAAM,OAAO,0BAA0B;IACnC,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEhC,WAAW;QACP,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,YAAY;QACR,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC;IAC/E,CAAC;IAED,aAAa;QACT,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAC;IACjF,CAAC;IAED,cAAc;QACV,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC;IACnF,CAAC;IAED,eAAe;QACX,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC;IACrF,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC;IACvF,CAAC;uGAzBQ,0BAA0B;2FAA1B,0BAA0B,wEAhBzB;;;;;;;;;;;;;;KAcT,4DAfS,QAAQ;;2FAiBT,0BAA0B;kBAlBtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;;;;;;;;;;;KAcT;iBACJ","sourcesContent":["import { Component, inject } from \"@angular/core\";\r\nimport { AiButton } from \"../../button\";\r\nimport { AiToastService } from \"../toast.service\";\r\n\r\n@Component({\r\n    imports: [AiButton],\r\n    template: `\r\n        <div class=\"flex items-center flex-col gap-y-4\">\r\n            <div class=\"flex items-center gap-x-2\">\r\n                <ai-button size=\"sm\" (click)=\"showTopLeft()\">top-left</ai-button>\r\n                <ai-button size=\"sm\" (click)=\"showTopCenter()\">top-center</ai-button>\r\n                <ai-button size=\"sm\" (click)=\"showTopRight()\">top-right</ai-button>\r\n            </div>\r\n\r\n            <div class=\"flex items-center gap-x-2\">\r\n                <ai-button size=\"sm\" (click)=\"showBottomLeft()\">bottom-left</ai-button>\r\n                <ai-button size=\"sm\" (click)=\"showBottomCenter()\">bottom-center</ai-button>\r\n                <ai-button size=\"sm\" (click)=\"showBottomRight()\">bottom-right</ai-button>\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoToastPositionComponent {\r\n    #toast = inject(AiToastService);\r\n\r\n    showTopLeft() {\r\n        this.#toast.default({ message: \"Toast top left\", position: \"top-left\" });\r\n    }\r\n\r\n    showTopRight() {\r\n        this.#toast.default({ message: \"Toast top right\", position: \"top-right\" });\r\n    }\r\n\r\n    showTopCenter() {\r\n        this.#toast.default({ message: \"Toast top center\", position: \"top-center\" });\r\n    }\r\n\r\n    showBottomLeft() {\r\n        this.#toast.default({ message: \"Toast bottom left\", position: \"bottom-left\" });\r\n    }\r\n\r\n    showBottomRight() {\r\n        this.#toast.default({ message: \"Toast bottom right\", position: \"bottom-right\" });\r\n    }\r\n\r\n    showBottomCenter() {\r\n        this.#toast.default({ message: \"Toast bottom center\", position: \"bottom-center\" });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/toast/demo/toast.js

@@ -0,0 +1,22 @@
+import { DemoToastDefaultComponent } from "./default";
+import { DemoToastPositionComponent } from "./position";
+import { DemoToastTypeComponent } from "./type";
+export const TOAST = {
+    componentName: "toast",
+    componentType: "toast",
+    examples: [
+        {
+            name: "default",
+            component: DemoToastDefaultComponent,
+        },
+        {
+            name: "position",
+            component: DemoToastPositionComponent,
+        },
+        {
+            name: "type",
+            component: DemoToastTypeComponent,
+        },
+    ],
+};
+//# sourceMappingURL=toast.js.map

package/esm2022/lib/components/toast/demo/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/toast/demo/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAEhD,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,aAAa,EAAE,OAAO;IACtB,aAAa,EAAE,OAAO;IACtB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,yBAAyB;SACvC;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,sBAAsB;SACpC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoToastDefaultComponent } from \"./default\";\r\nimport { DemoToastPositionComponent } from \"./position\";\r\nimport { DemoToastTypeComponent } from \"./type\";\r\n\r\nexport const TOAST = {\r\n    componentName: \"toast\",\r\n    componentType: \"toast\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoToastDefaultComponent,\r\n        },\r\n        {\r\n            name: \"position\",\r\n            component: DemoToastPositionComponent,\r\n        },\r\n        {\r\n            name: \"type\",\r\n            component: DemoToastTypeComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/toast/demo/type.js

@@ -0,0 +1,48 @@
+import { Component, inject } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiToastService } from "../toast.service";
+import * as i0 from "@angular/core";
+export class DemoToastTypeComponent {
+    #toast = inject(AiToastService);
+    showDefault() {
+        this.#toast.default({ message: "Toast default" });
+    }
+    showSuccess() {
+        this.#toast.success({ message: "Toast success" });
+    }
+    showDestructive() {
+        this.#toast.destructive({ message: "Toast destructive" });
+    }
+    showWarning() {
+        this.#toast.warning({ message: "Toast warning" });
+    }
+    showInfo() {
+        this.#toast.info({ message: "Toast info" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoToastTypeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-4 flex-wrap">
+            <ai-button size="sm" (click)="showDefault()">default</ai-button>
+            <ai-button size="sm" (click)="showSuccess()">success</ai-button>
+            <ai-button size="sm" (click)="showDestructive()">destructive</ai-button>
+            <ai-button size="sm" (click)="showWarning()">warning</ai-button>
+            <ai-button size="sm" (click)="showInfo()">info</ai-button>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoToastTypeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiButton],
+                    template: `
+        <div class="flex items-center gap-4 flex-wrap">
+            <ai-button size="sm" (click)="showDefault()">default</ai-button>
+            <ai-button size="sm" (click)="showSuccess()">success</ai-button>
+            <ai-button size="sm" (click)="showDestructive()">destructive</ai-button>
+            <ai-button size="sm" (click)="showWarning()">warning</ai-button>
+            <ai-button size="sm" (click)="showInfo()">info</ai-button>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=type.js.map

package/esm2022/lib/components/toast/demo/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/toast/demo/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AAclD,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEhC,WAAW;QACP,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,WAAW;QACP,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,eAAe;QACX,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,WAAW;QACP,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,CAAC;IACtD,CAAC;IAED,QAAQ;QACJ,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;IAChD,CAAC;uGArBQ,sBAAsB;2FAAtB,sBAAsB,wEAVrB;;;;;;;;KAQT,4DATS,QAAQ;;2FAWT,sBAAsB;kBAZlC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component, inject } from \"@angular/core\";\r\nimport { AiButton } from \"../../button\";\r\nimport { AiToastService } from \"../toast.service\";\r\n\r\n@Component({\r\n    imports: [AiButton],\r\n    template: `\r\n        <div class=\"flex items-center gap-4 flex-wrap\">\r\n            <ai-button size=\"sm\" (click)=\"showDefault()\">default</ai-button>\r\n            <ai-button size=\"sm\" (click)=\"showSuccess()\">success</ai-button>\r\n            <ai-button size=\"sm\" (click)=\"showDestructive()\">destructive</ai-button>\r\n            <ai-button size=\"sm\" (click)=\"showWarning()\">warning</ai-button>\r\n            <ai-button size=\"sm\" (click)=\"showInfo()\">info</ai-button>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoToastTypeComponent {\r\n    #toast = inject(AiToastService);\r\n\r\n    showDefault() {\r\n        this.#toast.default({ message: \"Toast default\" });\r\n    }\r\n\r\n    showSuccess() {\r\n        this.#toast.success({ message: \"Toast success\" });\r\n    }\r\n\r\n    showDestructive() {\r\n        this.#toast.destructive({ message: \"Toast destructive\" });\r\n    }\r\n\r\n    showWarning() {\r\n        this.#toast.warning({ message: \"Toast warning\" });\r\n    }\r\n\r\n    showInfo() {\r\n        this.#toast.info({ message: \"Toast info\" });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/toast/index.js

@@ -0,0 +1,4 @@
+export * from "./demo/toast";
+export * from "./toast";
+export * from "./toast.service";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC","sourcesContent":["export * from \"./demo/toast\";\r\nexport * from \"./toast\";\r\nexport * from \"./toast.service\";\r\n"]}

package/esm2022/lib/components/toast/toast-content.js

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from "@angular/core";
+import { AiIcon } from "../icon/icon.component";
+import { AiToastPipe } from "./toast.pipe";
+import * as i0 from "@angular/core";
+export class AiToastContent {
+    toast = input(...(ngDevMode ? [undefined, { debugName: "toast" }] : []));
+    undo = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiToastContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiToastContent, isStandalone: true, selector: "ai-toast-content", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { undo: "undo" }, exportAs: ["aiToastContent"], ngImport: i0, template: "@let variant = toast()! | aiToast;\r\n<div [class]=\"`${variant.container} p-4 flex flex-col gap-2 relative rounded-lg shadow-lg`\">\r\n    <div class=\"flex gap-x-2 w-full\" [class]=\"toast()?.description ?  'items-start' : 'items-center'\">\r\n        @let icon = variant.icon;\r\n        @if (icon) {\r\n            <ai-icon [icon]=\"icon\" size=\"default\" type=\"fill\" [class]=\"variant.color\" />\r\n        }\r\n        <div class=\"flex items-center w-full justify-between\">\r\n            <h4 [class]=\"`${variant.color} text-sm font-semibold`\">\r\n                {{ toast()?.message }}\r\n            </h4>\r\n\r\n            <button [class]=\"`${variant.bgButton} ms-auto cursor-pointer -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8`\"\r\n                (click)=\"undo.emit(toast()!.id)\">\r\n                <ai-icon icon=\"close\" size=\"default\" />\r\n            </button>\r\n        </div>\r\n    </div>\r\n    @if (toast()?.description) {\r\n        <span [class]=\"`${variant.color} text-sm font-medium`\">\r\n            {{ toast()?.description }}\r\n        </span>\r\n    }\r\n</div>", dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }, { kind: "pipe", type: AiToastPipe, name: "aiToast" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiToastContent, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-toast-content", exportAs: "aiToastContent", imports: [AiToastPipe, AiIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let variant = toast()! | aiToast;\r\n<div [class]=\"`${variant.container} p-4 flex flex-col gap-2 relative rounded-lg shadow-lg`\">\r\n    <div class=\"flex gap-x-2 w-full\" [class]=\"toast()?.description ?  'items-start' : 'items-center'\">\r\n        @let icon = variant.icon;\r\n        @if (icon) {\r\n            <ai-icon [icon]=\"icon\" size=\"default\" type=\"fill\" [class]=\"variant.color\" />\r\n        }\r\n        <div class=\"flex items-center w-full justify-between\">\r\n            <h4 [class]=\"`${variant.color} text-sm font-semibold`\">\r\n                {{ toast()?.message }}\r\n            </h4>\r\n\r\n            <button [class]=\"`${variant.bgButton} ms-auto cursor-pointer -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8`\"\r\n                (click)=\"undo.emit(toast()!.id)\">\r\n                <ai-icon icon=\"close\" size=\"default\" />\r\n            </button>\r\n        </div>\r\n    </div>\r\n    @if (toast()?.description) {\r\n        <span [class]=\"`${variant.color} text-sm font-medium`\">\r\n            {{ toast()?.description }}\r\n        </span>\r\n    }\r\n</div>" }]
+        }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], undo: [{ type: i0.Output, args: ["undo"] }] } });
+//# sourceMappingURL=toast-content.js.map

package/esm2022/lib/components/toast/toast-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-content.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/toast/toast-content.ts","../../../../../../../libs/ai-ui/src/lib/components/toast/toast-content.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;;AAU3C,MAAM,OAAO,cAAc;IACvB,KAAK,GAAG,KAAK,2DAAiB,CAAC;IAC/B,IAAI,GAAG,MAAM,EAAU,CAAC;uGAFf,cAAc;2FAAd,cAAc,yQCb3B,2nCAuBM,4CDfqB,MAAM,uIAAnB,WAAW;;2FAKZ,cAAc;kBAR1B,SAAS;+BACI,kBAAkB,YAClB,gBAAgB,WACjB,CAAC,WAAW,EAAE,MAAM,CAAC,mBACb,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI","sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, ViewEncapsulation } from \"@angular/core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiToastConfig } from \"./toast.config\";\r\nimport { AiToastPipe } from \"./toast.pipe\";\r\n\r\n@Component({\r\n    selector: \"ai-toast-content\",\r\n    exportAs: \"aiToastContent\",\r\n    imports: [AiToastPipe, AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    templateUrl: \"./toast-content.html\",\r\n})\r\nexport class AiToastContent {\r\n    toast = input<AiToastConfig>();\r\n    undo = output<number>();\r\n}\r\n","@let variant = toast()! | aiToast;\r\n<div [class]=\"`${variant.container} p-4 flex flex-col gap-2 relative rounded-lg shadow-lg`\">\r\n    <div class=\"flex gap-x-2 w-full\" [class]=\"toast()?.description ?  'items-start' : 'items-center'\">\r\n        @let icon = variant.icon;\r\n        @if (icon) {\r\n            <ai-icon [icon]=\"icon\" size=\"default\" type=\"fill\" [class]=\"variant.color\" />\r\n        }\r\n        <div class=\"flex items-center w-full justify-between\">\r\n            <h4 [class]=\"`${variant.color} text-sm font-semibold`\">\r\n                {{ toast()?.message }}\r\n            </h4>\r\n\r\n            <button [class]=\"`${variant.bgButton} ms-auto cursor-pointer -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex items-center justify-center h-8 w-8`\"\r\n                (click)=\"undo.emit(toast()!.id)\">\r\n                <ai-icon icon=\"close\" size=\"default\" />\r\n            </button>\r\n        </div>\r\n    </div>\r\n    @if (toast()?.description) {\r\n        <span [class]=\"`${variant.color} text-sm font-medium`\">\r\n            {{ toast()?.description }}\r\n        </span>\r\n    }\r\n</div>"]}

package/esm2022/lib/components/toast/toast.config.js

@@ -0,0 +1 @@
+//# sourceMappingURL=toast.config.js.map

package/esm2022/lib/components/toast/toast.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.config.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/toast/toast.config.ts"],"names":[],"mappings":"","sourcesContent":["import { AiIconType } from \"../icon/icons\";\r\n\r\nexport type AiToastType = \"info\" | \"success\" | \"warning\" | \"destructive\" | \"default\";\r\n\r\nexport type AiToastPosition = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\";\r\n\r\nexport interface AiToastConfig {\r\n    id: number;\r\n    message: string | unknown;\r\n    description?: string;\r\n    type: AiToastType;\r\n    icon?: AiIconType;\r\n    duration?: number;\r\n    position?: AiToastPosition;\r\n}\r\n"]}

package/esm2022/lib/components/toast/toast.js

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from "@angular/core";
+import { AiToastContent } from "./toast-content";
+import { AiToastService } from "./toast.service";
+import { toastVariants } from "./toast.variants";
+import * as i0 from "@angular/core";
+export class AiToast {
+    #toastService = inject(AiToastService);
+    positions = ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+    toasts = computed(() => {
+        const config = this.#toastService.toastConfig;
+        const positions = {
+            "top-left": [],
+            "top-center": [],
+            "top-right": [],
+            "bottom-left": [],
+            "bottom-center": [],
+            "bottom-right": [],
+        };
+        config().forEach(toast => positions[toast.position || "top-right"].push(toast));
+        return positions;
+    }, ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    positionContainer = (position) => toastVariants({ position });
+    remove(id) {
+        this.#toastService.remove(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiToast, isStandalone: true, selector: "ai-toast, ai-toaster", exportAs: ["aiToast"], ngImport: i0, template: `
+        @for (position of positions; track position) {
+            <div [class]="positionContainer(position)">
+                @for (toast of toasts()[position]; track toast.id) {
+                    <ai-toast-content class="w-full" [toast]="toast" (undo)="remove(toast.id)" />
+                }
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: AiToastContent, selector: "ai-toast-content", inputs: ["toast"], outputs: ["undo"], exportAs: ["aiToastContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiToast, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-toast, ai-toaster",
+                    exportAs: "aiToast",
+                    imports: [AiToastContent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        @for (position of positions; track position) {
+            <div [class]="positionContainer(position)">
+                @for (toast of toasts()[position]; track toast.id) {
+                    <ai-toast-content class="w-full" [toast]="toast" (undo)="remove(toast.id)" />
+                }
+            </div>
+        }
+    `,
+                }]
+        }] });
+//# sourceMappingURL=toast.js.map

package/esm2022/lib/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAExG,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAkBjD,MAAM,OAAO,OAAO;IAChB,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAE9B,SAAS,GAAsB,CAAC,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC,CAAC;IAE7G,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;QAC9C,MAAM,SAAS,GAA6C;YACxD,UAAU,EAAE,EAAE;YACd,YAAY,EAAE,EAAE;YAChB,WAAW,EAAE,EAAE;YACf,aAAa,EAAE,EAAE;YACjB,eAAe,EAAE,EAAE;YACnB,cAAc,EAAE,EAAE;SACrB,CAAC;QAEF,MAAM,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAChF,OAAO,SAAS,CAAC;IACrB,CAAC,kDAAC,CAAC;IAEgB,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAElG,MAAM,CAAC,EAAU;QACb,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC;uGAxBQ,OAAO;2FAAP,OAAO,uGAVN;;;;;;;;KAQT,4DAXS,cAAc;;2FAaf,OAAO;kBAhBnB,SAAS;mBAAC;oBACP,QAAQ,EAAE,sBAAsB;oBAChC,QAAQ,EAAE,SAAS;oBACnB,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { AiToastContent } from \"./toast-content\";\r\nimport { AiToastConfig, AiToastPosition } from \"./toast.config\";\r\nimport { AiToastService } from \"./toast.service\";\r\nimport { toastVariants } from \"./toast.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-toast, ai-toaster\",\r\n    exportAs: \"aiToast\",\r\n    imports: [AiToastContent],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        @for (position of positions; track position) {\r\n            <div [class]=\"positionContainer(position)\">\r\n                @for (toast of toasts()[position]; track toast.id) {\r\n                    <ai-toast-content class=\"w-full\" [toast]=\"toast\" (undo)=\"remove(toast.id)\" />\r\n                }\r\n            </div>\r\n        }\r\n    `,\r\n})\r\nexport class AiToast {\r\n    #toastService = inject(AiToastService);\r\n\r\n    readonly positions: AiToastPosition[] = [\"top-left\", \"top-center\", \"top-right\", \"bottom-left\", \"bottom-center\", \"bottom-right\"];\r\n\r\n    protected readonly toasts = computed(() => {\r\n        const config = this.#toastService.toastConfig;\r\n        const positions: Record<AiToastPosition, AiToastConfig[]> = {\r\n            \"top-left\": [],\r\n            \"top-center\": [],\r\n            \"top-right\": [],\r\n            \"bottom-left\": [],\r\n            \"bottom-center\": [],\r\n            \"bottom-right\": [],\r\n        };\r\n\r\n        config().forEach(toast => positions[toast.position || \"top-right\"].push(toast));\r\n        return positions;\r\n    });\r\n\r\n    protected readonly positionContainer = (position: AiToastPosition) => toastVariants({ position });\r\n\r\n    remove(id: number) {\r\n        this.#toastService.remove(id);\r\n    }\r\n}\r\n"]}