@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/tooltip/tooltip.imports.js

@@ -0,0 +1,20 @@
+import { OverlayModule } from "@angular/cdk/overlay";
+import { NgModule } from "@angular/core";
+import { AiTooltip } from "./tooltip";
+import { AiTooltipDirective } from "./tooltip.directive";
+import * as i0 from "@angular/core";
+const components = [AiTooltip, AiTooltipDirective];
+export const AiTooltipImports = [...components, OverlayModule];
+export class AiTooltipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: AiTooltipModule, imports: [AiTooltip, AiTooltipDirective, OverlayModule], exports: [AiTooltip, AiTooltipDirective, OverlayModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTooltipModule, imports: [OverlayModule, OverlayModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components, OverlayModule],
+                    exports: [...components, OverlayModule],
+                }]
+        }] });
+//# sourceMappingURL=tooltip.imports.js.map

package/esm2022/lib/components/tooltip/tooltip.imports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.imports.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tooltip/tooltip.imports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;;AAEzD,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAU,CAAC;AAC5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,GAAG,UAAU,EAAE,aAAa,CAAU,CAAC;AAMxE,MAAM,OAAO,eAAe;uGAAf,eAAe;wGAAf,eAAe,YAPR,SAAS,EAAE,kBAAkB,EAIpB,aAAa,aAJtB,SAAS,EAAE,kBAAkB,EAKpB,aAAa;wGAE7B,eAAe,YAHC,aAAa,EACb,aAAa;;2FAE7B,eAAe;kBAJ3B,QAAQ;mBAAC;oBACN,OAAO,EAAE,CAAC,GAAG,UAAU,EAAE,aAAa,CAAC;oBACvC,OAAO,EAAE,CAAC,GAAG,UAAU,EAAE,aAAa,CAAC;iBAC1C","sourcesContent":["import { OverlayModule } from \"@angular/cdk/overlay\";\r\nimport { NgModule } from \"@angular/core\";\r\n\r\nimport { AiTooltip } from \"./tooltip\";\r\nimport { AiTooltipDirective } from \"./tooltip.directive\";\r\n\r\nconst components = [AiTooltip, AiTooltipDirective] as const;\r\nexport const AiTooltipImports = [...components, OverlayModule] as const;\r\n\r\n@NgModule({\r\n    imports: [...components, OverlayModule],\r\n    exports: [...components, OverlayModule],\r\n})\r\nexport class AiTooltipModule {}\r\n"]}

