@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/alert-dialog/demo/alert-dialog.js

@@ -0,0 +1,12 @@
+import { DemoAlertDialogDefaultComponent } from "./default";
+export const ALERT_DIALOG = {
+    componentName: "alert-dialog",
+    componentType: "alert-dialog",
+    examples: [
+        {
+            name: "default",
+            component: DemoAlertDialogDefaultComponent,
+        },
+    ],
+};
+//# sourceMappingURL=alert-dialog.js.map

package/esm2022/lib/components/alert-dialog/demo/alert-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/alert-dialog/demo/alert-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,+BAA+B,EAAE,MAAM,WAAW,CAAC;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,aAAa,EAAE,cAAc;IAC7B,aAAa,EAAE,cAAc;IAC7B,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,+BAA+B;SAC7C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoAlertDialogDefaultComponent } from \"./default\";\r\n\r\nexport const ALERT_DIALOG = {\r\n    componentName: \"alert-dialog\",\r\n    componentType: \"alert-dialog\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoAlertDialogDefaultComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/alert-dialog/demo/default.js

@@ -0,0 +1,34 @@
+import { Component, inject } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiAlertDialogService } from "../alert-dialog.service";
+import * as i0 from "@angular/core";
+export class DemoAlertDialogDefaultComponent {
+    #alertDialog = inject(AiAlertDialogService);
+    openDialogConfirm() {
+        this.#alertDialog.confirm({
+            icon: { name: "delete-bin", color: "destructive" },
+            title: "Apagar usuário",
+            description: "Tem certeza que deseja apagar esse usuário?",
+            confirmText: "Sim",
+            cancelText: "Não",
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAlertDialogDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAlertDialogDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-150 flex items-center justify-center">
+            <ai-button (click)="openDialogConfirm()"> Show Dialog </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: DemoAlertDialogDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiButton],
+                    template: `
+        <div class="w-150 flex items-center justify-center">
+            <ai-button (click)="openDialogConfirm()"> Show Dialog </ai-button>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/alert-dialog/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/alert-dialog/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,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAU/D,MAAM,OAAO,+BAA+B;IACxC,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAE5C,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE;YAClD,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,6CAA6C;YAC1D,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;SACpB,CAAC,CAAC;IACP,CAAC;uGAXQ,+BAA+B;2FAA/B,+BAA+B,wEAN9B;;;;KAIT,4DALS,QAAQ;;2FAOT,+BAA+B;kBAR3C,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 { AiAlertDialogService } from \"../alert-dialog.service\";\r\n\r\n@Component({\r\n    imports: [AiButton],\r\n    template: `\r\n        <div class=\"w-150 flex items-center justify-center\">\r\n            <ai-button (click)=\"openDialogConfirm()\"> Show Dialog </ai-button>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAlertDialogDefaultComponent {\r\n    #alertDialog = inject(AiAlertDialogService);\r\n\r\n    openDialogConfirm() {\r\n        this.#alertDialog.confirm({\r\n            icon: { name: \"delete-bin\", color: \"destructive\" },\r\n            title: \"Apagar usuário\",\r\n            description: \"Tem certeza que deseja apagar esse usuário?\",\r\n            confirmText: \"Sim\",\r\n            cancelText: \"Não\",\r\n        });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/alert-dialog/index.js

@@ -0,0 +1,6 @@
+export * from "./alert-dialog";
+export * from "./alert-dialog.config";
+export * from "./alert-dialog.ref";
+export * from "./alert-dialog.service";
+export * from "./demo/alert-dialog";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/alert-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from \"./alert-dialog\";\r\nexport * from \"./alert-dialog.config\";\r\nexport * from \"./alert-dialog.ref\";\r\nexport * from \"./alert-dialog.service\";\r\nexport * from \"./demo/alert-dialog\";\r\n"]}

