@aiandralves/ai-ui 1.0.0

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

@@ -0,0 +1,102 @@
+import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, model, output, signal, ViewEncapsulation } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { AiNormalizeDirective, mergeClasses } from "../../../core";
+import { AiButton } from "../../button";
+import { AiIcon } from "../../icon/icon.component";
+import { AiCurrencyMaskService } from "./currency-mask.service";
+import { inputVariants, labelVariants } from "./input.variants";
+import { feedbackErrors } from "./interfaces/feedback.interface";
+import { buildStrengthRules } from "./interfaces/password-strength";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class AiInput {
+    #currencyMaskService = inject(AiCurrencyMaskService);
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    type = input("text", ...(ngDevMode ? [{ debugName: "type" }] : []));
+    variant = input("outlined", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    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" }] : []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    strength = input(false, ...(ngDevMode ? [{ debugName: "strength" }] : []));
+    mask = input("", ...(ngDevMode ? [{ debugName: "mask" }] : []));
+    maskConfig = input(null, ...(ngDevMode ? [{ debugName: "maskConfig" }] : []));
+    normalize = input(...(ngDevMode ? [undefined, { debugName: "normalize" }] : []));
+    normalizeConfig = input(...(ngDevMode ? [undefined, { debugName: "normalizeConfig" }] : []));
+    changeIcon = output();
+    hasError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    errorMessages = computed(() => feedbackErrors(this.errors(), { minlength: this.minlength() }), ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+    regexs = computed(() => buildStrengthRules(this.strength(), this.type(), this.value(), this.minlength()), ...(ngDevMode ? [{ debugName: "regexs" }] : []));
+    shouldShowStrength = computed(() => this.regexs().some(rule => !rule.passed), ...(ngDevMode ? [{ debugName: "shouldShowStrength" }] : []));
+    feedback = computed(() => ({
+        error: this.hasError(),
+        errorMessages: this.errorMessages(),
+        strengthRules: this.regexs(),
+        strength: this.shouldShowStrength(),
+    }), ...(ngDevMode ? [{ debugName: "feedback" }] : []));
+    hide = signal(false, ...(ngDevMode ? [{ debugName: "hide" }] : []));
+    labelVariant = signal("outlined", ...(ngDevMode ? [{ debugName: "labelVariant" }] : []));
+    inputClass = computed(() => {
+        const paddingClass = this.icon() || this.type() === "password" ? "pr-12" : "";
+        return mergeClasses(inputVariants({ variant: this.variant(), error: this.feedback().error, disabled: this.disabled() }), paddingClass);
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+    labelClass = computed(() => mergeClasses(labelVariants({ variant: this.labelVariant(), error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+    filledClass = computed(() => {
+        const paddingClass = this.icon() || this.type() === "password" ? "pr-12" : "";
+        return mergeClasses(inputVariants({ variant: "filled", error: this.feedback().error, disabled: this.disabled() }), paddingClass);
+    }, ...(ngDevMode ? [{ debugName: "filledClass" }] : []));
+    filledLabelClass = computed(() => mergeClasses(labelVariants({ variant: "filled", error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "filledLabelClass" }] : []));
+    standardLabelClass = computed(() => mergeClasses(labelVariants({ variant: "standard", error: this.feedback().error, disabled: this.disabled() })), ...(ngDevMode ? [{ debugName: "standardLabelClass" }] : []));
+    constructor() {
+        effect(() => {
+            this.writeValue(this.value());
+        });
+    }
+    writeValue(value) {
+        const config = this.maskConfig();
+        if (config?.isCurrency && value !== null) {
+            const formatted = this.#currencyMaskService.format(value, config);
+            this.value.set(formatted);
+        }
+        else {
+            this.value.set(value);
+        }
+    }
+    onChange(event) {
+        const config = this.maskConfig();
+        const rawValue = event.target.value;
+        if (config?.isCurrency) {
+            const cleanedValue = this.#currencyMaskService.clean(rawValue, config);
+            this.value.set(cleanedValue);
+            const formattedValue = this.#currencyMaskService.format(cleanedValue, config);
+            this.value.set(formattedValue);
+        }
+        else {
+            this.value.set(rawValue);
+        }
+    }
+    onToggleHide() {
+        this.hide.update(value => !value);
+    }
+    onBlur() {
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiInput, isStandalone: true, selector: "ai-input", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, strength: { classPropertyName: "strength", publicName: "strength", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, maskConfig: { classPropertyName: "maskConfig", publicName: "maskConfig", isSignal: true, isRequired: false, transformFunction: null }, normalize: { classPropertyName: "normalize", publicName: "normalize", isSignal: true, isRequired: false, transformFunction: null }, normalizeConfig: { classPropertyName: "normalizeConfig", publicName: "normalizeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", changeIcon: "changeIcon" }, providers: [provideNgxMask()], exportAs: ["aiInput"], ngImport: i0, template: "<ng-template #inputTemplate let.inputClass>\r\n    <input \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        (input)=\"onChange($event)\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.type]=\"type() === 'password' ? (hide() ? 'text' : 'password') : type()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [normalize]=\"normalize()\"\r\n        [normalizeConfig]=\"normalizeConfig()\"\r\n        [mask]=\"mask()\"\r\n        [patterns]=\"maskConfig()?.patterns\" />\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate>\r\n    @let nameIcon = icon();\r\n    @if (type() === \"password\") {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            fill=\"line\"\r\n            [icon]=\"hide() ? 'eye' : 'eye-off'\" \r\n            (click)=\"onToggleHide()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n\r\n    @if (nameIcon) {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            [icon]=\"nameIcon\" \r\n            (click)=\"changeIcon.emit()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0 && !feedback().strength) {\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    \r\n    @if (feedback().strength && feedback().strengthRules.length > 0) {\r\n            <div class=\"grid grid-cols-2 items-center justify-between pt-1\">\r\n                @for (rule of feedback().strengthRules; track $index) {\r\n                @let passed = rule.passed;\r\n                <div class=\"flex items-start gap-x-1 text-xs pt-1\" [class]=\"passed ? 'text-success' : 'text-destructive'\">\r\n                    <ai-icon [icon]=\"passed ? 'checkbox-circle' : 'alert'\" size=\"xs\" [class]=\"passed ? 'text-success' : 'text-destructive'\" />\r\n                    <span>{{ rule.message }}</span>\r\n                </div>\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]=\"actionsTemplate\" />\r\n\r\n                <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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}", 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: AiNormalizeDirective, selector: "[normalize]", inputs: ["normalize", "normalizeConfig"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { 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: AiInput, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-input", exportAs: "aiInput", imports: [FormsModule, AiNormalizeDirective, NgxMaskDirective, NgTemplateOutlet, AiButton, AiIcon], providers: [provideNgxMask()], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #inputTemplate let.inputClass>\r\n    <input \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        (input)=\"onChange($event)\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.type]=\"type() === 'password' ? (hide() ? 'text' : 'password') : type()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [normalize]=\"normalize()\"\r\n        [normalizeConfig]=\"normalizeConfig()\"\r\n        [mask]=\"mask()\"\r\n        [patterns]=\"maskConfig()?.patterns\" />\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate>\r\n    @let nameIcon = icon();\r\n    @if (type() === \"password\") {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            fill=\"line\"\r\n            [icon]=\"hide() ? 'eye' : 'eye-off'\" \r\n            (click)=\"onToggleHide()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n\r\n    @if (nameIcon) {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            [icon]=\"nameIcon\" \r\n            (click)=\"changeIcon.emit()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0 && !feedback().strength) {\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    \r\n    @if (feedback().strength && feedback().strengthRules.length > 0) {\r\n            <div class=\"grid grid-cols-2 items-center justify-between pt-1\">\r\n                @for (rule of feedback().strengthRules; track $index) {\r\n                @let passed = rule.passed;\r\n                <div class=\"flex items-start gap-x-1 text-xs pt-1\" [class]=\"passed ? 'text-success' : 'text-destructive'\">\r\n                    <ai-icon [icon]=\"passed ? 'checkbox-circle' : 'alert'\" size=\"xs\" [class]=\"passed ? 'text-success' : 'text-destructive'\" />\r\n                    <span>{{ rule.message }}</span>\r\n                </div>\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]=\"actionsTemplate\" />\r\n\r\n                <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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}" }]
+        }], ctorParameters: () => [], 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 }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", 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 }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], maskConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskConfig", required: false }] }], normalize: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalize", required: false }] }], normalizeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeConfig", required: false }] }], changeIcon: [{ type: i0.Output, args: ["changeIcon"] }] } });
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/input.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/input.html"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\nimport { NgxMaskDirective, provideNgxMask } from \"ngx-mask\";\r\n\r\nimport { NgTemplateOutlet } from \"@angular/common\";\r\nimport { ChangeDetectionStrategy, Component, computed, effect, inject, input, model, output, signal, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormsModule } from \"@angular/forms\";\r\nimport { FormValueControl } from \"@angular/forms/signals\";\r\n\r\nimport { AiNormalizeConfig, AiNormalizeDirective, AiNormalizeType, mergeClasses } from \"../../../core\";\r\nimport { AiButton } from \"../../button\";\r\nimport { AiIcon } from \"../../icon/icon.component\";\r\nimport { AiIconType } from \"../../icon/icons\";\r\nimport { AiCurrencyMaskService } from \"./currency-mask.service\";\r\nimport { inputVariants, InputVariants, labelVariants } from \"./input.variants\";\r\nimport { feedbackErrors, IFeedback } from \"./interfaces/feedback.interface\";\r\nimport { AiMaskConfig } from \"./interfaces/mask-config.interface\";\r\nimport { buildStrengthRules } from \"./interfaces/password-strength\";\r\n\r\nimport type { ValidationError } from \"@angular/forms/signals\";\r\ntype InputType = \"text\" | \"email\" | \"number\" | \"password\";\r\n\r\n@Component({\r\n    selector: \"ai-input\",\r\n    exportAs: \"aiInput\",\r\n    imports: [FormsModule, AiNormalizeDirective, NgxMaskDirective, NgTemplateOutlet, AiButton, AiIcon],\r\n    providers: [provideNgxMask()],\r\n    templateUrl: \"./input.html\",\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class AiInput implements FormValueControl<string | number | null> {\r\n    #currencyMaskService = inject(AiCurrencyMaskService);\r\n\r\n    readonly id = input<string>(\"\");\r\n    readonly label = input.required<string>();\r\n    readonly placeholder = input<string>(\"\");\r\n    readonly type = input<InputType>(\"text\");\r\n    readonly variant = input<InputVariants[\"variant\"]>(\"outlined\");\r\n    readonly icon = input<AiIconType>();\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly value = model<string | number | 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 errors = input<readonly ValidationError.WithOptionalField[]>([]);\r\n\r\n    readonly strength = input<boolean>(false);\r\n\r\n    readonly mask = input<string>(\"\");\r\n    readonly maskConfig = input<AiMaskConfig | null>(null);\r\n\r\n    readonly normalize = input<AiNormalizeType>();\r\n    readonly normalizeConfig = input<AiNormalizeConfig | undefined>();\r\n\r\n    changeIcon = output<void>();\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 regexs = computed(() => buildStrengthRules(this.strength(), this.type(), this.value(), this.minlength()));\r\n    protected shouldShowStrength = computed(() => this.regexs().some(rule => !rule.passed));\r\n    protected readonly feedback = computed<IFeedback>(() => ({\r\n        error: this.hasError(),\r\n        errorMessages: this.errorMessages(),\r\n        strengthRules: this.regexs(),\r\n        strength: this.shouldShowStrength(),\r\n    }));\r\n\r\n    protected hide = signal<boolean>(false);\r\n    protected labelVariant = signal<InputVariants[\"variant\"]>(\"outlined\");\r\n\r\n    protected readonly inputClass = computed(() => {\r\n        const paddingClass = this.icon() || this.type() === \"password\" ? \"pr-12\" : \"\";\r\n        return mergeClasses(inputVariants({ variant: this.variant(), error: this.feedback().error, disabled: this.disabled() }), paddingClass);\r\n    });\r\n\r\n    protected readonly labelClass = computed(() => mergeClasses(labelVariants({ variant: this.labelVariant(), error: this.feedback().error, disabled: this.disabled() })));\r\n\r\n    protected readonly filledClass = computed(() => {\r\n        const paddingClass = this.icon() || this.type() === \"password\" ? \"pr-12\" : \"\";\r\n        return mergeClasses(inputVariants({ variant: \"filled\", error: this.feedback().error, disabled: this.disabled() }), paddingClass);\r\n    });\r\n\r\n    protected readonly filledLabelClass = computed(() => mergeClasses(labelVariants({ variant: \"filled\", error: this.feedback().error, disabled: this.disabled() })));\r\n\r\n    protected readonly standardLabelClass = computed(() => mergeClasses(labelVariants({ variant: \"standard\", error: this.feedback().error, disabled: this.disabled() })));\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            this.writeValue(this.value());\r\n        });\r\n    }\r\n\r\n    writeValue(value: string | number | null) {\r\n        const config = this.maskConfig();\r\n\r\n        if (config?.isCurrency && value !== null) {\r\n            const formatted = this.#currencyMaskService.format(value as string, config);\r\n            this.value.set(formatted);\r\n        } else {\r\n            this.value.set(value);\r\n        }\r\n    }\r\n\r\n    onChange(event: Event) {\r\n        const config = this.maskConfig();\r\n        const rawValue = (event.target as HTMLInputElement).value;\r\n\r\n        if (config?.isCurrency) {\r\n            const cleanedValue = this.#currencyMaskService.clean(rawValue, config);\r\n            this.value.set(cleanedValue);\r\n\r\n            const formattedValue = this.#currencyMaskService.format(cleanedValue, config);\r\n            this.value.set(formattedValue);\r\n        } else {\r\n            this.value.set(rawValue);\r\n        }\r\n    }\r\n\r\n    onToggleHide() {\r\n        this.hide.update(value => !value);\r\n    }\r\n\r\n    onBlur() {\r\n        this.touched.set(true);\r\n    }\r\n}\r\n","<ng-template #inputTemplate let.inputClass>\r\n    <input \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        (input)=\"onChange($event)\"\r\n        [attr.maxlength]=\"maxlength()\"\r\n        [attr.minlength]=\"minlength()\"\r\n        [attr.type]=\"type() === 'password' ? (hide() ? 'text' : 'password') : type()\"\r\n        [attr.disabled]=\"disabled() ? '' : null\"\r\n        [normalize]=\"normalize()\"\r\n        [normalizeConfig]=\"normalizeConfig()\"\r\n        [mask]=\"mask()\"\r\n        [patterns]=\"maskConfig()?.patterns\" />\r\n</ng-template>\r\n\r\n<ng-template #actionsTemplate>\r\n    @let nameIcon = icon();\r\n    @if (type() === \"password\") {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            fill=\"line\"\r\n            [icon]=\"hide() ? 'eye' : 'eye-off'\" \r\n            (click)=\"onToggleHide()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n\r\n    @if (nameIcon) {\r\n        <ai-button \r\n            [class]=\"`${variant() === 'filled' ? 'top-[calc(50%+0.75rem)]' : 'top-2/4'} absolute -translate-y-2/4 right-2`\" \r\n            size=\"xs\" \r\n            shape=\"circle\" \r\n            [icon]=\"nameIcon\" \r\n            (click)=\"changeIcon.emit()\"\r\n            [variant]=\"feedback().error ? 'destructive' : 'ghost'\" />\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #errorMessagesTemplate>\r\n    @if (feedback().error && feedback().errorMessages.length > 0 && !feedback().strength) {\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    \r\n    @if (feedback().strength && feedback().strengthRules.length > 0) {\r\n            <div class=\"grid grid-cols-2 items-center justify-between pt-1\">\r\n                @for (rule of feedback().strengthRules; track $index) {\r\n                @let passed = rule.passed;\r\n                <div class=\"flex items-start gap-x-1 text-xs pt-1\" [class]=\"passed ? 'text-success' : 'text-destructive'\">\r\n                    <ai-icon [icon]=\"passed ? 'checkbox-circle' : 'alert'\" size=\"xs\" [class]=\"passed ? 'text-success' : 'text-destructive'\" />\r\n                    <span>{{ rule.message }}</span>\r\n                </div>\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]=\"actionsTemplate\" />\r\n\r\n                <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: filledClass }\" />\r\n            </div>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"errorMessagesTemplate\" />\r\n        </div>\r\n    }\r\n\r\n    @case (\"outlined\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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\r\n    @case (\"standard\") {\r\n        <div class=\"relative w-full\">\r\n            <ng-container [ngTemplateOutlet]=\"inputTemplate\" [ngTemplateOutletContext]=\"{ inputClass: inputClass }\" />\r\n\r\n            <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\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}"]}

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

