@aiandralves/ai-ui 1.0.0

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

@@ -0,0 +1,63 @@
+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 DemoAutocompleteEventsComponent {
+    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}`,
+    });
+    onUserSelected(user) {
+        console.log("Usuário selecionado (objeto completo):", user);
+    }
+    onValueChanged(userId) {
+        console.log("ID alterado:", userId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAutocompleteEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAutocompleteEventsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="max-w-sm w-full">
+            <ai-autocomplete
+                class="w-full"
+                label="Usuário"
+                placeholder="Selecione um usuário"
+                [config]="autoCompleteConfig"
+                [formField]="schemaForm.userId"
+                (changeSelected)="onUserSelected($event)"
+                (changeValue)="onValueChanged($event)"
+            />
+        </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: DemoAutocompleteEventsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAutocomplete, FormField],
+                    template: `
+        <div class="max-w-sm w-full">
+            <ai-autocomplete
+                class="w-full"
+                label="Usuário"
+                placeholder="Selecione um usuário"
+                [config]="autoCompleteConfig"
+                [formField]="schemaForm.userId"
+                (changeSelected)="onUserSelected($event)"
+                (changeValue)="onValueChanged($event)"
+            />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=events.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/demo/events.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;AAkBF,MAAM,OAAO,+BAA+B;IACxC,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;IAEH,cAAc,CAAC,IAAU;QACrB,OAAO,CAAC,GAAG,CAAC,wCAAwC,EAAE,IAAI,CAAC,CAAC;IAChE,CAAC;IAED,cAAc,CAAC,MAAqB;QAChC,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IACxC,CAAC;uGAnBQ,+BAA+B;2FAA/B,+BAA+B,wEAd9B;;;;;;;;;;;;KAYT,4DAbS,cAAc,8SAAE,SAAS;;2FAe1B,+BAA+B;kBAhB3C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;oBACpC,QAAQ,EAAE;;;;;;;;;;;;KAYT;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\r\n                class=\"w-full\"\r\n                label=\"Usuário\"\r\n                placeholder=\"Selecione um usuário\"\r\n                [config]=\"autoCompleteConfig\"\r\n                [formField]=\"schemaForm.userId\"\r\n                (changeSelected)=\"onUserSelected($event)\"\r\n                (changeValue)=\"onValueChanged($event)\"\r\n            />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAutocompleteEventsComponent {\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    onUserSelected(user: User) {\r\n        console.log(\"Usuário selecionado (objeto completo):\", user);\r\n    }\r\n\r\n    onValueChanged(userId: number | null) {\r\n        console.log(\"ID alterado:\", userId);\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,84 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField, required, submit } from "@angular/forms/signals";
+import { AiButton } from "../../../button";
+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 DemoAutocompleteValidationComponent {
+    schema = signal({ userId: null }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema, schema => {
+        required(schema.userId, { message: "Usuário é obrigatório." });
+    });
+    autoCompleteConfig = new AiAutocompleteConfig({
+        data: USERS,
+        keyword: ["name", "email"],
+        useLabel: "name",
+        useValue: "id",
+        displayLabel: (item) => `${item.id} - ${item.name}`,
+    });
+    async onConfirm() {
+        await submit(this.schemaForm, async () => {
+            console.log("Válido ✓", this.schema());
+            return [];
+        });
+    }
+    onReset() {
+        this.schema.set({ userId: null });
+        this.schemaForm().reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAutocompleteValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoAutocompleteValidationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-4 max-w-sm w-full">
+            <ai-autocomplete class="w-full" label="Usuário" placeholder="Buscar usuário..." [config]="autoCompleteConfig" [formField]="schemaForm.userId" />
+
+            <div class="flex gap-2">
+                <ai-button size="sm" variant="primary" (click)="onConfirm()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" (click)="onReset()">Resetar</ai-button>
+            </div>
+
+            <div class="text-sm">
+                <p>
+                    <strong>Status:</strong>
+                    @let invalid = schemaForm().invalid || false;
+                    <span [class]="!invalid ? 'text-success' : 'text-destructive'">
+                        {{ !invalid ? " válido ✓" : " inválido ✗" }}
+                    </span>
+                </p>
+            </div>
+        </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"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoAutocompleteValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiAutocomplete, FormField, AiButton],
+                    template: `
+        <div class="flex flex-col gap-y-4 max-w-sm w-full">
+            <ai-autocomplete class="w-full" label="Usuário" placeholder="Buscar usuário..." [config]="autoCompleteConfig" [formField]="schemaForm.userId" />
+
+            <div class="flex gap-2">
+                <ai-button size="sm" variant="primary" (click)="onConfirm()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" (click)="onReset()">Resetar</ai-button>
+            </div>
+
+            <div class="text-sm">
+                <p>
+                    <strong>Status:</strong>
+                    @let invalid = schemaForm().invalid || false;
+                    <span [class]="!invalid ? 'text-success' : 'text-destructive'">
+                        {{ !invalid ? " válido ✓" : " inválido ✗" }}
+                    </span>
+                </p>
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=validation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/demo/validation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,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;AAyBF,MAAM,OAAO,mCAAmC;IAC5C,MAAM,GAAG,MAAM,CAA4B,EAAE,MAAM,EAAE,IAAI,EAAE,kDAAC,CAAC;IAE7D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;QACpC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,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;IAEH,KAAK,CAAC,SAAS;QACX,MAAM,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE;YACrC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YACvC,OAAO,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;IACP,CAAC;IAED,OAAO;QACH,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;uGAzBQ,mCAAmC;2FAAnC,mCAAmC,wEArBlC;;;;;;;;;;;;;;;;;;;KAmBT,4DApBS,cAAc,8SAAE,SAAS,+EAAE,QAAQ;;2FAsBpC,mCAAmC;kBAvB/C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,QAAQ,CAAC;oBAC9C,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;KAmBT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField, required, submit } from \"@angular/forms/signals\";\r\n\r\nimport { AiButton } from \"../../../button\";\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, AiButton],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-4 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\r\n            <div class=\"flex gap-2\">\r\n                <ai-button size=\"sm\" variant=\"primary\" (click)=\"onConfirm()\">Validar</ai-button>\r\n                <ai-button size=\"sm\" fill=\"line\" variant=\"destructive\" (click)=\"onReset()\">Resetar</ai-button>\r\n            </div>\r\n\r\n            <div class=\"text-sm\">\r\n                <p>\r\n                    <strong>Status:</strong>\r\n                    @let invalid = schemaForm().invalid || false;\r\n                    <span [class]=\"!invalid ? 'text-success' : 'text-destructive'\">\r\n                        {{ !invalid ? \" válido ✓\" : \" inválido ✗\" }}\r\n                    </span>\r\n                </p>\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoAutocompleteValidationComponent {\r\n    schema = signal<{ userId: number | null }>({ userId: null });\r\n\r\n    schemaForm = form(this.schema, schema => {\r\n        required(schema.userId, { message: \"Usuário é obrigatório.\" });\r\n    });\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    async onConfirm() {\r\n        await submit(this.schemaForm, async () => {\r\n            console.log(\"Válido ✓\", this.schema());\r\n            return [];\r\n        });\r\n    }\r\n\r\n    onReset() {\r\n        this.schema.set({ userId: null });\r\n        this.schemaForm().reset();\r\n    }\r\n}\r\n"]}

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

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

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

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

package/esm2022/lib/components/form-field/autocomplete/services/autocomplete-overlay.service.js

@@ -0,0 +1,65 @@
+import { Overlay, OverlayPositionBuilder } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { isPlatformBrowser } from "@angular/common";
+import { inject, Injectable, PLATFORM_ID } from "@angular/core";
+import { EMPTY } from "rxjs";
+import * as i0 from "@angular/core";
+export class AiAutocompleteOverlayService {
+    #overlay = inject(Overlay);
+    #overlayPositionBuilder = inject(OverlayPositionBuilder);
+    #platformId = inject(PLATFORM_ID);
+    #overlayRef;
+    #portal;
+    create(origin, width) {
+        if (this.#overlayRef)
+            return this.#overlayRef;
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const positionStrategy = this.#overlayPositionBuilder
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 4 },
+            { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: -4 },
+        ])
+            .withPush(false);
+        this.#overlayRef = this.#overlay.create({
+            positionStrategy,
+            hasBackdrop: false,
+            scrollStrategy: this.#overlay.scrollStrategies.reposition(),
+            width,
+            maxHeight: 256,
+        });
+        return this.#overlayRef;
+    }
+    attach(template, viewContainerRef) {
+        if (!this.#overlayRef)
+            return;
+        if (this.#overlayRef.hasAttached()) {
+            this.#overlayRef.detach();
+        }
+        this.#portal = new TemplatePortal(template, viewContainerRef);
+        this.#overlayRef.attach(this.#portal);
+    }
+    detach() {
+        if (this.#overlayRef?.hasAttached()) {
+            this.#overlayRef.detach();
+        }
+    }
+    destroy() {
+        this.#overlayRef?.dispose();
+        this.#overlayRef = undefined;
+        this.#portal = undefined;
+    }
+    getOverlayElement() {
+        return this.#overlayRef?.overlayElement;
+    }
+    outsidePointerEvents() {
+        return this.#overlayRef?.outsidePointerEvents() ?? EMPTY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAutocompleteOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAutocompleteOverlayService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiAutocompleteOverlayService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=autocomplete-overlay.service.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete-overlay.service.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/services/autocomplete-overlay.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAsB,EAAmB,MAAM,sBAAsB,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAc,MAAM,EAAE,UAAU,EAAE,WAAW,EAAiC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,KAAK,EAAmB,MAAM,MAAM,CAAC;;AAG9C,MAAM,OAAO,4BAA4B;IAC5B,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC3B,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IACzD,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAE3C,WAAW,CAAc;IACzB,OAAO,CAAkB;IAEzB,MAAM,CAAC,MAA+B,EAAE,KAAa;QACjD,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC,WAAW,CAAC;QAC9C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QAEjD,MAAM,gBAAgB,GAAG,IAAI,CAAC,uBAAuB;aAChD,mBAAmB,CAAC,MAAM,CAAC;aAC3B,aAAa,CAAC;YACX,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;YACvF,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;SAC3F,CAAC;aACD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAErB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;YACpC,gBAAgB;YAChB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAC3D,KAAK;YACL,SAAS,EAAE,GAAG;SACjB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,MAAM,CAAC,QAA2B,EAAE,gBAAkC;QAClE,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QAC9D,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC;YAClC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC;IAED,OAAO;QACH,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACb,OAAO,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;IAC5C,CAAC;IAED,oBAAoB;QAChB,OAAO,IAAI,CAAC,WAAW,EAAE,oBAAoB,EAAE,IAAI,KAAK,CAAC;IAC7D,CAAC;uGA1DQ,4BAA4B;2GAA5B,4BAA4B;;2FAA5B,4BAA4B;kBADxC,UAAU","sourcesContent":["import { Overlay, OverlayPositionBuilder, type OverlayRef } from \"@angular/cdk/overlay\";\r\nimport { TemplatePortal } from \"@angular/cdk/portal\";\r\nimport { isPlatformBrowser } from \"@angular/common\";\r\nimport { ElementRef, inject, Injectable, PLATFORM_ID, TemplateRef, ViewContainerRef } from \"@angular/core\";\r\nimport { EMPTY, type Observable } from \"rxjs\";\r\n\r\n@Injectable()\r\nexport class AiAutocompleteOverlayService {\r\n    readonly #overlay = inject(Overlay);\r\n    readonly #overlayPositionBuilder = inject(OverlayPositionBuilder);\r\n    readonly #platformId = inject(PLATFORM_ID);\r\n\r\n    #overlayRef?: OverlayRef;\r\n    #portal?: TemplatePortal;\r\n\r\n    create(origin: ElementRef<HTMLElement>, width: number): OverlayRef | undefined {\r\n        if (this.#overlayRef) return this.#overlayRef;\r\n        if (!isPlatformBrowser(this.#platformId)) return;\r\n\r\n        const positionStrategy = this.#overlayPositionBuilder\r\n            .flexibleConnectedTo(origin)\r\n            .withPositions([\r\n                { originX: \"start\", originY: \"bottom\", overlayX: \"start\", overlayY: \"top\", offsetY: 4 },\r\n                { originX: \"start\", originY: \"top\", overlayX: \"start\", overlayY: \"bottom\", offsetY: -4 },\r\n            ])\r\n            .withPush(false);\r\n\r\n        this.#overlayRef = this.#overlay.create({\r\n            positionStrategy,\r\n            hasBackdrop: false,\r\n            scrollStrategy: this.#overlay.scrollStrategies.reposition(),\r\n            width,\r\n            maxHeight: 256,\r\n        });\r\n\r\n        return this.#overlayRef;\r\n    }\r\n\r\n    attach(template: TemplateRef<void>, viewContainerRef: ViewContainerRef) {\r\n        if (!this.#overlayRef) return;\r\n        if (this.#overlayRef.hasAttached()) {\r\n            this.#overlayRef.detach();\r\n        }\r\n        this.#portal = new TemplatePortal(template, viewContainerRef);\r\n        this.#overlayRef.attach(this.#portal);\r\n    }\r\n\r\n    detach() {\r\n        if (this.#overlayRef?.hasAttached()) {\r\n            this.#overlayRef.detach();\r\n        }\r\n    }\r\n\r\n    destroy() {\r\n        this.#overlayRef?.dispose();\r\n        this.#overlayRef = undefined;\r\n        this.#portal = undefined;\r\n    }\r\n\r\n    getOverlayElement(): HTMLElement | undefined {\r\n        return this.#overlayRef?.overlayElement;\r\n    }\r\n\r\n    outsidePointerEvents(): Observable<MouseEvent | TouchEvent> {\r\n        return this.#overlayRef?.outsidePointerEvents() ?? EMPTY;\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,2 @@
+export * from "./autocomplete-overlay.service";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/autocomplete/services/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from \"./autocomplete-overlay.service\";\r\n"]}

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

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, input, model, output, signal, ViewEncapsulation } from "@angular/core";
+import { mergeClasses, noopFn } from "../../../core";
+import { AiIcon } from "../../icon";
+import { checkboxLabelVariants, checkboxVariants } from "./checkbox.variants";
+import * as i0 from "@angular/core";
+export class AiCheckbox {
+    #cdr = inject(ChangeDetectorRef);
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input("default", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    value = undefined;
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    changeCheck = output();
+    _change = () => noopFn;
+    _touched = () => noopFn;
+    _internalVariant = signal(null, ...(ngDevMode ? [{ debugName: "_internalVariant" }] : []));
+    hasError = computed(() => {
+        return !this.checked() && this.touched();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    effectiveVariant = computed(() => this._internalVariant() ?? this.variant(), ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : []));
+    classes = computed(() => mergeClasses(checkboxVariants({ variant: this.effectiveVariant(), size: this.size(), shape: this.shape() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    labelClasses = computed(() => mergeClasses(checkboxLabelVariants({ size: this.size(), variant: this.effectiveVariant() }), this.class()), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    constructor() {
+        effect(() => this._updateVariant());
+    }
+    onCheckboxBlur() {
+        this._touched();
+        this.#cdr.markForCheck();
+    }
+    onCheckboxChange() {
+        if (this.disabled())
+            return;
+        this.checked.set(!this.checked());
+        this._change(this.checked());
+        this.changeCheck.emit(this.checked());
+        this.#cdr.markForCheck();
+    }
+    onKeyboardEvent(event) {
+        if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            this.onCheckboxChange();
+        }
+    }
+    _updateVariant() {
+        this._internalVariant.set(this.hasError() ? "destructive" : null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiCheckbox, isStandalone: true, selector: "ai-checkbox, [ai-checkbox]", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", checked: "checkedChange", changeCheck: "changeCheck" }, exportAs: ["aiCheckbox"], ngImport: i0, template: "<div tabindex=\"0\" class=\"flex items-center gap-2\"\r\n    [class]=\"disabled() ? 'cursor-not-allowed' : 'cursor-pointer'\"\r\n    (click)=\"onCheckboxChange()\"\r\n    (keyup)=\"onKeyboardEvent($event)\">\r\n    @let check = checked();\r\n    <main class=\"flex relative\">\r\n        <input #input [id]=\"id()\" type=\"checkbox\" [class]=\"classes()\" [checked]=\"check\" [disabled]=\"disabled()\" (blur)=\"onCheckboxBlur()\" name=\"checkbox\" />\r\n        <ai-icon [icon]=\"check ? 'check' : ''\" \r\n            [size]=\"size()\"\r\n            [class]=\"`${check ? 'opacity-100' : 'opacity-0'} absolute flex items-center justify-center text-primary-foreground top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity`\" />\r\n    </main>\r\n    <label [class]=\"labelClasses()\" for=\"checkbox\">\r\n        <ng-content />\r\n    </label>\r\n</div>", 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: AiCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-checkbox, [ai-checkbox]", exportAs: "aiCheckbox", imports: [AiIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div tabindex=\"0\" class=\"flex items-center gap-2\"\r\n    [class]=\"disabled() ? 'cursor-not-allowed' : 'cursor-pointer'\"\r\n    (click)=\"onCheckboxChange()\"\r\n    (keyup)=\"onKeyboardEvent($event)\">\r\n    @let check = checked();\r\n    <main class=\"flex relative\">\r\n        <input #input [id]=\"id()\" type=\"checkbox\" [class]=\"classes()\" [checked]=\"check\" [disabled]=\"disabled()\" (blur)=\"onCheckboxBlur()\" name=\"checkbox\" />\r\n        <ai-icon [icon]=\"check ? 'check' : ''\" \r\n            [size]=\"size()\"\r\n            [class]=\"`${check ? 'opacity-100' : 'opacity-0'} absolute flex items-center justify-center text-primary-foreground top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity`\" />\r\n    </main>\r\n    <label [class]=\"labelClasses()\" for=\"checkbox\">\r\n        <ng-content />\r\n    </label>\r\n</div>" }]
+        }], ctorParameters: () => [], 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 }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], changeCheck: [{ type: i0.Output, args: ["changeCheck"] }] } });
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/checkbox.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/checkbox.html"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, input, model, output, signal, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormCheckboxControl } from \"@angular/forms/signals\";\r\n\r\nimport { ChangeFn, mergeClasses, noopFn, TouchFn } from \"../../../core\";\r\nimport { AiIcon } from \"../../icon\";\r\nimport { checkboxLabelVariants, checkboxVariants, CheckboxVariants } from \"./checkbox.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-checkbox, [ai-checkbox]\",\r\n    exportAs: \"aiCheckbox\",\r\n    imports: [AiIcon],\r\n    templateUrl: \"./checkbox.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AiCheckbox implements FormCheckboxControl {\r\n    #cdr = inject(ChangeDetectorRef);\r\n\r\n    variant = input<CheckboxVariants[\"variant\"]>(\"primary\");\r\n    size = input<CheckboxVariants[\"size\"]>(\"default\");\r\n    shape = input<CheckboxVariants[\"shape\"]>(\"default\");\r\n\r\n    class = input<ClassValue>(\"\");\r\n    id = input<string>(\"\");\r\n    disabled = input<boolean>(false);\r\n    value = undefined;\r\n    touched = model<boolean>(false);\r\n    checked = model<boolean>(false);\r\n    indeterminate = input<boolean>(false);\r\n\r\n    changeCheck = output<boolean>();\r\n\r\n    protected _change: ChangeFn<boolean> = () => noopFn;\r\n    protected _touched: TouchFn = () => noopFn;\r\n\r\n    protected _internalVariant = signal<CheckboxVariants[\"variant\"] | null>(null);\r\n\r\n    protected hasError = computed(() => {\r\n        return !this.checked() && this.touched();\r\n    });\r\n\r\n    protected effectiveVariant = computed(() => this._internalVariant() ?? this.variant());\r\n    protected classes = computed(() => mergeClasses(checkboxVariants({ variant: this.effectiveVariant(), size: this.size(), shape: this.shape() }), this.class()));\r\n    protected labelClasses = computed(() => mergeClasses(checkboxLabelVariants({ size: this.size(), variant: this.effectiveVariant() }), this.class()));\r\n\r\n    constructor() {\r\n        effect(() => this._updateVariant());\r\n    }\r\n\r\n    onCheckboxBlur() {\r\n        this._touched();\r\n        this.#cdr.markForCheck();\r\n    }\r\n\r\n    onCheckboxChange() {\r\n        if (this.disabled()) return;\r\n\r\n        this.checked.set(!this.checked());\r\n        this._change(this.checked() as boolean);\r\n        this.changeCheck.emit(this.checked());\r\n        this.#cdr.markForCheck();\r\n    }\r\n\r\n    onKeyboardEvent(event: KeyboardEvent) {\r\n        if (event.key === \" \" || event.key === \"Enter\") {\r\n            event.preventDefault();\r\n            this.onCheckboxChange();\r\n        }\r\n    }\r\n\r\n    private _updateVariant() {\r\n        this._internalVariant.set(this.hasError() ? \"destructive\" : null);\r\n    }\r\n}\r\n","<div tabindex=\"0\" class=\"flex items-center gap-2\"\r\n    [class]=\"disabled() ? 'cursor-not-allowed' : 'cursor-pointer'\"\r\n    (click)=\"onCheckboxChange()\"\r\n    (keyup)=\"onKeyboardEvent($event)\">\r\n    @let check = checked();\r\n    <main class=\"flex relative\">\r\n        <input #input [id]=\"id()\" type=\"checkbox\" [class]=\"classes()\" [checked]=\"check\" [disabled]=\"disabled()\" (blur)=\"onCheckboxBlur()\" name=\"checkbox\" />\r\n        <ai-icon [icon]=\"check ? 'check' : ''\" \r\n            [size]=\"size()\"\r\n            [class]=\"`${check ? 'opacity-100' : 'opacity-0'} absolute flex items-center justify-center text-primary-foreground top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity`\" />\r\n    </main>\r\n    <label [class]=\"labelClasses()\" for=\"checkbox\">\r\n        <ng-content />\r\n    </label>\r\n</div>"]}

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

@@ -0,0 +1,39 @@
+import { cva } from "class-variance-authority";
+export const checkboxVariants = cva("cursor-[unset] peer appearance-none border transition shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        variant: {
+            primary: "border-primary checked:bg-primary",
+            destructive: "border-destructive checked:bg-destructive",
+        },
+        size: {
+            default: "h-4 w-4",
+            lg: "h-6 w-6",
+        },
+        shape: {
+            default: "rounded",
+            circle: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "default",
+        shape: "default",
+    },
+});
+export const checkboxLabelVariants = cva("cursor-[unset] empty:hidden", {
+    variants: {
+        variant: {
+            primary: "text-muted-foreground",
+            destructive: "text-destructive",
+        },
+        size: {
+            default: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "default",
+    },
+});
+//# sourceMappingURL=checkbox.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/checkbox.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAC/B,sMAAsM,EACtM;IACI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,mCAAmC;YAC5C,WAAW,EAAE,2CAA2C;SAC3D;QACD,IAAI,EAAE;YACF,OAAO,EAAE,SAAS;YAClB,EAAE,EAAE,SAAS;SAChB;QACD,KAAK,EAAE;YACH,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,cAAc;SACzB;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;KACnB;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,6BAA6B,EAAE;IACpE,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,uBAAuB;YAChC,WAAW,EAAE,kBAAkB;SAClC;QACD,IAAI,EAAE;YACF,OAAO,EAAE,SAAS;YAClB,EAAE,EAAE,WAAW;SAClB;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAClB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const checkboxVariants = cva(\r\n    \"cursor-[unset] peer appearance-none border transition shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                primary: \"border-primary checked:bg-primary\",\r\n                destructive: \"border-destructive checked:bg-destructive\",\r\n            },\r\n            size: {\r\n                default: \"h-4 w-4\",\r\n                lg: \"h-6 w-6\",\r\n            },\r\n            shape: {\r\n                default: \"rounded\",\r\n                circle: \"rounded-full\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"primary\",\r\n            size: \"default\",\r\n            shape: \"default\",\r\n        },\r\n    },\r\n);\r\n\r\nexport const checkboxLabelVariants = cva(\"cursor-[unset] empty:hidden\", {\r\n    variants: {\r\n        variant: {\r\n            primary: \"text-muted-foreground\",\r\n            destructive: \"text-destructive\",\r\n        },\r\n        size: {\r\n            default: \"text-sm\",\r\n            lg: \"text-base\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        variant: \"primary\",\r\n        size: \"default\",\r\n    },\r\n});\r\n\r\nexport type CheckboxVariants = VariantProps<typeof checkboxVariants>;\r\nexport type CheckboxLabelVariants = VariantProps<typeof checkboxLabelVariants>;\r\n"]}

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

@@ -0,0 +1,37 @@
+import { DemoCheckboxDefaultComponent } from "./default";
+import { DemoCheckboxDestructiveComponent } from "./destructive";
+import { DemoCheckboxDisabledComponent } from "./disabled";
+import { DemoCheckboxShapeComponent } from "./shape";
+import { DemoCheckboxSizeComponent } from "./size";
+import { DemoCheckboxValidationComponent } from "./validation";
+export const CHECKBOX = {
+    componentName: "checkbox",
+    componentType: "checkbox",
+    examples: [
+        {
+            name: "default",
+            component: DemoCheckboxDefaultComponent,
+        },
+        {
+            name: "destructive",
+            component: DemoCheckboxDestructiveComponent,
+        },
+        {
+            name: "size",
+            component: DemoCheckboxSizeComponent,
+        },
+        {
+            name: "shape",
+            component: DemoCheckboxShapeComponent,
+        },
+        {
+            name: "disabled",
+            component: DemoCheckboxDisabledComponent,
+        },
+        {
+            name: "validation",
+            component: DemoCheckboxValidationComponent,
+        },
+    ],
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/demo/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,aAAa,EAAE,UAAU;IACzB,aAAa,EAAE,UAAU;IACzB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,4BAA4B;SAC1C;QACD;YACI,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,gCAAgC;SAC9C;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,yBAAyB;SACvC;QACD;YACI,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,6BAA6B;SAC3C;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,+BAA+B;SAC7C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoCheckboxDefaultComponent } from \"./default\";\r\nimport { DemoCheckboxDestructiveComponent } from \"./destructive\";\r\nimport { DemoCheckboxDisabledComponent } from \"./disabled\";\r\nimport { DemoCheckboxShapeComponent } from \"./shape\";\r\nimport { DemoCheckboxSizeComponent } from \"./size\";\r\nimport { DemoCheckboxValidationComponent } from \"./validation\";\r\n\r\nexport const CHECKBOX = {\r\n    componentName: \"checkbox\",\r\n    componentType: \"checkbox\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoCheckboxDefaultComponent,\r\n        },\r\n        {\r\n            name: \"destructive\",\r\n            component: DemoCheckboxDestructiveComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoCheckboxSizeComponent,\r\n        },\r\n        {\r\n            name: \"shape\",\r\n            component: DemoCheckboxShapeComponent,\r\n        },\r\n        {\r\n            name: \"disabled\",\r\n            component: DemoCheckboxDisabledComponent,\r\n        },\r\n        {\r\n            name: \"validation\",\r\n            component: DemoCheckboxValidationComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

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

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { AiCheckbox } from "../checkbox";
+import * as i0 from "@angular/core";
+export class DemoCheckboxDefaultComponent {
+    state = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoCheckboxDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox />
+            <ai-checkbox [checked]="state">Checkbox</ai-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiCheckbox, selector: "ai-checkbox, [ai-checkbox]", inputs: ["variant", "size", "shape", "class", "id", "disabled", "touched", "checked", "indeterminate"], outputs: ["touchedChange", "checkedChange", "changeCheck"], exportAs: ["aiCheckbox"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiCheckbox, FormsModule],
+                    template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox />
+            <ai-checkbox [checked]="state">Checkbox</ai-checkbox>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAWzC,MAAM,OAAO,4BAA4B;IACrC,KAAK,GAAG,IAAI,CAAC;uGADJ,4BAA4B;2FAA5B,4BAA4B,wEAP3B;;;;;KAKT,4DANS,UAAU,oQAAE,WAAW;;2FAQxB,4BAA4B;kBATxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC;oBAClC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { FormsModule } from \"@angular/forms\";\r\n\r\nimport { AiCheckbox } from \"../checkbox\";\r\n\r\n@Component({\r\n    imports: [AiCheckbox, FormsModule],\r\n    template: `\r\n        <div class=\"flex items-center justify-center gap-x-4 w-full max-w-sm\">\r\n            <ai-checkbox />\r\n            <ai-checkbox [checked]=\"state\">Checkbox</ai-checkbox>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoCheckboxDefaultComponent {\r\n    state = true;\r\n}\r\n"]}

