@aiandralves/ai-ui 1.0.0

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

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, computed, input, 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 AiFloatButton {
+    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" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    position = input(null, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    positionMap = {
+        "top-left": "fixed top-4 left-4 z-[999]",
+        "top-right": "fixed top-4 right-4 z-[999]",
+        "bottom-left": "fixed bottom-8 left-4 z-[999]",
+        "bottom-right": "fixed bottom-8 right-8 z-[999]",
+    };
+    containerPosition = computed(() => this.positionMap[this.position()], ...(ngDevMode ? [{ debugName: "containerPosition" }] : []));
+    classes = computed(() => mergeClasses(floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }), this.position() ? this.containerPosition() : "", this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiFloatButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiFloatButton, isStandalone: true, selector: "ai-float-button, button[ai-float-button], a[ai-float-button]", 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": "classes()" } }, exportAs: ["aiFloatButton"], ngImport: i0, template: `
+        @let nameIcon = icon();
+        @if (nameIcon) {
+            <ai-icon [icon]="nameIcon" />
+        }
+        @if (label()) {
+            <span class="pl-2 text-sm">{{ label() }}</span>
+        }
+
+        <ng-content />
+    `, 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: AiFloatButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-float-button, button[ai-float-button], a[ai-float-button]",
+                    exportAs: "aiFloatButton",
+                    imports: [AiIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        @let nameIcon = icon();
+        @if (nameIcon) {
+            <ai-icon [icon]="nameIcon" />
+        }
+        @if (label()) {
+            <span class="pl-2 text-sm">{{ label() }}</span>
+        }
+
+        <ng-content />
+    `,
+                    host: {
+                        "[class]": "classes()",
+                    },
+                }]
+        }], 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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"float-button.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/float-button/float-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAe,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpH,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,aAAa;IACb,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,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAC9B,QAAQ,GAAG,KAAK,CAAmE,IAAI,oDAAC,CAAC;IAE1F,WAAW,GAAkE;QACjF,UAAU,EAAE,4BAA4B;QACxC,WAAW,EAAE,6BAA6B;QAC1C,aAAa,EAAE,+BAA+B;QAC9C,cAAc,EAAE,gCAAgC;KACnD,CAAC;IAEiB,iBAAiB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAmC,CAAC,6DAAC,CAAC;IAEvG,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,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,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDACxK,CAAC;uGApBO,aAAa;2FAAb,aAAa,kiCAfZ;;;;;;;;;;KAUT,4DAbS,MAAM;;2FAkBP,aAAa;kBArBzB,SAAS;mBAAC;oBACP,QAAQ,EAAE,8DAA8D;oBACxE,QAAQ,EAAE,eAAe;oBACzB,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,WAAW;qBACzB;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, 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, button[ai-float-button], a[ai-float-button]\",\r\n    exportAs: \"aiFloatButton\",\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\" />\r\n        }\r\n        @if (label()) {\r\n            <span class=\"pl-2 text-sm\">{{ label() }}</span>\r\n        }\r\n\r\n        <ng-content />\r\n    `,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiFloatButton {\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 class = input<ClassValue>(\"\");\r\n    readonly position = input<\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | null>(null);\r\n\r\n    private positionMap: Record<NonNullable<ReturnType<typeof this.position>>, string> = {\r\n        \"top-left\": \"fixed top-4 left-4 z-[999]\",\r\n        \"top-right\": \"fixed top-4 right-4 z-[999]\",\r\n        \"bottom-left\": \"fixed bottom-8 left-4 z-[999]\",\r\n        \"bottom-right\": \"fixed bottom-8 right-8 z-[999]\",\r\n    };\r\n\r\n    protected readonly containerPosition = computed(() => this.positionMap[this.position() as keyof typeof this.positionMap]);\r\n\r\n    protected readonly classes = computed(() =>\r\n        mergeClasses(floatButtonVariants({ variant: this.variant(), size: this.size(), shape: this.shape() }), this.position() ? this.containerPosition() : \"\", this.class()),\r\n    );\r\n}\r\n"]}

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

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+export const floatButtonVariants = cva("inline-flex items-center justify-center w-auto transition-colors duration-300 cursor-pointer", {
+    variants: {
+        variant: {
+            primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+            accent: "bg-accent text-accent-foreground hover:bg-accent/90",
+            default: "shadow-sm bg-background text-muted-foreground hover:bg-default/20 hover:text-primary",
+        },
+        shape: {
+            default: "rounded-lg",
+            circle: "rounded-full",
+        },
+        size: {
+            default: "h-10 px-3 py-2",
+            lg: "h-12 px-4 py-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        shape: "default",
+        size: "default",
+    },
+});
+//# sourceMappingURL=float-button.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"float-button.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/float-button/float-button.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,8FAA8F,EAAE;IACnI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,wDAAwD;YACjE,MAAM,EAAE,qDAAqD;YAC7D,OAAO,EAAE,sFAAsF;SAClG;QACD,KAAK,EAAE;YACH,OAAO,EAAE,YAAY;YACrB,MAAM,EAAE,cAAc;SACzB;QACD,IAAI,EAAE;YACF,OAAO,EAAE,gBAAgB;YACzB,EAAE,EAAE,gBAAgB;SACvB;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAClB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const floatButtonVariants = cva(\"inline-flex items-center justify-center w-auto transition-colors duration-300 cursor-pointer\", {\r\n    variants: {\r\n        variant: {\r\n            primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n            accent: \"bg-accent text-accent-foreground hover:bg-accent/90\",\r\n            default: \"shadow-sm bg-background text-muted-foreground hover:bg-default/20 hover:text-primary\",\r\n        },\r\n        shape: {\r\n            default: \"rounded-lg\",\r\n            circle: \"rounded-full\",\r\n        },\r\n        size: {\r\n            default: \"h-10 px-3 py-2\",\r\n            lg: \"h-12 px-4 py-2\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        variant: \"default\",\r\n        shape: \"default\",\r\n        size: \"default\",\r\n    },\r\n});\r\n\r\nexport type FloatButtonVariants = VariantProps<typeof floatButtonVariants>;\r\n"]}

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

@@ -0,0 +1,5 @@
+export * from "./demo/float-button";
+export * from "./float-button";
+export * from "./float-button-group";
+export * from "./float-button-top";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/float-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from \"./demo/float-button\";\r\nexport * from \"./float-button\";\r\nexport * from \"./float-button-group\";\r\nexport * from \"./float-button-top\";\r\n"]}

package/esm2022/lib/components/form-field/autocomplete/autocomplete-config.js