package/esm2022/lib/components/tooltip/tooltip.js

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, signal, viewChild, ViewEncapsulation } from "@angular/core";
+import { GenerateIdDirective, mergeClasses, StringTemplateRefDirective } from "../../core";
+import { tooltipPositionVariants, tooltipVariants } from "./tooltip.variants";
+import * as i0 from "@angular/core";
+export class AiTooltip {
+    position = signal("top", ...(ngDevMode ? [{ debugName: "position" }] : []));
+    classes = computed(() => mergeClasses(tooltipVariants()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    arrowClasses = computed(() => mergeClasses(tooltipPositionVariants({ position: this.position() })), ...(ngDevMode ? [{ debugName: "arrowClasses" }] : []));
+    state = signal("closed", ...(ngDevMode ? [{ debugName: "state" }] : []));
+    uniqueId = viewChild("ai", ...(ngDevMode ? [{ debugName: "uniqueId" }] : []));
+    tooltipLabel = signal(null, ...(ngDevMode ? [{ debugName: "tooltipLabel" }] : []));
+    tooltipId = computed(() => this.uniqueId()?.id() ?? "tooltip", ...(ngDevMode ? [{ debugName: "tooltipId" }] : []));
+    setLabel(tooltipLabel, position) {
+        if (tooltipLabel) {
+            this.tooltipLabel.set(tooltipLabel);
+        }
+        this.position.set(position);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AiTooltip, isStandalone: true, selector: "ai-tooltip", host: { attributes: { "role": "tooltip" }, properties: { "class": "classes()", "attr.id": "tooltipId()", "attr.data-side": "position()", "attr.data-state": "state()" } }, viewQueries: [{ propertyName: "uniqueId", first: true, predicate: ["ai"], descendants: true, isSignal: true }], exportAs: ["aiTooltip"], ngImport: i0, template: "<ng-container *stringTemplateRef=\"tooltipLabel()\" aiId=\"tooltip\" #ai=\"aiId\">\r\n    {{ tooltipLabel() }}\r\n</ng-container>\r\n\r\n<span [class]=\"arrowClasses()\">\r\n    <svg\r\n        class=\"bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\"\r\n        width=\"10\"\r\n        height=\"5\"\r\n        viewBox=\"0 0 30 10\"\r\n        preserveAspectRatio=\"none\">\r\n        <polygon points=\"0,0 30,0 15,10\" />\r\n    </svg>\r\n</span>", dependencies: [{ kind: "directive", type: GenerateIdDirective, selector: "[aiId]", inputs: ["aiId"], exportAs: ["aiId"] }, { kind: "directive", type: StringTemplateRefDirective, selector: "[stringTemplateRef]", inputs: ["stringTemplateRefContext", "stringTemplateRef"], exportAs: ["stringTemplateRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTooltip, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-tooltip", exportAs: "aiTooltip", imports: [GenerateIdDirective, StringTemplateRefDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "classes()",
+                        "[attr.id]": "tooltipId()",
+                        "[attr.data-side]": "position()",
+                        "[attr.data-state]": "state()",
+                        role: "tooltip",
+                    }, template: "<ng-container *stringTemplateRef=\"tooltipLabel()\" aiId=\"tooltip\" #ai=\"aiId\">\r\n    {{ tooltipLabel() }}\r\n</ng-container>\r\n\r\n<span [class]=\"arrowClasses()\">\r\n    <svg\r\n        class=\"bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\"\r\n        width=\"10\"\r\n        height=\"5\"\r\n        viewBox=\"0 0 30 10\"\r\n        preserveAspectRatio=\"none\">\r\n        <polygon points=\"0,0 30,0 15,10\" />\r\n    </svg>\r\n</span>" }]
+        }], propDecorators: { uniqueId: [{ type: i0.ViewChild, args: ["ai", { isSignal: true }] }] } });
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tooltip/tooltip.ts","../../../../../../../libs/ai-ui/src/lib/components/tooltip/tooltip.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE3F,OAAO,EAA2B,uBAAuB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;AAiBvG,MAAM,OAAO,SAAS;IACT,QAAQ,GAAG,MAAM,CAA0B,KAAK,oDAAC,CAAC;IAExC,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,mDAAC,CAAC;IAC1D,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,wDAAC,CAAC;IAE9G,KAAK,GAAG,MAAM,CAAsB,QAAQ,iDAAC,CAAC;IAC9C,QAAQ,GAAG,SAAS,CAAsB,IAAI,oDAAC,CAAC;IAE/C,YAAY,GAAG,MAAM,CAAgB,IAAI,wDAAC,CAAC;IAC3C,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,SAAS,qDAAC,CAAC;IAEzE,QAAQ,CAAC,YAA2B,EAAE,QAAiC;QACnE,IAAI,YAAY,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;uGAjBQ,SAAS;2FAAT,SAAS,0XCpBtB,qfAaO,4CDLO,mBAAmB,yFAAE,0BAA0B;;2FAYhD,SAAS;kBAfrB,SAAS;+BACI,YAAY,YACZ,WAAW,WACZ,CAAC,mBAAmB,EAAE,0BAA0B,CAAC,iBAC3C,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QAEzC;wBACF,SAAS,EAAE,WAAW;wBACtB,WAAW,EAAE,aAAa;wBAC1B,kBAAkB,EAAE,YAAY;wBAChC,mBAAmB,EAAE,SAAS;wBAC9B,IAAI,EAAE,SAAS;qBAClB;sEASkD,IAAI","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, signal, viewChild, ViewEncapsulation } from \"@angular/core\";\r\nimport { GenerateIdDirective, mergeClasses, StringTemplateRefDirective } from \"../../core\";\r\nimport { AiTooltipType } from \"./tooltip.config\";\r\nimport { TooltipPositionVariants, tooltipPositionVariants, tooltipVariants } from \"./tooltip.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-tooltip\",\r\n    exportAs: \"aiTooltip\",\r\n    imports: [GenerateIdDirective, StringTemplateRefDirective],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    templateUrl: \"./tooltip.html\",\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n        \"[attr.id]\": \"tooltipId()\",\r\n        \"[attr.data-side]\": \"position()\",\r\n        \"[attr.data-state]\": \"state()\",\r\n        role: \"tooltip\",\r\n    },\r\n})\r\nexport class AiTooltip {\r\n    readonly position = signal<TooltipPositionVariants>(\"top\");\r\n\r\n    protected readonly classes = computed(() => mergeClasses(tooltipVariants()));\r\n    protected readonly arrowClasses = computed(() => mergeClasses(tooltipPositionVariants({ position: this.position() })));\r\n\r\n    readonly state = signal<\"opened\" | \"closed\">(\"closed\");\r\n    readonly uniqueId = viewChild<GenerateIdDirective>(\"ai\");\r\n\r\n    protected tooltipLabel = signal<AiTooltipType>(null);\r\n    protected tooltipId = computed(() => this.uniqueId()?.id() ?? \"tooltip\");\r\n\r\n    setLabel(tooltipLabel: AiTooltipType, position: TooltipPositionVariants) {\r\n        if (tooltipLabel) {\r\n            this.tooltipLabel.set(tooltipLabel);\r\n        }\r\n        this.position.set(position);\r\n    }\r\n}\r\n","<ng-container *stringTemplateRef=\"tooltipLabel()\" aiId=\"tooltip\" #ai=\"aiId\">\r\n    {{ tooltipLabel() }}\r\n</ng-container>\r\n\r\n<span [class]=\"arrowClasses()\">\r\n    <svg\r\n        class=\"bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\"\r\n        width=\"10\"\r\n        height=\"5\"\r\n        viewBox=\"0 0 30 10\"\r\n        preserveAspectRatio=\"none\">\r\n        <polygon points=\"0,0 30,0 15,10\" />\r\n    </svg>\r\n</span>"]}

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

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+export const tooltipVariants = cva("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance");
+export const tooltipPositionVariants = cva("absolute", {
+    variants: {
+        position: {
+            top: "bottom-0 translate-y-full left-[calc(50%-5px)]",
+            bottom: "-top-2.5 translate-y-0 rotate-180 left-[calc(50%-5px)]",
+            left: "top-[calc(50%-5px)] rotate-270 translate-y-0 -right-2.5",
+            right: "top-[calc(50%-5px)] translate-y-0 rotate-90 -left-2.5",
+        },
+    },
+});
+//# sourceMappingURL=tooltip.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tooltip/tooltip.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAC9B,maAAma,CACta,CAAC;AAGF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAC,UAAU,EAAE;IACnD,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,GAAG,EAAE,gDAAgD;YACrD,MAAM,EAAE,wDAAwD;YAChE,IAAI,EAAE,yDAAyD;YAC/D,KAAK,EAAE,uDAAuD;SACjE;KACJ;CACJ,CAAC,CAAC","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const tooltipVariants = cva(\r\n    \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\r\n);\r\nexport type TooltipVariants = VariantProps<typeof tooltipVariants>;\r\n\r\nexport const tooltipPositionVariants = cva(\"absolute\", {\r\n    variants: {\r\n        position: {\r\n            top: \"bottom-0 translate-y-full left-[calc(50%-5px)]\",\r\n            bottom: \"-top-2.5 translate-y-0 rotate-180 left-[calc(50%-5px)]\",\r\n            left: \"top-[calc(50%-5px)] rotate-270 translate-y-0 -right-2.5\",\r\n            right: \"top-[calc(50%-5px)] translate-y-0 rotate-90 -left-2.5\",\r\n        },\r\n    },\r\n});\r\n\r\nexport type TooltipPositionVariants = NonNullable<VariantProps<typeof tooltipPositionVariants>[\"position\"]>;\r\n"]}

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

@@ -0,0 +1,52 @@
+import { Component } from "@angular/core";
+import { AiTree } from "../tree";
+import * as i0 from "@angular/core";
+export class DemoTreeDefaultComponent {
+    nodes = [
+        {
+            label: "src",
+            icon: "folder",
+            expanded: true,
+            children: [
+                {
+                    label: "app",
+                    icon: "folder",
+                    expanded: true,
+                    children: [
+                        { label: "app.component.ts", icon: "file-code" },
+                        { label: "app.component.html", icon: "file-code" },
+                        { label: "app.module.ts", icon: "file-code" },
+                    ],
+                },
+                {
+                    label: "assets",
+                    icon: "folder",
+                    children: [{ label: "logo.svg", icon: "image" }],
+                },
+                { label: "main.ts", icon: "file-code" },
+                { label: "index.html", icon: "file-code" },
+            ],
+        },
+        { label: "package.json", icon: "file-text" },
+        { label: "tsconfig.json", icon: "file-settings" },
+        { label: "README.md", icon: "markdown" },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTreeDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTreeDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-full max-w-xs">
+            <ai-tree [nodes]="nodes" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTree, selector: "ai-tree", inputs: ["nodes", "class"], outputs: ["nodeSelect", "nodeToggle"], exportAs: ["aiTree"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTreeDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTree],
+                    template: `
+        <div class="w-full max-w-xs">
+            <ai-tree [nodes]="nodes" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tree/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;;AAWjC,MAAM,OAAO,wBAAwB;IACjC,KAAK,GAAiB;QAClB;YACI,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE;gBACN;oBACI,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,QAAQ;oBACd,QAAQ,EAAE,IAAI;oBACd,QAAQ,EAAE;wBACN,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,WAAW,EAAE;wBAChD,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,EAAE;wBAClD,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;qBAChD;iBACJ;gBACD;oBACI,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,QAAQ;oBACd,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iBACnD;gBACD,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE;gBACvC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;aAC7C;SACJ;QACD,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;QAC5C,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,eAAe,EAAE;QACjD,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;KAC3C,CAAC;uGA7BO,wBAAwB;2FAAxB,wBAAwB,wEANvB;;;;KAIT,4DALS,MAAM;;2FAOP,wBAAwB;kBARpC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiTree } from \"../tree\";\r\nimport { AiTreeNode } from \"../tree.interface\";\r\n\r\n@Component({\r\n    imports: [AiTree],\r\n    template: `\r\n        <div class=\"w-full max-w-xs\">\r\n            <ai-tree [nodes]=\"nodes\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTreeDefaultComponent {\r\n    nodes: AiTreeNode[] = [\r\n        {\r\n            label: \"src\",\r\n            icon: \"folder\",\r\n            expanded: true,\r\n            children: [\r\n                {\r\n                    label: \"app\",\r\n                    icon: \"folder\",\r\n                    expanded: true,\r\n                    children: [\r\n                        { label: \"app.component.ts\", icon: \"file-code\" },\r\n                        { label: \"app.component.html\", icon: \"file-code\" },\r\n                        { label: \"app.module.ts\", icon: \"file-code\" },\r\n                    ],\r\n                },\r\n                {\r\n                    label: \"assets\",\r\n                    icon: \"folder\",\r\n                    children: [{ label: \"logo.svg\", icon: \"image\" }],\r\n                },\r\n                { label: \"main.ts\", icon: \"file-code\" },\r\n                { label: \"index.html\", icon: \"file-code\" },\r\n            ],\r\n        },\r\n        { label: \"package.json\", icon: \"file-text\" },\r\n        { label: \"tsconfig.json\", icon: \"file-settings\" },\r\n        { label: \"README.md\", icon: \"markdown\" },\r\n    ];\r\n}\r\n"]}

package/esm2022/lib/components/tree/demo/selection.js