@@ -0,0 +1,38 @@
+import { cva } from "class-variance-authority";
+export const inputVariants = 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",
+        },
+        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",
+    },
+});
+export const labelVariants = 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-1/2 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=input.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/input.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,iGAAiG,EAAE;IAChI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,QAAQ,EAAE,yFAAyF;YACnG,QAAQ,EAAE,kFAAkF;YAC5F,MAAM,EAAE,oHAAoH;SAC/H;QACD,KAAK,EAAE;YACH,IAAI,EAAE,kHAAkH;SAC3H;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,gCAAgC;SACzC;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,UAAU;KACtB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,4CAA4C,EAAE;IAC3E,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,QAAQ,EACJ,sSAAsS;YAC1S,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 inputVariants = 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        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    },\r\n});\r\n\r\nexport const labelVariants = 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-1/2 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 InputVariants = VariantProps<typeof inputVariants>;\r\nexport type LabelVariants = VariantProps<typeof labelVariants>;\r\n"]}

package/esm2022/lib/components/form-field/input/interfaces/feedback.interface.js

@@ -0,0 +1,26 @@
+export function feedbackErrors(errors, options = {}) {
+    if (!errors || errors.length === 0)
+        return [];
+    const allMessages = [...(options.custom ?? [])];
+    const out = [];
+    const min = options.minlength;
+    for (const error of errors) {
+        const kind = error?.kind;
+        if (!kind)
+            continue;
+        const def = allMessages.find(e => e.value === kind);
+        if (def) {
+            out.push({ kind, message: def.message });
+            continue;
+        }
+        if (error.message) {
+            out.push({ kind, message: error.message });
+            continue;
+        }
+        if ((kind === "minlength" || kind === "minLength") && min) {
+            out.push({ kind, message: `Este campo deve ter ao menos ${min} caracteres.` });
+        }
+    }
+    return out;
+}
+//# sourceMappingURL=feedback.interface.js.map