package/esm2022/lib/components/form-field/checkbox/demo/destructive.js

@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { AiCheckbox } from "../checkbox";
+import * as i0 from "@angular/core";
+export class DemoCheckboxDestructiveComponent {
+    state = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDestructiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoCheckboxDestructiveComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox variant="destructive" />
+            <ai-checkbox variant="destructive" [checked]="state">Checkbox</ai-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiCheckbox, selector: "ai-checkbox, [ai-checkbox]", inputs: ["variant", "size", "shape", "class", "id", "disabled", "touched", "checked", "indeterminate"], outputs: ["touchedChange", "checkedChange", "changeCheck"], exportAs: ["aiCheckbox"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDestructiveComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiCheckbox, FormsModule],
+                    template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox variant="destructive" />
+            <ai-checkbox variant="destructive" [checked]="state">Checkbox</ai-checkbox>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=destructive.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"destructive.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/demo/destructive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAWzC,MAAM,OAAO,gCAAgC;IACzC,KAAK,GAAG,IAAI,CAAC;uGADJ,gCAAgC;2FAAhC,gCAAgC,wEAP/B;;;;;KAKT,4DANS,UAAU,oQAAE,WAAW;;2FAQxB,gCAAgC;kBAT5C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC;oBAClC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { FormsModule } from \"@angular/forms\";\r\n\r\nimport { AiCheckbox } from \"../checkbox\";\r\n\r\n@Component({\r\n    imports: [AiCheckbox, FormsModule],\r\n    template: `\r\n        <div class=\"flex items-center justify-center gap-x-4 w-full max-w-sm\">\r\n            <ai-checkbox variant=\"destructive\" />\r\n            <ai-checkbox variant=\"destructive\" [checked]=\"state\">Checkbox</ai-checkbox>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoCheckboxDestructiveComponent {\r\n    state = true;\r\n}\r\n"]}

