@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/empty/empty.js

@@ -0,0 +1,30 @@
+import { NgOptimizedImage } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses, StringTemplateRefDirective } from "../../core";
+import { AiIcon } from "../icon/icon.component";
+import { emptyActionsVariants, emptyDescriptionVariants, emptyHeaderVariants, emptyIconVariants, emptyImageVariants, emptyTitleVariants, emptyVariants } from "./empty.variants";
+import * as i0 from "@angular/core";
+export class AiEmpty {
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    classes = computed(() => mergeClasses(emptyVariants(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    headerClasses = computed(() => emptyHeaderVariants(), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    imageClasses = computed(() => emptyImageVariants(), ...(ngDevMode ? [{ debugName: "imageClasses" }] : []));
+    iconClasses = computed(() => emptyIconVariants(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    titleClasses = computed(() => emptyTitleVariants(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
+    descriptionClasses = computed(() => emptyDescriptionVariants(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : []));
+    actionsClasses = computed(() => emptyActionsVariants(), ...(ngDevMode ? [{ debugName: "actionsClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiEmpty, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiEmpty, isStandalone: true, selector: "ai-empty", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, exportAs: ["aiEmpty"], ngImport: i0, template: "<div [class]=\"headerClasses()\">\r\n    @let src = image();\r\n    @if (src) {\r\n        <div [class]=\"imageClasses()\">\r\n            <ng-container *stringTemplateRef=\"src\">\r\n                <img [ngSrc]=\"src\" width=\"64\" height=\"64\" alt=\"Empty\" class=\"mx-auto\" />\r\n            </ng-container>\r\n        </div>\r\n    } \r\n    @let nameIcon = icon();\r\n    @if (nameIcon) {\r\n        <div [class]=\"iconClasses()\">\r\n            <ai-icon [icon]=\"nameIcon\" size=\"xl\" />\r\n        </div>\r\n    }\r\n\r\n    @if (title()) {\r\n        <div [class]=\"titleClasses()\">\r\n            <ng-container *stringTemplateRef=\"title()\">{{ title() }}</ng-container>\r\n        </div>\r\n    }\r\n\r\n    @if (description()) {\r\n        <div [class]=\"descriptionClasses()\">\r\n            <ng-container *stringTemplateRef=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n@if (actions().length) {\r\n    <div [class]=\"actionsClasses()\">\r\n        @for (action of actions(); track $index) {\r\n            <ng-container *stringTemplateRef=\"action\" />\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-content />", dependencies: [{ kind: "directive", type: StringTemplateRefDirective, selector: "[stringTemplateRef]", inputs: ["stringTemplateRefContext", "stringTemplateRef"], exportAs: ["stringTemplateRef"] }, { kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }, { 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: AiEmpty, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-empty", exportAs: "aiEmpty", imports: [StringTemplateRefDirective, AiIcon, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                    }, template: "<div [class]=\"headerClasses()\">\r\n    @let src = image();\r\n    @if (src) {\r\n        <div [class]=\"imageClasses()\">\r\n            <ng-container *stringTemplateRef=\"src\">\r\n                <img [ngSrc]=\"src\" width=\"64\" height=\"64\" alt=\"Empty\" class=\"mx-auto\" />\r\n            </ng-container>\r\n        </div>\r\n    } \r\n    @let nameIcon = icon();\r\n    @if (nameIcon) {\r\n        <div [class]=\"iconClasses()\">\r\n            <ai-icon [icon]=\"nameIcon\" size=\"xl\" />\r\n        </div>\r\n    }\r\n\r\n    @if (title()) {\r\n        <div [class]=\"titleClasses()\">\r\n            <ng-container *stringTemplateRef=\"title()\">{{ title() }}</ng-container>\r\n        </div>\r\n    }\r\n\r\n    @if (description()) {\r\n        <div [class]=\"descriptionClasses()\">\r\n            <ng-container *stringTemplateRef=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n@if (actions().length) {\r\n    <div [class]=\"actionsClasses()\">\r\n        @for (action of actions(); track $index) {\r\n            <ng-container *stringTemplateRef=\"action\" />\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-content />" }]
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/empty/empty.ts","../../../../../../../libs/ai-ui/src/lib/components/empty/empty.html"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAe,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpH,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAajL,MAAM,OAAO,OAAO;IACP,OAAO,GAAG,KAAK,CAAsB,EAAE,mDAAC,CAAC;IACzC,IAAI,GAAG,KAAK,0DAAc,CAAC;IAC3B,KAAK,GAAG,KAAK,2DAA8B,CAAC;IAC5C,KAAK,GAAG,KAAK,2DAA8B,CAAC;IAC5C,WAAW,GAAG,KAAK,iEAA8B,CAAC;IAClD,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAEpB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IACtE,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,mBAAmB,EAAE,yDAAC,CAAC;IACtD,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,wDAAC,CAAC;IACpD,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,uDAAC,CAAC;IAClD,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,wDAAC,CAAC;IACpD,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,wBAAwB,EAAE,8DAAC,CAAC;IAChE,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,oBAAoB,EAAE,0DAAC,CAAC;uGAdlE,OAAO;2FAAP,OAAO,43BCrBpB,2pCAqCc,4CDxBA,0BAA0B,4JAAE,MAAM,4IAAE,gBAAgB;;2FAQrD,OAAO;kBAXnB,SAAS;+BACI,UAAU,YACV,SAAS,WACV,CAAC,0BAA0B,EAAE,MAAM,EAAE,gBAAgB,CAAC,mBAC9C,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,QAE/B;wBACF,SAAS,EAAE,WAAW;qBACzB","sourcesContent":["import { ClassValue } from \"class-variance-authority/types\";\r\n\r\nimport { NgOptimizedImage } from \"@angular/common\";\r\nimport { ChangeDetectionStrategy, Component, computed, input, TemplateRef, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses, StringTemplateRefDirective } from \"../../core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiIconType } from \"../icon/icons\";\r\nimport { emptyActionsVariants, emptyDescriptionVariants, emptyHeaderVariants, emptyIconVariants, emptyImageVariants, emptyTitleVariants, emptyVariants } from \"./empty.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-empty\",\r\n    exportAs: \"aiEmpty\",\r\n    imports: [StringTemplateRefDirective, AiIcon, NgOptimizedImage],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    templateUrl: \"./empty.html\",\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiEmpty {\r\n    readonly actions = input<TemplateRef<void>[]>([]);\r\n    readonly icon = input<AiIconType>();\r\n    readonly image = input<string | TemplateRef<void>>();\r\n    readonly title = input<string | TemplateRef<void>>();\r\n    readonly description = input<string | TemplateRef<void>>();\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    protected readonly classes = computed(() => mergeClasses(emptyVariants(), this.class()));\r\n    protected readonly headerClasses = computed(() => emptyHeaderVariants());\r\n    protected readonly imageClasses = computed(() => emptyImageVariants());\r\n    protected readonly iconClasses = computed(() => emptyIconVariants());\r\n    protected readonly titleClasses = computed(() => emptyTitleVariants());\r\n    protected readonly descriptionClasses = computed(() => emptyDescriptionVariants());\r\n    protected readonly actionsClasses = computed(() => emptyActionsVariants());\r\n}\r\n","<div [class]=\"headerClasses()\">\r\n    @let src = image();\r\n    @if (src) {\r\n        <div [class]=\"imageClasses()\">\r\n            <ng-container *stringTemplateRef=\"src\">\r\n                <img [ngSrc]=\"src\" width=\"64\" height=\"64\" alt=\"Empty\" class=\"mx-auto\" />\r\n            </ng-container>\r\n        </div>\r\n    } \r\n    @let nameIcon = icon();\r\n    @if (nameIcon) {\r\n        <div [class]=\"iconClasses()\">\r\n            <ai-icon [icon]=\"nameIcon\" size=\"xl\" />\r\n        </div>\r\n    }\r\n\r\n    @if (title()) {\r\n        <div [class]=\"titleClasses()\">\r\n            <ng-container *stringTemplateRef=\"title()\">{{ title() }}</ng-container>\r\n        </div>\r\n    }\r\n\r\n    @if (description()) {\r\n        <div [class]=\"descriptionClasses()\">\r\n            <ng-container *stringTemplateRef=\"description()\">{{ description() }}</ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n@if (actions().length) {\r\n    <div [class]=\"actionsClasses()\">\r\n        @for (action of actions(); track $index) {\r\n            <ng-container *stringTemplateRef=\"action\" />\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-content />"]}

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

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+export const emptyVariants = cva("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12", {
+    variants: {},
+});
+export const emptyHeaderVariants = cva("flex max-w-sm flex-col items-center gap-2 text-center", {
+    variants: {},
+});
+export const emptyImageVariants = cva("mb-2 flex shrink-0 items-center justify-center bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {},
+});
+export const emptyIconVariants = cva(`bg-muted text-foreground mb-2 flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6`, {
+    variants: {},
+});
+export const emptyTitleVariants = cva("text-lg font-semibold font-title text-primary tracking-tight", {
+    variants: {},
+});
+export const emptyDescriptionVariants = cva("text-muted-foreground font-text [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4", {
+    variants: {},
+});
+export const emptyActionsVariants = cva("flex w-full max-w-sm min-w-0 items-center justify-center gap-2 text-sm text-balance", {
+    variants: {},
+});
+//# sourceMappingURL=empty.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/empty/empty.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,8HAA8H,EAAE;IAC7J,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,uDAAuD,EAAE;IAC5F,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,4GAA4G,EAAE;IAChJ,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAChC,8KAA8K,EAC9K;IACI,QAAQ,EAAE,EAAE;CACf,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,8DAA8D,EAAE;IAClG,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,mHAAmH,EAAE;IAC7J,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC,qFAAqF,EAAE;IAC3H,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC","sourcesContent":["import { cva } from \"class-variance-authority\";\r\n\r\nexport const emptyVariants = cva(\"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\", {\r\n    variants: {},\r\n});\r\n\r\nexport const emptyHeaderVariants = cva(\"flex max-w-sm flex-col items-center gap-2 text-center\", {\r\n    variants: {},\r\n});\r\n\r\nexport const emptyImageVariants = cva(\"mb-2 flex shrink-0 items-center justify-center bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0\", {\r\n    variants: {},\r\n});\r\n\r\nexport const emptyIconVariants = cva(\r\n    `bg-muted text-foreground mb-2 flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6`,\r\n    {\r\n        variants: {},\r\n    },\r\n);\r\n\r\nexport const emptyTitleVariants = cva(\"text-lg font-semibold font-title text-primary tracking-tight\", {\r\n    variants: {},\r\n});\r\n\r\nexport const emptyDescriptionVariants = cva(\"text-muted-foreground font-text [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\", {\r\n    variants: {},\r\n});\r\n\r\nexport const emptyActionsVariants = cva(\"flex w-full max-w-sm min-w-0 items-center justify-center gap-2 text-sm text-balance\", {\r\n    variants: {},\r\n});\r\n"]}

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

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

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

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

package/esm2022/lib/components/float-button/demo/float-button.js

@@ -0,0 +1,37 @@
+import { DemoFloatButtonGroupComponent } from "./float-group";
+import { DemoFloatButtonTopComponent } from "./float-top";
+import { DemoFloatButtonPositionComponent } from "./position";
+import { DemoFloatButtonShapeComponent } from "./shape";
+import { DemoFloatButtonSizeComponent } from "./size";
+import { DemoFloatButtonVariantComponent } from "./variant";
+export const FLOAT_BUTTON = {
+    componentName: "float-button",
+    componentType: "float-button",
+    examples: [
+        {
+            name: "variant",
+            component: DemoFloatButtonVariantComponent,
+        },
+        {
+            name: "shape",
+            component: DemoFloatButtonShapeComponent,
+        },
+        {
+            name: "size",
+            component: DemoFloatButtonSizeComponent,
+        },
+        {
+            name: "position",
+            component: DemoFloatButtonPositionComponent,
+        },
+        {
+            name: "float-group",
+            component: DemoFloatButtonGroupComponent,
+        },
+        {
+            name: "float-top",
+            component: DemoFloatButtonTopComponent,
+        },
+    ],
+};
+//# sourceMappingURL=float-button.js.map

package/esm2022/lib/components/float-button/demo/float-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-button.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/float-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,gCAAgC,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,QAAQ,CAAC;AACtD,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;QACD;YACI,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,6BAA6B;SAC3C;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,4BAA4B;SAC1C;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,gCAAgC;SAC9C;QACD;YACI,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,6BAA6B;SAC3C;QACD;YACI,IAAI,EAAE,WAAW;YACjB,SAAS,EAAE,2BAA2B;SACzC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoFloatButtonGroupComponent } from \"./float-group\";\r\nimport { DemoFloatButtonTopComponent } from \"./float-top\";\r\nimport { DemoFloatButtonPositionComponent } from \"./position\";\r\nimport { DemoFloatButtonShapeComponent } from \"./shape\";\r\nimport { DemoFloatButtonSizeComponent } from \"./size\";\r\nimport { DemoFloatButtonVariantComponent } from \"./variant\";\r\n\r\nexport const FLOAT_BUTTON = {\r\n    componentName: \"float-button\",\r\n    componentType: \"float-button\",\r\n    examples: [\r\n        {\r\n            name: \"variant\",\r\n            component: DemoFloatButtonVariantComponent,\r\n        },\r\n        {\r\n            name: \"shape\",\r\n            component: DemoFloatButtonShapeComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoFloatButtonSizeComponent,\r\n        },\r\n        {\r\n            name: \"position\",\r\n            component: DemoFloatButtonPositionComponent,\r\n        },\r\n        {\r\n            name: \"float-group\",\r\n            component: DemoFloatButtonGroupComponent,\r\n        },\r\n        {\r\n            name: \"float-top\",\r\n            component: DemoFloatButtonTopComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/float-button/demo/float-group.js

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { AiFloatButton } from "../float-button";
+import { AiFloatButtonGroup } from "../float-button-group";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonGroupComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonGroupComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-2">
+            <ai-float-button-group variant="primary" childrenPosition="left" icon="add" trigger="click">
+                <ai-float-button variant="accent" icon="edit" />
+                <ai-float-button variant="default" icon="share" />
+                <ai-float-button variant="primary" icon="stack" />
+            </ai-float-button-group>
+
+            <ai-float-button-group variant="primary" icon="add" trigger="hover">
+                <ai-float-button variant="accent" icon="edit" />
+                <ai-float-button variant="default" icon="share" />
+                <ai-float-button variant="primary" icon="stack" />
+            </ai-float-button-group>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButton, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButton"] }, { kind: "component", type: AiFloatButtonGroup, selector: "ai-float-button-group", inputs: ["variant", "size", "shape", "icon", "label", "trigger", "position", "childrenPosition", "open", "class"], outputs: ["changeOpen"], exportAs: ["aiFloatButtonGroup"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButton, AiFloatButtonGroup],
+                    template: `
+        <div class="flex items-center gap-x-2">
+            <ai-float-button-group variant="primary" childrenPosition="left" icon="add" trigger="click">
+                <ai-float-button variant="accent" icon="edit" />
+                <ai-float-button variant="default" icon="share" />
+                <ai-float-button variant="primary" icon="stack" />
+            </ai-float-button-group>
+
+            <ai-float-button-group variant="primary" icon="add" trigger="hover">
+                <ai-float-button variant="accent" icon="edit" />
+                <ai-float-button variant="default" icon="share" />
+                <ai-float-button variant="primary" icon="stack" />
+            </ai-float-button-group>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=float-group.js.map

package/esm2022/lib/components/float-button/demo/float-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-group.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/float-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;;AAoB3D,MAAM,OAAO,6BAA6B;uGAA7B,6BAA6B;2FAA7B,6BAA6B,wEAhB5B;;;;;;;;;;;;;;KAcT,4DAfS,aAAa,kNAAE,kBAAkB;;2FAiBlC,6BAA6B;kBAlBzC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;oBAC5C,QAAQ,EAAE;;;;;;;;;;;;;;KAcT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButton } from \"../float-button\";\r\nimport { AiFloatButtonGroup } from \"../float-button-group\";\r\n\r\n@Component({\r\n    imports: [AiFloatButton, AiFloatButtonGroup],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-2\">\r\n            <ai-float-button-group variant=\"primary\" childrenPosition=\"left\" icon=\"add\" trigger=\"click\">\r\n                <ai-float-button variant=\"accent\" icon=\"edit\" />\r\n                <ai-float-button variant=\"default\" icon=\"share\" />\r\n                <ai-float-button variant=\"primary\" icon=\"stack\" />\r\n            </ai-float-button-group>\r\n\r\n            <ai-float-button-group variant=\"primary\" icon=\"add\" trigger=\"hover\">\r\n                <ai-float-button variant=\"accent\" icon=\"edit\" />\r\n                <ai-float-button variant=\"default\" icon=\"share\" />\r\n                <ai-float-button variant=\"primary\" icon=\"stack\" />\r\n            </ai-float-button-group>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonGroupComponent {}\r\n"]}

package/esm2022/lib/components/float-button/demo/float-top.js

@@ -0,0 +1,23 @@
+import { Component } from "@angular/core";
+import { AiFloatButtonTop } from "../float-button-top";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonTopComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonTopComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button-top variant="primary" shape="default" icon="arrow-up" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButtonTop, selector: "ai-float-button-top", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButtonTop"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonTopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButtonTop],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button-top variant="primary" shape="default" icon="arrow-up" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=float-top.js.map

package/esm2022/lib/components/float-button/demo/float-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-top.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/float-top.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAUvD,MAAM,OAAO,2BAA2B;uGAA3B,2BAA2B;2FAA3B,2BAA2B,wEAN1B;;;;KAIT,4DALS,gBAAgB;;2FAOjB,2BAA2B;kBARvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButtonTop } from \"../float-button-top\";\r\n\r\n@Component({\r\n    imports: [AiFloatButtonTop],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-float-button-top variant=\"primary\" shape=\"default\" icon=\"arrow-up\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonTopComponent {}\r\n"]}

package/esm2022/lib/components/float-button/demo/position.js

@@ -0,0 +1,29 @@
+import { Component } from "@angular/core";
+import { AiFloatButton } from "../float-button";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonPositionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonPositionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonPositionComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-2">
+            <ai-float-button variant="primary" position="top-left" icon="corner-up-left" />
+            <ai-float-button variant="primary" position="top-right" icon="corner-up-right" />
+            <ai-float-button variant="primary" position="bottom-left" icon="corner-down-left" />
+            <ai-float-button variant="primary" position="bottom-right" icon="corner-down-right" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButton, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonPositionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButton],
+                    template: `
+        <div class="flex items-center gap-x-2">
+            <ai-float-button variant="primary" position="top-left" icon="corner-up-left" />
+            <ai-float-button variant="primary" position="top-right" icon="corner-up-right" />
+            <ai-float-button variant="primary" position="bottom-left" icon="corner-down-left" />
+            <ai-float-button variant="primary" position="bottom-right" icon="corner-down-right" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=position.js.map

package/esm2022/lib/components/float-button/demo/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/position.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAahD,MAAM,OAAO,gCAAgC;uGAAhC,gCAAgC;2FAAhC,gCAAgC,wEAT/B;;;;;;;KAOT,4DARS,aAAa;;2FAUd,gCAAgC;kBAX5C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,QAAQ,EAAE;;;;;;;KAOT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButton } from \"../float-button\";\r\n\r\n@Component({\r\n    imports: [AiFloatButton],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-2\">\r\n            <ai-float-button variant=\"primary\" position=\"top-left\" icon=\"corner-up-left\" />\r\n            <ai-float-button variant=\"primary\" position=\"top-right\" icon=\"corner-up-right\" />\r\n            <ai-float-button variant=\"primary\" position=\"bottom-left\" icon=\"corner-down-left\" />\r\n            <ai-float-button variant=\"primary\" position=\"bottom-right\" icon=\"corner-down-right\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonPositionComponent {}\r\n"]}

package/esm2022/lib/components/float-button/demo/shape.js

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { AiFloatButton } from "../float-button";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonShapeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonShapeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="primary" shape="default" icon="stack" />
+            <ai-float-button variant="primary" shape="circle" icon="stack" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButton, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonShapeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButton],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="primary" shape="default" icon="stack" />
+            <ai-float-button variant="primary" shape="circle" icon="stack" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=shape.js.map

package/esm2022/lib/components/float-button/demo/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/shape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAWhD,MAAM,OAAO,6BAA6B;uGAA7B,6BAA6B;2FAA7B,6BAA6B,wEAP5B;;;;;KAKT,4DANS,aAAa;;2FAQd,6BAA6B;kBATzC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButton } from \"../float-button\";\r\n\r\n@Component({\r\n    imports: [AiFloatButton],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-float-button variant=\"primary\" shape=\"default\" icon=\"stack\" />\r\n            <ai-float-button variant=\"primary\" shape=\"circle\" icon=\"stack\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonShapeComponent {}\r\n"]}

package/esm2022/lib/components/float-button/demo/size.js

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { AiFloatButton } from "../float-button";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonSizeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonSizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="primary" size="default" icon="stack" />
+            <ai-float-button variant="primary" size="lg" icon="stack" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButton, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButton],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="primary" size="default" icon="stack" />
+            <ai-float-button variant="primary" size="lg" icon="stack" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

package/esm2022/lib/components/float-button/demo/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAWhD,MAAM,OAAO,4BAA4B;uGAA5B,4BAA4B;2FAA5B,4BAA4B,wEAP3B;;;;;KAKT,4DANS,aAAa;;2FAQd,4BAA4B;kBATxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButton } from \"../float-button\";\r\n\r\n@Component({\r\n    imports: [AiFloatButton],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-float-button variant=\"primary\" size=\"default\" icon=\"stack\" />\r\n            <ai-float-button variant=\"primary\" size=\"lg\" icon=\"stack\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonSizeComponent {}\r\n"]}