package/esm2022/lib/components/form-field/input/interfaces/feedback.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.interface.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/interfaces/feedback.interface.ts"],"names":[],"mappings":"AAcA,MAAM,UAAU,cAAc,CAAC,MAAoB,EAAE,UAA0F,EAAE;IAC7I,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAE9C,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,GAAG,GAAmB,EAAE,CAAC;IAC/B,MAAM,GAAG,GAAG,OAAO,CAAC,SAAS,CAAC;IAE9B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAC;QACzB,IAAI,CAAC,IAAI;YAAE,SAAS;QAEpB,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;QAEpD,IAAI,GAAG,EAAE,CAAC;YACN,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;YACzC,SAAS;QACb,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;YAChB,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;YAC3C,SAAS;QACb,CAAC;QAED,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,WAAW,CAAC,IAAI,GAAG,EAAE,CAAC;YACxD,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,gCAAgC,GAAG,cAAc,EAAE,CAAC,CAAC;QACnF,CAAC;IACL,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC","sourcesContent":["import { ValidationError } from \"@angular/forms/signals\";\r\nimport { StrengthRule } from \"./password-strength\";\r\n\r\nexport type ErrorMessage = { kind?: string; message?: string };\r\n\r\ntype SignalErrors = readonly ValidationError.WithOptionalField[] | null | undefined;\r\n\r\nexport interface IFeedback {\r\n    error: boolean;\r\n    errorMessages: readonly ErrorMessage[];\r\n    strengthRules: StrengthRule[];\r\n    strength: boolean;\r\n}\r\n\r\nexport function feedbackErrors(errors: SignalErrors, options: { custom?: { value: string; message: string }[]; minlength?: string | number } = {}): ErrorMessage[] {\r\n    if (!errors || errors.length === 0) return [];\r\n\r\n    const allMessages = [...(options.custom ?? [])];\r\n    const out: ErrorMessage[] = [];\r\n    const min = options.minlength;\r\n\r\n    for (const error of errors) {\r\n        const kind = error?.kind;\r\n        if (!kind) continue;\r\n\r\n        const def = allMessages.find(e => e.value === kind);\r\n\r\n        if (def) {\r\n            out.push({ kind, message: def.message });\r\n            continue;\r\n        }\r\n\r\n        if (error.message) {\r\n            out.push({ kind, message: error.message });\r\n            continue;\r\n        }\r\n\r\n        if ((kind === \"minlength\" || kind === \"minLength\") && min) {\r\n            out.push({ kind, message: `Este campo deve ter ao menos ${min} caracteres.` });\r\n        }\r\n    }\r\n\r\n    return out;\r\n}\r\n"]}