package/esm2022/lib/components/form-field/checkbox/demo/disabled.js

@@ -0,0 +1,28 @@
+import { Component, signal } from "@angular/core";
+import { disabled, form, FormField } from "@angular/forms/signals";
+import { AiCheckbox } from "../checkbox";
+import * as i0 from "@angular/core";
+export class DemoCheckboxDisabledComponent {
+    state = signal(true, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    form = form(this.state, schema => disabled(schema));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoCheckboxDisabledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox [disabled]="true">Disabled</ai-checkbox>
+            <ai-checkbox [formField]="form">Disabled</ai-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiCheckbox, selector: "ai-checkbox, [ai-checkbox]", inputs: ["variant", "size", "shape", "class", "id", "disabled", "touched", "checked", "indeterminate"], outputs: ["touchedChange", "checkedChange", "changeCheck"], exportAs: ["aiCheckbox"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxDisabledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiCheckbox, FormField],
+                    template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox [disabled]="true">Disabled</ai-checkbox>
+            <ai-checkbox [formField]="form">Disabled</ai-checkbox>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=disabled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/demo/disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAWzC,MAAM,OAAO,6BAA6B;IACtC,KAAK,GAAG,MAAM,CAAC,IAAI,iDAAC,CAAC;IAErB,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;uGAH3C,6BAA6B;2FAA7B,6BAA6B,wEAP5B;;;;;KAKT,4DANS,UAAU,qQAAE,SAAS;;2FAQtB,6BAA6B;kBATzC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;oBAChC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { disabled, form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiCheckbox } from \"../checkbox\";\r\n\r\n@Component({\r\n    imports: [AiCheckbox, FormField],\r\n    template: `\r\n        <div class=\"flex items-center justify-center gap-x-4 w-full max-w-sm\">\r\n            <ai-checkbox [disabled]=\"true\">Disabled</ai-checkbox>\r\n            <ai-checkbox [formField]=\"form\">Disabled</ai-checkbox>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoCheckboxDisabledComponent {\r\n    state = signal(true);\r\n\r\n    form = form(this.state, schema => disabled(schema));\r\n}\r\n"]}