@@ -0,0 +1,56 @@
+import { Component, signal } from "@angular/core";
+import { AiTree } from "../tree";
+import * as i0 from "@angular/core";
+export class DemoTreeSelectionComponent {
+    selected = signal("", ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    nodes = [
+        {
+            label: "Documentos",
+            icon: "folder",
+            expanded: true,
+            children: [
+                { label: "Relatório.pdf", icon: "file-text" },
+                { label: "Planilha.xlsx", icon: "file-list-3" },
+            ],
+        },
+        {
+            label: "Imagens",
+            icon: "folder",
+            children: [
+                { label: "foto.jpg", icon: "image" },
+                { label: "banner.png", icon: "image" },
+            ],
+        },
+    ];
+    onSelect(node) {
+        this.selected.set(node.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTreeSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoTreeSelectionComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-xs">
+            <ai-tree [nodes]="nodes" (nodeSelect)="onSelect($event)" />
+            @if (selected()) {
+                <p class="text-sm text-muted-foreground">
+                    Selecionado: <span class="text-foreground font-medium">{{ selected() }}</span>
+                </p>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTree, selector: "ai-tree", inputs: ["nodes", "class"], outputs: ["nodeSelect", "nodeToggle"], exportAs: ["aiTree"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTreeSelectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTree],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-xs">
+            <ai-tree [nodes]="nodes" (nodeSelect)="onSelect($event)" />
+            @if (selected()) {
+                <p class="text-sm text-muted-foreground">
+                    Selecionado: <span class="text-foreground font-medium">{{ selected() }}</span>
+                </p>
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=selection.js.map

package/esm2022/lib/components/tree/demo/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tree/demo/selection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;;AAgBjC,MAAM,OAAO,0BAA0B;IACnC,QAAQ,GAAG,MAAM,CAAC,EAAE,oDAAC,CAAC;IAEtB,KAAK,GAAiB;QAClB;YACI,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE;gBACN,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,WAAyB,EAAE;gBAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,aAA2B,EAAE;aAChE;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACN,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,OAAqB,EAAE;gBAClD,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAqB,EAAE;aACvD;SACJ;KACJ,CAAC;IAEF,QAAQ,CAAC,IAAgB;QACrB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;uGAzBQ,0BAA0B;2FAA1B,0BAA0B,wEAXzB;;;;;;;;;KAST,4DAVS,MAAM;;2FAYP,0BAA0B;kBAbtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,QAAQ,EAAE;;;;;;;;;KAST;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\n\r\nimport { AiIconType } from \"../../icon\";\r\nimport { AiTree } from \"../tree\";\r\nimport { AiTreeNode } from \"../tree.interface\";\r\n\r\n@Component({\r\n    imports: [AiTree],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-xs\">\r\n            <ai-tree [nodes]=\"nodes\" (nodeSelect)=\"onSelect($event)\" />\r\n            @if (selected()) {\r\n                <p class=\"text-sm text-muted-foreground\">\r\n                    Selecionado: <span class=\"text-foreground font-medium\">{{ selected() }}</span>\r\n                </p>\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTreeSelectionComponent {\r\n    selected = signal(\"\");\r\n\r\n    nodes: AiTreeNode[] = [\r\n        {\r\n            label: \"Documentos\",\r\n            icon: \"folder\",\r\n            expanded: true,\r\n            children: [\r\n                { label: \"Relatório.pdf\", icon: \"file-text\" as AiIconType },\r\n                { label: \"Planilha.xlsx\", icon: \"file-list-3\" as AiIconType },\r\n            ],\r\n        },\r\n        {\r\n            label: \"Imagens\",\r\n            icon: \"folder\",\r\n            children: [\r\n                { label: \"foto.jpg\", icon: \"image\" as AiIconType },\r\n                { label: \"banner.png\", icon: \"image\" as AiIconType },\r\n            ],\r\n        },\r\n    ];\r\n\r\n    onSelect(node: AiTreeNode) {\r\n        this.selected.set(node.label);\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,10 @@
+import { DemoTreeDefaultComponent } from "./default";
+import { DemoTreeSelectionComponent } from "./selection";
+export const TREE = {
+    componentName: "tree",
+    examples: [
+        { name: "default", component: DemoTreeDefaultComponent },
+        { name: "selection", component: DemoTreeSelectionComponent },
+    ],
+};
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/tree/demo/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,CAAC,MAAM,IAAI,GAAG;IAChB,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE;QACN,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,wBAAwB,EAAE;QACxD,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,0BAA0B,EAAE;KAC/D;CACJ,CAAC","sourcesContent":["import { DemoTreeDefaultComponent } from \"./default\";\r\nimport { DemoTreeSelectionComponent } from \"./selection\";\r\n\r\nexport const TREE = {\r\n    componentName: \"tree\",\r\n    examples: [\r\n        { name: \"default\", component: DemoTreeDefaultComponent },\r\n        { name: \"selection\", component: DemoTreeSelectionComponent },\r\n    ],\r\n};\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./demo/tree\";\r\nexport * from \"./tree\";\r\nexport * from \"./tree.interface\";\r\n"]}

package/esm2022/lib/components/tree/tree.interface.js

@@ -0,0 +1 @@
+//# sourceMappingURL=tree.interface.js.map

package/esm2022/lib/components/tree/tree.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.interface.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tree/tree.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { AiIconType } from \"../icon\";\r\n\r\nexport interface AiTreeNode<T = unknown> {\r\n    label: string;\r\n    icon?: AiIconType;\r\n    data?: T;\r\n    expanded?: boolean;\r\n    selected?: boolean;\r\n    children?: AiTreeNode<T>[];\r\n}\r\n"]}

package/esm2022/lib/components/tree/tree.js

@@ -0,0 +1,138 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, signal, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { AiIcon } from "../icon";
+import { treeNodeVariants, treeVariants } from "./tree.variants";
+import * as i0 from "@angular/core";
+export class AiTreeNodeComponent {
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    depth = input(0, ...(ngDevMode ? [{ debugName: "depth" }] : []));
+    selectedNode = input(null, ...(ngDevMode ? [{ debugName: "selectedNode" }] : []));
+    nodeSelected = output();
+    nodeToggled = output();
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    hasChildren = computed(() => {
+        const children = this.node().children;
+        return !!children && children.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasChildren" }] : []));
+    nodeClasses = computed(() => mergeClasses(treeNodeVariants({ selected: this.selectedNode() === this.node() })), ...(ngDevMode ? [{ debugName: "nodeClasses" }] : []));
+    constructor() {
+        queueMicrotask(() => {
+            if (this.node().expanded) {
+                this.expanded.set(true);
+            }
+        });
+    }
+    onToggle(event) {
+        event.stopPropagation();
+        this.expanded.update(v => !v);
+        this.nodeToggled.emit(this.node());
+    }
+    onSelect() {
+        this.nodeSelected.emit(this.node());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiTreeNodeComponent, isStandalone: true, selector: "ai-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, selectedNode: { classPropertyName: "selectedNode", publicName: "selectedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected", nodeToggled: "nodeToggled" }, host: { classAttribute: "block" }, exportAs: ["aiTreeNode"], ngImport: i0, template: `
+        <button [class]="nodeClasses()" [style.padding-left.px]="depth() * 16 + 6" (click)="onSelect()">
+            @if (hasChildren()) {
+                <button type="button" class="flex items-center justify-center size-4 shrink-0 cursor-pointer" (click)="onToggle($event)">
+                    <ai-icon [icon]="expanded() ? 'arrow-down-s' : 'arrow-right-s'" size="sm" />
+                </button>
+            } @else {
+                <span class="size-4 shrink-0"></span>
+            }
+            @let icon = node().icon;
+            @if (icon) {
+                <ai-icon [icon]="icon" size="sm" class="shrink-0" />
+            }
+            <span class="truncate">{{ node().label }}</span>
+        </button>
+        @if (hasChildren() && expanded()) {
+            @for (child of node().children; track child.label) {
+                <ai-tree-node
+                    [node]="child"
+                    [depth]="depth() + 1"
+                    [selectedNode]="selectedNode()"
+                    (nodeSelected)="nodeSelected.emit($event)"
+                    (nodeToggled)="nodeToggled.emit($event)"
+                />
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTreeNodeComponent, selector: "ai-tree-node", inputs: ["node", "depth", "selectedNode"], outputs: ["nodeSelected", "nodeToggled"], exportAs: ["aiTreeNode"] }, { 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: AiTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-tree-node",
+                    exportAs: "aiTreeNode",
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <button [class]="nodeClasses()" [style.padding-left.px]="depth() * 16 + 6" (click)="onSelect()">
+            @if (hasChildren()) {
+                <button type="button" class="flex items-center justify-center size-4 shrink-0 cursor-pointer" (click)="onToggle($event)">
+                    <ai-icon [icon]="expanded() ? 'arrow-down-s' : 'arrow-right-s'" size="sm" />
+                </button>
+            } @else {
+                <span class="size-4 shrink-0"></span>
+            }
+            @let icon = node().icon;
+            @if (icon) {
+                <ai-icon [icon]="icon" size="sm" class="shrink-0" />
+            }
+            <span class="truncate">{{ node().label }}</span>
+        </button>
+        @if (hasChildren() && expanded()) {
+            @for (child of node().children; track child.label) {
+                <ai-tree-node
+                    [node]="child"
+                    [depth]="depth() + 1"
+                    [selectedNode]="selectedNode()"
+                    (nodeSelected)="nodeSelected.emit($event)"
+                    (nodeToggled)="nodeToggled.emit($event)"
+                />
+            }
+        }
+    `,
+                    host: {
+                        class: "block",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], selectedNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedNode", required: false }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }] } });
+export class AiTree {
+    nodes = input.required(...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    nodeSelect = output();
+    nodeToggle = output();
+    selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    classes = computed(() => mergeClasses(treeVariants(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onNodeSelected(node) {
+        this.selected.set(node);
+        this.nodeSelect.emit(node);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiTree, isStandalone: true, selector: "ai-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeToggle: "nodeToggle" }, host: { properties: { "class": "classes()" } }, exportAs: ["aiTree"], ngImport: i0, template: `
+        @for (node of nodes(); track node.label) {
+            <ai-tree-node [node]="node" [selectedNode]="selected()" (nodeSelected)="onNodeSelected($event)" (nodeToggled)="nodeToggle.emit($event)" />
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTreeNodeComponent, selector: "ai-tree-node", inputs: ["node", "depth", "selectedNode"], outputs: ["nodeSelected", "nodeToggled"], exportAs: ["aiTreeNode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTree, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-tree",
+                    exportAs: "aiTree",
+                    imports: [AiTreeNodeComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        @for (node of nodes(); track node.label) {
+            <ai-tree-node [node]="node" [selectedNode]="selected()" (nodeSelected)="onNodeSelected($event)" (nodeToggled)="nodeToggle.emit($event)" />
+        }
+    `,
+                    host: {
+                        "[class]": "classes()",
+                    },
+                }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }] } });
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tree/tree.ts"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, input, output, signal, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses } from \"../../core\";\r\nimport { AiIcon } from \"../icon\";\r\nimport { AiTreeNode } from \"./tree.interface\";\r\nimport { treeNodeVariants, treeVariants } from \"./tree.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-tree-node\",\r\n    exportAs: \"aiTreeNode\",\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <button [class]=\"nodeClasses()\" [style.padding-left.px]=\"depth() * 16 + 6\" (click)=\"onSelect()\">\r\n            @if (hasChildren()) {\r\n                <button type=\"button\" class=\"flex items-center justify-center size-4 shrink-0 cursor-pointer\" (click)=\"onToggle($event)\">\r\n                    <ai-icon [icon]=\"expanded() ? 'arrow-down-s' : 'arrow-right-s'\" size=\"sm\" />\r\n                </button>\r\n            } @else {\r\n                <span class=\"size-4 shrink-0\"></span>\r\n            }\r\n            @let icon = node().icon;\r\n            @if (icon) {\r\n                <ai-icon [icon]=\"icon\" size=\"sm\" class=\"shrink-0\" />\r\n            }\r\n            <span class=\"truncate\">{{ node().label }}</span>\r\n        </button>\r\n        @if (hasChildren() && expanded()) {\r\n            @for (child of node().children; track child.label) {\r\n                <ai-tree-node\r\n                    [node]=\"child\"\r\n                    [depth]=\"depth() + 1\"\r\n                    [selectedNode]=\"selectedNode()\"\r\n                    (nodeSelected)=\"nodeSelected.emit($event)\"\r\n                    (nodeToggled)=\"nodeToggled.emit($event)\"\r\n                />\r\n            }\r\n        }\r\n    `,\r\n    host: {\r\n        class: \"block\",\r\n    },\r\n})\r\nexport class AiTreeNodeComponent {\r\n    readonly node = input.required<AiTreeNode>();\r\n    readonly depth = input(0);\r\n    readonly selectedNode = input<AiTreeNode | null>(null);\r\n\r\n    readonly nodeSelected = output<AiTreeNode>();\r\n    readonly nodeToggled = output<AiTreeNode>();\r\n\r\n    readonly expanded = signal(false);\r\n\r\n    readonly hasChildren = computed(() => {\r\n        const children = this.node().children;\r\n        return !!children && children.length > 0;\r\n    });\r\n\r\n    protected readonly nodeClasses = computed(() => mergeClasses(treeNodeVariants({ selected: this.selectedNode() === this.node() })));\r\n\r\n    constructor() {\r\n        queueMicrotask(() => {\r\n            if (this.node().expanded) {\r\n                this.expanded.set(true);\r\n            }\r\n        });\r\n    }\r\n\r\n    onToggle(event: Event) {\r\n        event.stopPropagation();\r\n        this.expanded.update(v => !v);\r\n        this.nodeToggled.emit(this.node());\r\n    }\r\n\r\n    onSelect() {\r\n        this.nodeSelected.emit(this.node());\r\n    }\r\n}\r\n\r\n@Component({\r\n    selector: \"ai-tree\",\r\n    exportAs: \"aiTree\",\r\n    imports: [AiTreeNodeComponent],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        @for (node of nodes(); track node.label) {\r\n            <ai-tree-node [node]=\"node\" [selectedNode]=\"selected()\" (nodeSelected)=\"onNodeSelected($event)\" (nodeToggled)=\"nodeToggle.emit($event)\" />\r\n        }\r\n    `,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiTree {\r\n    readonly nodes = input.required<AiTreeNode[]>();\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly nodeSelect = output<AiTreeNode>();\r\n    readonly nodeToggle = output<AiTreeNode>();\r\n\r\n    readonly selected = signal<AiTreeNode | null>(null);\r\n\r\n    protected readonly classes = computed(() => mergeClasses(treeVariants(), this.class()));\r\n\r\n    onNodeSelected(node: AiTreeNode) {\r\n        this.selected.set(node);\r\n        this.nodeSelect.emit(node);\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+export const treeVariants = cva("flex flex-col w-full text-sm", {
+    variants: {},
+    defaultVariants: {},
+});
+export const treeNodeVariants = cva("flex w-full items-center gap-1.5 py-1 pr-1.5 rounded-md cursor-pointer select-none transition-colors hover:bg-muted/50", {
+    variants: {
+        selected: {
+            true: "bg-muted text-foreground",
+            false: "text-muted-foreground",
+        },
+    },
+    defaultVariants: {
+        selected: false,
+    },
+});
+//# sourceMappingURL=tree.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/tree/tree.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,8BAA8B,EAAE;IAC5D,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,wHAAwH,EAAE;IAC1J,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,IAAI,EAAE,0BAA0B;YAChC,KAAK,EAAE,uBAAuB;SACjC;KACJ;IACD,eAAe,EAAE;QACb,QAAQ,EAAE,KAAK;KAClB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const treeVariants = cva(\"flex flex-col w-full text-sm\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport const treeNodeVariants = cva(\"flex w-full items-center gap-1.5 py-1 pr-1.5 rounded-md cursor-pointer select-none transition-colors hover:bg-muted/50\", {\r\n    variants: {\r\n        selected: {\r\n            true: \"bg-muted text-foreground\",\r\n            false: \"text-muted-foreground\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        selected: false,\r\n    },\r\n});\r\n\r\nexport type TreeVariants = VariantProps<typeof treeVariants>;\r\nexport type TreeNodeVariants = VariantProps<typeof treeNodeVariants>;\r\n"]}

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

@@ -0,0 +1,42 @@
+import { Component, inject, signal } from "@angular/core";
+import { AiUpload, AiUploadSelected } from "../upload";
+import { AiFileUploadService } from "../upload.service";
+import * as i0 from "@angular/core";
+export class DemoUploadDefaultComponent {
+    #fileUpload = inject(AiFileUploadService);
+    accept = ".png, .jpg, .jpeg, .gif";
+    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    async onChangeFile(file) {
+        const result = await this.#fileUpload.readAsBase64(file);
+        this.config.set(result);
+    }
+    onDelete() {
+        this.config.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoUploadDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" [accept]="accept" (changeFile)="onChangeFile($event)" />
+
+            @if (config()) {
+                <ai-upload-selected [config]="config()" (remove)="onDelete()" />
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiUpload, selector: "ai-upload", inputs: ["id", "type", "accept", "multiple", "disabled", "class"], outputs: ["changeFile", "changeFiles"], exportAs: ["aiUpload"] }, { kind: "component", type: AiUploadSelected, selector: "ai-upload-selected", inputs: ["config", "type", "class"], outputs: ["remove"], exportAs: ["aiUploadSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiUpload, AiUploadSelected],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" [accept]="accept" (changeFile)="onChangeFile($event)" />
+
+            @if (config()) {
+                <ai-upload-selected [config]="config()" (remove)="onDelete()" />
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/upload/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;;AAcxD,MAAM,OAAO,0BAA0B;IACnC,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAE1C,MAAM,GAAG,yBAAyB,CAAC;IACnC,MAAM,GAAG,MAAM,CAAsB,IAAI,kDAAC,CAAC;IAE3C,KAAK,CAAC,YAAY,CAAC,IAAU;QACzB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ;QACJ,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;uGAbQ,0BAA0B;2FAA1B,0BAA0B,wEAVzB;;;;;;;;KAQT,4DATS,QAAQ,yLAAE,gBAAgB;;2FAW3B,0BAA0B;kBAZtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;oBACrC,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component, inject, signal } from \"@angular/core\";\r\n\r\nimport { AiUpload, AiUploadSelected } from \"../upload\";\r\nimport { AiFileUpload } from \"../upload.interface\";\r\nimport { AiFileUploadService } from \"../upload.service\";\r\n\r\n@Component({\r\n    imports: [AiUpload, AiUploadSelected],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-lg\">\r\n            <ai-upload class=\"w-full\" [accept]=\"accept\" (changeFile)=\"onChangeFile($event)\" />\r\n\r\n            @if (config()) {\r\n                <ai-upload-selected [config]=\"config()\" (remove)=\"onDelete()\" />\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoUploadDefaultComponent {\r\n    #fileUpload = inject(AiFileUploadService);\r\n\r\n    accept = \".png, .jpg, .jpeg, .gif\";\r\n    config = signal<AiFileUpload | null>(null);\r\n\r\n    async onChangeFile(file: File) {\r\n        const result = await this.#fileUpload.readAsBase64(file);\r\n        this.config.set(result);\r\n    }\r\n\r\n    onDelete() {\r\n        this.config.set(null);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/upload/demo/dropzone.js

@@ -0,0 +1,42 @@
+import { Component, inject, signal } from "@angular/core";
+import { AiUpload, AiUploadSelected } from "../upload";
+import { AiFileUploadService } from "../upload.service";
+import * as i0 from "@angular/core";
+export class DemoUploadDropzoneComponent {
+    #fileUpload = inject(AiFileUploadService);
+    accept = ".png, .jpg, .jpeg, .gif";
+    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    async onChangeFile(file) {
+        const result = await this.#fileUpload.readAsBase64(file);
+        this.config.set(result);
+    }
+    onDelete() {
+        this.config.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoUploadDropzoneComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" type="dropzone" [accept]="accept" (changeFile)="onChangeFile($event)" />
+
+            @if (config()) {
+                <ai-upload-selected type="card" [config]="config()" (remove)="onDelete()" />
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiUpload, selector: "ai-upload", inputs: ["id", "type", "accept", "multiple", "disabled", "class"], outputs: ["changeFile", "changeFiles"], exportAs: ["aiUpload"] }, { kind: "component", type: AiUploadSelected, selector: "ai-upload-selected", inputs: ["config", "type", "class"], outputs: ["remove"], exportAs: ["aiUploadSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadDropzoneComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiUpload, AiUploadSelected],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" type="dropzone" [accept]="accept" (changeFile)="onChangeFile($event)" />
+
+            @if (config()) {
+                <ai-upload-selected type="card" [config]="config()" (remove)="onDelete()" />
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=dropzone.js.map

package/esm2022/lib/components/upload/demo/dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/upload/demo/dropzone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;;AAcxD,MAAM,OAAO,2BAA2B;IACpC,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAE1C,MAAM,GAAG,yBAAyB,CAAC;IACnC,MAAM,GAAG,MAAM,CAAsB,IAAI,kDAAC,CAAC;IAE3C,KAAK,CAAC,YAAY,CAAC,IAAU;QACzB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ;QACJ,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;uGAbQ,2BAA2B;2FAA3B,2BAA2B,wEAV1B;;;;;;;;KAQT,4DATS,QAAQ,yLAAE,gBAAgB;;2FAW3B,2BAA2B;kBAZvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;oBACrC,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component, inject, signal } from \"@angular/core\";\r\n\r\nimport { AiUpload, AiUploadSelected } from \"../upload\";\r\nimport { AiFileUpload } from \"../upload.interface\";\r\nimport { AiFileUploadService } from \"../upload.service\";\r\n\r\n@Component({\r\n    imports: [AiUpload, AiUploadSelected],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-lg\">\r\n            <ai-upload class=\"w-full\" type=\"dropzone\" [accept]=\"accept\" (changeFile)=\"onChangeFile($event)\" />\r\n\r\n            @if (config()) {\r\n                <ai-upload-selected type=\"card\" [config]=\"config()\" (remove)=\"onDelete()\" />\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoUploadDropzoneComponent {\r\n    #fileUpload = inject(AiFileUploadService);\r\n\r\n    accept = \".png, .jpg, .jpeg, .gif\";\r\n    config = signal<AiFileUpload | null>(null);\r\n\r\n    async onChangeFile(file: File) {\r\n        const result = await this.#fileUpload.readAsBase64(file);\r\n        this.config.set(result);\r\n    }\r\n\r\n    onDelete() {\r\n        this.config.set(null);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/upload/demo/multiple.js

@@ -0,0 +1,42 @@
+import { Component, inject, signal } from "@angular/core";
+import { AiUpload, AiUploadSelected } from "../upload";
+import { AiFileUploadService } from "../upload.service";
+import * as i0 from "@angular/core";
+export class DemoUploadMultipleComponent {
+    #fileUpload = inject(AiFileUploadService);
+    accept = ".png, .jpg, .jpeg, .gif, .pdf";
+    configs = signal([], ...(ngDevMode ? [{ debugName: "configs" }] : []));
+    async onChangeFiles(files) {
+        const results = await Promise.all(files.map(f => this.#fileUpload.readAsBase64(f)));
+        this.configs.update(arr => [...arr, ...results]);
+    }
+    onRemove(item) {
+        this.configs.update(arr => arr.filter(f => f !== item));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoUploadMultipleComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" [multiple]="true" [accept]="accept" (changeFiles)="onChangeFiles($event)" />
+
+            @if (configs().length > 0) {
+                <ai-upload-selected type="list" [config]="configs()" (remove)="onRemove($event)" />
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiUpload, selector: "ai-upload", inputs: ["id", "type", "accept", "multiple", "disabled", "class"], outputs: ["changeFile", "changeFiles"], exportAs: ["aiUpload"] }, { kind: "component", type: AiUploadSelected, selector: "ai-upload-selected", inputs: ["config", "type", "class"], outputs: ["remove"], exportAs: ["aiUploadSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoUploadMultipleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiUpload, AiUploadSelected],
+                    template: `
+        <div class="flex flex-col gap-4 w-full max-w-lg">
+            <ai-upload class="w-full" [multiple]="true" [accept]="accept" (changeFiles)="onChangeFiles($event)" />
+
+            @if (configs().length > 0) {
+                <ai-upload-selected type="list" [config]="configs()" (remove)="onRemove($event)" />
+            }
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=multiple.js.map

package/esm2022/lib/components/upload/demo/multiple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiple.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/upload/demo/multiple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;;AAcxD,MAAM,OAAO,2BAA2B;IACpC,WAAW,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAE1C,MAAM,GAAG,+BAA+B,CAAC;IACzC,OAAO,GAAG,MAAM,CAAiB,EAAE,mDAAC,CAAC;IAErC,KAAK,CAAC,aAAa,CAAC,KAAa;QAC7B,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpF,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,IAAkB;QACvB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;uGAbQ,2BAA2B;2FAA3B,2BAA2B,wEAV1B;;;;;;;;KAQT,4DATS,QAAQ,yLAAE,gBAAgB;;2FAW3B,2BAA2B;kBAZvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;oBACrC,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component, inject, signal } from \"@angular/core\";\r\n\r\nimport { AiUpload, AiUploadSelected } from \"../upload\";\r\nimport { AiFileUpload } from \"../upload.interface\";\r\nimport { AiFileUploadService } from \"../upload.service\";\r\n\r\n@Component({\r\n    imports: [AiUpload, AiUploadSelected],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-full max-w-lg\">\r\n            <ai-upload class=\"w-full\" [multiple]=\"true\" [accept]=\"accept\" (changeFiles)=\"onChangeFiles($event)\" />\r\n\r\n            @if (configs().length > 0) {\r\n                <ai-upload-selected type=\"list\" [config]=\"configs()\" (remove)=\"onRemove($event)\" />\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoUploadMultipleComponent {\r\n    #fileUpload = inject(AiFileUploadService);\r\n\r\n    accept = \".png, .jpg, .jpeg, .gif, .pdf\";\r\n    configs = signal<AiFileUpload[]>([]);\r\n\r\n    async onChangeFiles(files: File[]) {\r\n        const results = await Promise.all(files.map(f => this.#fileUpload.readAsBase64(f)));\r\n        this.configs.update(arr => [...arr, ...results]);\r\n    }\r\n\r\n    onRemove(item: AiFileUpload) {\r\n        this.configs.update(arr => arr.filter(f => f !== item));\r\n    }\r\n}\r\n"]}