package/esm2022/lib/components/form-field/input/interfaces/index.js

@@ -0,0 +1,4 @@
+export * from "./feedback.interface";
+export * from "./mask-config.interface";
+export * from "./password-strength";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from \"./feedback.interface\";\r\nexport * from \"./mask-config.interface\";\r\nexport * from \"./password-strength\";\r\n"]}

package/esm2022/lib/components/form-field/input/interfaces/mask-config.interface.js

@@ -0,0 +1 @@
+//# sourceMappingURL=mask-config.interface.js.map

package/esm2022/lib/components/form-field/input/interfaces/mask-config.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask-config.interface.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/interfaces/mask-config.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface AiMaskConfig {\r\n    thousands?: string;\r\n    decimal?: \".\" | \",\" | [\".\", \",\"];\r\n    prefix?: string;\r\n    align?: \"left\" | \"right\";\r\n    dropSpecialCharacters?: boolean | string[] | (string[] | null);\r\n    specialCharacters?: string[];\r\n    isCurrency?: boolean;\r\n    patterns?: any;\r\n}\r\n"]}

package/esm2022/lib/components/form-field/input/interfaces/password-strength.js

@@ -0,0 +1,39 @@
+import { validate } from "@angular/forms/signals";
+const password = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,}$/;
+export const RegexHelper = {
+    password,
+};
+export function passwordRegexs(minlength) {
+    return [
+        { value: "^(?=.*[A-Z])", message: "Deve conter letra maiúscula." },
+        { value: "(?=.*[a-z])", message: "Deve conter letra minúscula." },
+        { value: "(.*[0-9].*)", message: "Deve conter números." },
+        { value: "(?=.*[!@#$%^&*])", message: "Deve conter símbolo." },
+        { value: `(^.{${minlength},}$)`, message: `Deve conter no mínimo ${minlength} caracteres.` },
+    ];
+}
+export function applyPasswordStrength(path, minlength = 8) {
+    for (const rule of passwordRegexs(minlength)) {
+        validate(path, ({ value }) => {
+            const currentValue = String(value() ?? "");
+            if (!currentValue) {
+                return null;
+            }
+            const passed = new RegExp(rule.value).test(currentValue);
+            return passed ? null : { kind: rule.value, message: rule.message };
+        });
+    }
+}
+export function buildStrengthRules(show, type, value, minlength) {
+    if (!show || type !== "password")
+        return [];
+    const currentValue = String(value ?? "");
+    if (!currentValue)
+        return [];
+    const min = Number(minlength || 8);
+    return passwordRegexs(min).map(rule => ({
+        passed: new RegExp(rule.value).test(currentValue),
+        message: rule.message,
+    }));
+}
+//# sourceMappingURL=password-strength.js.map