package/esm2022/lib/components/avatar/avatar-group.js

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { avatarGroupVariants } from "./avatar.variants";
+import * as i0 from "@angular/core";
+export class AiAvatarGroup {
+    orientation = input("horizontal", ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    classes = computed(() => mergeClasses(avatarGroupVariants({ orientation: this.orientation() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiAvatarGroup, isStandalone: true, selector: "ai-avatar-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, exportAs: ["aiAvatarGroup"], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAvatarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-avatar-group",
+                    exportAs: "aiAvatarGroup",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: ` <ng-content /> `,
+                    host: {
+                        "[class]": "classes()",
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar-group.js.map

package/esm2022/lib/components/avatar/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/avatar/avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAuB,MAAM,mBAAmB,CAAC;;AAY7E,MAAM,OAAO,aAAa;IACb,WAAW,GAAG,KAAK,CAAqC,YAAY,uDAAC,CAAC;IACtE,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAEpB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;uGAJzH,aAAa;2FAAb,aAAa,saALZ,kBAAkB;;2FAKnB,aAAa;kBAVzB,SAAS;mBAAC;oBACP,QAAQ,EAAE,iBAAiB;oBAC3B,QAAQ,EAAE,eAAe;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACF,SAAS,EAAE,WAAW;qBACzB;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from \"@angular/core\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { mergeClasses } from \"../../core\";\r\nimport { avatarGroupVariants, AvatarGroupVariants } from \"./avatar.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-avatar-group\",\r\n    exportAs: \"aiAvatarGroup\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: ` <ng-content /> `,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiAvatarGroup {\r\n    readonly orientation = input<AvatarGroupVariants[\"orientation\"]>(\"horizontal\");\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    protected readonly classes = computed(() => mergeClasses(avatarGroupVariants({ orientation: this.orientation() }), this.class()));\r\n}\r\n"]}

package/esm2022/lib/components/avatar/avatar.js

@@ -0,0 +1,52 @@
+import { NgOptimizedImage } from "@angular/common";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { avatarVariants, imageVariants } from "./avatar.variants";
+import * as i0 from "@angular/core";
+export class AiAvatar {
+    alt = input("", ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    fallback = input("", ...(ngDevMode ? [{ debugName: "fallback" }] : []));
+    priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : {}), transform: booleanAttribute });
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input("circle", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    image = input("", ...(ngDevMode ? [{ debugName: "image" }] : []));
+    status = input(...(ngDevMode ? [undefined, { debugName: "status" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
+    imageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "imageLoaded" }] : []));
+    containerClasses = computed(() => {
+        const size = this.size();
+        const sizeClass = typeof size === "number" ? undefined : size;
+        return mergeClasses(avatarVariants({ shape: this.shape(), size: sizeClass }), this.class());
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    customSize = computed(() => (typeof this.size() === "number" ? `${this.size()}px` : null), ...(ngDevMode ? [{ debugName: "customSize" }] : []));
+    imgClasses = computed(() => mergeClasses(imageVariants({ shape: this.shape() })), ...(ngDevMode ? [{ debugName: "imgClasses" }] : []));
+    constructor() {
+        effect(() => {
+            this.image();
+            this.imageError.set(false);
+            this.imageLoaded.set(false);
+        });
+    }
+    onImageError() {
+        this.imageError.set(true);
+        this.imageLoaded.set(false);
+    }
+    onImageLoad() {
+        this.imageLoaded.set(true);
+        this.imageError.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiAvatar, isStandalone: true, selector: "ai-avatar", inputs: { alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "containerClasses()", "style.width": "customSize()", "style.height": "customSize()", "attr.data-slot": "\"avatar\"", "attr.data-status": "status() ?? null" } }, exportAs: ["aiAvatar"], ngImport: i0, template: "@if (fallback() && (!image() || !imageLoaded())) {\r\n    <span class=\"absolute z-0 m-auto text-sm font-semibold font-title\">{{ fallback() }}</span>\r\n}\r\n\r\n@if (image() && !imageError()) {\r\n    <img fill\r\n        sizes=\"100%\"\r\n        [alt]=\"alt()\"\r\n        [class]=\"imgClasses()\"\r\n        [ngSrc]=\"image()\"\r\n        [priority]=\"priority()\"\r\n        (error)=\"onImageError()\"\r\n        (load)=\"onImageLoad()\" />\r\n}\r\n\r\n@if (status()) {\r\n    @switch (status()) {\r\n        @case ('online') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('invisible') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-gray-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('doNotDisturb') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-600\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n                <path d=\"M8 12h8\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('away') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400\">\r\n                <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n    }\r\n}", dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-avatar", exportAs: "aiAvatar", imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "containerClasses()",
+                        "[style.width]": "customSize()",
+                        "[style.height]": "customSize()",
+                        "[attr.data-slot]": '"avatar"',
+                        "[attr.data-status]": "status() ?? null",
+                    }, template: "@if (fallback() && (!image() || !imageLoaded())) {\r\n    <span class=\"absolute z-0 m-auto text-sm font-semibold font-title\">{{ fallback() }}</span>\r\n}\r\n\r\n@if (image() && !imageError()) {\r\n    <img fill\r\n        sizes=\"100%\"\r\n        [alt]=\"alt()\"\r\n        [class]=\"imgClasses()\"\r\n        [ngSrc]=\"image()\"\r\n        [priority]=\"priority()\"\r\n        (error)=\"onImageError()\"\r\n        (load)=\"onImageLoad()\" />\r\n}\r\n\r\n@if (status()) {\r\n    @switch (status()) {\r\n        @case ('online') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('invisible') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-gray-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('doNotDisturb') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-600\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n                <path d=\"M8 12h8\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('away') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400\">\r\n                <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n    }\r\n}" }]
+        }], ctorParameters: () => [], propDecorators: { alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/avatar/avatar.ts","../../../../../../../libs/ai-ui/src/lib/components/avatar/avatar.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzI,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAkB,aAAa,EAAE,MAAM,mBAAmB,CAAC;;AAmBlF,MAAM,OAAO,QAAQ;IACR,GAAG,GAAG,KAAK,CAAS,EAAE,+CAAC,CAAC;IACxB,QAAQ,GAAG,KAAK,CAAS,EAAE,oDAAC,CAAC;IAC7B,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,gBAAgB,GAAG,CAAC;IACzD,IAAI,GAAG,KAAK,CAAkC,SAAS,gDAAC,CAAC;IACzD,KAAK,GAAG,KAAK,CAA0B,QAAQ,iDAAC,CAAC;IACjD,KAAK,GAAG,KAAK,CAAmB,EAAE,iDAAC,CAAC;IACpC,MAAM,GAAG,KAAK,4DAAkB,CAAC;IAEjC,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC,CAAC;IAEhB,UAAU,GAAG,MAAM,CAAU,KAAK,sDAAC,CAAC;IACpC,WAAW,GAAG,MAAM,CAAU,KAAK,uDAAC,CAAC;IAErC,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE;QAChD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAA+B,CAAC;QAC1F,OAAO,YAAY,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAChG,CAAC,4DAAC,CAAC;IAEgB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sDAAC,CAAC;IAC3F,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,sDAAC,CAAC;IAErG;QACI,MAAM,CAAC,GAAG,EAAE;YACR,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACP,CAAC;IAES,YAAY;QAClB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAES,WAAW;QACjB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;uGAvCQ,QAAQ;2FAAR,QAAQ,qvCCvBrB,6gGA+EC,4CDpEa,gBAAgB;;2FAYjB,QAAQ;kBAfpB,SAAS;+BACI,WAAW,YACX,UAAU,WACX,CAAC,gBAAgB,CAAC,mBACV,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,QAE/B;wBACF,SAAS,EAAE,oBAAoB;wBAC/B,eAAe,EAAE,cAAc;wBAC/B,gBAAgB,EAAE,cAAc;wBAChC,kBAAkB,EAAE,UAAU;wBAC9B,oBAAoB,EAAE,kBAAkB;qBAC3C","sourcesContent":["import { NgOptimizedImage } from \"@angular/common\";\r\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, input, signal, ViewEncapsulation } from \"@angular/core\";\r\nimport { SafeUrl } from \"@angular/platform-browser\";\r\nimport { mergeClasses } from \"../../core\";\r\nimport { avatarVariants, AvatarVariants, imageVariants } from \"./avatar.variants\";\r\n\r\nexport type AiAvatarStatus = \"online\" | \"invisible\" | \"doNotDisturb\" | \"away\";\r\n\r\n@Component({\r\n    selector: \"ai-avatar\",\r\n    exportAs: \"aiAvatar\",\r\n    imports: [NgOptimizedImage],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    templateUrl: \"./avatar.html\",\r\n    host: {\r\n        \"[class]\": \"containerClasses()\",\r\n        \"[style.width]\": \"customSize()\",\r\n        \"[style.height]\": \"customSize()\",\r\n        \"[attr.data-slot]\": '\"avatar\"',\r\n        \"[attr.data-status]\": \"status() ?? null\",\r\n    },\r\n})\r\nexport class AiAvatar {\r\n    readonly alt = input<string>(\"\");\r\n    readonly fallback = input<string>(\"\");\r\n    readonly priority = input(false, { transform: booleanAttribute });\r\n    readonly size = input<AvatarVariants[\"size\"] | number>(\"default\");\r\n    readonly shape = input<AvatarVariants[\"shape\"]>(\"circle\");\r\n    readonly image = input<string | SafeUrl>(\"\");\r\n    readonly status = input<AiAvatarStatus>();\r\n\r\n    readonly class = input<string>(\"\");\r\n\r\n    protected readonly imageError = signal<boolean>(false);\r\n    protected readonly imageLoaded = signal<boolean>(false);\r\n\r\n    protected readonly containerClasses = computed(() => {\r\n        const size = this.size();\r\n        const sizeClass = typeof size === \"number\" ? undefined : (size as AvatarVariants[\"size\"]);\r\n        return mergeClasses(avatarVariants({ shape: this.shape(), size: sizeClass }), this.class());\r\n    });\r\n\r\n    protected readonly customSize = computed(() => (typeof this.size() === \"number\" ? `${this.size()}px` : null));\r\n    protected readonly imgClasses = computed(() => mergeClasses(imageVariants({ shape: this.shape() })));\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            this.image();\r\n            this.imageError.set(false);\r\n            this.imageLoaded.set(false);\r\n        });\r\n    }\r\n\r\n    protected onImageError() {\r\n        this.imageError.set(true);\r\n        this.imageLoaded.set(false);\r\n    }\r\n\r\n    protected onImageLoad() {\r\n        this.imageLoaded.set(true);\r\n        this.imageError.set(false);\r\n    }\r\n}\r\n","@if (fallback() && (!image() || !imageLoaded())) {\r\n    <span class=\"absolute z-0 m-auto text-sm font-semibold font-title\">{{ fallback() }}</span>\r\n}\r\n\r\n@if (image() && !imageError()) {\r\n    <img fill\r\n        sizes=\"100%\"\r\n        [alt]=\"alt()\"\r\n        [class]=\"imgClasses()\"\r\n        [ngSrc]=\"image()\"\r\n        [priority]=\"priority()\"\r\n        (error)=\"onImageError()\"\r\n        (load)=\"onImageLoad()\" />\r\n}\r\n\r\n@if (status()) {\r\n    @switch (status()) {\r\n        @case ('online') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('invisible') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-gray-500\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('doNotDisturb') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-600\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n                <path d=\"M8 12h8\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n        @case ('away') {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"currentColor\"\r\n                stroke=\"white\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400\">\r\n                <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" fill=\"currentColor\" />\r\n            </svg>\r\n        }\r\n    }\r\n}"]}

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

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+export const avatarVariants = cva("relative flex flex-row items-center justify-center box-content cursor-default bg-default", {
+    variants: {
+        size: {
+            xs: "size-6",
+            sm: "size-8",
+            default: "size-10",
+            md: "size-12",
+            lg: "size-14",
+            xl: "size-16",
+        },
+        shape: {
+            default: "rounded-md",
+            circle: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        shape: "default",
+    },
+});
+export const imageVariants = cva("relative object-cover object-center w-full h-full z-10", {
+    variants: {
+        shape: {
+            default: "rounded-md",
+            circle: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        shape: "default",
+    },
+});
+export const avatarGroupVariants = cva("flex items-center [&_img]:ring-2 [&_img]:ring-background", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row -space-x-3",
+            vertical: "flex-col -space-y-3",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+//# sourceMappingURL=avatar.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/avatar/avatar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC,0FAA0F,EAAE;IAC1H,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,QAAQ;YACZ,OAAO,EAAE,SAAS;YAClB,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;SAChB;QACD,KAAK,EAAE;YACH,OAAO,EAAE,YAAY;YACrB,MAAM,EAAE,cAAc;SACzB;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,wDAAwD,EAAE;IACvF,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,OAAO,EAAE,YAAY;YACrB,MAAM,EAAE,cAAc;SACzB;KACJ;IACD,eAAe,EAAE;QACb,KAAK,EAAE,SAAS;KACnB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,0DAA0D,EAAE;IAC/F,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,UAAU,EAAE,qBAAqB;YACjC,QAAQ,EAAE,qBAAqB;SAClC;KACJ;IACD,eAAe,EAAE;QACb,WAAW,EAAE,YAAY;KAC5B;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const avatarVariants = cva(\"relative flex flex-row items-center justify-center box-content cursor-default bg-default\", {\r\n    variants: {\r\n        size: {\r\n            xs: \"size-6\",\r\n            sm: \"size-8\",\r\n            default: \"size-10\",\r\n            md: \"size-12\",\r\n            lg: \"size-14\",\r\n            xl: \"size-16\",\r\n        },\r\n        shape: {\r\n            default: \"rounded-md\",\r\n            circle: \"rounded-full\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"default\",\r\n        shape: \"default\",\r\n    },\r\n});\r\n\r\nexport const imageVariants = cva(\"relative object-cover object-center w-full h-full z-10\", {\r\n    variants: {\r\n        shape: {\r\n            default: \"rounded-md\",\r\n            circle: \"rounded-full\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        shape: \"default\",\r\n    },\r\n});\r\n\r\nexport const avatarGroupVariants = cva(\"flex items-center [&_img]:ring-2 [&_img]:ring-background\", {\r\n    variants: {\r\n        orientation: {\r\n            horizontal: \"flex-row -space-x-3\",\r\n            vertical: \"flex-col -space-y-3\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        orientation: \"horizontal\",\r\n    },\r\n});\r\n\r\nexport type AvatarVariants = VariantProps<typeof avatarVariants>;\r\nexport type ImageVariants = VariantProps<typeof imageVariants>;\r\nexport type AvatarGroupVariants = VariantProps<typeof avatarGroupVariants>;\r\n"]}

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

@@ -0,0 +1,27 @@
+import { DemoAvatarDefaultComponent } from "./default";
+import { DemoAvatarShapeComponent } from "./shape";
+import { DemoAvatarSizeComponent } from "./size";
+import { DemoAvatarStatusComponent } from "./status";
+export const AVATAR = {
+    componentName: "avatar",
+    componentType: "avatar",
+    examples: [
+        {
+            name: "default",
+            component: DemoAvatarDefaultComponent,
+        },
+        {
+            name: "size",
+            component: DemoAvatarSizeComponent,
+        },
+        {
+            name: "status",
+            component: DemoAvatarStatusComponent,
+        },
+        {
+            name: "shape",
+            component: DemoAvatarShapeComponent,
+        },
+    ],
+};
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/avatar/demo/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,uBAAuB;SACrC;QACD;YACI,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,yBAAyB;SACvC;QACD;YACI,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,wBAAwB;SACtC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoAvatarDefaultComponent } from \"./default\";\r\nimport { DemoAvatarShapeComponent } from \"./shape\";\r\nimport { DemoAvatarSizeComponent } from \"./size\";\r\nimport { DemoAvatarStatusComponent } from \"./status\";\r\n\r\nexport const AVATAR = {\r\n    componentName: \"avatar\",\r\n    componentType: \"avatar\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoAvatarDefaultComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoAvatarSizeComponent,\r\n        },\r\n        {\r\n            name: \"status\",\r\n            component: DemoAvatarStatusComponent,\r\n        },\r\n        {\r\n            name: \"shape\",\r\n            component: DemoAvatarShapeComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

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

@@ -0,0 +1,38 @@
+import { Component } from "@angular/core";
+import { AiAvatar } from "../avatar";
+import { AiAvatarGroup } from "../avatar-group";
+import * as i0 from "@angular/core";
+export class DemoAvatarDefaultComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAvatarDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex justify-center items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" />
+            <ai-avatar image="error-image.png" fallback="AI" size="sm" />
+
+            <ai-avatar-group>
+                <ai-avatar image="https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person2.jpg" fallback="AI" size="sm" />
+                <ai-avatar image="https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person4.jpg" fallback="AI" size="sm" />
+                <ai-avatar image="https://avatars.githubusercontent.com/u/33138081?v=4" fallback="AI" size="sm" />
+            </ai-avatar-group>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiAvatar, selector: "ai-avatar", inputs: ["alt", "fallback", "priority", "size", "shape", "image", "status", "class"], exportAs: ["aiAvatar"] }, { kind: "component", type: AiAvatarGroup, selector: "ai-avatar-group", inputs: ["orientation", "class"], exportAs: ["aiAvatarGroup"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAvatar, AiAvatarGroup],
+                    template: `
+        <div class="flex justify-center items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" />
+            <ai-avatar image="error-image.png" fallback="AI" size="sm" />
+
+            <ai-avatar-group>
+                <ai-avatar image="https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person2.jpg" fallback="AI" size="sm" />
+                <ai-avatar image="https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person4.jpg" fallback="AI" size="sm" />
+                <ai-avatar image="https://avatars.githubusercontent.com/u/33138081?v=4" fallback="AI" size="sm" />
+            </ai-avatar-group>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/avatar/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAiBhD,MAAM,OAAO,0BAA0B;uGAA1B,0BAA0B;2FAA1B,0BAA0B,wEAbzB;;;;;;;;;;;KAWT,4DAZS,QAAQ,oKAAE,aAAa;;2FAcxB,0BAA0B;kBAftC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC;oBAClC,QAAQ,EAAE;;;;;;;;;;;KAWT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiAvatar } from \"../avatar\";\r\nimport { AiAvatarGroup } from \"../avatar-group\";\r\n\r\n@Component({\r\n    imports: [AiAvatar, AiAvatarGroup],\r\n    template: `\r\n        <div class=\"flex justify-center items-center gap-x-4\">\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" [size]=\"32\" />\r\n            <ai-avatar image=\"error-image.png\" fallback=\"AI\" size=\"sm\" />\r\n\r\n            <ai-avatar-group>\r\n                <ai-avatar image=\"https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person2.jpg\" fallback=\"AI\" size=\"sm\" />\r\n                <ai-avatar image=\"https://raw.githubusercontent.com/aiandralves/smart-watch/refs/heads/main/assets/img/team/person4.jpg\" fallback=\"AI\" size=\"sm\" />\r\n                <ai-avatar image=\"https://avatars.githubusercontent.com/u/33138081?v=4\" fallback=\"AI\" size=\"sm\" />\r\n            </ai-avatar-group>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAvatarDefaultComponent {}\r\n"]}

package/esm2022/lib/components/avatar/demo/shape.js

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { AiAvatar } from "../avatar";
+import * as i0 from "@angular/core";
+export class DemoAvatarShapeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAvatarShapeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" shape="default" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" shape="circle" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiAvatar, selector: "ai-avatar", inputs: ["alt", "fallback", "priority", "size", "shape", "image", "status", "class"], exportAs: ["aiAvatar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarShapeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAvatar],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" shape="default" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" [size]="32" shape="circle" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=shape.js.map

package/esm2022/lib/components/avatar/demo/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/avatar/demo/shape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;;AAWrC,MAAM,OAAO,wBAAwB;uGAAxB,wBAAwB;2FAAxB,wBAAwB,wEAPvB;;;;;KAKT,4DANS,QAAQ;;2FAQT,wBAAwB;kBATpC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiAvatar } from \"../avatar\";\r\n\r\n@Component({\r\n    imports: [AiAvatar],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" [size]=\"32\" shape=\"default\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" [size]=\"32\" shape=\"circle\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAvatarShapeComponent {}\r\n"]}