package/esm2022/lib/components/form-field/checkbox/demo/shape.js

@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+import { AiCheckbox } from "../checkbox";
+import * as i0 from "@angular/core";
+export class DemoCheckboxShapeComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoCheckboxShapeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox shape="default" [checked]="true">Default</ai-checkbox>
+            <ai-checkbox shape="circle" [checked]="true">Circle</ai-checkbox>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiCheckbox, selector: "ai-checkbox, [ai-checkbox]", inputs: ["variant", "size", "shape", "class", "id", "disabled", "touched", "checked", "indeterminate"], outputs: ["touchedChange", "checkedChange", "changeCheck"], exportAs: ["aiCheckbox"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoCheckboxShapeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiCheckbox],
+                    template: `
+        <div class="flex items-center justify-center gap-x-4 w-full max-w-sm">
+            <ai-checkbox shape="default" [checked]="true">Default</ai-checkbox>
+            <ai-checkbox shape="circle" [checked]="true">Circle</ai-checkbox>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=shape.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/checkbox/demo/shape.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAWzC,MAAM,OAAO,0BAA0B;uGAA1B,0BAA0B;2FAA1B,0BAA0B,wEAPzB;;;;;KAKT,4DANS,UAAU;;2FAQX,0BAA0B;kBATtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiCheckbox } from \"../checkbox\";\r\n\r\n@Component({\r\n    imports: [AiCheckbox],\r\n    template: `\r\n        <div class=\"flex items-center justify-center gap-x-4 w-full max-w-sm\">\r\n            <ai-checkbox shape=\"default\" [checked]=\"true\">Default</ai-checkbox>\r\n            <ai-checkbox shape=\"circle\" [checked]=\"true\">Circle</ai-checkbox>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoCheckboxShapeComponent {}\r\n"]}