@aiandralves/ai-ui 1.0.0

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, input, model, output, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import { switchLabelVariants, switchThumbVariants, switchVariants } from "./switch.variants";
+import * as i0 from "@angular/core";
+export class AiSwitch {
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("normal", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    value = undefined;
+    changeCheck = output();
+    classes = computed(() => mergeClasses(switchVariants({ variant: this.variant(), size: this.size() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    thumbClasses = computed(() => mergeClasses(switchThumbVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    labelClasses = computed(() => mergeClasses(switchLabelVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    onToggle() {
+        if (this.disabled())
+            return;
+        this.checked.set(!this.checked());
+        this.changeCheck.emit(this.checked());
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiSwitch, isStandalone: true, selector: "ai-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", changeCheck: "changeCheck" }, exportAs: ["aiSwitch"], ngImport: i0, template: "<label class=\"inline-flex items-center gap-2\" [class]=\"disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\">\r\n    <button\r\n        type=\"button\"\r\n        role=\"switch\"\r\n        [attr.id]=\"id()\"\r\n        [class]=\"classes()\"\r\n        [attr.aria-checked]=\"checked()\"\r\n        [attr.data-checked]=\"checked() ? '' : null\"\r\n        [attr.data-disabled]=\"disabled() ? '' : null\"\r\n        [disabled]=\"disabled()\"\r\n        (click)=\"onToggle()\"\r\n        (blur)=\"onBlur()\"\r\n        (keydown.space.prevent)=\"onToggle()\">\r\n        <span [class]=\"thumbClasses()\" [attr.data-checked]=\"checked() ? '' : null\"></span>\r\n    </button>\r\n    <span [class]=\"labelClasses()\" class=\"text-muted-foreground\">\r\n        <ng-content />\r\n    </span>\r\n</label>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-switch", exportAs: "aiSwitch", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label class=\"inline-flex items-center gap-2\" [class]=\"disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\">\r\n    <button\r\n        type=\"button\"\r\n        role=\"switch\"\r\n        [attr.id]=\"id()\"\r\n        [class]=\"classes()\"\r\n        [attr.aria-checked]=\"checked()\"\r\n        [attr.data-checked]=\"checked() ? '' : null\"\r\n        [attr.data-disabled]=\"disabled() ? '' : null\"\r\n        [disabled]=\"disabled()\"\r\n        (click)=\"onToggle()\"\r\n        (blur)=\"onBlur()\"\r\n        (keydown.space.prevent)=\"onToggle()\">\r\n        <span [class]=\"thumbClasses()\" [attr.data-checked]=\"checked() ? '' : null\"></span>\r\n    </button>\r\n    <span [class]=\"labelClasses()\" class=\"text-muted-foreground\">\r\n        <ng-content />\r\n    </span>\r\n</label>\r\n" }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], changeCheck: [{ type: i0.Output, args: ["changeCheck"] }] } });
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/switch/switch.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/switch/switch.html"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGtH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;;AAS7G,MAAM,OAAO,QAAQ;IACR,EAAE,GAAG,KAAK,CAAS,EAAE,8CAAC,CAAC;IACvB,OAAO,GAAG,KAAK,CAA4B,SAAS,mDAAC,CAAC;IACtD,IAAI,GAAG,KAAK,CAAyB,QAAQ,gDAAC,CAAC;IAC/C,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAC9B,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEjC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IACzC,KAAK,GAAG,SAAS,CAAC;IAET,WAAW,GAAG,MAAM,EAAW,CAAC;IAEtB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IACrH,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,wDAAC,CAAC;IACxF,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,wDAAC,CAAC;IAE3G,QAAQ;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACF,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;uGAzBQ,QAAQ;2FAAR,QAAQ,6hCCfrB,izBAmBA;;2FDJa,QAAQ;kBAPpB,SAAS;+BACI,WAAW,YACX,UAAU,mBAEH,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, input, model, output, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormCheckboxControl } from \"@angular/forms/signals\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\nimport { switchLabelVariants, switchThumbVariants, switchVariants, SwitchVariants } from \"./switch.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-switch\",\r\n    exportAs: \"aiSwitch\",\r\n    templateUrl: \"./switch.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AiSwitch implements FormCheckboxControl {\r\n    readonly id = input<string>(\"\");\r\n    readonly variant = input<SwitchVariants[\"variant\"]>(\"primary\");\r\n    readonly size = input<SwitchVariants[\"size\"]>(\"normal\");\r\n    readonly class = input<ClassValue>(\"\");\r\n    readonly disabled = input<boolean>(false);\r\n\r\n    readonly checked = model<boolean>(false);\r\n    readonly touched = model<boolean>(false);\r\n    value = undefined;\r\n\r\n    readonly changeCheck = output<boolean>();\r\n\r\n    protected readonly classes = computed(() => mergeClasses(switchVariants({ variant: this.variant(), size: this.size() }), this.class()));\r\n    protected readonly thumbClasses = computed(() => mergeClasses(switchThumbVariants({ size: this.size() })));\r\n    protected readonly labelClasses = computed(() => mergeClasses(switchLabelVariants({ size: this.size() })));\r\n\r\n    onToggle() {\r\n        if (this.disabled()) return;\r\n        this.checked.set(!this.checked());\r\n        this.changeCheck.emit(this.checked());\r\n    }\r\n\r\n    onBlur() {\r\n        this.touched.set(true);\r\n    }\r\n}\r\n","<label class=\"inline-flex items-center gap-2\" [class]=\"disabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\">\r\n    <button\r\n        type=\"button\"\r\n        role=\"switch\"\r\n        [attr.id]=\"id()\"\r\n        [class]=\"classes()\"\r\n        [attr.aria-checked]=\"checked()\"\r\n        [attr.data-checked]=\"checked() ? '' : null\"\r\n        [attr.data-disabled]=\"disabled() ? '' : null\"\r\n        [disabled]=\"disabled()\"\r\n        (click)=\"onToggle()\"\r\n        (blur)=\"onBlur()\"\r\n        (keydown.space.prevent)=\"onToggle()\">\r\n        <span [class]=\"thumbClasses()\" [attr.data-checked]=\"checked() ? '' : null\"></span>\r\n    </button>\r\n    <span [class]=\"labelClasses()\" class=\"text-muted-foreground\">\r\n        <ng-content />\r\n    </span>\r\n</label>\r\n"]}

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

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+export const switchVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        variant: {
+            primary: "data-checked:bg-primary bg-input",
+            accent: "data-checked:bg-accent bg-input",
+            destructive: "data-checked:bg-destructive bg-input",
+        },
+        size: {
+            sm: "h-4 w-8",
+            normal: "h-5 w-10",
+            lg: "h-6 w-12",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "normal",
+    },
+});
+export const switchThumbVariants = cva("pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform", {
+    variants: {
+        size: {
+            sm: "size-3 data-checked:translate-x-4",
+            normal: "size-4 data-checked:translate-x-5",
+            lg: "size-5 data-checked:translate-x-6",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+export const switchLabelVariants = cva("cursor-pointer select-none empty:hidden", {
+    variants: {
+        size: {
+            sm: "text-xs",
+            normal: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+//# sourceMappingURL=switch.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/switch/switch.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC7B,+SAA+S,EAC/S;IACI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,kCAAkC;YAC3C,MAAM,EAAE,iCAAiC;YACzC,WAAW,EAAE,sCAAsC;SACtD;QACD,IAAI,EAAE;YACF,EAAE,EAAE,SAAS;YACb,MAAM,EAAE,UAAU;YAClB,EAAE,EAAE,UAAU;SACjB;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;KACjB;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,4FAA4F,EAAE;IACjI,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,mCAAmC;YACvC,MAAM,EAAE,mCAAmC;YAC3C,EAAE,EAAE,mCAAmC;SAC1C;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,yCAAyC,EAAE;IAC9E,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,SAAS;YACb,MAAM,EAAE,SAAS;YACjB,EAAE,EAAE,WAAW;SAClB;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const switchVariants = cva(\r\n    \"relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                primary: \"data-checked:bg-primary bg-input\",\r\n                accent: \"data-checked:bg-accent bg-input\",\r\n                destructive: \"data-checked:bg-destructive bg-input\",\r\n            },\r\n            size: {\r\n                sm: \"h-4 w-8\",\r\n                normal: \"h-5 w-10\",\r\n                lg: \"h-6 w-12\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"primary\",\r\n            size: \"normal\",\r\n        },\r\n    },\r\n);\r\n\r\nexport const switchThumbVariants = cva(\"pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform\", {\r\n    variants: {\r\n        size: {\r\n            sm: \"size-3 data-checked:translate-x-4\",\r\n            normal: \"size-4 data-checked:translate-x-5\",\r\n            lg: \"size-5 data-checked:translate-x-6\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"normal\",\r\n    },\r\n});\r\n\r\nexport const switchLabelVariants = cva(\"cursor-pointer select-none empty:hidden\", {\r\n    variants: {\r\n        size: {\r\n            sm: \"text-xs\",\r\n            normal: \"text-sm\",\r\n            lg: \"text-base\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"normal\",\r\n    },\r\n});\r\n\r\nexport type SwitchVariants = VariantProps<typeof switchVariants>;\r\n"]}

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

@@ -0,0 +1,26 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiTextarea } from "../textarea";
+import * as i0 from "@angular/core";
+export class DemoTextareaDefaultComponent {
+    schema = signal({ description: "" }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    form = form(this.schema);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTextareaDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="max-w-sm w-full">
+            <ai-textarea class="w-full" label="Description" [formField]="form.description" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTextarea, selector: "ai-textarea", inputs: ["id", "label", "placeholder", "variant", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "rows", "resize", "errors"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiTextarea"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTextarea, FormField],
+                    template: `
+        <div class="max-w-sm w-full">
+            <ai-textarea class="w-full" label="Description" [formField]="form.description" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/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,UAAU,EAAE,MAAM,aAAa,CAAC;;AAUzC,MAAM,OAAO,4BAA4B;IACrC,MAAM,GAAG,MAAM,CAA0B,EAAE,WAAW,EAAE,EAAE,EAAE,kDAAC,CAAC;IAE9D,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;uGAHhB,4BAA4B;2FAA5B,4BAA4B,wEAN3B;;;;KAIT,4DALS,UAAU,kTAAE,SAAS;;2FAOtB,4BAA4B;kBARxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;oBAChC,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiTextarea } from \"../textarea\";\r\n\r\n@Component({\r\n    imports: [AiTextarea, FormField],\r\n    template: `\r\n        <div class=\"max-w-sm w-full\">\r\n            <ai-textarea class=\"w-full\" label=\"Description\" [formField]=\"form.description\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTextareaDefaultComponent {\r\n    schema = signal<{ description: string }>({ description: \"\" });\r\n\r\n    form = form(this.schema);\r\n}\r\n"]}

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

@@ -0,0 +1,28 @@
+import { Component, signal } from "@angular/core";
+import { disabled, form, FormField } from "@angular/forms/signals";
+import { AiTextarea } from "../textarea";
+import * as i0 from "@angular/core";
+export class DemoTextareaDisabledComponent {
+    schema = signal({ description: "" }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    form = form(this.schema, schema => {
+        disabled(schema.description);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTextareaDisabledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="max-w-sm w-full">
+            <ai-textarea class="w-full" label="Description" [formField]="form.description" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTextarea, selector: "ai-textarea", inputs: ["id", "label", "placeholder", "variant", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "rows", "resize", "errors"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiTextarea"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaDisabledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTextarea, FormField],
+                    template: `
+        <div class="max-w-sm w-full">
+            <ai-textarea class="w-full" label="Description" [formField]="form.description" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=disabled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/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;;AAUzC,MAAM,OAAO,6BAA6B;IACtC,MAAM,GAAG,MAAM,CAA0B,EAAE,WAAW,EAAE,EAAE,EAAE,kDAAC,CAAC;IAE9D,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;QAC9B,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;uGALM,6BAA6B;2FAA7B,6BAA6B,wEAN5B;;;;KAIT,4DALS,UAAU,kTAAE,SAAS;;2FAOtB,6BAA6B;kBARzC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;oBAChC,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { disabled, form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiTextarea } from \"../textarea\";\r\n\r\n@Component({\r\n    imports: [AiTextarea, FormField],\r\n    template: `\r\n        <div class=\"max-w-sm w-full\">\r\n            <ai-textarea class=\"w-full\" label=\"Description\" [formField]=\"form.description\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTextareaDisabledComponent {\r\n    schema = signal<{ description: string }>({ description: \"\" });\r\n\r\n    form = form(this.schema, schema => {\r\n        disabled(schema.description);\r\n    });\r\n}\r\n"]}

package/esm2022/lib/components/form-field/textarea/demo/resize.js

@@ -0,0 +1,34 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiTextarea } from "../textarea";
+import * as i0 from "@angular/core";
+export class DemoTextareaResizeComponent {
+    schema = signal({
+        none: "",
+        vertical: "",
+        both: "",
+    }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    form = form(this.schema);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaResizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTextareaResizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-6 max-w-sm w-full">
+            <ai-textarea resize="none" label="Resize None (padrão)" [formField]="form.none" />
+            <ai-textarea resize="vertical" label="Resize Vertical" [formField]="form.vertical" />
+            <ai-textarea resize="both" label="Resize Both" [formField]="form.both" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTextarea, selector: "ai-textarea", inputs: ["id", "label", "placeholder", "variant", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "rows", "resize", "errors"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiTextarea"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaResizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTextarea, FormField],
+                    template: `
+        <div class="flex flex-col gap-y-6 max-w-sm w-full">
+            <ai-textarea resize="none" label="Resize None (padrão)" [formField]="form.none" />
+            <ai-textarea resize="vertical" label="Resize Vertical" [formField]="form.vertical" />
+            <ai-textarea resize="both" label="Resize Both" [formField]="form.both" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=resize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/demo/resize.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,UAAU,EAAE,MAAM,aAAa,CAAC;;AAYzC,MAAM,OAAO,2BAA2B;IACpC,MAAM,GAAG,MAAM,CAAmD;QAC9D,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,EAAE;QACZ,IAAI,EAAE,EAAE;KACX,kDAAC,CAAC;IAEH,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;uGAPhB,2BAA2B;2FAA3B,2BAA2B,wEAR1B;;;;;;KAMT,4DAPS,UAAU,kTAAE,SAAS;;2FAStB,2BAA2B;kBAVvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;oBAChC,QAAQ,EAAE;;;;;;KAMT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiTextarea } from \"../textarea\";\r\n\r\n@Component({\r\n    imports: [AiTextarea, FormField],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-6 max-w-sm w-full\">\r\n            <ai-textarea resize=\"none\" label=\"Resize None (padrão)\" [formField]=\"form.none\" />\r\n            <ai-textarea resize=\"vertical\" label=\"Resize Vertical\" [formField]=\"form.vertical\" />\r\n            <ai-textarea resize=\"both\" label=\"Resize Both\" [formField]=\"form.both\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTextareaResizeComponent {\r\n    schema = signal<{ none: string; vertical: string; both: string }>({\r\n        none: \"\",\r\n        vertical: \"\",\r\n        both: \"\",\r\n    });\r\n\r\n    form = form(this.schema);\r\n}\r\n"]}

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

@@ -0,0 +1,32 @@
+import { DemoTextareaDefaultComponent } from "./default";
+import { DemoTextareaDisabledComponent } from "./disabled";
+import { DemoTextareaResizeComponent } from "./resize";
+import { DemoTextareaValidationComponent } from "./validation";
+import { DemoTextareaVariantComponent } from "./variant";
+export const TEXTAREA = {
+    componentName: "textarea",
+    componentType: "textarea",
+    examples: [
+        {
+            name: "default",
+            component: DemoTextareaDefaultComponent,
+        },
+        {
+            name: "variant",
+            component: DemoTextareaVariantComponent,
+        },
+        {
+            name: "resize",
+            component: DemoTextareaResizeComponent,
+        },
+        {
+            name: "validation",
+            component: DemoTextareaValidationComponent,
+        },
+        {
+            name: "disabled",
+            component: DemoTextareaDisabledComponent,
+        },
+    ],
+};
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/demo/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,+BAA+B,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAC;AAEzD,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,SAAS;YACf,SAAS,EAAE,4BAA4B;SAC1C;QACD;YACI,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,2BAA2B;SACzC;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,+BAA+B;SAC7C;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,6BAA6B;SAC3C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoTextareaDefaultComponent } from \"./default\";\r\nimport { DemoTextareaDisabledComponent } from \"./disabled\";\r\nimport { DemoTextareaResizeComponent } from \"./resize\";\r\nimport { DemoTextareaValidationComponent } from \"./validation\";\r\nimport { DemoTextareaVariantComponent } from \"./variant\";\r\n\r\nexport const TEXTAREA = {\r\n    componentName: \"textarea\",\r\n    componentType: \"textarea\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoTextareaDefaultComponent,\r\n        },\r\n        {\r\n            name: \"variant\",\r\n            component: DemoTextareaVariantComponent,\r\n        },\r\n        {\r\n            name: \"resize\",\r\n            component: DemoTextareaResizeComponent,\r\n        },\r\n        {\r\n            name: \"validation\",\r\n            component: DemoTextareaValidationComponent,\r\n        },\r\n        {\r\n            name: \"disabled\",\r\n            component: DemoTextareaDisabledComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

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

@@ -0,0 +1,53 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField, minLength, required, submit } from "@angular/forms/signals";
+import { AiButton } from "../../../button";
+import { AiTextarea } from "../textarea";
+import * as i0 from "@angular/core";
+export class DemoTextareaValidationComponent {
+    schema = signal({ description: "" }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema, schema => {
+        required(schema.description, { message: "Descrição é um campo obrigatório." });
+        minLength(schema.description, 10, { message: "A descrição deve ter no mínimo 10 caracteres." });
+    });
+    async onConfirm() {
+        await submit(this.schemaForm, async () => {
+            console.log("válido ✓", this.schema());
+            return [];
+        });
+        if (this.schemaForm().invalid) {
+            console.log("inválido ✗", this.schemaForm().invalid);
+        }
+    }
+    reset() {
+        this.schema.set({ description: "" });
+        this.schemaForm().reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTextareaValidationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-6 max-w-lg">
+            <ai-textarea label="Description" [formField]="schemaForm.description" [minlength]="10" [maxlength]="200" class="w-full" />
+
+            <div class="flex gap-2">
+                <ai-button size="sm" variant="primary" type="button" (click)="onConfirm()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" type="button" (click)="reset()">Resetar</ai-button>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTextarea, selector: "ai-textarea", inputs: ["id", "label", "placeholder", "variant", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "rows", "resize", "errors"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiTextarea"] }, { 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: DemoTextareaValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTextarea, FormField, AiButton],
+                    template: `
+        <div class="flex flex-col gap-y-6 max-w-lg">
+            <ai-textarea label="Description" [formField]="schemaForm.description" [minlength]="10" [maxlength]="200" class="w-full" />
+
+            <div class="flex gap-2">
+                <ai-button size="sm" variant="primary" type="button" (click)="onConfirm()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" type="button" (click)="reset()">Resetar</ai-button>
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=validation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/demo/validation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEtF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAezC,MAAM,OAAO,+BAA+B;IACxC,MAAM,GAAG,MAAM,CAA0B,EAAE,WAAW,EAAE,EAAE,EAAE,kDAAC,CAAC;IAE9D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;QACpC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,mCAAmC,EAAE,CAAC,CAAC;QAC/E,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,+CAA+C,EAAE,CAAC,CAAC;IACpG,CAAC,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;QAEH,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC;YAC5B,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC;IACL,CAAC;IAED,KAAK;QACD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;uGAtBQ,+BAA+B;2FAA/B,+BAA+B,wEAX9B;;;;;;;;;KAST,4DAVS,UAAU,kTAAE,SAAS,+EAAE,QAAQ;;2FAYhC,+BAA+B;kBAb3C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC;oBAC1C,QAAQ,EAAE;;;;;;;;;KAST;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField, minLength, required, submit } from \"@angular/forms/signals\";\r\n\r\nimport { AiButton } from \"../../../button\";\r\nimport { AiTextarea } from \"../textarea\";\r\n\r\n@Component({\r\n    imports: [AiTextarea, FormField, AiButton],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-6 max-w-lg\">\r\n            <ai-textarea label=\"Description\" [formField]=\"schemaForm.description\" [minlength]=\"10\" [maxlength]=\"200\" class=\"w-full\" />\r\n\r\n            <div class=\"flex gap-2\">\r\n                <ai-button size=\"sm\" variant=\"primary\" type=\"button\" (click)=\"onConfirm()\">Validar</ai-button>\r\n                <ai-button size=\"sm\" fill=\"line\" variant=\"destructive\" type=\"button\" (click)=\"reset()\">Resetar</ai-button>\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTextareaValidationComponent {\r\n    schema = signal<{ description: string }>({ description: \"\" });\r\n\r\n    schemaForm = form(this.schema, schema => {\r\n        required(schema.description, { message: \"Descrição é um campo obrigatório.\" });\r\n        minLength(schema.description, 10, { message: \"A descrição deve ter no mínimo 10 caracteres.\" });\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        if (this.schemaForm().invalid) {\r\n            console.log(\"inválido ✗\", this.schemaForm().invalid);\r\n        }\r\n    }\r\n\r\n    reset() {\r\n        this.schema.set({ description: \"\" });\r\n        this.schemaForm().reset();\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/form-field/textarea/demo/variant.js

@@ -0,0 +1,34 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiTextarea } from "../textarea";
+import * as i0 from "@angular/core";
+export class DemoTextareaVariantComponent {
+    schema = signal({
+        standard: "",
+        outlined: "",
+        filled: "",
+    }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    form = form(this.schema);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaVariantComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoTextareaVariantComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-6 max-w-sm w-full">
+            <ai-textarea variant="standard" label="Standard" [formField]="form.standard" />
+            <ai-textarea variant="outlined" label="Outlined" [formField]="form.outlined" />
+            <ai-textarea variant="filled" label="Filled" placeholder="Filled textarea" [formField]="form.filled" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiTextarea, selector: "ai-textarea", inputs: ["id", "label", "placeholder", "variant", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "rows", "resize", "errors"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiTextarea"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoTextareaVariantComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiTextarea, FormField],
+                    template: `
+        <div class="flex flex-col gap-y-6 max-w-sm w-full">
+            <ai-textarea variant="standard" label="Standard" [formField]="form.standard" />
+            <ai-textarea variant="outlined" label="Outlined" [formField]="form.outlined" />
+            <ai-textarea variant="filled" label="Filled" placeholder="Filled textarea" [formField]="form.filled" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=variant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variant.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/demo/variant.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,UAAU,EAAE,MAAM,aAAa,CAAC;;AAYzC,MAAM,OAAO,4BAA4B;IACrC,MAAM,GAAG,MAAM,CAAyD;QACpE,QAAQ,EAAE,EAAE;QACZ,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,EAAE;KACb,kDAAC,CAAC;IAEH,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;uGAPhB,4BAA4B;2FAA5B,4BAA4B,wEAR3B;;;;;;KAMT,4DAPS,UAAU,kTAAE,SAAS;;2FAStB,4BAA4B;kBAVxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC;oBAChC,QAAQ,EAAE;;;;;;KAMT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiTextarea } from \"../textarea\";\r\n\r\n@Component({\r\n    imports: [AiTextarea, FormField],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-6 max-w-sm w-full\">\r\n            <ai-textarea variant=\"standard\" label=\"Standard\" [formField]=\"form.standard\" />\r\n            <ai-textarea variant=\"outlined\" label=\"Outlined\" [formField]=\"form.outlined\" />\r\n            <ai-textarea variant=\"filled\" label=\"Filled\" placeholder=\"Filled textarea\" [formField]=\"form.filled\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoTextareaVariantComponent {\r\n    schema = signal<{ standard: string; outlined: string; filled: string }>({\r\n        standard: \"\",\r\n        outlined: \"\",\r\n        filled: \"\",\r\n    });\r\n\r\n    form = form(this.schema);\r\n}\r\n"]}

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

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

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

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

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

@@ -0,0 +1,59 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, model, signal, ViewEncapsulation } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { mergeClasses } from "../../../core";
+import { AiIcon } from "../../icon/icon.component";
+import { feedbackErrors } from "../input/interfaces/feedback.interface";
+import { textareaLabelVariants, textareaVariants } from "./textarea.variants";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class AiTextarea {
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    variant = input("outlined", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    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" }] : []));
+    maxlength = input("", ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
+    minlength = input("", ...(ngDevMode ? [{ debugName: "minlength" }] : []));
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    resize = input("none", ...(ngDevMode ? [{ debugName: "resize" }] : []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    hasError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessages = computed(() => feedbackErrors(this.errors(), { minlength: this.minlength() }), ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    charCount = computed(() => (this.value() ?? "").toString().length, ...(ngDevMode ? [{ debugName: "charCount" }] : []));
+    feedback = computed(() => ({
+        error: this.hasError(),
+        errorMessages: this.errorMessages(),
+        strengthRules: [],
+        strength: false,
+    }), ...(ngDevMode ? [{ debugName: "feedback" }] : []));
+    labelVariant = signal("outlined", ...(ngDevMode ? [{ debugName: "labelVariant" }] : []));
+    inputClass = computed(() => {
+        return mergeClasses(textareaVariants({ variant: this.variant(), error: this.feedback().error, disabled: this.disabled(), resize: this.resize() }));
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+    labelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: this.labelVariant(), error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+    filledClass = computed(() => {
+        return mergeClasses(textareaVariants({ variant: "filled", error: this.feedback().error, disabled: this.disabled(), resize: this.resize() }));
+    }, ...(ngDevMode ? [{ debugName: "filledClass" }] : []));
+    filledLabelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: "filled", error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "filledLabelClass" }] : []));
+    standardLabelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: "standard", error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "standardLabelClass" }] : []));
+    writeValue(value) {
+        this.value.set(value);
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiTextarea, isStandalone: true, selector: "ai-textarea", inputs: { 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 }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, exportAs: ["aiTextarea"], ngImport: i0, template: "<ng-template #textareaTemplate let.inputClass>\r\n    <textarea\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"variant() === 'filled' ? placeholder() : ' '\"\r\n        [attr.id]=\"id()\"\r\n        [(ngModel)]=\"value\"\r\n        (blur)=\"onBlur()\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.rows]=\"rows()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\">\r\n    </textarea>\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0) {\r\n        <div class=\"flex flex-col gap-y-1 pt-1\">\r\n            @for (error of feedback().errorMessages; track $index) {\r\n                @if (error.message) {\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>{{ error.message }}</span>\r\n                    </div>\r\n                }\r\n            }\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n@switch (variant()) {\r\n    @case (\"filled\") {\r\n        <div class=\"w-full\">\r\n            <div class=\"relative\">\r\n                <label [class]=\"filledLabelClass()\" [attr.for]=\"id()\">\r\n                    {{ label() }}\r\n                    @if (required()) {\r\n                        <span class=\"text-destructive\">*</span>\r\n                    }\r\n                </label>\r\n\r\n                <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n            @if (maxlength()) {\r\n                <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\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        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <label [attr.for]=\"id()\" [class]=\"standardLabelClass()\">\r\n                {{ label() }}\r\n                @if (required()) {\r\n                    <span class=\"text-destructive\">*</span>\r\n                }\r\n            </label>\r\n        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AiTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-textarea", exportAs: "aiTextarea", imports: [FormsModule, NgTemplateOutlet, AiIcon], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #textareaTemplate let.inputClass>\r\n    <textarea\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"variant() === 'filled' ? placeholder() : ' '\"\r\n        [attr.id]=\"id()\"\r\n        [(ngModel)]=\"value\"\r\n        (blur)=\"onBlur()\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.rows]=\"rows()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\">\r\n    </textarea>\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0) {\r\n        <div class=\"flex flex-col gap-y-1 pt-1\">\r\n            @for (error of feedback().errorMessages; track $index) {\r\n                @if (error.message) {\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>{{ error.message }}</span>\r\n                    </div>\r\n                }\r\n            }\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n@switch (variant()) {\r\n    @case (\"filled\") {\r\n        <div class=\"w-full\">\r\n            <div class=\"relative\">\r\n                <label [class]=\"filledLabelClass()\" [attr.for]=\"id()\">\r\n                    {{ label() }}\r\n                    @if (required()) {\r\n                        <span class=\"text-destructive\">*</span>\r\n                    }\r\n                </label>\r\n\r\n                <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n            @if (maxlength()) {\r\n                <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\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        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <label [attr.for]=\"id()\" [class]=\"standardLabelClass()\">\r\n                {{ label() }}\r\n                @if (required()) {\r\n                    <span class=\"text-destructive\">*</span>\r\n                }\r\n            </label>\r\n        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n}\r\n" }]
+        }], propDecorators: { 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/textarea.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/textarea.html"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { NgTemplateOutlet } from \"@angular/common\";\r\nimport { ChangeDetectionStrategy, Component, computed, input, model, signal, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormsModule } from \"@angular/forms\";\r\nimport { FormValueControl } from \"@angular/forms/signals\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\nimport { AiIcon } from \"../../icon/icon.component\";\r\nimport { feedbackErrors, IFeedback } from \"../input/interfaces/feedback.interface\";\r\nimport { textareaLabelVariants, textareaVariants, TextareaVariants } from \"./textarea.variants\";\r\n\r\nimport type { ValidationError } from \"@angular/forms/signals\";\r\n\r\n@Component({\r\n    selector: \"ai-textarea\",\r\n    exportAs: \"aiTextarea\",\r\n    imports: [FormsModule, NgTemplateOutlet, AiIcon],\r\n    templateUrl: \"./textarea.html\",\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class AiTextarea implements FormValueControl<string | null> {\r\n    readonly id = input<string>(\"\");\r\n    readonly label = input.required<string>();\r\n    readonly placeholder = input<string>(\"\");\r\n    readonly variant = input<TextareaVariants[\"variant\"]>(\"outlined\");\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly value = model<string | 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 maxlength = input<string | number>(\"\");\r\n    readonly minlength = input<string | number>(\"\");\r\n    readonly rows = input<number>(4);\r\n    readonly resize = input<TextareaVariants[\"resize\"]>(\"none\");\r\n    readonly errors = input<readonly ValidationError.WithOptionalField[]>([]);\r\n\r\n    protected hasError = computed(() => this.touched() && this.invalid());\r\n    protected errorMessages = computed(() => feedbackErrors(this.errors(), { minlength: this.minlength() }));\r\n    protected charCount = computed(() => (this.value() ?? \"\").toString().length);\r\n    protected readonly feedback = computed<IFeedback>(() => ({\r\n        error: this.hasError(),\r\n        errorMessages: this.errorMessages(),\r\n        strengthRules: [],\r\n        strength: false,\r\n    }));\r\n\r\n    protected labelVariant = signal<TextareaVariants[\"variant\"]>(\"outlined\");\r\n    protected readonly inputClass = computed(() => {\r\n        return mergeClasses(textareaVariants({ variant: this.variant(), error: this.feedback().error, disabled: this.disabled(), resize: this.resize() }));\r\n    });\r\n    protected readonly labelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: this.labelVariant(), error: this.feedback().error, disabled: this.disabled() })));\r\n    protected readonly filledClass = computed(() => {\r\n        return mergeClasses(textareaVariants({ variant: \"filled\", error: this.feedback().error, disabled: this.disabled(), resize: this.resize() }));\r\n    });\r\n    protected readonly filledLabelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: \"filled\", error: this.feedback().error, disabled: this.disabled() })));\r\n    protected readonly standardLabelClass = computed(() => mergeClasses(textareaLabelVariants({ variant: \"standard\", error: this.feedback().error, disabled: this.disabled() })));\r\n\r\n    writeValue(value: string | null) {\r\n        this.value.set(value);\r\n    }\r\n\r\n    onBlur() {\r\n        this.touched.set(true);\r\n    }\r\n}\r\n","<ng-template #textareaTemplate let.inputClass>\r\n    <textarea\r\n        [class]=\"inputClass()\"\r\n        [attr.placeholder]=\"variant() === 'filled' ? placeholder() : ' '\"\r\n        [attr.id]=\"id()\"\r\n        [(ngModel)]=\"value\"\r\n        (blur)=\"onBlur()\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.rows]=\"rows()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [attr.readonly]=\"readonly() ? '' : null\">\r\n    </textarea>\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0) {\r\n        <div class=\"flex flex-col gap-y-1 pt-1\">\r\n            @for (error of feedback().errorMessages; track $index) {\r\n                @if (error.message) {\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>{{ error.message }}</span>\r\n                    </div>\r\n                }\r\n            }\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n@switch (variant()) {\r\n    @case (\"filled\") {\r\n        <div class=\"w-full\">\r\n            <div class=\"relative\">\r\n                <label [class]=\"filledLabelClass()\" [attr.for]=\"id()\">\r\n                    {{ label() }}\r\n                    @if (required()) {\r\n                        <span class=\"text-destructive\">*</span>\r\n                    }\r\n                </label>\r\n\r\n                <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n            @if (maxlength()) {\r\n                <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n            }\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\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        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"textareaTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <label [attr.for]=\"id()\" [class]=\"standardLabelClass()\">\r\n                {{ label() }}\r\n                @if (required()) {\r\n                    <span class=\"text-destructive\">*</span>\r\n                }\r\n            </label>\r\n        </div>\r\n\r\n        <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n\r\n        @if (maxlength()) {\r\n            <div class=\"text-xs text-muted-foreground text-right pt-1\">{{ charCount() }}/{{ maxlength() }}</div>\r\n        }\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+export const textareaVariants = cva("block w-full text-sm text-muted-foreground appearance-none focus:outline-none focus:ring-0 peer", {
+    variants: {
+        variant: {
+            outlined: "px-2.5 pb-2.5 pt-4 bg-transparent rounded-lg border-2 border-input focus:border-primary",
+            standard: "py-2.5 px-0 bg-transparent border-0 border-b-2 border-input focus:border-primary",
+            filled: "bg-transparent border-2 border-input rounded-lg focus:border-primary px-2.5 py-3 placeholder:text-muted-foreground",
+        },
+        resize: {
+            none: "resize-none",
+            vertical: "resize-y",
+            horizontal: "resize-x",
+            both: "resize",
+        },
+        error: {
+            true: "border-destructive text-destructive focus:border-destructive placeholder:text-destructive placeholder:opacity-80",
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50",
+        },
+    },
+    defaultVariants: {
+        variant: "outlined",
+        resize: "none",
+    },
+});
+export const textareaLabelVariants = cva("text-sm text-muted-foreground duration-300", {
+    variants: {
+        variant: {
+            outlined: "absolute 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-5 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-primary",
+            standard: "absolute origin-[0] pointer-events-none -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-primary",
+            filled: "block mb-1.5 font-semibold",
+        },
+        error: {
+            true: "text-destructive peer-focus:text-destructive",
+        },
+        disabled: {
+            true: "text-[#949498] dark:text-[#767073] pointer-events-none",
+        },
+    },
+    defaultVariants: {
+        variant: "outlined",
+    },
+});
+//# sourceMappingURL=textarea.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/textarea/textarea.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,iGAAiG,EAAE;IACnI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,QAAQ,EAAE,yFAAyF;YACnG,QAAQ,EAAE,kFAAkF;YAC5F,MAAM,EAAE,oHAAoH;SAC/H;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,UAAU;YACtB,IAAI,EAAE,QAAQ;SACjB;QACD,KAAK,EAAE;YACH,IAAI,EAAE,kHAAkH;SAC3H;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,gCAAgC;SACzC;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,MAAM;KACjB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,4CAA4C,EAAE;IACnF,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,QAAQ,EACJ,oSAAoS;YACxS,QAAQ,EACJ,yNAAyN;YAC7N,MAAM,EAAE,4BAA4B;SACvC;QACD,KAAK,EAAE;YACH,IAAI,EAAE,8CAA8C;SACvD;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,wDAAwD;SACjE;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,UAAU;KACtB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const textareaVariants = cva(\"block w-full text-sm text-muted-foreground appearance-none focus:outline-none focus:ring-0 peer\", {\r\n    variants: {\r\n        variant: {\r\n            outlined: \"px-2.5 pb-2.5 pt-4 bg-transparent rounded-lg border-2 border-input focus:border-primary\",\r\n            standard: \"py-2.5 px-0 bg-transparent border-0 border-b-2 border-input focus:border-primary\",\r\n            filled: \"bg-transparent border-2 border-input rounded-lg focus:border-primary px-2.5 py-3 placeholder:text-muted-foreground\",\r\n        },\r\n        resize: {\r\n            none: \"resize-none\",\r\n            vertical: \"resize-y\",\r\n            horizontal: \"resize-x\",\r\n            both: \"resize\",\r\n        },\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    defaultVariants: {\r\n        variant: \"outlined\",\r\n        resize: \"none\",\r\n    },\r\n});\r\n\r\nexport const textareaLabelVariants = cva(\"text-sm text-muted-foreground duration-300\", {\r\n    variants: {\r\n        variant: {\r\n            outlined:\r\n                \"absolute 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-5 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-primary\",\r\n            standard:\r\n                \"absolute origin-[0] pointer-events-none -translate-y-6 scale-75 top-3 -z-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 peer-focus:text-primary\",\r\n            filled: \"block mb-1.5 font-semibold\",\r\n        },\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    defaultVariants: {\r\n        variant: \"outlined\",\r\n    },\r\n});\r\n\r\nexport type TextareaVariants = VariantProps<typeof textareaVariants>;\r\nexport type TextareaLabelVariants = VariantProps<typeof textareaLabelVariants>;\r\n"]}

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

@@ -0,0 +1,22 @@
+import { DemoIconSearchableComponent } from "./searchable";
+import { DemoIconSizeComponent } from "./size";
+import { DemoIconTypeComponent } from "./type";
+export const ICON = {
+    componentName: "icon",
+    componentType: "icon",
+    examples: [
+        {
+            name: "searchable",
+            component: DemoIconSearchableComponent,
+        },
+        {
+            name: "size",
+            component: DemoIconSizeComponent,
+        },
+        {
+            name: "type",
+            component: DemoIconTypeComponent,
+        },
+    ],
+};
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/icon/demo/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG;IAChB,aAAa,EAAE,MAAM;IACrB,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,2BAA2B;SACzC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,qBAAqB;SACnC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,qBAAqB;SACnC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoIconSearchableComponent } from \"./searchable\";\r\nimport { DemoIconSizeComponent } from \"./size\";\r\nimport { DemoIconTypeComponent } from \"./type\";\r\n\r\nexport const ICON = {\r\n    componentName: \"icon\",\r\n    componentType: \"icon\",\r\n    examples: [\r\n        {\r\n            name: \"searchable\",\r\n            component: DemoIconSearchableComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoIconSizeComponent,\r\n        },\r\n        {\r\n            name: \"type\",\r\n            component: DemoIconTypeComponent,\r\n        },\r\n    ],\r\n};\r\n"]}