package/esm2022/lib/components/float-button/demo/variant.js

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { AiFloatButton } from "../float-button";
+import * as i0 from "@angular/core";
+export class DemoFloatButtonVariantComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoFloatButtonVariantComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="default" icon="stack" />
+            <ai-float-button variant="primary" icon="stack" />
+            <ai-float-button variant="accent" icon="stack" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiFloatButton, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", inputs: ["variant", "size", "shape", "icon", "label", "class", "position"], exportAs: ["aiFloatButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoFloatButtonVariantComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiFloatButton],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-float-button variant="default" icon="stack" />
+            <ai-float-button variant="primary" icon="stack" />
+            <ai-float-button variant="accent" icon="stack" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=variant.js.map

package/esm2022/lib/components/float-button/demo/variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/float-button/demo/variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;;AAYhD,MAAM,OAAO,+BAA+B;uGAA/B,+BAA+B;2FAA/B,+BAA+B,wEAR9B;;;;;;KAMT,4DAPS,aAAa;;2FASd,+BAA+B;kBAV3C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,QAAQ,EAAE;;;;;;KAMT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiFloatButton } from \"../float-button\";\r\n\r\n@Component({\r\n    imports: [AiFloatButton],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-float-button variant=\"default\" icon=\"stack\" />\r\n            <ai-float-button variant=\"primary\" icon=\"stack\" />\r\n            <ai-float-button variant=\"accent\" icon=\"stack\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoFloatButtonVariantComponent {}\r\n"]}