@@ -0,0 +1,36 @@
+export class AiAutocompleteConfig {
+    data;
+    keyword;
+    useLabel;
+    useValue;
+    displayLabel;
+    constructor(options) {
+        this.data = options.data;
+        this.keyword = Array.isArray(options.keyword) ? options.keyword : [options.keyword];
+        this.useLabel = options.useLabel;
+        this.useValue = options.useValue;
+        this.displayLabel = options.displayLabel;
+    }
+    getLabel(item) {
+        if (this.displayLabel)
+            return this.displayLabel(item);
+        return String(item[this.useLabel] ?? "");
+    }
+    getValue(item) {
+        return item[this.useValue];
+    }
+    filter(search) {
+        if (!search)
+            return this.data;
+        const lower = search.toLowerCase();
+        return this.data.filter(item => this.keyword.some(key => String(item[key] ?? "")
+            .toLowerCase()
+            .includes(lower)));
+    }
+    findByValue(value) {
+        if (value == null)
+            return undefined;
+        return this.data.find(item => item[this.useValue] === value);
+    }
+}
+//# sourceMappingURL=autocomplete-config.js.map

package/esm2022/lib/components/form-field/autocomplete/autocomplete-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-config.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/autocomplete-config.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,oBAAoB;IACpB,IAAI,CAAM;IACV,OAAO,CAAc;IACrB,QAAQ,CAAU;IAClB,QAAQ,CAAU;IAClB,YAAY,CAAuB;IAE5C,YAAY,OAAsC;QAC9C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACpF,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,IAAO;QACZ,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACtD,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,IAAO;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAmB,CAAC;IACjD,CAAC;IAED,MAAM,CAAC,MAAc;QACjB,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CACpB,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,QAAQ,CAAC,KAAK,CAAC,CACvB,CACJ,CAAC;IACN,CAAC;IAED,WAAW,CAAC,KAA6B;QACrC,IAAI,KAAK,IAAI,IAAI;YAAE,OAAO,SAAS,CAAC;QACpC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAa,KAAK,KAAK,CAAC,CAAC;IAC9E,CAAC;CACJ","sourcesContent":["export interface AiAutocompleteOptions<T, Key> {\r\n    data: T[];\r\n    keyword: keyof T | (keyof T)[];\r\n    useLabel: keyof T;\r\n    useValue: keyof T;\r\n    displayLabel?: (item: T) => string;\r\n}\r\n\r\nexport class AiAutocompleteConfig<T, Key = unknown> {\r\n    readonly data: T[];\r\n    readonly keyword: (keyof T)[];\r\n    readonly useLabel: keyof T;\r\n    readonly useValue: keyof T;\r\n    readonly displayLabel?: (item: T) => string;\r\n\r\n    constructor(options: AiAutocompleteOptions<T, Key>) {\r\n        this.data = options.data;\r\n        this.keyword = Array.isArray(options.keyword) ? options.keyword : [options.keyword];\r\n        this.useLabel = options.useLabel;\r\n        this.useValue = options.useValue;\r\n        this.displayLabel = options.displayLabel;\r\n    }\r\n\r\n    getLabel(item: T): string {\r\n        if (this.displayLabel) return this.displayLabel(item);\r\n        return String(item[this.useLabel] ?? \"\");\r\n    }\r\n\r\n    getValue(item: T): Key {\r\n        return item[this.useValue] as unknown as Key;\r\n    }\r\n\r\n    filter(search: string): T[] {\r\n        if (!search) return this.data;\r\n        const lower = search.toLowerCase();\r\n        return this.data.filter(item =>\r\n            this.keyword.some(key =>\r\n                String(item[key] ?? \"\")\r\n                    .toLowerCase()\r\n                    .includes(lower),\r\n            ),\r\n        );\r\n    }\r\n\r\n    findByValue(value: Key | null | undefined): T | undefined {\r\n        if (value == null) return undefined;\r\n        return this.data.find(item => (item[this.useValue] as unknown) === value);\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/form-field/autocomplete/autocomplete.js

@@ -0,0 +1,234 @@
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, linkedSignal, model, output, signal, viewChild, ViewContainerRef, ViewEncapsulation, } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import { AiIcon } from "../../icon/icon.component";
+import { autocompleteDropdownVariants, autocompleteInputVariants, autocompleteItemVariants, autocompleteLabelVariants } from "./autocomplete.variants";
+import { AiAutocompleteOverlayService } from "./services";
+import * as i0 from "@angular/core";
+export class AiAutocomplete {
+    #overlayService = inject(AiAutocompleteOverlayService);
+    #elementRef = inject((ElementRef));
+    #viewContainerRef = inject(ViewContainerRef);
+    #outsideSub;
+    config = input(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    changeSelected = output();
+    changeValue = output();
+    dropdownTemplate = viewChild.required("dropdownTemplate");
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
+    searchText = linkedSignal(() => {
+        const value = this.value();
+        const config = this.config();
+        if (value != null && value !== "" && config) {
+            const item = config.findByValue(value);
+            if (item)
+                return config.getLabel(item);
+        }
+        return "";
+    }, ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    hasValue = computed(() => {
+        const value = this.value();
+        return value != null && value !== "";
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    filteredItems = computed(() => {
+        const config = this.config();
+        if (!config)
+            return [];
+        const searchValue = this.searchText();
+        const selectedItem = config.findByValue(this.value());
+        const displayLabel = selectedItem ? config.getLabel(selectedItem) : null;
+        if (displayLabel && searchValue === displayLabel) {
+            return config.data;
+        }
+        return config.filter(searchValue);
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    hasError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessages = computed(() => {
+        const errors = this.errors();
+        if (!errors?.length)
+            return [];
+        return errors.map(e => e.message).filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    classes = computed(() => mergeClasses("relative inline-block w-full", this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    inputClass = computed(() => mergeClasses(autocompleteInputVariants({ error: this.hasError(), disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+    labelClass = computed(() => mergeClasses(autocompleteLabelVariants({ error: this.hasError(), disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+    dropdownClass = computed(() => mergeClasses(autocompleteDropdownVariants()), ...(ngDevMode ? [{ debugName: "dropdownClass" }] : []));
+    constructor() {
+        effect(() => {
+            this.writeValue(this.value());
+        });
+    }
+    writeValue(_) {
+        // linkedSignal handles searchText synchronization automatically
+    }
+    onChange(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        this.touched.set(true);
+    }
+    onInput(event) {
+        const inputValue = event.target.value;
+        this.searchText.set(inputValue);
+        if (this.hasValue()) {
+            const config = this.config();
+            if (config) {
+                const selectedItem = config.findByValue(this.value());
+                const displayLabel = selectedItem ? config.getLabel(selectedItem) : "";
+                if (inputValue !== displayLabel) {
+                    this.value.set(null);
+                    this.changeValue.emit(null);
+                }
+            }
+        }
+        this.focusedIndex.set(-1);
+        if (!this.isOpen()) {
+            this._open();
+        }
+    }
+    onFocus() {
+        if (!this.isOpen() && !this.disabled() && !this.readonly()) {
+            this._open();
+        }
+    }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.searchText.set("");
+        this.value.set(null);
+        this.changeValue.emit(null);
+        this.focusedIndex.set(-1);
+    }
+    selectItem(item) {
+        const config = this.config();
+        if (!config)
+            return;
+        const value = config.getValue(item);
+        this.value.set(value);
+        this.searchText.set(config.getLabel(item));
+        this.changeSelected.emit(item);
+        this.changeValue.emit(value);
+        this._close();
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this._open();
+                }
+                else {
+                    this._navigate(1);
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this._navigate(-1);
+                }
+                break;
+            case "Enter":
+                if (this.isOpen() && this.focusedIndex() >= 0) {
+                    event.preventDefault();
+                    const items = this.filteredItems();
+                    const focusedItem = items[this.focusedIndex()];
+                    if (focusedItem) {
+                        this.selectItem(focusedItem);
+                    }
+                }
+                break;
+            case "Escape":
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this._close();
+                }
+                break;
+            case "Tab":
+                if (this.isOpen()) {
+                    this._close();
+                    this.onTouched();
+                }
+                break;
+        }
+    }
+    getDisplayLabel(item) {
+        const config = this.config();
+        if (!config)
+            return "";
+        return config.getLabel(item);
+    }
+    isItemSelected(item) {
+        const config = this.config();
+        if (!config || !this.hasValue())
+            return false;
+        return config.getValue(item) === this.value();
+    }
+    itemClass(index) {
+        return mergeClasses(autocompleteItemVariants(), index === this.focusedIndex() ? "bg-default text-default-foreground" : "");
+    }
+    ngOnDestroy() {
+        this.#outsideSub?.unsubscribe();
+        this.#overlayService.destroy();
+    }
+    _open() {
+        if (this.isOpen() || this.disabled() || this.readonly())
+            return;
+        const width = this.#elementRef.nativeElement.offsetWidth || 0;
+        this.#overlayService.create(this.#elementRef, width);
+        this.#overlayService.attach(this.dropdownTemplate(), this.#viewContainerRef);
+        this.isOpen.set(true);
+        this.#outsideSub?.unsubscribe();
+        this.#outsideSub = this.#overlayService.outsidePointerEvents().subscribe(event => {
+            const target = event.target;
+            if (!target || !this.#elementRef.nativeElement.contains(target)) {
+                this._close();
+                this.onTouched();
+            }
+        });
+    }
+    _close() {
+        this.#outsideSub?.unsubscribe();
+        this.#overlayService.detach();
+        this.isOpen.set(false);
+        this.focusedIndex.set(-1);
+    }
+    _navigate(direction) {
+        const items = this.filteredItems();
+        if (items.length === 0)
+            return;
+        let next = this.focusedIndex() + direction;
+        if (next < 0)
+            next = items.length - 1;
+        if (next >= items.length)
+            next = 0;
+        this.focusedIndex.set(next);
+        this._scrollToFocused();
+    }
+    _scrollToFocused() {
+        const overlayElement = this.#overlayService.getOverlayElement();
+        if (!overlayElement)
+            return;
+        const items = overlayElement.querySelectorAll('[role="option"]');
+        const focusedItem = items[this.focusedIndex()];
+        focusedItem?.scrollIntoView({ block: "nearest" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiAutocomplete, isStandalone: true, selector: "ai-autocomplete", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changeSelected: "changeSelected", changeValue: "changeValue" }, host: { properties: { "class": "classes()" } }, providers: [AiAutocompleteOverlayService], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], exportAs: ["aiAutocomplete"], ngImport: i0, template: "<div class=\"relative w-full\">\r\n    <input\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"' '\"\r\n        [attr.id]=\"id()\"\r\n        [value]=\"searchText()\"\r\n        (input)=\"onInput($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\"\r\n        autocomplete=\"off\" />\r\n\r\n    <label [attr.for]=\"id()\" [class]=\"labelClass()\">\r\n        {{ label() }}\r\n        @if (required()) {\r\n            <span class=\"text-destructive\">*</span>\r\n        }\r\n    </label>\r\n\r\n    <div class=\"absolute top-2/4 -translate-y-2/4 right-2 flex items-center gap-0.5\">\r\n        @if (hasValue() && !disabled() && !readonly()) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"inline-flex items-center cursor-pointer justify-center rounded-full p-0.5 text-muted-foreground hover:text-foreground transition-colors\"\r\n                (mousedown)=\"onClear($event)\">\r\n                <ai-icon icon=\"close-circle\" size=\"sm\" />\r\n            </button>\r\n        }\r\n        <span class=\"inline-flex items-center justify-center py-0.5 pl-1 pr-2 text-muted-foreground\">\r\n            <ai-icon icon=\"search\" size=\"sm\" [class]=\"hasError() ? 'text-destructive' : 'text-muted-foreground'\" />\r\n        </span>\r\n    </div>\r\n</div>\r\n\r\n@if (hasError() && errorMessages().length > 0) {\r\n    <div class=\"flex flex-col gap-y-1 pt-1\">\r\n        @for (msg of errorMessages(); track $index) {\r\n            <div class=\"flex items-center gap-x-1 text-xs text-destructive\" role=\"alert\">\r\n                <ai-icon icon=\"alert\" size=\"xs\" class=\"text-destructive\" />\r\n                <span>{{ msg }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div [class]=\"dropdownClass()\" role=\"listbox\" tabindex=\"-1\">\r\n        <div class=\"p-1 max-h-60 overflow-y-auto scrollbar-hide\">\r\n            @for (item of filteredItems(); track $index) {\r\n                <div\r\n                    role=\"option\"\r\n                    tabindex=\"-1\"\r\n                    [class]=\"itemClass($index)\"\r\n                    [attr.data-selected]=\"isItemSelected(item) ? '' : null\"\r\n                    [attr.aria-selected]=\"isItemSelected(item)\"\r\n                    (mousedown)=\"selectItem(item)\">\r\n                    <span class=\"truncate flex-1\">{{ getDisplayLabel(item) }}</span>\r\n                    @if (isItemSelected(item)) {\r\n                        <ai-icon icon=\"check-double\" size=\"xs\" class=\"shrink-0 text-primary\" />\r\n                    }\r\n                </div>\r\n            } @empty {\r\n                <div class=\"py-6 text-center text-sm text-muted-foreground\">\r\n                    Nenhum resultado encontrado\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", 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: AiAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-autocomplete", exportAs: "aiAutocomplete", imports: [AiIcon], providers: [AiAutocompleteOverlayService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[class]": "classes()",
+                    }, template: "<div class=\"relative w-full\">\r\n    <input\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"' '\"\r\n        [attr.id]=\"id()\"\r\n        [value]=\"searchText()\"\r\n        (input)=\"onInput($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\"\r\n        autocomplete=\"off\" />\r\n\r\n    <label [attr.for]=\"id()\" [class]=\"labelClass()\">\r\n        {{ label() }}\r\n        @if (required()) {\r\n            <span class=\"text-destructive\">*</span>\r\n        }\r\n    </label>\r\n\r\n    <div class=\"absolute top-2/4 -translate-y-2/4 right-2 flex items-center gap-0.5\">\r\n        @if (hasValue() && !disabled() && !readonly()) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"inline-flex items-center cursor-pointer justify-center rounded-full p-0.5 text-muted-foreground hover:text-foreground transition-colors\"\r\n                (mousedown)=\"onClear($event)\">\r\n                <ai-icon icon=\"close-circle\" size=\"sm\" />\r\n            </button>\r\n        }\r\n        <span class=\"inline-flex items-center justify-center py-0.5 pl-1 pr-2 text-muted-foreground\">\r\n            <ai-icon icon=\"search\" size=\"sm\" [class]=\"hasError() ? 'text-destructive' : 'text-muted-foreground'\" />\r\n        </span>\r\n    </div>\r\n</div>\r\n\r\n@if (hasError() && errorMessages().length > 0) {\r\n    <div class=\"flex flex-col gap-y-1 pt-1\">\r\n        @for (msg of errorMessages(); track $index) {\r\n            <div class=\"flex items-center gap-x-1 text-xs text-destructive\" role=\"alert\">\r\n                <ai-icon icon=\"alert\" size=\"xs\" class=\"text-destructive\" />\r\n                <span>{{ msg }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div [class]=\"dropdownClass()\" role=\"listbox\" tabindex=\"-1\">\r\n        <div class=\"p-1 max-h-60 overflow-y-auto scrollbar-hide\">\r\n            @for (item of filteredItems(); track $index) {\r\n                <div\r\n                    role=\"option\"\r\n                    tabindex=\"-1\"\r\n                    [class]=\"itemClass($index)\"\r\n                    [attr.data-selected]=\"isItemSelected(item) ? '' : null\"\r\n                    [attr.aria-selected]=\"isItemSelected(item)\"\r\n                    (mousedown)=\"selectItem(item)\">\r\n                    <span class=\"truncate flex-1\">{{ getDisplayLabel(item) }}</span>\r\n                    @if (isItemSelected(item)) {\r\n                        <ai-icon icon=\"check-double\" size=\"xs\" class=\"shrink-0 text-primary\" />\r\n                    }\r\n                </div>\r\n            } @empty {\r\n                <div class=\"py-6 text-center text-sm text-muted-foreground\">\r\n                    Nenhum resultado encontrado\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], changeSelected: [{ type: i0.Output, args: ["changeSelected"] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], dropdownTemplate: [{ type: i0.ViewChild, args: ["dropdownTemplate", { isSignal: true }] }] } });
+//# sourceMappingURL=autocomplete.js.map

package/esm2022/lib/components/form-field/autocomplete/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/autocomplete.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/autocomplete.html"],"names":[],"mappings":"AAGA,OAAO,EACH,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAK,EAEL,MAAM,EACN,MAAM,EAEN,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GACpB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,4BAA4B,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACvJ,OAAO,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;;AAgB1D,MAAM,OAAO,cAAc;IACvB,eAAe,GAAG,MAAM,CAAC,4BAA4B,CAAC,CAAC;IACvD,WAAW,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAC9C,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC7C,WAAW,CAAgB;IAElB,MAAM,GAAG,KAAK,CAAsC,IAAI,kDAAC,CAAC;IAE1D,EAAE,GAAG,KAAK,CAAS,EAAE,8CAAC,CAAC;IACvB,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU,CAAC;IACjC,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC,CAAC;IAChC,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE9B,KAAK,GAAG,KAAK,CAAa,IAAI,iDAAC,CAAC;IAChC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,MAAM,GAAG,KAAK,CAA+C,EAAE,kDAAC,CAAC;IAEjE,cAAc,GAAG,MAAM,EAAK,CAAC;IAC7B,WAAW,GAAG,MAAM,EAAc,CAAC;IAEnC,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAAoB,kBAAkB,CAAC,CAAC;IAEnE,MAAM,GAAG,MAAM,CAAU,KAAK,kDAAC,CAAC;IAChC,YAAY,GAAG,MAAM,CAAS,CAAC,CAAC,wDAAC,CAAC;IAElC,UAAU,GAAG,YAAY,CAAS,GAAG,EAAE;QACtD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAM,EAAc,IAAI,MAAM,EAAE,CAAC;YACvD,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC,sDAAC,CAAC;IAEgB,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC3B,OAAO,KAAK,IAAI,IAAI,IAAI,KAAK,KAAM,EAAc,CAAC;IACtD,CAAC,oDAAC,CAAC;IAEgB,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM;YAAE,OAAO,EAAS,CAAC;QAE9B,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACtC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACtD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEzE,IAAI,YAAY,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YAC/C,OAAO,MAAM,CAAC,IAAI,CAAC;QACvB,CAAC;QAED,OAAO,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC,yDAAC,CAAC;IAEgB,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,oDAAC,CAAC;IAE5D,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM,EAAE,MAAM;YAAE,OAAO,EAAc,CAAC;QAC3C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAa,CAAC;IAClE,CAAC,yDAAC,CAAC;IAEgB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IACrF,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,sDAAC,CAAC;IAC5H,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,sDAAC,CAAC;IAC5H,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,4BAA4B,EAAE,CAAC,yDAAC,CAAC;IAEhG;QACI,MAAM,CAAC,GAAG,EAAE;YACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,UAAU,CAAC,CAAa;QACpB,gEAAgE;IACpE,CAAC;IAED,QAAQ,CAAC,KAAiB;QACtB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS;QACL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAES,OAAO,CAAC,KAAY;QAC1B,MAAM,UAAU,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QAC5D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,IAAI,MAAM,EAAE,CAAC;gBACT,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAG,CAAC,CAAC;gBACvD,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvE,IAAI,UAAU,KAAK,YAAY,EAAE,CAAC;oBAC9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAChC,CAAC;YACL,CAAC;QACL,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACL,CAAC;IAES,OAAO;QACb,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACzD,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACL,CAAC;IAES,OAAO,CAAC,KAAY;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAES,UAAU,CAAC,IAAO;QACxB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAES,SAAS,CAAC,KAAoB;QACpC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAChB,KAAK,WAAW;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;oBACjB,IAAI,CAAC,KAAK,EAAE,CAAC;gBACjB,CAAC;qBAAM,CAAC;oBACJ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACtB,CAAC;gBACD,MAAM;YACV,KAAK,SAAS;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;oBAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvB,CAAC;gBACD,MAAM;YACV,KAAK,OAAO;gBACR,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,CAAC;oBAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnC,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;oBAC/C,IAAI,WAAW,EAAE,CAAC;wBACd,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;oBACjC,CAAC;gBACL,CAAC;gBACD,MAAM;YACV,KAAK,QAAQ;gBACT,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;oBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,MAAM,EAAE,CAAC;gBAClB,CAAC;gBACD,MAAM;YACV,KAAK,KAAK;gBACN,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;oBAChB,IAAI,CAAC,MAAM,EAAE,CAAC;oBACd,IAAI,CAAC,SAAS,EAAE,CAAC;gBACrB,CAAC;gBACD,MAAM;QACd,CAAC;IACL,CAAC;IAES,eAAe,CAAC,IAAO;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QACvB,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAES,cAAc,CAAC,IAAO;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO,KAAK,CAAC;QAC9C,OAAO,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAClD,CAAC;IAES,SAAS,CAAC,KAAa;QAC7B,OAAO,YAAY,CAAC,wBAAwB,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/H,CAAC;IAED,WAAW;QACP,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;IACnC,CAAC;IAEO,KAAK;QACT,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAEhE,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,IAAI,CAAC,CAAC;QAC9D,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7E,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC;QAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,oBAAoB,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC9D,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,SAAS,EAAE,CAAC;YACrB,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,MAAM;QACV,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAEO,SAAS,CAAC,SAAiB;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC/B,IAAI,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,SAAS,CAAC;QAC3C,IAAI,IAAI,GAAG,CAAC;YAAE,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACtC,IAAI,IAAI,IAAI,KAAK,CAAC,MAAM;YAAE,IAAI,GAAG,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAEO,gBAAgB;QACpB,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,iBAAiB,EAAE,CAAC;QAChE,IAAI,CAAC,cAAc;YAAE,OAAO;QAC5B,MAAM,KAAK,GAAG,cAAc,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,CAA4B,CAAC;QAC1E,WAAW,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACtD,CAAC;uGAnPQ,cAAc;2FAAd,cAAc,0sDARZ,CAAC,4BAA4B,CAAC,8LCnC7C,q/FAsEA,4CDpCc,MAAM;;2FASP,cAAc;kBAZ1B,SAAS;+BACI,iBAAiB,YACjB,gBAAgB,WACjB,CAAC,MAAM,CAAC,aACN,CAAC,4BAA4B,CAAC,iBAE1B,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACF,SAAS,EAAE,WAAW;qBACzB;y5CA0BiE,kBAAkB","sourcesContent":["import { ClassValue } from \"clsx\";\r\nimport { Subscription } from \"rxjs\";\r\n\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    effect,\r\n    ElementRef,\r\n    inject,\r\n    input,\r\n    linkedSignal,\r\n    model,\r\n    OnDestroy,\r\n    output,\r\n    signal,\r\n    TemplateRef,\r\n    viewChild,\r\n    ViewContainerRef,\r\n    ViewEncapsulation,\r\n} from \"@angular/core\";\r\nimport { FormValueControl } from \"@angular/forms/signals\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\nimport { AiIcon } from \"../../icon/icon.component\";\r\nimport { AiAutocompleteConfig } from \"./autocomplete-config\";\r\nimport { autocompleteDropdownVariants, autocompleteInputVariants, autocompleteItemVariants, autocompleteLabelVariants } from \"./autocomplete.variants\";\r\nimport { AiAutocompleteOverlayService } from \"./services\";\r\n\r\nimport type { ValidationError } from \"@angular/forms/signals\";\r\n\r\n@Component({\r\n    selector: \"ai-autocomplete\",\r\n    exportAs: \"aiAutocomplete\",\r\n    imports: [AiIcon],\r\n    providers: [AiAutocompleteOverlayService],\r\n    templateUrl: \"./autocomplete.html\",\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiAutocomplete<T, Key = unknown> implements FormValueControl<Key | null>, OnDestroy {\r\n    #overlayService = inject(AiAutocompleteOverlayService);\r\n    #elementRef = inject(ElementRef<HTMLElement>);\r\n    #viewContainerRef = inject(ViewContainerRef);\r\n    #outsideSub?: Subscription;\r\n\r\n    readonly config = input<AiAutocompleteConfig<T, Key> | null>(null);\r\n\r\n    readonly id = input<string>(\"\");\r\n    readonly label = input.required<string>();\r\n    readonly placeholder = input<string>(\"\");\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly value = model<Key | null>(null);\r\n    readonly touched = model<boolean>(false);\r\n    readonly disabled = input<boolean>(false);\r\n    readonly invalid = input<boolean>(false);\r\n    readonly readonly = input<boolean>(false);\r\n    readonly required = input<boolean>(false);\r\n    readonly errors = input<readonly ValidationError.WithOptionalField[]>([]);\r\n\r\n    readonly changeSelected = output<T>();\r\n    readonly changeValue = output<Key | null>();\r\n\r\n    readonly dropdownTemplate = viewChild.required<TemplateRef<void>>(\"dropdownTemplate\");\r\n\r\n    protected readonly isOpen = signal<boolean>(false);\r\n    protected readonly focusedIndex = signal<number>(-1);\r\n\r\n    protected readonly searchText = linkedSignal<string>(() => {\r\n        const value = this.value();\r\n        const config = this.config();\r\n        if (value != null && value !== (\"\" as unknown) && config) {\r\n            const item = config.findByValue(value);\r\n            if (item) return config.getLabel(item);\r\n        }\r\n        return \"\";\r\n    });\r\n\r\n    protected readonly hasValue = computed(() => {\r\n        const value = this.value();\r\n        return value != null && value !== (\"\" as unknown);\r\n    });\r\n\r\n    protected readonly filteredItems = computed(() => {\r\n        const config = this.config();\r\n        if (!config) return [] as T[];\r\n\r\n        const searchValue = this.searchText();\r\n        const selectedItem = config.findByValue(this.value());\r\n        const displayLabel = selectedItem ? config.getLabel(selectedItem) : null;\r\n\r\n        if (displayLabel && searchValue === displayLabel) {\r\n            return config.data;\r\n        }\r\n\r\n        return config.filter(searchValue);\r\n    });\r\n\r\n    protected readonly hasError = computed(() => this.touched() && this.invalid());\r\n\r\n    protected readonly errorMessages = computed(() => {\r\n        const errors = this.errors();\r\n        if (!errors?.length) return [] as string[];\r\n        return errors.map(e => e.message).filter(Boolean) as string[];\r\n    });\r\n\r\n    protected readonly classes = computed(() => mergeClasses(\"relative inline-block w-full\", this.class()));\r\n    protected readonly inputClass = computed(() => mergeClasses(autocompleteInputVariants({ error: this.hasError(), disabled: this.disabled() })));\r\n    protected readonly labelClass = computed(() => mergeClasses(autocompleteLabelVariants({ error: this.hasError(), disabled: this.disabled() })));\r\n    protected readonly dropdownClass = computed(() => mergeClasses(autocompleteDropdownVariants()));\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            this.writeValue(this.value());\r\n        });\r\n    }\r\n\r\n    writeValue(_: Key | null) {\r\n        // linkedSignal handles searchText synchronization automatically\r\n    }\r\n\r\n    onChange(value: Key | null) {\r\n        this.value.set(value);\r\n    }\r\n\r\n    onTouched() {\r\n        this.touched.set(true);\r\n    }\r\n\r\n    protected onInput(event: Event) {\r\n        const inputValue = (event.target as HTMLInputElement).value;\r\n        this.searchText.set(inputValue);\r\n\r\n        if (this.hasValue()) {\r\n            const config = this.config();\r\n            if (config) {\r\n                const selectedItem = config.findByValue(this.value()!);\r\n                const displayLabel = selectedItem ? config.getLabel(selectedItem) : \"\";\r\n                if (inputValue !== displayLabel) {\r\n                    this.value.set(null);\r\n                    this.changeValue.emit(null);\r\n                }\r\n            }\r\n        }\r\n\r\n        this.focusedIndex.set(-1);\r\n\r\n        if (!this.isOpen()) {\r\n            this._open();\r\n        }\r\n    }\r\n\r\n    protected onFocus() {\r\n        if (!this.isOpen() && !this.disabled() && !this.readonly()) {\r\n            this._open();\r\n        }\r\n    }\r\n\r\n    protected onClear(event: Event) {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        this.searchText.set(\"\");\r\n        this.value.set(null);\r\n        this.changeValue.emit(null);\r\n        this.focusedIndex.set(-1);\r\n    }\r\n\r\n    protected selectItem(item: T) {\r\n        const config = this.config();\r\n        if (!config) return;\r\n\r\n        const value = config.getValue(item);\r\n        this.value.set(value);\r\n        this.searchText.set(config.getLabel(item));\r\n        this.changeSelected.emit(item);\r\n        this.changeValue.emit(value);\r\n        this._close();\r\n    }\r\n\r\n    protected onKeydown(event: KeyboardEvent) {\r\n        switch (event.key) {\r\n            case \"ArrowDown\":\r\n                event.preventDefault();\r\n                if (!this.isOpen()) {\r\n                    this._open();\r\n                } else {\r\n                    this._navigate(1);\r\n                }\r\n                break;\r\n            case \"ArrowUp\":\r\n                event.preventDefault();\r\n                if (this.isOpen()) {\r\n                    this._navigate(-1);\r\n                }\r\n                break;\r\n            case \"Enter\":\r\n                if (this.isOpen() && this.focusedIndex() >= 0) {\r\n                    event.preventDefault();\r\n                    const items = this.filteredItems();\r\n                    const focusedItem = items[this.focusedIndex()];\r\n                    if (focusedItem) {\r\n                        this.selectItem(focusedItem);\r\n                    }\r\n                }\r\n                break;\r\n            case \"Escape\":\r\n                if (this.isOpen()) {\r\n                    event.preventDefault();\r\n                    this._close();\r\n                }\r\n                break;\r\n            case \"Tab\":\r\n                if (this.isOpen()) {\r\n                    this._close();\r\n                    this.onTouched();\r\n                }\r\n                break;\r\n        }\r\n    }\r\n\r\n    protected getDisplayLabel(item: T): string {\r\n        const config = this.config();\r\n        if (!config) return \"\";\r\n        return config.getLabel(item);\r\n    }\r\n\r\n    protected isItemSelected(item: T): boolean {\r\n        const config = this.config();\r\n        if (!config || !this.hasValue()) return false;\r\n        return config.getValue(item) === this.value();\r\n    }\r\n\r\n    protected itemClass(index: number): string {\r\n        return mergeClasses(autocompleteItemVariants(), index === this.focusedIndex() ? \"bg-default text-default-foreground\" : \"\");\r\n    }\r\n\r\n    ngOnDestroy() {\r\n        this.#outsideSub?.unsubscribe();\r\n        this.#overlayService.destroy();\r\n    }\r\n\r\n    private _open() {\r\n        if (this.isOpen() || this.disabled() || this.readonly()) return;\r\n\r\n        const width = this.#elementRef.nativeElement.offsetWidth || 0;\r\n        this.#overlayService.create(this.#elementRef, width);\r\n        this.#overlayService.attach(this.dropdownTemplate(), this.#viewContainerRef);\r\n        this.isOpen.set(true);\r\n\r\n        this.#outsideSub?.unsubscribe();\r\n        this.#outsideSub = this.#overlayService.outsidePointerEvents().subscribe(event => {\r\n            const target = event.target as Node | null;\r\n            if (!target || !this.#elementRef.nativeElement.contains(target)) {\r\n                this._close();\r\n                this.onTouched();\r\n            }\r\n        });\r\n    }\r\n\r\n    private _close() {\r\n        this.#outsideSub?.unsubscribe();\r\n        this.#overlayService.detach();\r\n        this.isOpen.set(false);\r\n        this.focusedIndex.set(-1);\r\n    }\r\n\r\n    private _navigate(direction: number) {\r\n        const items = this.filteredItems();\r\n        if (items.length === 0) return;\r\n        let next = this.focusedIndex() + direction;\r\n        if (next < 0) next = items.length - 1;\r\n        if (next >= items.length) next = 0;\r\n        this.focusedIndex.set(next);\r\n        this._scrollToFocused();\r\n    }\r\n\r\n    private _scrollToFocused() {\r\n        const overlayElement = this.#overlayService.getOverlayElement();\r\n        if (!overlayElement) return;\r\n        const items = overlayElement.querySelectorAll('[role=\"option\"]');\r\n        const focusedItem = items[this.focusedIndex()] as HTMLElement | undefined;\r\n        focusedItem?.scrollIntoView({ block: \"nearest\" });\r\n    }\r\n}\r\n","<div class=\"relative w-full\">\r\n    <input\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"' '\"\r\n        [attr.id]=\"id()\"\r\n        [value]=\"searchText()\"\r\n        (input)=\"onInput($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onKeydown($event)\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\"\r\n        autocomplete=\"off\" />\r\n\r\n    <label [attr.for]=\"id()\" [class]=\"labelClass()\">\r\n        {{ label() }}\r\n        @if (required()) {\r\n            <span class=\"text-destructive\">*</span>\r\n        }\r\n    </label>\r\n\r\n    <div class=\"absolute top-2/4 -translate-y-2/4 right-2 flex items-center gap-0.5\">\r\n        @if (hasValue() && !disabled() && !readonly()) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"inline-flex items-center cursor-pointer justify-center rounded-full p-0.5 text-muted-foreground hover:text-foreground transition-colors\"\r\n                (mousedown)=\"onClear($event)\">\r\n                <ai-icon icon=\"close-circle\" size=\"sm\" />\r\n            </button>\r\n        }\r\n        <span class=\"inline-flex items-center justify-center py-0.5 pl-1 pr-2 text-muted-foreground\">\r\n            <ai-icon icon=\"search\" size=\"sm\" [class]=\"hasError() ? 'text-destructive' : 'text-muted-foreground'\" />\r\n        </span>\r\n    </div>\r\n</div>\r\n\r\n@if (hasError() && errorMessages().length > 0) {\r\n    <div class=\"flex flex-col gap-y-1 pt-1\">\r\n        @for (msg of errorMessages(); track $index) {\r\n            <div class=\"flex items-center gap-x-1 text-xs text-destructive\" role=\"alert\">\r\n                <ai-icon icon=\"alert\" size=\"xs\" class=\"text-destructive\" />\r\n                <span>{{ msg }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n\r\n<ng-template #dropdownTemplate>\r\n    <div [class]=\"dropdownClass()\" role=\"listbox\" tabindex=\"-1\">\r\n        <div class=\"p-1 max-h-60 overflow-y-auto scrollbar-hide\">\r\n            @for (item of filteredItems(); track $index) {\r\n                <div\r\n                    role=\"option\"\r\n                    tabindex=\"-1\"\r\n                    [class]=\"itemClass($index)\"\r\n                    [attr.data-selected]=\"isItemSelected(item) ? '' : null\"\r\n                    [attr.aria-selected]=\"isItemSelected(item)\"\r\n                    (mousedown)=\"selectItem(item)\">\r\n                    <span class=\"truncate flex-1\">{{ getDisplayLabel(item) }}</span>\r\n                    @if (isItemSelected(item)) {\r\n                        <ai-icon icon=\"check-double\" size=\"xs\" class=\"shrink-0 text-primary\" />\r\n                    }\r\n                </div>\r\n            } @empty {\r\n                <div class=\"py-6 text-center text-sm text-muted-foreground\">\r\n                    Nenhum resultado encontrado\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n"]}

package/esm2022/lib/components/form-field/autocomplete/autocomplete.variants.js

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+import { mergeClasses } from "../../../core";
+export const autocompleteInputVariants = cva(mergeClasses("block w-full text-sm text-muted-foreground appearance-none focus:outline-none focus:ring-0 peer", "px-4 pb-2.5 pt-4 pr-16 bg-transparent rounded-lg border-2 border-input focus:border-primary"), {
+    variants: {
+        error: {
+            true: "border-destructive text-destructive focus:border-destructive placeholder:text-destructive placeholder:opacity-80",
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50",
+        },
+    },
+});
+export const autocompleteLabelVariants = cva(mergeClasses("absolute text-sm text-muted-foreground duration-300 origin-[0] pointer-events-none", "-translate-y-4 scale-75 top-2 z-10 bg-background px-2 start-3", "peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2", "peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-primary"), {
+    variants: {
+        error: {
+            true: "text-destructive peer-focus:text-destructive",
+        },
+        disabled: {
+            true: "text-[#949498] dark:text-[#767073] pointer-events-none",
+        },
+    },
+});
+export const autocompleteDropdownVariants = cva(mergeClasses("z-9999 w-full scrollbar-hide overflow-hidden rounded-md border border-border bg-background text-muted-foreground shadow-lg animate-in fade-in-0 zoom-in-95"));
+export const autocompleteItemVariants = cva(mergeClasses("relative flex w-full cursor-pointer items-center gap-2 rounded-sm mb-0.5 px-3 min-h-9 py-1.5 text-sm", "outline-hidden select-none transition-colors duration-150", "hover:bg-default hover:text-default-foreground", "data-selected:text-primary"));
+//# sourceMappingURL=autocomplete.variants.js.map

package/esm2022/lib/components/form-field/autocomplete/autocomplete.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/autocomplete.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CACxC,YAAY,CACR,iGAAiG,EACjG,6FAA6F,CAChG,EACD;IACI,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE,kHAAkH;SAC3H;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,gCAAgC;SACzC;KACJ;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CACxC,YAAY,CACR,oFAAoF,EACpF,+DAA+D,EAC/D,yGAAyG,EACzG,wFAAwF,CAC3F,EACD;IACI,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE,8CAA8C;SACvD;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,wDAAwD;SACjE;KACJ;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,GAAG,CAC3C,YAAY,CAAC,4JAA4J,CAAC,CAC7K,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CACvC,YAAY,CACR,sGAAsG,EACtG,2DAA2D,EAC3D,gDAAgD,EAChD,4BAA4B,CAC/B,CACJ,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\n\r\nexport const autocompleteInputVariants = cva(\r\n    mergeClasses(\r\n        \"block w-full text-sm text-muted-foreground appearance-none focus:outline-none focus:ring-0 peer\",\r\n        \"px-4 pb-2.5 pt-4 pr-16 bg-transparent rounded-lg border-2 border-input focus:border-primary\",\r\n    ),\r\n    {\r\n        variants: {\r\n            error: {\r\n                true: \"border-destructive text-destructive focus:border-destructive placeholder:text-destructive placeholder:opacity-80\",\r\n            },\r\n            disabled: {\r\n                true: \"pointer-events-none opacity-50\",\r\n            },\r\n        },\r\n    },\r\n);\r\n\r\nexport const autocompleteLabelVariants = cva(\r\n    mergeClasses(\r\n        \"absolute text-sm text-muted-foreground duration-300 origin-[0] pointer-events-none\",\r\n        \"-translate-y-4 scale-75 top-2 z-10 bg-background px-2 start-3\",\r\n        \"peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2\",\r\n        \"peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-primary\",\r\n    ),\r\n    {\r\n        variants: {\r\n            error: {\r\n                true: \"text-destructive peer-focus:text-destructive\",\r\n            },\r\n            disabled: {\r\n                true: \"text-[#949498] dark:text-[#767073] pointer-events-none\",\r\n            },\r\n        },\r\n    },\r\n);\r\n\r\nexport const autocompleteDropdownVariants = cva(\r\n    mergeClasses(\"z-9999 w-full scrollbar-hide overflow-hidden rounded-md border border-border bg-background text-muted-foreground shadow-lg animate-in fade-in-0 zoom-in-95\"),\r\n);\r\n\r\nexport const autocompleteItemVariants = cva(\r\n    mergeClasses(\r\n        \"relative flex w-full cursor-pointer items-center gap-2 rounded-sm mb-0.5 px-3 min-h-9 py-1.5 text-sm\",\r\n        \"outline-hidden select-none transition-colors duration-150\",\r\n        \"hover:bg-default hover:text-default-foreground\",\r\n        \"data-selected:text-primary\",\r\n    ),\r\n);\r\n\r\nexport type AutocompleteVariants = VariantProps<typeof autocompleteInputVariants>;\r\n"]}

package/esm2022/lib/components/form-field/autocomplete/demo/autocomplete.js

@@ -0,0 +1,21 @@
+import { DemoAutocompleteDefaultComponent } from "./default";
+import { DemoAutocompleteEventsComponent } from "./events";
+import { DemoAutocompleteValidationComponent } from "./validation";
+export const AUTOCOMPLETE = {
+    componentName: "autocomplete",
+    examples: [
+        {
+            name: "default",
+            component: DemoAutocompleteDefaultComponent,
+        },
+        {
+            name: "validation",
+            component: DemoAutocompleteValidationComponent,
+        },
+        {
+            name: "events",
+            component: DemoAutocompleteEventsComponent,
+        },
+    ],
+};
+//# sourceMappingURL=autocomplete.js.map

package/esm2022/lib/components/form-field/autocomplete/demo/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/demo/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,+BAA+B,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,mCAAmC,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB,aAAa,EAAE,cAAc;IAC7B,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,gCAAgC;SAC9C;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,mCAAmC;SACjD;QACD;YACI,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,+BAA+B;SAC7C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoAutocompleteDefaultComponent } from \"./default\";\r\nimport { DemoAutocompleteEventsComponent } from \"./events\";\r\nimport { DemoAutocompleteValidationComponent } from \"./validation\";\r\n\r\nexport const AUTOCOMPLETE = {\r\n    componentName: \"autocomplete\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoAutocompleteDefaultComponent,\r\n        },\r\n        {\r\n            name: \"validation\",\r\n            component: DemoAutocompleteValidationComponent,\r\n        },\r\n        {\r\n            name: \"events\",\r\n            component: DemoAutocompleteEventsComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/form-field/autocomplete/demo/default.js

@@ -0,0 +1,41 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiAutocomplete } from "../autocomplete";
+import { AiAutocompleteConfig } from "../autocomplete-config";
+import * as i0 from "@angular/core";
+const USERS = [
+    { id: 1, name: "João Silva", email: "joao@email.com" },
+    { id: 2, name: "Maria Santos", email: "maria@email.com" },
+    { id: 3, name: "Pedro Oliveira", email: "pedro@email.com" },
+    { id: 4, name: "Ana Costa", email: "ana@email.com" },
+    { id: 5, name: "Lucas Pereira", email: "lucas@email.com" },
+];
+export class DemoAutocompleteDefaultComponent {
+    schema = signal({ userId: null }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema);
+    autoCompleteConfig = new AiAutocompleteConfig({
+        data: USERS,
+        keyword: ["name", "email"],
+        useLabel: "name",
+        useValue: "id",
+        displayLabel: (item) => `${item.id} - ${item.name}`,
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAutocompleteDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAutocompleteDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="max-w-sm w-full">
+            <ai-autocomplete class="w-full" label="Usuário" placeholder="Buscar usuário..." [config]="autoCompleteConfig" [formField]="schemaForm.userId" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiAutocomplete, selector: "ai-autocomplete", inputs: ["config", "id", "label", "placeholder", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "errors"], outputs: ["valueChange", "touchedChange", "changeSelected", "changeValue"], exportAs: ["aiAutocomplete"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAutocompleteDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAutocomplete, FormField],
+                    template: `
+        <div class="max-w-sm w-full">
+            <ai-autocomplete class="w-full" label="Usuário" placeholder="Buscar usuário..." [config]="autoCompleteConfig" [formField]="schemaForm.userId" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/form-field/autocomplete/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;;AAQ9D,MAAM,KAAK,GAAW;IAClB,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACtD,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACzD,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC3D,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE;IACpD,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,iBAAiB,EAAE;CAC7D,CAAC;AAUF,MAAM,OAAO,gCAAgC;IACzC,MAAM,GAAG,MAAM,CAA4B,EAAE,MAAM,EAAE,IAAI,EAAE,kDAAC,CAAC;IAE7D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAE/B,kBAAkB,GAAG,IAAI,oBAAoB,CAAe;QACxD,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;QAC1B,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,IAAI;QACd,YAAY,EAAE,CAAC,IAAU,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE;KAC5D,CAAC,CAAC;uGAXM,gCAAgC;2FAAhC,gCAAgC,wEAN/B;;;;KAIT,4DALS,cAAc,8SAAE,SAAS;;2FAO1B,gCAAgC;kBAR5C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;oBACpC,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiAutocomplete } from \"../autocomplete\";\r\nimport { AiAutocompleteConfig } from \"../autocomplete-config\";\r\n\r\ninterface User {\r\n    id: number;\r\n    name: string;\r\n    email: string;\r\n}\r\n\r\nconst USERS: User[] = [\r\n    { id: 1, name: \"João Silva\", email: \"joao@email.com\" },\r\n    { id: 2, name: \"Maria Santos\", email: \"maria@email.com\" },\r\n    { id: 3, name: \"Pedro Oliveira\", email: \"pedro@email.com\" },\r\n    { id: 4, name: \"Ana Costa\", email: \"ana@email.com\" },\r\n    { id: 5, name: \"Lucas Pereira\", email: \"lucas@email.com\" },\r\n];\r\n\r\n@Component({\r\n    imports: [AiAutocomplete, FormField],\r\n    template: `\r\n        <div class=\"max-w-sm w-full\">\r\n            <ai-autocomplete class=\"w-full\" label=\"Usuário\" placeholder=\"Buscar usuário...\" [config]=\"autoCompleteConfig\" [formField]=\"schemaForm.userId\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAutocompleteDefaultComponent {\r\n    schema = signal<{ userId: number | null }>({ userId: null });\r\n\r\n    schemaForm = form(this.schema);\r\n\r\n    autoCompleteConfig = new AiAutocompleteConfig<User, number>({\r\n        data: USERS,\r\n        keyword: [\"name\", \"email\"],\r\n        useLabel: \"name\",\r\n        useValue: \"id\",\r\n        displayLabel: (item: User) => `${item.id} - ${item.name}`,\r\n    });\r\n}\r\n"]}