package/esm2022/lib/components/form-field/input/interfaces/password-strength.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/input/interfaces/password-strength.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,QAAQ,GAAG,iEAAiE,CAAC;AAEnF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,QAAQ;CACX,CAAC;AAKF,MAAM,UAAU,cAAc,CAAC,SAA2B;IACtD,OAAO;QACH,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,8BAA8B,EAAE;QAClE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,8BAA8B,EAAE;QACjE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,sBAAsB,EAAE;QACzD,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,sBAAsB,EAAE;QAC9D,EAAE,KAAK,EAAE,OAAO,SAAS,MAAM,EAAE,OAAO,EAAE,yBAAyB,SAAS,cAAc,EAAE;KAC/F,CAAC;AACN,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,IAAwB,EAAE,SAAS,GAAG,CAAC;IACzE,KAAK,MAAM,IAAI,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;QAC3C,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;YACzB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;gBAChB,OAAO,IAAI,CAAC;YAChB,CAAC;YAED,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACzD,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;QACvE,CAAC,CAAC,CAAC;IACP,CAAC;AACL,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAa,EAAE,IAAe,EAAE,KAA6B,EAAE,SAA2B;IACzH,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,UAAU;QAAE,OAAO,EAAE,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,CAAC,YAAY;QAAE,OAAO,EAAE,CAAC;IAE7B,MAAM,GAAG,GAAG,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC;IACnC,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACpC,MAAM,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QACjD,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC,CAAC;AACR,CAAC","sourcesContent":["import type { SchemaPath } from \"@angular/forms/signals\";\r\nimport { validate } from \"@angular/forms/signals\";\r\n\r\nconst password = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,}$/;\r\n\r\nexport const RegexHelper = {\r\n    password,\r\n};\r\n\r\nexport type StrengthRule = { passed: boolean; message: string };\r\ntype InputType = \"text\" | \"email\" | \"number\" | \"password\";\r\n\r\nexport function passwordRegexs(minlength?: number | string): { value: string; message: string }[] {\r\n    return [\r\n        { value: \"^(?=.*[A-Z])\", message: \"Deve conter letra maiúscula.\" },\r\n        { value: \"(?=.*[a-z])\", message: \"Deve conter letra minúscula.\" },\r\n        { value: \"(.*[0-9].*)\", message: \"Deve conter números.\" },\r\n        { value: \"(?=.*[!@#$%^&*])\", message: \"Deve conter símbolo.\" },\r\n        { value: `(^.{${minlength},}$)`, message: `Deve conter no mínimo ${minlength} caracteres.` },\r\n    ];\r\n}\r\n\r\nexport function applyPasswordStrength(path: SchemaPath<string>, minlength = 8) {\r\n    for (const rule of passwordRegexs(minlength)) {\r\n        validate(path, ({ value }) => {\r\n            const currentValue = String(value() ?? \"\");\r\n            if (!currentValue) {\r\n                return null;\r\n            }\r\n\r\n            const passed = new RegExp(rule.value).test(currentValue);\r\n            return passed ? null : { kind: rule.value, message: rule.message };\r\n        });\r\n    }\r\n}\r\n\r\nexport function buildStrengthRules(show: boolean, type: InputType, value: string | number | null, minlength?: string | number): StrengthRule[] {\r\n    if (!show || type !== \"password\") return [];\r\n    const currentValue = String(value ?? \"\");\r\n    if (!currentValue) return [];\r\n\r\n    const min = Number(minlength || 8);\r\n    return passwordRegexs(min).map(rule => ({\r\n        passed: new RegExp(rule.value).test(currentValue),\r\n        message: rule.message,\r\n    }));\r\n}\r\n"]}

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