package/esm2022/lib/components/float-button/float-button-group.js

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, computed, input, linkedSignal, output, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { AiIcon } from "../icon/icon.component";
+import { floatButtonVariants } from "./float-button.variants";
+import * as i0 from "@angular/core";
+export class AiFloatButtonGroup {
+    variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input("default", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    trigger = input("click", ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    position = input(null, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    childrenPosition = input("top", ...(ngDevMode ? [{ debugName: "childrenPosition" }] : []));
+    open = input(null, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    changeOpen = output();
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    positionMap = {
+        "top-center": "fixed top-4 left-1/2 -translate-x-1/2 z-[999]",
+        "top-right": "fixed top-4 right-8 z-[999]",
+        "bottom-center": "fixed bottom-8 left-1/2 -translate-x-1/2 z-[999]",
+        "bottom-left": "fixed bottom-8 left-8 z-[999]",
+        "bottom-right": "fixed bottom-8 right-8 z-[999]",
+    };
+    containerClasses = computed(() => {
+        if (!this.position())
+            return "relative";
+        return this.positionMap[this.position()];
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    childrenPositionMap = {
+        left: "right-full flex-row mr-2",
+        top: "bottom-full flex-col mb-2 items-center",
+    };
+    childrenClasses = computed(() => this.childrenPositionMap[this.childrenPosition()], ...(ngDevMode ? [{ debugName: "childrenClasses" }] : []));
+    classes = computed(() => mergeClasses(floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    opened = linkedSignal(() => !!this.open(), ...(ngDevMode ? [{ debugName: "opened" }] : []));
+    onToggle() {
+        if (this.trigger() === "click") {
+            this.opened.set(!this.opened());
+            this.changeOpen.emit(this.opened());
+        }
+    }
+    onHover(state) {
+        if (this.trigger() === "hover") {
+            this.opened.set(state);
+            this.changeOpen.emit(this.opened());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiFloatButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiFloatButtonGroup, isStandalone: true, selector: "ai-float-button-group", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, childrenPosition: { classPropertyName: "childrenPosition", publicName: "childrenPosition", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeOpen: "changeOpen" }, exportAs: ["aiFloatButtonGroup"], ngImport: i0, template: `
+        <div class="flex items-center justify-center" [class]="containerClasses()" (mouseenter)="onHover(true)" (mouseleave)="onHover(false)">
+            <button type="button" [class]="classes()" (click)="onToggle()">
+                @let nameIcon = icon();
+                @if (nameIcon) {
+                    <ai-icon [icon]="opened() ? 'close' : nameIcon" size="sm" type="fill" />
+                }
+                @if (label()) {
+                    <span class="pl-2 text-sm">{{ label() }}</span>
+                }
+            </button>
+
+            @if (opened()) {
+                <div class="absolute flex gap-2 transition-all duration-400" [class]="childrenClasses()">
+                    <ng-content />
+                </div>
+            }
+        </div>
+    `, 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: AiFloatButtonGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-float-button-group",
+                    exportAs: "aiFloatButtonGroup",
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <div class="flex items-center justify-center" [class]="containerClasses()" (mouseenter)="onHover(true)" (mouseleave)="onHover(false)">
+            <button type="button" [class]="classes()" (click)="onToggle()">
+                @let nameIcon = icon();
+                @if (nameIcon) {
+                    <ai-icon [icon]="opened() ? 'close' : nameIcon" size="sm" type="fill" />
+                }
+                @if (label()) {
+                    <span class="pl-2 text-sm">{{ label() }}</span>
+                }
+            </button>
+
+            @if (opened()) {
+                <div class="absolute flex gap-2 transition-all duration-400" [class]="childrenClasses()">
+                    <ng-content />
+                </div>
+            }
+        </div>
+    `,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], childrenPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenPosition", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], changeOpen: [{ type: i0.Output, args: ["changeOpen"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=float-button-group.js.map

package/esm2022/lib/components/float-button/float-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-button-group.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/float-button/float-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAe,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE1I,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAuB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AA4BnF,MAAM,OAAO,kBAAkB;IAClB,OAAO,GAAG,KAAK,CAAiC,SAAS,mDAAC,CAAC;IAC3D,IAAI,GAAG,KAAK,CAA8B,SAAS,gDAAC,CAAC;IACrD,KAAK,GAAG,KAAK,CAA+B,SAAS,iDAAC,CAAC;IACvD,IAAI,GAAG,KAAK,0DAAc,CAAC;IAC3B,KAAK,GAAG,KAAK,CAA6B,EAAE,iDAAC,CAAC;IAC9C,OAAO,GAAG,KAAK,CAAoB,OAAO,mDAAC,CAAC;IAC5C,QAAQ,GAAG,KAAK,CAAuF,IAAI,oDAAC,CAAC;IAC7G,gBAAgB,GAAG,KAAK,CAAiB,KAAK,4DAAC,CAAC;IAEhD,IAAI,GAAG,KAAK,CAAiB,IAAI,gDAAC,CAAC;IACnC,UAAU,GAAG,MAAM,EAAW,CAAC;IAE/B,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE/B,WAAW,GAAkE;QACjF,YAAY,EAAE,+CAA+C;QAC7D,WAAW,EAAE,6BAA6B;QAC1C,eAAe,EAAE,kDAAkD;QACnE,aAAa,EAAE,+BAA+B;QAC9C,cAAc,EAAE,gCAAgC;KACnD,CAAC;IAEQ,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO,UAAU,CAAC;QACxC,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAmC,CAAC,CAAC;IAC9E,CAAC,4DAAC,CAAC;IAEK,mBAAmB,GAA0E;QACjG,IAAI,EAAE,0BAA0B;QAChC,GAAG,EAAE,wCAAwC;KAChD,CAAC;IAEQ,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,EAA2C,CAAC,2DAAC,CAAC;IAE7H,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IAChJ,MAAM,GAAG,YAAY,CAAU,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,kDAAC,CAAC;IAE7D,QAAQ;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAc;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;uGAlDQ,kBAAkB;2FAAlB,kBAAkB,m4CApBjB;;;;;;;;;;;;;;;;;;KAkBT,4DArBS,MAAM;;2FAuBP,kBAAkB;kBA1B9B,SAAS;mBAAC;oBACP,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE,oBAAoB;oBAC9B,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;KAkBT;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, linkedSignal, output, TemplateRef, ViewEncapsulation } from \"@angular/core\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { mergeClasses } from \"../../core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiIconType } from \"../icon/icons\";\r\nimport { FloatButtonVariants, floatButtonVariants } from \"./float-button.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-float-button-group\",\r\n    exportAs: \"aiFloatButtonGroup\",\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <div class=\"flex items-center justify-center\" [class]=\"containerClasses()\" (mouseenter)=\"onHover(true)\" (mouseleave)=\"onHover(false)\">\r\n            <button type=\"button\" [class]=\"classes()\" (click)=\"onToggle()\">\r\n                @let nameIcon = icon();\r\n                @if (nameIcon) {\r\n                    <ai-icon [icon]=\"opened() ? 'close' : nameIcon\" size=\"sm\" type=\"fill\" />\r\n                }\r\n                @if (label()) {\r\n                    <span class=\"pl-2 text-sm\">{{ label() }}</span>\r\n                }\r\n            </button>\r\n\r\n            @if (opened()) {\r\n                <div class=\"absolute flex gap-2 transition-all duration-400\" [class]=\"childrenClasses()\">\r\n                    <ng-content />\r\n                </div>\r\n            }\r\n        </div>\r\n    `,\r\n})\r\nexport class AiFloatButtonGroup {\r\n    readonly variant = input<FloatButtonVariants[\"variant\"]>(\"default\");\r\n    readonly size = input<FloatButtonVariants[\"size\"]>(\"default\");\r\n    readonly shape = input<FloatButtonVariants[\"shape\"]>(\"default\");\r\n    readonly icon = input<AiIconType>();\r\n    readonly label = input<string | TemplateRef<void>>(\"\");\r\n    readonly trigger = input<\"click\" | \"hover\">(\"click\");\r\n    readonly position = input<\"top-center\" | \"top-right\" | \"bottom-center\" | \"bottom-left\" | \"bottom-right\" | null>(null);\r\n    readonly childrenPosition = input<\"left\" | \"top\">(\"top\");\r\n\r\n    readonly open = input<boolean | null>(null);\r\n    readonly changeOpen = output<boolean>();\r\n\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    private positionMap: Record<NonNullable<ReturnType<typeof this.position>>, string> = {\r\n        \"top-center\": \"fixed top-4 left-1/2 -translate-x-1/2 z-[999]\",\r\n        \"top-right\": \"fixed top-4 right-8 z-[999]\",\r\n        \"bottom-center\": \"fixed bottom-8 left-1/2 -translate-x-1/2 z-[999]\",\r\n        \"bottom-left\": \"fixed bottom-8 left-8 z-[999]\",\r\n        \"bottom-right\": \"fixed bottom-8 right-8 z-[999]\",\r\n    };\r\n\r\n    protected containerClasses = computed(() => {\r\n        if (!this.position()) return \"relative\";\r\n        return this.positionMap[this.position() as keyof typeof this.positionMap];\r\n    });\r\n\r\n    private childrenPositionMap: Record<NonNullable<ReturnType<typeof this.childrenPosition>>, string> = {\r\n        left: \"right-full flex-row mr-2\",\r\n        top: \"bottom-full flex-col mb-2 items-center\",\r\n    };\r\n\r\n    protected childrenClasses = computed(() => this.childrenPositionMap[this.childrenPosition() as keyof typeof this.childrenPositionMap]);\r\n\r\n    protected classes = computed(() => mergeClasses(floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }), this.class()));\r\n    readonly opened = linkedSignal<boolean>(() => !!this.open());\r\n\r\n    onToggle() {\r\n        if (this.trigger() === \"click\") {\r\n            this.opened.set(!this.opened());\r\n            this.changeOpen.emit(this.opened());\r\n        }\r\n    }\r\n\r\n    onHover(state: boolean) {\r\n        if (this.trigger() === \"hover\") {\r\n            this.opened.set(state);\r\n            this.changeOpen.emit(this.opened());\r\n        }\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/float-button/float-button-top.js

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { AiIcon } from "../icon/icon.component";
+import { floatButtonVariants } from "./float-button.variants";
+import * as i0 from "@angular/core";
+export class AiFloatButtonTop {
+    variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input("default", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    icon = input("arrow-up-long", ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    label = input("", ...(ngDevMode ? [{ debugName: "label" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    position = input("bottom-right", ...(ngDevMode ? [{ debugName: "position" }] : []));
+    positionMap = {
+        "top-left": "top-4 left-4",
+        "top-right": "top-4 right-4",
+        "bottom-left": "bottom-8 left-8",
+        "bottom-right": "bottom-8 right-8",
+    };
+    containerPosition = computed(() => this.positionMap[this.position()], ...(ngDevMode ? [{ debugName: "containerPosition" }] : []));
+    classes = computed(() => mergeClasses("fixed m-4 z-[999] transition-opacity duration-300", this.containerPosition(), floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    _checkScroll = () => this.visible.set(window.scrollY > 200);
+    ngOnInit() {
+        window.addEventListener("scroll", this._checkScroll);
+    }
+    scrollToTop() {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+    ngOnDestroy() {
+        window.removeEventListener("scroll", this._checkScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiFloatButtonTop, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiFloatButtonTop, isStandalone: true, selector: "ai-float-button-top", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "visible() ? 'opacity-100' : 'opacity-0 pointer-events-none'" } }, exportAs: ["aiFloatButtonTop"], ngImport: i0, template: `
+        <button type="button" [class]="classes()" (click)="scrollToTop()">
+            @let nameIcon = icon();
+            @if (nameIcon) {
+                <ai-icon [icon]="nameIcon" size="sm" type="fill" />
+            }
+            @if (label()) {
+                <span class="pl-2 text-sm font-text">{{ label() }}</span>
+            }
+        </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: AiFloatButtonTop, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-float-button-top",
+                    exportAs: "aiFloatButtonTop",
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <button type="button" [class]="classes()" (click)="scrollToTop()">
+            @let nameIcon = icon();
+            @if (nameIcon) {
+                <ai-icon [icon]="nameIcon" size="sm" type="fill" />
+            }
+            @if (label()) {
+                <span class="pl-2 text-sm font-text">{{ label() }}</span>
+            }
+        </button>
+    `,
+                    host: {
+                        "[class]": "visible() ? 'opacity-100' : 'opacity-0 pointer-events-none'",
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+//# sourceMappingURL=float-button-top.js.map

package/esm2022/lib/components/float-button/float-button-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"float-button-top.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/float-button/float-button-top.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAqB,MAAM,EAAe,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE/I,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAuB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAuBnF,MAAM,OAAO,gBAAgB;IAChB,OAAO,GAAG,KAAK,CAAiC,SAAS,mDAAC,CAAC;IAC3D,IAAI,GAAG,KAAK,CAA8B,SAAS,gDAAC,CAAC;IACrD,KAAK,GAAG,KAAK,CAA+B,SAAS,iDAAC,CAAC;IACvD,IAAI,GAAG,KAAK,CAAa,eAAe,gDAAC,CAAC;IAC1C,KAAK,GAAG,KAAK,CAA6B,EAAE,iDAAC,CAAC;IAC9C,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAC9B,QAAQ,GAAG,KAAK,CAA4D,cAAc,oDAAC,CAAC;IAE7F,WAAW,GAAkE;QACjF,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,eAAe;QAC5B,aAAa,EAAE,iBAAiB;QAChC,cAAc,EAAE,kBAAkB;KACrC,CAAC;IAEiB,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAmC,CAAC,6DAAC,CAAC;IAEhH,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC9B,YAAY,CACR,mDAAmD,EACnD,IAAI,CAAC,iBAAiB,EAAE,EACxB,mBAAmB,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,EACxF,IAAI,CAAC,KAAK,EAAE,CACf,mDACJ,CAAC;IAEQ,OAAO,GAAG,MAAM,CAAU,KAAK,mDAAC,CAAC;IACnC,YAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC;IAEpE,QAAQ;QACJ,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,WAAW;QACP,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,WAAW;QACP,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,CAAC;uGAxCQ,gBAAgB;2FAAhB,gBAAgB,8iCAff;;;;;;;;;;KAUT,4DAbS,MAAM;;2FAkBP,gBAAgB;kBArB5B,SAAS;mBAAC;oBACP,QAAQ,EAAE,qBAAqB;oBAC/B,QAAQ,EAAE,kBAAkB;oBAC5B,OAAO,EAAE,CAAC,MAAM,CAAC;oBACjB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;;;;;;;KAUT;oBACD,IAAI,EAAE;wBACF,SAAS,EAAE,6DAA6D;qBAC3E;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, OnDestroy, OnInit, signal, TemplateRef, ViewEncapsulation } from \"@angular/core\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { mergeClasses } from \"../../core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiIconType } from \"../icon/icons\";\r\nimport { FloatButtonVariants, floatButtonVariants } from \"./float-button.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-float-button-top\",\r\n    exportAs: \"aiFloatButtonTop\",\r\n    imports: [AiIcon],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <button type=\"button\" [class]=\"classes()\" (click)=\"scrollToTop()\">\r\n            @let nameIcon = icon();\r\n            @if (nameIcon) {\r\n                <ai-icon [icon]=\"nameIcon\" size=\"sm\" type=\"fill\" />\r\n            }\r\n            @if (label()) {\r\n                <span class=\"pl-2 text-sm font-text\">{{ label() }}</span>\r\n            }\r\n        </button>\r\n    `,\r\n    host: {\r\n        \"[class]\": \"visible() ? 'opacity-100' : 'opacity-0 pointer-events-none'\",\r\n    },\r\n})\r\nexport class AiFloatButtonTop implements OnInit, OnDestroy {\r\n    readonly variant = input<FloatButtonVariants[\"variant\"]>(\"default\");\r\n    readonly size = input<FloatButtonVariants[\"size\"]>(\"default\");\r\n    readonly shape = input<FloatButtonVariants[\"shape\"]>(\"default\");\r\n    readonly icon = input<AiIconType>(\"arrow-up-long\");\r\n    readonly label = input<string | TemplateRef<void>>(\"\");\r\n    readonly class = input<ClassValue>(\"\");\r\n    readonly position = input<\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\">(\"bottom-right\");\r\n\r\n    private positionMap: Record<NonNullable<ReturnType<typeof this.position>>, string> = {\r\n        \"top-left\": \"top-4 left-4\",\r\n        \"top-right\": \"top-4 right-4\",\r\n        \"bottom-left\": \"bottom-8 left-8\",\r\n        \"bottom-right\": \"bottom-8 right-8\",\r\n    };\r\n\r\n    protected readonly containerPosition = computed(() => this.positionMap[this.position() as keyof typeof this.positionMap]);\r\n\r\n    protected classes = computed(() =>\r\n        mergeClasses(\r\n            \"fixed m-4 z-[999] transition-opacity duration-300\",\r\n            this.containerPosition(),\r\n            floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }),\r\n            this.class(),\r\n        ),\r\n    );\r\n\r\n    protected visible = signal<boolean>(false);\r\n    private _checkScroll = () => this.visible.set(window.scrollY > 200);\r\n\r\n    ngOnInit() {\r\n        window.addEventListener(\"scroll\", this._checkScroll);\r\n    }\r\n\r\n    scrollToTop() {\r\n        window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        window.removeEventListener(\"scroll\", this._checkScroll);\r\n    }\r\n}\r\n"]}