@aiandralves/ai-ui 1.0.0

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

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

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

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import * as i0 from "@angular/core";
+export class AiRadioGroup {
+    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" }] : []));
+    valueChange = output();
+    classes = computed(() => mergeClasses("flex flex-col gap-2", this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        effect(() => {
+            this.writeValue(this.value());
+        });
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    onChange(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        this.touched.set(true);
+    }
+    select(value) {
+        if (this.disabled())
+            return;
+        this.value.set(value);
+        this.valueChange.emit(value);
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiRadioGroup, isStandalone: true, selector: "ai-radio-group", inputs: { 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 } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "class": "classes()" } }, exportAs: ["aiRadioGroup"], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-radio-group",
+                    exportAs: "aiRadioGroup",
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        role: "radiogroup",
+                        "[class]": "classes()",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+//# sourceMappingURL=radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/radio-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG9H,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;AAa7C,MAAM,OAAO,YAAY;IACZ,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE9B,KAAK,GAAG,KAAK,CAAW,IAAI,iDAAC,CAAC;IAC9B,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEjC,WAAW,GAAG,MAAM,EAAY,CAAC;IAEvB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,qBAAqB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;IAE/F;QACI,MAAM,CAAC,GAAG,EAAE;YACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,UAAU,CAAC,KAAe;QACtB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,QAAQ,CAAC,KAAe;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS;QACL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,KAAQ;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;uGArCQ,YAAY;2FAAZ,YAAY,gpCARX,gBAAgB;;2FAQjB,YAAY;kBAXxB,SAAS;mBAAC;oBACP,QAAQ,EAAE,gBAAgB;oBAC1B,QAAQ,EAAE,cAAc;oBACxB,QAAQ,EAAE,gBAAgB;oBAC1B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,IAAI,EAAE;wBACF,IAAI,EAAE,YAAY;wBAClB,SAAS,EAAE,WAAW;qBACzB;iBACJ","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, effect, input, model, output, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormValueControl } from \"@angular/forms/signals\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\n\r\n@Component({\r\n    selector: \"ai-radio-group\",\r\n    exportAs: \"aiRadioGroup\",\r\n    template: `<ng-content />`,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    host: {\r\n        role: \"radiogroup\",\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiRadioGroup<T = unknown> implements FormValueControl<T | null> {\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly value = model<T | 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\r\n    readonly valueChange = output<T | null>();\r\n\r\n    protected readonly classes = computed(() => mergeClasses(\"flex flex-col gap-2\", this.class()));\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            this.writeValue(this.value());\r\n        });\r\n    }\r\n\r\n    writeValue(value: T | null) {\r\n        this.value.set(value);\r\n    }\r\n\r\n    onChange(value: T | null) {\r\n        this.value.set(value);\r\n    }\r\n\r\n    onTouched() {\r\n        this.touched.set(true);\r\n    }\r\n\r\n    select(value: T) {\r\n        if (this.disabled()) return;\r\n        this.value.set(value);\r\n        this.valueChange.emit(value);\r\n        this.touched.set(true);\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,4 @@
+import { AiRadio } from "./radio";
+import { AiRadioGroup } from "./radio-group";
+export const AiRadioImports = [AiRadioGroup, AiRadio];
+//# sourceMappingURL=radio.imports.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.imports.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/radio.imports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,YAAY,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import { AiRadio } from \"./radio\";\r\nimport { AiRadioGroup } from \"./radio-group\";\r\n\r\nexport const AiRadioImports = [AiRadioGroup, AiRadio] as const;\r\n"]}

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

@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import { AiRadioGroup } from "./radio-group";
+import { radioLabelVariants, radioVariants } from "./radio.variants";
+import * as i0 from "@angular/core";
+export class AiRadio {
+    #group = inject(AiRadioGroup, { optional: true });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("normal", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    isChecked = computed(() => this.#group?.value() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    isDisabled = computed(() => this.disabled() || (this.#group?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isInvalid = computed(() => (this.#group?.invalid() ?? false) && (this.#group?.touched() ?? false), ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+    classes = computed(() => mergeClasses(radioVariants({ variant: this.variant(), size: this.size() }), this.isInvalid() && "border-destructive", this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    labelClasses = computed(() => mergeClasses(radioLabelVariants({ size: this.size() }), this.isInvalid() && "text-destructive"), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
+    dotClasses = computed(() => {
+        const sizeClass = this.size() === "lg" ? "size-2" : "size-1.5";
+        return mergeClasses("absolute rounded-full bg-primary-foreground pointer-events-none", sizeClass);
+    }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
+    onSelect() {
+        if (this.isDisabled())
+            return;
+        this.#group?.select(this.value());
+    }
+    onBlur() {
+        this.#group?.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiRadio, isStandalone: true, selector: "ai-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["aiRadio"], ngImport: i0, template: `
+        <label class="inline-flex items-center gap-2" [class]="isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'">
+            <span class="relative inline-flex items-center justify-center">
+                <input
+                    type="radio"
+                    [class]="classes()"
+                    [checked]="isChecked()"
+                    [disabled]="isDisabled()"
+                    [attr.data-checked]="isChecked() ? '' : null"
+                    (change)="onSelect()"
+                    (blur)="onBlur()"
+                />
+                @if (isChecked()) {
+                    <span [class]="dotClasses()"></span>
+                }
+            </span>
+            <span [class]="labelClasses()">
+                <ng-content />
+            </span>
+        </label>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-radio",
+                    exportAs: "aiRadio",
+                    template: `
+        <label class="inline-flex items-center gap-2" [class]="isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'">
+            <span class="relative inline-flex items-center justify-center">
+                <input
+                    type="radio"
+                    [class]="classes()"
+                    [checked]="isChecked()"
+                    [disabled]="isDisabled()"
+                    [attr.data-checked]="isChecked() ? '' : null"
+                    (change)="onSelect()"
+                    (blur)="onBlur()"
+                />
+                @if (isChecked()) {
+                    <span [class]="dotClasses()"></span>
+                }
+            </span>
+            <span [class]="labelClasses()">
+                <ng-content />
+            </span>
+        </label>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/radio.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE/G,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;;AA6BpF,MAAM,OAAO,OAAO;IACP,MAAM,GAAG,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAElD,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAK,CAAC;IAC5B,OAAO,GAAG,KAAK,CAA2B,SAAS,mDAAC,CAAC;IACrD,IAAI,GAAG,KAAK,CAAwB,QAAQ,gDAAC,CAAC;IAC9C,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAEpB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,qDAAC,CAAC;IAClE,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,KAAK,CAAC,sDAAC,CAAC;IACnF,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,CAAC,qDAAC,CAAC;IAEnG,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,YAAY,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,oBAAoB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDACtI,CAAC;IAEiB,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,kBAAkB,CAAC,wDAAC,CAAC;IAE/H,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;QAC/D,OAAO,YAAY,CAAC,iEAAiE,EAAE,SAAS,CAAC,CAAC;IACtG,CAAC,sDAAC,CAAC;IAEH,QAAQ;QACJ,IAAI,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAC9B,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACF,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC;IAC7B,CAAC;uGA/BQ,OAAO;2FAAP,OAAO,0sBAxBN;;;;;;;;;;;;;;;;;;;;KAoBT;;2FAIQ,OAAO;kBA3BnB,SAAS;mBAAC;oBACP,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;KAoBT;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACxC","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, inject, input, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\nimport { AiRadioGroup } from \"./radio-group\";\r\nimport { radioLabelVariants, radioVariants, RadioVariants } from \"./radio.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-radio\",\r\n    exportAs: \"aiRadio\",\r\n    template: `\r\n        <label class=\"inline-flex items-center gap-2\" [class]=\"isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\">\r\n            <span class=\"relative inline-flex items-center justify-center\">\r\n                <input\r\n                    type=\"radio\"\r\n                    [class]=\"classes()\"\r\n                    [checked]=\"isChecked()\"\r\n                    [disabled]=\"isDisabled()\"\r\n                    [attr.data-checked]=\"isChecked() ? '' : null\"\r\n                    (change)=\"onSelect()\"\r\n                    (blur)=\"onBlur()\"\r\n                />\r\n                @if (isChecked()) {\r\n                    <span [class]=\"dotClasses()\"></span>\r\n                }\r\n            </span>\r\n            <span [class]=\"labelClasses()\">\r\n                <ng-content />\r\n            </span>\r\n        </label>\r\n    `,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AiRadio<T = unknown> {\r\n    readonly #group = inject(AiRadioGroup, { optional: true });\r\n\r\n    readonly value = input.required<T>();\r\n    readonly variant = input<RadioVariants[\"variant\"]>(\"primary\");\r\n    readonly size = input<RadioVariants[\"size\"]>(\"normal\");\r\n    readonly disabled = input<boolean>(false);\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    protected readonly isChecked = computed(() => this.#group?.value() === this.value());\r\n    protected readonly isDisabled = computed(() => this.disabled() || (this.#group?.disabled() ?? false));\r\n    protected readonly isInvalid = computed(() => (this.#group?.invalid() ?? false) && (this.#group?.touched() ?? false));\r\n\r\n    protected readonly classes = computed(() =>\r\n        mergeClasses(radioVariants({ variant: this.variant(), size: this.size() }), this.isInvalid() && \"border-destructive\", this.class()),\r\n    );\r\n\r\n    protected readonly labelClasses = computed(() => mergeClasses(radioLabelVariants({ size: this.size() }), this.isInvalid() && \"text-destructive\"));\r\n\r\n    protected readonly dotClasses = computed(() => {\r\n        const sizeClass = this.size() === \"lg\" ? \"size-2\" : \"size-1.5\";\r\n        return mergeClasses(\"absolute rounded-full bg-primary-foreground pointer-events-none\", sizeClass);\r\n    });\r\n\r\n    onSelect() {\r\n        if (this.isDisabled()) return;\r\n        this.#group?.select(this.value());\r\n    }\r\n\r\n    onBlur() {\r\n        this.#group?.onTouched();\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+export const radioVariants = cva("appearance-none rounded-full border-2 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 cursor-pointer", {
+    variants: {
+        variant: {
+            primary: "border-input data-checked:border-primary data-checked:bg-primary",
+            accent: "border-input data-checked:border-accent data-checked:bg-accent",
+            destructive: "border-input data-checked:border-destructive data-checked:bg-destructive",
+        },
+        size: {
+            normal: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "normal",
+    },
+});
+export const radioLabelVariants = cva("cursor-pointer select-none text-muted-foreground empty:hidden", {
+    variants: {
+        size: {
+            normal: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+//# sourceMappingURL=radio.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/radio/radio.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC5B,iQAAiQ,EACjQ;IACI,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,kEAAkE;YAC3E,MAAM,EAAE,gEAAgE;YACxE,WAAW,EAAE,0EAA0E;SAC1F;QACD,IAAI,EAAE;YACF,MAAM,EAAE,QAAQ;YAChB,EAAE,EAAE,QAAQ;SACf;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,QAAQ;KACjB;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC,+DAA+D,EAAE;IACnG,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,MAAM,EAAE,SAAS;YACjB,EAAE,EAAE,WAAW;SAClB;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nexport const radioVariants = cva(\r\n    \"appearance-none rounded-full border-2 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 cursor-pointer\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                primary: \"border-input data-checked:border-primary data-checked:bg-primary\",\r\n                accent: \"border-input data-checked:border-accent data-checked:bg-accent\",\r\n                destructive: \"border-input data-checked:border-destructive data-checked:bg-destructive\",\r\n            },\r\n            size: {\r\n                normal: \"size-4\",\r\n                lg: \"size-5\",\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 radioLabelVariants = cva(\"cursor-pointer select-none text-muted-foreground empty:hidden\", {\r\n    variants: {\r\n        size: {\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 RadioVariants = VariantProps<typeof radioVariants>;\r\n"]}

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

@@ -0,0 +1,39 @@
+import { Component, signal } from "@angular/core";
+import { form, FormField } from "@angular/forms/signals";
+import { AiSegmented } from "../segmented";
+import * as i0 from "@angular/core";
+export class DemoSegmentedDefaultComponent {
+    schema = signal({ view: "list" }, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema);
+    items = [
+        { value: "list", icon: "list-unordered", label: "Lista" },
+        { value: "grid", icon: "grid", label: "Grade" },
+        { value: "table", icon: "table", label: "Tabela" },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSegmentedDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4">
+            <span class="text-sm font-medium">Selecione uma opção:</span>
+            <ai-segmented [items]="items" [formField]="schemaForm.view" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ schema().view }}</strong>
+            </p>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSegmented, selector: "ai-segmented", inputs: ["items", "size", "class", "defaultValue", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiSegmented"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSegmented, FormField],
+                    template: `
+        <div class="flex flex-col gap-4">
+            <span class="text-sm font-medium">Selecione uma opção:</span>
+            <ai-segmented [items]="items" [formField]="schemaForm.view" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ schema().view }}</strong>
+            </p>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/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;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;;AAe3C,MAAM,OAAO,6BAA6B;IACtC,MAAM,GAAG,MAAM,CAAmB,EAAE,IAAI,EAAE,MAAM,EAAE,kDAAC,CAAC;IAEpD,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAE/B,KAAK,GAAsB;QACvB,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,gBAA8B,EAAE,KAAK,EAAE,OAAO,EAAE;QACvE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAoB,EAAE,KAAK,EAAE,OAAO,EAAE;QAC7D,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAqB,EAAE,KAAK,EAAE,QAAQ,EAAE;KACnE,CAAC;uGATO,6BAA6B;2FAA7B,6BAA6B,wEAV5B;;;;;;;;KAQT,4DATS,WAAW,sPAAE,SAAS;;2FAWvB,6BAA6B;kBAZzC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC;oBACjC,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { form, FormField } from \"@angular/forms/signals\";\r\n\r\nimport { AiIconType } from \"../../../icon\";\r\nimport { AiSegmented } from \"../segmented\";\r\nimport { AiSegmentedItem } from \"../segmented.interface\";\r\n\r\n@Component({\r\n    imports: [AiSegmented, FormField],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4\">\r\n            <span class=\"text-sm font-medium\">Selecione uma opção:</span>\r\n            <ai-segmented [items]=\"items\" [formField]=\"schemaForm.view\" />\r\n            <p class=\"text-sm text-muted-foreground\">\r\n                Valor selecionado: <strong>{{ schema().view }}</strong>\r\n            </p>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSegmentedDefaultComponent {\r\n    schema = signal<{ view: string }>({ view: \"list\" });\r\n\r\n    schemaForm = form(this.schema);\r\n\r\n    items: AiSegmentedItem[] = [\r\n        { value: \"list\", icon: \"list-unordered\" as AiIconType, label: \"Lista\" },\r\n        { value: \"grid\", icon: \"grid\" as AiIconType, label: \"Grade\" },\r\n        { value: \"table\", icon: \"table\" as AiIconType, label: \"Tabela\" },\r\n    ];\r\n}\r\n"]}

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

@@ -0,0 +1,49 @@
+import { Component } from "@angular/core";
+import { AiSegmented } from "../segmented";
+import * as i0 from "@angular/core";
+export class DemoSegmentedDisabledComponent {
+    items = [
+        { value: "option1", label: "Opção 1" },
+        { value: "option2", label: "Opção 2" },
+        { value: "option3", label: "Opção 3" },
+    ];
+    itemsWithDisabled = [
+        { value: "option1", label: "Opção 1" },
+        { value: "option2", label: "Opção 2", disabled: true },
+        { value: "option3", label: "Opção 3" },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSegmentedDisabledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Grupo desabilitado:</span>
+                <ai-segmented [items]="items" [disabled]="true" [defaultValue]="'option1'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Item individual desabilitado:</span>
+                <ai-segmented [items]="itemsWithDisabled" [defaultValue]="'option1'" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSegmented, selector: "ai-segmented", inputs: ["items", "size", "class", "defaultValue", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiSegmented"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedDisabledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSegmented],
+                    template: `
+        <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Grupo desabilitado:</span>
+                <ai-segmented [items]="items" [disabled]="true" [defaultValue]="'option1'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Item individual desabilitado:</span>
+                <ai-segmented [items]="itemsWithDisabled" [defaultValue]="'option1'" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=disabled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/demo/disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;;AAmB3C,MAAM,OAAO,8BAA8B;IACvC,KAAK,GAAsB;QACvB,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACzC,CAAC;IAEF,iBAAiB,GAAsB;QACnC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;QACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;KACzC,CAAC;uGAXO,8BAA8B;2FAA9B,8BAA8B,wEAd7B;;;;;;;;;;;;KAYT,4DAbS,WAAW;;2FAeZ,8BAA8B;kBAhB1C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,QAAQ,EAAE;;;;;;;;;;;;KAYT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiSegmented } from \"../segmented\";\r\nimport { AiSegmentedItem } from \"../segmented.interface\";\r\n\r\n@Component({\r\n    imports: [AiSegmented],\r\n    template: `\r\n        <div class=\"flex flex-col gap-6\">\r\n            <div class=\"flex flex-col gap-2\">\r\n                <span class=\"text-sm font-medium\">Grupo desabilitado:</span>\r\n                <ai-segmented [items]=\"items\" [disabled]=\"true\" [defaultValue]=\"'option1'\" />\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-2\">\r\n                <span class=\"text-sm font-medium\">Item individual desabilitado:</span>\r\n                <ai-segmented [items]=\"itemsWithDisabled\" [defaultValue]=\"'option1'\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSegmentedDisabledComponent {\r\n    items: AiSegmentedItem[] = [\r\n        { value: \"option1\", label: \"Opção 1\" },\r\n        { value: \"option2\", label: \"Opção 2\" },\r\n        { value: \"option3\", label: \"Opção 3\" },\r\n    ];\r\n\r\n    itemsWithDisabled: AiSegmentedItem[] = [\r\n        { value: \"option1\", label: \"Opção 1\" },\r\n        { value: \"option2\", label: \"Opção 2\", disabled: true },\r\n        { value: \"option3\", label: \"Opção 3\" },\r\n    ];\r\n}\r\n"]}

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

@@ -0,0 +1,21 @@
+import { DemoSegmentedDefaultComponent } from "./default";
+import { DemoSegmentedDisabledComponent } from "./disabled";
+import { DemoSegmentedSizeComponent } from "./size";
+export const SEGMENTED = {
+    componentName: "segmented",
+    examples: [
+        {
+            name: "default",
+            component: DemoSegmentedDefaultComponent,
+        },
+        {
+            name: "disabled",
+            component: DemoSegmentedDisabledComponent,
+        },
+        {
+            name: "size",
+            component: DemoSegmentedSizeComponent,
+        },
+    ],
+};
+//# sourceMappingURL=segmented.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/demo/segmented.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,QAAQ,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,aAAa,EAAE,WAAW;IAC1B,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,6BAA6B;SAC3C;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,8BAA8B;SAC5C;QACD;YACI,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,0BAA0B;SACxC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoSegmentedDefaultComponent } from \"./default\";\r\nimport { DemoSegmentedDisabledComponent } from \"./disabled\";\r\nimport { DemoSegmentedSizeComponent } from \"./size\";\r\n\r\nexport const SEGMENTED = {\r\n    componentName: \"segmented\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoSegmentedDefaultComponent,\r\n        },\r\n        {\r\n            name: \"disabled\",\r\n            component: DemoSegmentedDisabledComponent,\r\n        },\r\n        {\r\n            name: \"size\",\r\n            component: DemoSegmentedSizeComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

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

@@ -0,0 +1,55 @@
+import { Component } from "@angular/core";
+import { AiSegmented } from "../segmented";
+import * as i0 from "@angular/core";
+export class DemoSegmentedSizeComponent {
+    items = [
+        { value: "left", icon: "align-left" },
+        { value: "center", icon: "align-center" },
+        { value: "right", icon: "align-right" },
+        { value: "justify", icon: "align-justify" },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSegmentedSizeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Small:</span>
+                <ai-segmented [items]="items" size="sm" [defaultValue]="'left'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Normal (padrão):</span>
+                <ai-segmented [items]="items" size="normal" [defaultValue]="'center'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Large:</span>
+                <ai-segmented [items]="items" size="lg" [defaultValue]="'right'" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSegmented, selector: "ai-segmented", inputs: ["items", "size", "class", "defaultValue", "value", "touched", "disabled", "invalid", "readonly", "required"], outputs: ["valueChange", "touchedChange"], exportAs: ["aiSegmented"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSegmentedSizeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSegmented],
+                    template: `
+        <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Small:</span>
+                <ai-segmented [items]="items" size="sm" [defaultValue]="'left'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Normal (padrão):</span>
+                <ai-segmented [items]="items" size="normal" [defaultValue]="'center'" />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <span class="text-sm font-medium">Large:</span>
+                <ai-segmented [items]="items" size="lg" [defaultValue]="'right'" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=size.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/demo/size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;;AAwB3C,MAAM,OAAO,0BAA0B;IACnC,KAAK,GAAsB;QACvB,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,YAA0B,EAAE;QACnD,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,cAA4B,EAAE;QACvD,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,aAA2B,EAAE;QACrD,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,eAA6B,EAAE;KAC5D,CAAC;uGANO,0BAA0B;2FAA1B,0BAA0B,wEAnBzB;;;;;;;;;;;;;;;;;KAiBT,4DAlBS,WAAW;;2FAoBZ,0BAA0B;kBArBtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,QAAQ,EAAE;;;;;;;;;;;;;;;;;KAiBT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiIconType } from \"../../../icon\";\r\nimport { AiSegmented } from \"../segmented\";\r\nimport { AiSegmentedItem } from \"../segmented.interface\";\r\n\r\n@Component({\r\n    imports: [AiSegmented],\r\n    template: `\r\n        <div class=\"flex flex-col gap-6\">\r\n            <div class=\"flex flex-col gap-2\">\r\n                <span class=\"text-sm font-medium\">Small:</span>\r\n                <ai-segmented [items]=\"items\" size=\"sm\" [defaultValue]=\"'left'\" />\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-2\">\r\n                <span class=\"text-sm font-medium\">Normal (padrão):</span>\r\n                <ai-segmented [items]=\"items\" size=\"normal\" [defaultValue]=\"'center'\" />\r\n            </div>\r\n\r\n            <div class=\"flex flex-col gap-2\">\r\n                <span class=\"text-sm font-medium\">Large:</span>\r\n                <ai-segmented [items]=\"items\" size=\"lg\" [defaultValue]=\"'right'\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSegmentedSizeComponent {\r\n    items: AiSegmentedItem[] = [\r\n        { value: \"left\", icon: \"align-left\" as AiIconType },\r\n        { value: \"center\", icon: \"align-center\" as AiIconType },\r\n        { value: \"right\", icon: \"align-right\" as AiIconType },\r\n        { value: \"justify\", icon: \"align-justify\" as AiIconType },\r\n    ];\r\n}\r\n"]}

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

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

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

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

package/esm2022/lib/components/form-field/segmented/segmented.interface.js

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

package/esm2022/lib/components/form-field/segmented/segmented.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.interface.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/segmented.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { AiIconType } from \"../../icon/icons\";\r\n\r\nexport interface AiSegmentedItem {\r\n    value: string;\r\n    label?: string;\r\n    icon?: AiIconType;\r\n    disabled?: boolean;\r\n}\r\n"]}

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

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../../core";
+import { AiIcon } from "../../icon/icon.component";
+import { segmentedItemVariants, segmentedVariants } from "./segmented.variants";
+import * as i0 from "@angular/core";
+export class AiSegmented {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    size = input("normal", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    defaultValue = input("", ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    value = model("", ...(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" }] : []));
+    valueChange = output();
+    containerClasses = computed(() => mergeClasses(segmentedVariants(), this.class()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    itemClasses = computed(() => mergeClasses(segmentedItemVariants({ size: this.size() })), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    constructor() {
+        effect(() => {
+            const defaultVal = this.defaultValue();
+            if (defaultVal && !this.value()) {
+                this.writeValue(defaultVal);
+            }
+        });
+    }
+    isActive(itemValue) {
+        return this.value() === itemValue;
+    }
+    onSelect(item) {
+        if (this.disabled() || item.disabled)
+            return;
+        this.value.set(item.value);
+        this.valueChange.emit(item.value);
+        this.touched.set(true);
+    }
+    writeValue(value) {
+        this.value.set(value ?? "");
+    }
+    onChange(value) {
+        this.value.set(value);
+    }
+    onTouched() {
+        this.touched.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiSegmented, isStandalone: true, selector: "ai-segmented", inputs: { items: { classPropertyName: "items", publicName: "items", 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 }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", 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 } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { properties: { "class": "'inline-block'" } }, exportAs: ["aiSegmented"], ngImport: i0, template: "<div [class]=\"containerClasses()\" role=\"radiogroup\">\r\n    @for (item of items(); track item.value) {\r\n        <button\r\n            type=\"button\"\r\n            role=\"radio\"\r\n            [attr.aria-checked]=\"isActive(item.value)\"\r\n            [attr.data-active]=\"isActive(item.value) ? '' : null\"\r\n            [class]=\"itemClasses()\"\r\n            [disabled]=\"disabled() || item.disabled\"\r\n            (click)=\"onSelect(item)\">\r\n            @if (item.icon) {\r\n                <ai-icon [icon]=\"item.icon\" size=\"xs\" />\r\n            }\r\n            @if (item.label) {\r\n                <span>{{ item.label }}</span>\r\n            }\r\n        </button>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSegmented, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-segmented", exportAs: "aiSegmented", imports: [AiIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "'inline-block'",
+                    }, template: "<div [class]=\"containerClasses()\" role=\"radiogroup\">\r\n    @for (item of items(); track item.value) {\r\n        <button\r\n            type=\"button\"\r\n            role=\"radio\"\r\n            [attr.aria-checked]=\"isActive(item.value)\"\r\n            [attr.data-active]=\"isActive(item.value) ? '' : null\"\r\n            [class]=\"itemClasses()\"\r\n            [disabled]=\"disabled() || item.disabled\"\r\n            (click)=\"onSelect(item)\">\r\n            @if (item.icon) {\r\n                <ai-icon [icon]=\"item.icon\" size=\"xs\" />\r\n            }\r\n            @if (item.label) {\r\n                <span>{{ item.label }}</span>\r\n            }\r\n        </button>\r\n    }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", 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 }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+//# sourceMappingURL=segmented.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/segmented.ts","../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/segmented.html"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG9H,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAqB,MAAM,sBAAsB,CAAC;;AAanG,MAAM,OAAO,WAAW;IACX,KAAK,GAAG,KAAK,CAAoB,EAAE,iDAAC,CAAC;IACrC,IAAI,GAAG,KAAK,CAA4B,QAAQ,gDAAC,CAAC;IAClD,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAC9B,YAAY,GAAG,KAAK,CAAS,EAAE,wDAAC,CAAC;IAEjC,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC,CAAC;IAC1B,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,OAAO,GAAG,KAAK,CAAU,KAAK,mDAAC,CAAC;IAChC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IAEjC,WAAW,GAAG,MAAM,EAAU,CAAC;IAErB,gBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,4DAAC,CAAC;IACnF,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,uDAAC,CAAC;IAE5G;QACI,MAAM,CAAC,GAAG,EAAE;YACR,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACvC,IAAI,UAAU,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;gBAC9B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YAChC,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAES,QAAQ,CAAC,SAAiB;QAChC,OAAO,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,CAAC;IACtC,CAAC;IAES,QAAQ,CAAC,IAAqB;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC7C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,UAAU,CAAC,KAAa;QACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAChC,CAAC;IAED,QAAQ,CAAC,KAAa;QAClB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,SAAS;QACL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;uGAhDQ,WAAW;2FAAX,WAAW,s+CCrBxB,+sBAmBA,4CDNc,MAAM;;2FAQP,WAAW;kBAXvB,SAAS;+BACI,cAAc,YACd,aAAa,WACd,CAAC,MAAM,CAAC,mBAEA,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,QAC/B;wBACF,SAAS,EAAE,gBAAgB;qBAC9B","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, effect, input, model, output, ViewEncapsulation } from \"@angular/core\";\r\nimport { FormValueControl } from \"@angular/forms/signals\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\nimport { AiIcon } from \"../../icon/icon.component\";\r\nimport { AiSegmentedItem } from \"./segmented.interface\";\r\nimport { segmentedItemVariants, segmentedVariants, SegmentedVariants } from \"./segmented.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-segmented\",\r\n    exportAs: \"aiSegmented\",\r\n    imports: [AiIcon],\r\n    templateUrl: \"./segmented.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    host: {\r\n        \"[class]\": \"'inline-block'\",\r\n    },\r\n})\r\nexport class AiSegmented implements FormValueControl<string> {\r\n    readonly items = input<AiSegmentedItem[]>([]);\r\n    readonly size = input<SegmentedVariants[\"size\"]>(\"normal\");\r\n    readonly class = input<ClassValue>(\"\");\r\n    readonly defaultValue = input<string>(\"\");\r\n\r\n    readonly value = model<string>(\"\");\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\r\n    readonly valueChange = output<string>();\r\n\r\n    protected readonly containerClasses = computed(() => mergeClasses(segmentedVariants(), this.class()));\r\n    protected readonly itemClasses = computed(() => mergeClasses(segmentedItemVariants({ size: this.size() })));\r\n\r\n    constructor() {\r\n        effect(() => {\r\n            const defaultVal = this.defaultValue();\r\n            if (defaultVal && !this.value()) {\r\n                this.writeValue(defaultVal);\r\n            }\r\n        });\r\n    }\r\n\r\n    protected isActive(itemValue: string): boolean {\r\n        return this.value() === itemValue;\r\n    }\r\n\r\n    protected onSelect(item: AiSegmentedItem) {\r\n        if (this.disabled() || item.disabled) return;\r\n        this.value.set(item.value);\r\n        this.valueChange.emit(item.value);\r\n        this.touched.set(true);\r\n    }\r\n\r\n    writeValue(value: string) {\r\n        this.value.set(value ?? \"\");\r\n    }\r\n\r\n    onChange(value: string) {\r\n        this.value.set(value);\r\n    }\r\n\r\n    onTouched() {\r\n        this.touched.set(true);\r\n    }\r\n}\r\n","<div [class]=\"containerClasses()\" role=\"radiogroup\">\r\n    @for (item of items(); track item.value) {\r\n        <button\r\n            type=\"button\"\r\n            role=\"radio\"\r\n            [attr.aria-checked]=\"isActive(item.value)\"\r\n            [attr.data-active]=\"isActive(item.value) ? '' : null\"\r\n            [class]=\"itemClasses()\"\r\n            [disabled]=\"disabled() || item.disabled\"\r\n            (click)=\"onSelect(item)\">\r\n            @if (item.icon) {\r\n                <ai-icon [icon]=\"item.icon\" size=\"xs\" />\r\n            }\r\n            @if (item.label) {\r\n                <span>{{ item.label }}</span>\r\n            }\r\n        </button>\r\n    }\r\n</div>\r\n"]}

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

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+import { mergeClasses } from "../../../core";
+export const segmentedVariants = cva(mergeClasses("inline-flex items-center rounded-lg bg-muted p-1 text-muted-foreground"));
+export const segmentedItemVariants = cva(mergeClasses("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "data-active:bg-background data-active:text-foreground data-active:shadow-sm"), {
+    variants: {
+        size: {
+            sm: "px-2 py-1 text-xs",
+            normal: "px-3 py-1.5 text-sm",
+            lg: "px-4 py-2 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+//# sourceMappingURL=segmented.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.variants.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/form-field/segmented/segmented.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,YAAY,CAAC,wEAAwE,CAAC,CAAC,CAAC;AAE7H,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CACpC,YAAY,CACR,yGAAyG,EACzG,qGAAqG,EACrG,kDAAkD,EAClD,6EAA6E,CAChF,EACD;IACI,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,mBAAmB;YACvB,MAAM,EAAE,qBAAqB;YAC7B,EAAE,EAAE,qBAAqB;SAC5B;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CACJ,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nimport { mergeClasses } from \"../../../core\";\r\n\r\nexport const segmentedVariants = cva(mergeClasses(\"inline-flex items-center rounded-lg bg-muted p-1 text-muted-foreground\"));\r\n\r\nexport const segmentedItemVariants = cva(\r\n    mergeClasses(\r\n        \"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium transition-all\",\r\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n        \"disabled:pointer-events-none disabled:opacity-50\",\r\n        \"data-active:bg-background data-active:text-foreground data-active:shadow-sm\",\r\n    ),\r\n    {\r\n        variants: {\r\n            size: {\r\n                sm: \"px-2 py-1 text-xs\",\r\n                normal: \"px-3 py-1.5 text-sm\",\r\n                lg: \"px-4 py-2 text-base\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            size: \"normal\",\r\n        },\r\n    },\r\n);\r\n\r\nexport type SegmentedVariants = VariantProps<typeof segmentedItemVariants>;\r\n"]}

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

@@ -0,0 +1,47 @@
+import { Component } from "@angular/core";
+import { AiBadge } from "../../../badge";
+import { AiSelectImports } from "../select.imports";
+import * as i0 from "@angular/core";
+import * as i1 from "../select";
+import * as i2 from "../select-item";
+export class DemoSelectDefaultComponent {
+    selectValue = "";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSelectDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoSelectDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-y-4">
+            @if (selectValue) {
+                <ai-badge variant="primary" class="w-max">
+                    {{ selectValue }}
+                </ai-badge>
+            }
+
+            <ai-select class="w-75" placeholder="selected options" [(value)]="selectValue">
+                <ai-select-item value="option1">Option 1</ai-select-item>
+                <ai-select-item value="option2">Option 2</ai-select-item>
+                <ai-select-item value="option3">Option 3</ai-select-item>
+            </ai-select>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.AiSelect, selector: "ai-select", inputs: ["maxLabelCount", "multiple", "value", "disabled", "invalid", "readonly", "required", "label", "placeholder", "id", "touched", "class", "size", "selectedValue"], outputs: ["valueChange", "touchedChange", "selectedValueChange", "selectionChange"], exportAs: ["aiSelect"] }, { kind: "component", type: i2.AiSelectItem, selector: "ai-select-item, [ai-select-item]", inputs: ["value", "disabled", "class"] }, { kind: "component", type: AiBadge, selector: "ai-badge", inputs: ["variant", "shape", "fill", "icon", "disabled", "close", "class"], outputs: ["closed"], exportAs: ["aiBadge"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSelectDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSelectImports, AiBadge],
+                    template: `
+        <div class="flex flex-col gap-y-4">
+            @if (selectValue) {
+                <ai-badge variant="primary" class="w-max">
+                    {{ selectValue }}
+                </ai-badge>
+            }
+
+            <ai-select class="w-75" placeholder="selected options" [(value)]="selectValue">
+                <ai-select-item value="option1">Option 1</ai-select-item>
+                <ai-select-item value="option2">Option 2</ai-select-item>
+                <ai-select-item value="option3">Option 3</ai-select-item>
+            </ai-select>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../../libs/ai-ui/src/lib/components/form-field/select/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;AAoBpD,MAAM,OAAO,0BAA0B;IACnC,WAAW,GAAG,EAAE,CAAC;uGADR,0BAA0B;2FAA1B,0BAA0B,wEAhBzB;;;;;;;;;;;;;;KAcT,whBAf0B,OAAO;;2FAiBzB,0BAA0B;kBAlBtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC;oBACnC,QAAQ,EAAE;;;;;;;;;;;;;;KAcT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiBadge } from \"../../../badge\";\r\nimport { AiSelectImports } from \"../select.imports\";\r\n\r\n@Component({\r\n    imports: [AiSelectImports, AiBadge],\r\n    template: `\r\n        <div class=\"flex flex-col gap-y-4\">\r\n            @if (selectValue) {\r\n                <ai-badge variant=\"primary\" class=\"w-max\">\r\n                    {{ selectValue }}\r\n                </ai-badge>\r\n            }\r\n\r\n            <ai-select class=\"w-75\" placeholder=\"selected options\" [(value)]=\"selectValue\">\r\n                <ai-select-item value=\"option1\">Option 1</ai-select-item>\r\n                <ai-select-item value=\"option2\">Option 2</ai-select-item>\r\n                <ai-select-item value=\"option3\">Option 3</ai-select-item>\r\n            </ai-select>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSelectDefaultComponent {\r\n    selectValue = \"\";\r\n}\r\n"]}