@@ -0,0 +1,32 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiRadioImports } from "../radio.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../radio-group";
+import * as i2 from "../radio";
+export class DemoRadioDefaultComponent {
+    schema = signal({ selected: 1 }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoRadioDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <ai-radio-group [formField]="schemaForm.selected" class="flex flex-col gap-2">
+            <ai-radio variant="primary" [value]="1">Opção 1</ai-radio>
+            <ai-radio variant="accent" [value]="2">Opção 2</ai-radio>
+            <ai-radio variant="destructive" [value]="3">Opção 3</ai-radio>
+        </ai-radio-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiRadioGroup, selector: "ai-radio-group", inputs: ["class", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiRadioGroup"] }, { kind: "component", type: i2.AiRadio, selector: "ai-radio", inputs: ["value", "variant", "size", "disabled", "class"], exportAs: ["aiRadio"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiRadioImports, FormField],
+                    template: `
+        <ai-radio-group [formField]="schemaForm.selected" class="flex flex-col gap-2">
+            <ai-radio variant="primary" [value]="1">Opção 1</ai-radio>
+            <ai-radio variant="accent" [value]="2">Opção 2</ai-radio>
+            <ai-radio variant="destructive" [value]="3">Opção 3</ai-radio>
+        </ai-radio-group>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;AAYlD,MAAM,OAAO,yBAAyB;IAClC,MAAM,GAAG,MAAM,CAA8B,EAAE,QAAQ,EAAE,CAAC,EAAE,kDAAC,CAAC;IAE9D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;uGAHtB,yBAAyB;2FAAzB,yBAAyB,wEARxB;;;;;;KAMT,obAPyB,SAAS;;2FAS1B,yBAAyB;kBAVrC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;oBACpC,QAAQ,EAAE;;;;;;KAMT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiRadioImports } from \"../radio.imports\";\r\n\r\n@Component({\r\n    imports: [AiRadioImports, FormField],\r\n    template: `\r\n        <ai-radio-group [formField]=\"schemaForm.selected\" class=\"flex flex-col gap-2\">\r\n            <ai-radio variant=\"primary\" [value]=\"1\">Opção 1</ai-radio>\r\n            <ai-radio variant=\"accent\" [value]=\"2\">Opção 2</ai-radio>\r\n            <ai-radio variant=\"destructive\" [value]=\"3\">Opção 3</ai-radio>\r\n        </ai-radio-group>\r\n    `,\r\n})\r\nexport class DemoRadioDefaultComponent {\r\n    schema = signal<{ selected: number | null }>({ selected: 1 });\r\n\r\n    schemaForm = form(this.schema);\r\n}\r\n"]}

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

@@ -0,0 +1,32 @@
+import { Component, signal } from "@angular/core";
+import { disabled, form, FormField } from "@angular/forms/signals";
+import { AiRadioImports } from "../radio.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../radio-group";
+import * as i2 from "../radio";
+export class DemoRadioDisabledComponent {
+    schema = signal({ selected: 2 }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema, schema => {
+        disabled(schema.selected);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoRadioDisabledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <ai-radio-group [formField]="schemaForm.selected" class="flex items-center gap-x-6">
+            <ai-radio [value]="1">Opção 1</ai-radio>
+            <ai-radio [value]="2">Opção 2</ai-radio>
+        </ai-radio-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiRadioGroup, selector: "ai-radio-group", inputs: ["class", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiRadioGroup"] }, { kind: "component", type: i2.AiRadio, selector: "ai-radio", inputs: ["value", "variant", "size", "disabled", "class"], exportAs: ["aiRadio"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioDisabledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiRadioImports, FormField],
+                    template: `
+        <ai-radio-group [formField]="schemaForm.selected" class="flex items-center gap-x-6">
+            <ai-radio [value]="1">Opção 1</ai-radio>
+            <ai-radio [value]="2">Opção 2</ai-radio>
+        </ai-radio-group>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=disabled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/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,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;AAWlD,MAAM,OAAO,0BAA0B;IACnC,MAAM,GAAG,MAAM,CAA8B,EAAE,QAAQ,EAAE,CAAC,EAAE,kDAAC,CAAC;IAE9D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;QACpC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;uGALM,0BAA0B;2FAA1B,0BAA0B,wEAPzB;;;;;KAKT,obANyB,SAAS;;2FAQ1B,0BAA0B;kBATtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;oBACpC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { disabled, form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiRadioImports } from \"../radio.imports\";\r\n\r\n@Component({\r\n    imports: [AiRadioImports, FormField],\r\n    template: `\r\n        <ai-radio-group [formField]=\"schemaForm.selected\" class=\"flex items-center gap-x-6\">\r\n            <ai-radio [value]=\"1\">Opção 1</ai-radio>\r\n            <ai-radio [value]=\"2\">Opção 2</ai-radio>\r\n        </ai-radio-group>\r\n    `,\r\n})\r\nexport class DemoRadioDisabledComponent {\r\n    schema = signal<{ selected: number | null }>({ selected: 2 });\r\n\r\n    schemaForm = form(this.schema, schema => {\r\n        disabled(schema.selected);\r\n    });\r\n}\r\n"]}

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

@@ -0,0 +1,26 @@
+import { DemoRadioDefaultComponent } from "./default";
+import { DemoRadioDisabledComponent } from "./disabled";
+import { DemoRadioSizeComponent } from "./size";
+import { DemoRadioValidationComponent } from "./validation";
+export const RADIO = {
+    componentName: "radio",
+    examples: [
+        {
+            name: "default",
+            component: DemoRadioDefaultComponent,
+        },
+        {
+            name: "size",
+            component: DemoRadioSizeComponent,
+        },
+        {
+            name: "disabled",
+            component: DemoRadioDisabledComponent,
+        },
+        {
+            name: "validation",
+            component: DemoRadioValidationComponent,
+        },
+    ],
+};
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/demo/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,aAAa,EAAE,OAAO;IACtB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,yBAAyB;SACvC;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,sBAAsB;SACpC;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,0BAA0B;SACxC;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,4BAA4B;SAC1C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoRadioDefaultComponent } from \"./default\";\r\nimport { DemoRadioDisabledComponent } from \"./disabled\";\r\nimport { DemoRadioSizeComponent } from \"./size\";\r\nimport { DemoRadioValidationComponent } from \"./validation\";\r\n\r\nexport const RADIO = {\r\n    componentName: \"radio\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoRadioDefaultComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoRadioSizeComponent,\r\n        },\r\n        {\r\n            name: \"disabled\",\r\n            component: DemoRadioDisabledComponent,\r\n        },\r\n        {\r\n            name: \"validation\",\r\n            component: DemoRadioValidationComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/form-field/radio/demo/size.js

@@ -0,0 +1,30 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiRadioImports } from "../radio.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../radio-group";
+import * as i2 from "../radio";
+export class DemoRadioSizeComponent {
+    schema = signal({ selected: 1 }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoRadioSizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <ai-radio-group [formField]="schemaForm.selected">
+            <ai-radio size="normal" [value]="1">Opção normal</ai-radio>
+            <ai-radio size="lg" [value]="2">Opção large</ai-radio>
+        </ai-radio-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiRadioGroup, selector: "ai-radio-group", inputs: ["class", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiRadioGroup"] }, { kind: "component", type: i2.AiRadio, selector: "ai-radio", inputs: ["value", "variant", "size", "disabled", "class"], exportAs: ["aiRadio"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiRadioImports, FormField],
+                    template: `
+        <ai-radio-group [formField]="schemaForm.selected">
+            <ai-radio size="normal" [value]="1">Opção normal</ai-radio>
+            <ai-radio size="lg" [value]="2">Opção large</ai-radio>
+        </ai-radio-group>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/demo/size.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,kBAAkB,CAAC;;;;AAWlD,MAAM,OAAO,sBAAsB;IAC/B,MAAM,GAAG,MAAM,CAA8B,EAAE,QAAQ,EAAE,CAAC,EAAE,kDAAC,CAAC;IAE9D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;uGAHtB,sBAAsB;2FAAtB,sBAAsB,wEAPrB;;;;;KAKT,obANyB,SAAS;;2FAQ1B,sBAAsB;kBATlC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC;oBACpC,QAAQ,EAAE;;;;;KAKT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiRadioImports } from \"../radio.imports\";\r\n\r\n@Component({\r\n    imports: [AiRadioImports, FormField],\r\n    template: `\r\n        <ai-radio-group [formField]=\"schemaForm.selected\">\r\n            <ai-radio size=\"normal\" [value]=\"1\">Opção normal</ai-radio>\r\n            <ai-radio size=\"lg\" [value]=\"2\">Opção large</ai-radio>\r\n        </ai-radio-group>\r\n    `,\r\n})\r\nexport class DemoRadioSizeComponent {\r\n    schema = signal<{ selected: number | null }>({ selected: 1 });\r\n\r\n    schemaForm = form(this.schema);\r\n}\r\n"]}

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

@@ -0,0 +1,90 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField, required, submit } from "@angular/forms/signals";
+import { AiButton } from "../../../button";
+import { AiRadioImports } from "../radio.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../radio-group";
+import * as i2 from "../radio";
+export class DemoRadioValidationComponent {
+    schema = signal({ fruit: null }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema, schema => {
+        required(schema.fruit);
+    });
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
+    async onSubmit() {
+        this.submitted.set(true);
+        await submit(this.schemaForm, async () => {
+            console.log("Válido ✓", this.schema());
+            return [];
+        });
+    }
+    onReset() {
+        this.schema.set({ fruit: null });
+        this.submitted.set(false);
+        this.schemaForm().reset();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoRadioValidationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div>
+            <ai-radio-group [formField]="schemaForm.fruit">
+                <ai-radio [value]="'apple'">Maçã</ai-radio>
+                <ai-radio [value]="'banana'">Banana</ai-radio>
+                <ai-radio [value]="'orange'">Laranja</ai-radio>
+            </ai-radio-group>
+
+            @if (submitted() && schemaForm().invalid()) {
+                <p class="text-sm text-destructive mt-1">Selecione uma fruta.</p>
+            }
+
+            <div class="flex gap-2 my-4">
+                <ai-button size="sm" variant="primary" (click)="onSubmit()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" (click)="onReset()">Resetar</ai-button>
+            </div>
+
+            <div class="text-sm my-4">
+                <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: i1.AiRadioGroup, selector: "ai-radio-group", inputs: ["class", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiRadioGroup"] }, { kind: "component", type: i2.AiRadio, selector: "ai-radio", inputs: ["value", "variant", "size", "disabled", "class"], exportAs: ["aiRadio"] }, { 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"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoRadioValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiRadioImports, AiButton, FormField],
+                    template: `
+        <div>
+            <ai-radio-group [formField]="schemaForm.fruit">
+                <ai-radio [value]="'apple'">Maçã</ai-radio>
+                <ai-radio [value]="'banana'">Banana</ai-radio>
+                <ai-radio [value]="'orange'">Laranja</ai-radio>
+            </ai-radio-group>
+
+            @if (submitted() && schemaForm().invalid()) {
+                <p class="text-sm text-destructive mt-1">Selecione uma fruta.</p>
+            }
+
+            <div class="flex gap-2 my-4">
+                <ai-button size="sm" variant="primary" (click)="onSubmit()">Validar</ai-button>
+                <ai-button size="sm" fill="line" variant="destructive" (click)="onReset()">Resetar</ai-button>
+            </div>
+
+            <div class="text-sm my-4">
+                <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/radio/demo/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/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,kBAAkB,CAAC;;;;AAiClD,MAAM,OAAO,4BAA4B;IACrC,MAAM,GAAG,MAAM,CAA2B,EAAE,KAAK,EAAE,IAAI,EAAE,kDAAC,CAAC;IAE3D,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;QACpC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC,CAAC;IAE1B,KAAK,CAAC,QAAQ;QACV,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzB,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,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;uGArBQ,4BAA4B;2FAA5B,4BAA4B,wEA7B3B;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BT,obA5ByB,QAAQ,qNAAE,SAAS;;2FA8BpC,4BAA4B;kBA/BxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,cAAc,EAAE,QAAQ,EAAE,SAAS,CAAC;oBAC9C,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BT;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 { AiRadioImports } from \"../radio.imports\";\r\n\r\n@Component({\r\n    imports: [AiRadioImports, AiButton, FormField],\r\n    template: `\r\n        <div>\r\n            <ai-radio-group [formField]=\"schemaForm.fruit\">\r\n                <ai-radio [value]=\"'apple'\">Maçã</ai-radio>\r\n                <ai-radio [value]=\"'banana'\">Banana</ai-radio>\r\n                <ai-radio [value]=\"'orange'\">Laranja</ai-radio>\r\n            </ai-radio-group>\r\n\r\n            @if (submitted() && schemaForm().invalid()) {\r\n                <p class=\"text-sm text-destructive mt-1\">Selecione uma fruta.</p>\r\n            }\r\n\r\n            <div class=\"flex gap-2 my-4\">\r\n                <ai-button size=\"sm\" variant=\"primary\" (click)=\"onSubmit()\">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 my-4\">\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 DemoRadioValidationComponent {\r\n    schema = signal<{ fruit: string | null }>({ fruit: null });\r\n\r\n    schemaForm = form(this.schema, schema => {\r\n        required(schema.fruit);\r\n    });\r\n\r\n    submitted = signal(false);\r\n\r\n    async onSubmit() {\r\n        this.submitted.set(true);\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({ fruit: null });\r\n        this.submitted.set(false);\r\n        this.schemaForm().reset();\r\n    }\r\n}\r\n"]}

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

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