package/esm2022/lib/components/avatar/demo/size.js

@@ -0,0 +1,33 @@
+import { Component } from "@angular/core";
+import { AiAvatar } from "../avatar";
+import * as i0 from "@angular/core";
+export class DemoAvatarSizeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAvatarSizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="xs" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="sm" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="default" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="md" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="xl" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiAvatar, selector: "ai-avatar", inputs: ["alt", "fallback", "priority", "size", "shape", "image", "status", "class"], exportAs: ["aiAvatar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAvatar],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="xs" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="sm" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="default" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="md" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="xl" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

package/esm2022/lib/components/avatar/demo/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/avatar/demo/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;;AAerC,MAAM,OAAO,uBAAuB;uGAAvB,uBAAuB;2FAAvB,uBAAuB,wEAXtB;;;;;;;;;KAST,4DAVS,QAAQ;;2FAYT,uBAAuB;kBAbnC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;;;;;;KAST;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiAvatar } from \"../avatar\";\r\n\r\n@Component({\r\n    imports: [AiAvatar],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"xs\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"sm\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"default\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"md\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"lg\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"xl\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAvatarSizeComponent {}\r\n"]}

package/esm2022/lib/components/avatar/demo/status.js

@@ -0,0 +1,29 @@
+import { Component } from "@angular/core";
+import { AiAvatar } from "../avatar";
+import * as i0 from "@angular/core";
+export class DemoAvatarStatusComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAvatarStatusComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex justify-center items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="invisible" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="online" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="doNotDisturb" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="away" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiAvatar, selector: "ai-avatar", inputs: ["alt", "fallback", "priority", "size", "shape", "image", "status", "class"], exportAs: ["aiAvatar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAvatarStatusComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAvatar],
+                    template: `
+        <div class="flex justify-center items-center gap-x-4">
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="invisible" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="online" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="doNotDisturb" />
+            <ai-avatar image="./img/avatar.png" fallback="AI" size="lg" status="away" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=status.js.map

package/esm2022/lib/components/avatar/demo/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/avatar/demo/status.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;;AAarC,MAAM,OAAO,yBAAyB;uGAAzB,yBAAyB;2FAAzB,yBAAyB,wEATxB;;;;;;;KAOT,4DARS,QAAQ;;2FAUT,yBAAyB;kBAXrC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;;;;KAOT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiAvatar } from \"../avatar\";\r\n\r\n@Component({\r\n    imports: [AiAvatar],\r\n    template: `\r\n        <div class=\"flex justify-center items-center gap-x-4\">\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"lg\" status=\"invisible\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"lg\" status=\"online\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"lg\" status=\"doNotDisturb\" />\r\n            <ai-avatar image=\"./img/avatar.png\" fallback=\"AI\" size=\"lg\" status=\"away\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAvatarStatusComponent {}\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC","sourcesContent":["export * from \"./avatar\";\r\nexport * from \"./avatar-group\";\r\nexport * from \"./demo/avatar\";\r\n"]}

package/esm2022/lib/components/badge/badge.js

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, ViewEncapsulation } from "@angular/core";
+import { mergeClasses, transform } from "../../core";
+import { AiIcon } from "../icon/icon.component";
+import { badgeVariants } from "./badge.variants";
+import * as i0 from "@angular/core";
+export class AiBadge {
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    shape = input("circle", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    fill = input("default", ...(ngDevMode ? [{ debugName: "fill" }] : []));
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform });
+    close = input(false, { ...(ngDevMode ? { debugName: "close" } : {}), transform });
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    closed = output();
+    classes = computed(() => mergeClasses(badgeVariants({ variant: this.variant(), fill: this.fill(), shape: this.shape(), disabled: this.disabled() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiBadge, isStandalone: true, selector: "ai-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class": "classes()" } }, exportAs: ["aiBadge"], ngImport: i0, template: `
+        @let nameIcon = icon();
+        @if (nameIcon) {
+            <ai-icon [icon]="nameIcon" size="sm" />
+        }
+        <ng-content />
+
+        @if (variant() === "default" && close()) {
+            <button class="h-4 cursor-pointer" (click)="closed.emit()">
+                <ai-icon [icon]="'close-circle'" size="sm" />
+            </button>
+        }
+    `, isInline: true, dependencies: [{ 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: AiBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-badge",
+                    exportAs: "aiBadge",
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        @let nameIcon = icon();
+        @if (nameIcon) {
+            <ai-icon [icon]="nameIcon" size="sm" />
+        }
+        <ng-content />
+
+        @if (variant() === "default" && close()) {
+            <button class="h-4 cursor-pointer" (click)="closed.emit()">
+                <ai-icon [icon]="'close-circle'" size="sm" />
+            </button>
+        }
+    `,
+                    host: {
+                        "[class]": "classes()",
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], close: [{ type: i0.Input, args: [{ isSignal: true, alias: "close", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE/G,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;;AAyBhE,MAAM,OAAO,OAAO;IACP,OAAO,GAAG,KAAK,CAA2B,SAAS,mDAAC,CAAC;IACrD,KAAK,GAAG,KAAK,CAAyB,QAAQ,iDAAC,CAAC;IAChD,IAAI,GAAG,KAAK,CAAwB,SAAS,gDAAC,CAAC;IAC/C,IAAI,GAAG,KAAK,CAAyB,SAAS,gDAAC,CAAC;IAEhD,QAAQ,GAAG,KAAK,CAA4B,KAAK,qDAAI,SAAS,GAAG,CAAC;IAClE,KAAK,GAAG,KAAK,CAA4B,KAAK,kDAAI,SAAS,GAAG,CAAC;IAC/D,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE9B,MAAM,GAAG,MAAM,EAAQ,CAAC;IAEvB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;uGAZrK,OAAO;2FAAP,OAAO,ugCAjBN;;;;;;;;;;;;KAYT,4DAfS,MAAM;;2FAoBP,OAAO;kBAvBnB,SAAS;mBAAC;oBACP,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,SAAS;oBACnB,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;;;;;;;;KAYT;oBACD,IAAI,EAAE;wBACF,SAAS,EAAE,WAAW;qBACzB;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output, ViewEncapsulation } from \"@angular/core\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { mergeClasses, transform } from \"../../core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiIconType } from \"../icon/icons\";\r\nimport { badgeVariants, BadgeVariants } from \"./badge.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-badge\",\r\n    exportAs: \"aiBadge\",\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        @let nameIcon = icon();\r\n        @if (nameIcon) {\r\n            <ai-icon [icon]=\"nameIcon\" size=\"sm\" />\r\n        }\r\n        <ng-content />\r\n\r\n        @if (variant() === \"default\" && close()) {\r\n            <button class=\"h-4 cursor-pointer\" (click)=\"closed.emit()\">\r\n                <ai-icon [icon]=\"'close-circle'\" size=\"sm\" />\r\n            </button>\r\n        }\r\n    `,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiBadge {\r\n    readonly variant = input<BadgeVariants[\"variant\"]>(\"primary\");\r\n    readonly shape = input<BadgeVariants[\"shape\"]>(\"circle\");\r\n    readonly fill = input<BadgeVariants[\"fill\"]>(\"default\");\r\n    readonly icon = input<AiIconType | undefined>(undefined);\r\n\r\n    readonly disabled = input<boolean, string | boolean>(false, { transform });\r\n    readonly close = input<boolean, string | boolean>(false, { transform });\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly closed = output<void>();\r\n\r\n    protected classes = computed(() => mergeClasses(badgeVariants({ variant: this.variant(), fill: this.fill(), shape: this.shape(), disabled: this.disabled() }), this.class()));\r\n}\r\n"]}