@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/stepper/demo/default.js

@@ -0,0 +1,86 @@
+import { Component } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiStep, AiStepper } from "../stepper";
+import * as i0 from "@angular/core";
+export class DemoStepperDefaultComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoStepperDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" linear>
+                <ai-step label="Identificação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Identificação</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Contestação</span>
+
+                        <div class="flex items-center gap-x-2 justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Final</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiStepper, selector: "ai-stepper", inputs: ["orientation", "linear", "class"], outputs: ["selectionChange"], exportAs: ["aiStepper"] }, { kind: "component", type: AiStep, selector: "ai-step", inputs: ["label", "optional", "completed", "editable"], exportAs: ["aiStep"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiStepper, AiStep, AiButton],
+                    template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" linear>
+                <ai-step label="Identificação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Identificação</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Contestação</span>
+
+                        <div class="flex items-center gap-x-2 justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Final</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/stepper/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/stepper/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;;AAyC/C,MAAM,OAAO,2BAA2B;uGAA3B,2BAA2B;2FAA3B,2BAA2B,wEArC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT,4DApCS,SAAS,0JAAE,MAAM,kIAAE,QAAQ;;2FAsC5B,2BAA2B;kBAvCvC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;oBACtC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiStep, AiStepper } from \"../stepper\";\r\n\r\n@Component({\r\n    imports: [AiStepper, AiStep, AiButton],\r\n    template: `\r\n        <div class=\"w-full max-w-xl\">\r\n            <ai-stepper #stepper=\"aiStepper\" linear>\r\n                <ai-step label=\"Identificação\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Identificação</span>\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button (click)=\"stepper.next()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Contestação\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Contestação</span>\r\n\r\n                        <div class=\"flex items-center gap-x-2 justify-end\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                            <button ai-button (click)=\"stepper.next()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Resumo\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Final</span>\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n            </ai-stepper>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoStepperDefaultComponent {}\r\n"]}

package/esm2022/lib/components/stepper/demo/orientation.js

@@ -0,0 +1,86 @@
+import { Component } from "@angular/core";
+import { AiButton } from "../../button";
+import { AiStep, AiStepper } from "../stepper";
+import * as i0 from "@angular/core";
+export class DemoStepperOrientationComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperOrientationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoStepperOrientationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" orientation="vertical" linear>
+                <ai-step label="Identificação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Identificação</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Contestação</span>
+
+                        <div class="flex items-center gap-x-2 justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Final</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiStepper, selector: "ai-stepper", inputs: ["orientation", "linear", "class"], outputs: ["selectionChange"], exportAs: ["aiStepper"] }, { kind: "component", type: AiStep, selector: "ai-step", inputs: ["label", "optional", "completed", "editable"], exportAs: ["aiStep"] }, { kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperOrientationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiStepper, AiStep, AiButton],
+                    template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" orientation="vertical" linear>
+                <ai-step label="Identificação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Identificação</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Contestação</span>
+
+                        <div class="flex items-center gap-x-2 justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <span>Final</span>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=orientation.js.map

package/esm2022/lib/components/stepper/demo/orientation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientation.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/stepper/demo/orientation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;;AAyC/C,MAAM,OAAO,+BAA+B;uGAA/B,+BAA+B;2FAA/B,+BAA+B,wEArC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT,4DApCS,SAAS,0JAAE,MAAM,kIAAE,QAAQ;;2FAsC5B,+BAA+B;kBAvC3C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;oBACtC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiStep, AiStepper } from \"../stepper\";\r\n\r\n@Component({\r\n    imports: [AiStepper, AiStep, AiButton],\r\n    template: `\r\n        <div class=\"w-full max-w-xl\">\r\n            <ai-stepper #stepper=\"aiStepper\" orientation=\"vertical\" linear>\r\n                <ai-step label=\"Identificação\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Identificação</span>\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button (click)=\"stepper.next()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Contestação\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Contestação</span>\r\n\r\n                        <div class=\"flex items-center gap-x-2 justify-end\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                            <button ai-button (click)=\"stepper.next()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Resumo\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <span>Final</span>\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n            </ai-stepper>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoStepperOrientationComponent {}\r\n"]}

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

@@ -0,0 +1,21 @@
+import { DemoStepperDefaultComponent } from "./default";
+import { DemoStepperOrientationComponent } from "./orientation";
+import { DemoStepperValidationComponent } from "./validation";
+export const STEPPER = {
+    componentName: "stepper",
+    examples: [
+        {
+            name: "default",
+            component: DemoStepperDefaultComponent,
+        },
+        {
+            name: "orientation",
+            component: DemoStepperOrientationComponent,
+        },
+        {
+            name: "validation",
+            component: DemoStepperValidationComponent,
+        },
+    ],
+};
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/stepper/demo/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,+BAA+B,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,8BAA8B,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,aAAa,EAAE,SAAS;IACxB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,2BAA2B;SACzC;QACD;YACI,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,+BAA+B;SAC7C;QACD;YACI,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,8BAA8B;SAC5C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoStepperDefaultComponent } from \"./default\";\r\nimport { DemoStepperOrientationComponent } from \"./orientation\";\r\nimport { DemoStepperValidationComponent } from \"./validation\";\r\n\r\nexport const STEPPER = {\r\n    componentName: \"stepper\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoStepperDefaultComponent,\r\n        },\r\n        {\r\n            name: \"orientation\",\r\n            component: DemoStepperOrientationComponent,\r\n        },\r\n        {\r\n            name: \"validation\",\r\n            component: DemoStepperValidationComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/stepper/demo/validation.js

@@ -0,0 +1,107 @@
+import { Component, signal } from "@angular/core";
+import { email, form, FormField, required } from "@angular/forms/signals";
+import { AiButton } from "../../button";
+import { AiInput } from "../../form-field/input";
+import { AiStep, AiStepper } from "../stepper";
+import * as i0 from "@angular/core";
+function makeSchema() {
+    return { name: "", email: "" };
+}
+export class DemoStepperValidationComponent {
+    schema = signal(makeSchema(), ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    schemaForm = form(this.schema, s => {
+        required(s.name, { message: "Nome é obrigatório." });
+        required(s.email, { message: "E-mail é obrigatório." });
+        email(s.email, { message: "Informe um e-mail válido." });
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoStepperValidationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" linear>
+                <ai-step label="Identificação" [completed]="!schemaForm.name().invalid()">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <ai-input label="Nome" [formField]="schemaForm.name" class="w-full" />
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()" [disabled]="schemaForm.name().invalid()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação" [completed]="!schemaForm.email().invalid()">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <ai-input label="E-mail" type="email" [formField]="schemaForm.email" class="w-full" />
+
+                        <div class="flex items-center justify-end gap-x-2">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()" [disabled]="schemaForm.email().invalid()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <p class="text-sm text-muted-foreground">
+                            Nome: <span class="text-foreground font-medium">{{ schemaForm.name().value() }}</span>
+                        </p>
+                        <p class="text-sm text-muted-foreground">
+                            E-mail: <span class="text-foreground font-medium">{{ schemaForm.email().value() }}</span>
+                        </p>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiStepper, selector: "ai-stepper", inputs: ["orientation", "linear", "class"], outputs: ["selectionChange"], exportAs: ["aiStepper"] }, { kind: "component", type: AiStep, selector: "ai-step", inputs: ["label", "optional", "completed", "editable"], exportAs: ["aiStep"] }, { 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: AiInput, selector: "ai-input", inputs: ["id", "label", "placeholder", "type", "variant", "icon", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "errors", "strength", "mask", "maskConfig", "normalize", "normalizeConfig"], outputs: ["valueChange", "touchedChange", "changeIcon"], exportAs: ["aiInput"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoStepperValidationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiStepper, AiStep, AiButton, AiInput, FormField],
+                    template: `
+        <div class="w-full max-w-xl">
+            <ai-stepper #stepper="aiStepper" linear>
+                <ai-step label="Identificação" [completed]="!schemaForm.name().invalid()">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <ai-input label="Nome" [formField]="schemaForm.name" class="w-full" />
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button (click)="stepper.next()" [disabled]="schemaForm.name().invalid()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Contestação" [completed]="!schemaForm.email().invalid()">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <ai-input label="E-mail" type="email" [formField]="schemaForm.email" class="w-full" />
+
+                        <div class="flex items-center justify-end gap-x-2">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                            <button ai-button (click)="stepper.next()" [disabled]="schemaForm.email().invalid()">Próximo</button>
+                        </div>
+                    </div>
+                </ai-step>
+
+                <ai-step label="Resumo">
+                    <div class="flex flex-col gap-y-4 pt-4">
+                        <p class="text-sm text-muted-foreground">
+                            Nome: <span class="text-foreground font-medium">{{ schemaForm.name().value() }}</span>
+                        </p>
+                        <p class="text-sm text-muted-foreground">
+                            E-mail: <span class="text-foreground font-medium">{{ schemaForm.email().value() }}</span>
+                        </p>
+
+                        <div class="flex items-center justify-end">
+                            <button ai-button variant="outline" (click)="stepper.previous()">Voltar</button>
+                        </div>
+                    </div>
+                </ai-step>
+            </ai-stepper>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=validation.js.map

package/esm2022/lib/components/stepper/demo/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/stepper/demo/validation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;;AAO/C,SAAS,UAAU;IACf,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AACnC,CAAC;AA8CD,MAAM,OAAO,8BAA8B;IAC9B,MAAM,GAAG,MAAM,CAAS,UAAU,EAAE,kDAAC,CAAC;IAEtC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAC,CAAC;QACrD,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE,CAAC,CAAC;QACxD,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;uGAPM,8BAA8B;2FAA9B,8BAA8B,wEA1C7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCT,4DAzCS,SAAS,0JAAE,MAAM,kIAAE,QAAQ,qNAAE,OAAO,0XAAE,SAAS;;2FA2ChD,8BAA8B;kBA5C1C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;oBAC1D,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCT;iBACJ","sourcesContent":["import { Component, signal } from \"@angular/core\";\r\nimport { email, form, FormField, required } from \"@angular/forms/signals\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiInput } from \"../../form-field/input\";\r\nimport { AiStep, AiStepper } from \"../stepper\";\r\n\r\ninterface Schema {\r\n    name: string;\r\n    email: string;\r\n}\r\n\r\nfunction makeSchema(): Schema {\r\n    return { name: \"\", email: \"\" };\r\n}\r\n\r\n@Component({\r\n    imports: [AiStepper, AiStep, AiButton, AiInput, FormField],\r\n    template: `\r\n        <div class=\"w-full max-w-xl\">\r\n            <ai-stepper #stepper=\"aiStepper\" linear>\r\n                <ai-step label=\"Identificação\" [completed]=\"!schemaForm.name().invalid()\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <ai-input label=\"Nome\" [formField]=\"schemaForm.name\" class=\"w-full\" />\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button (click)=\"stepper.next()\" [disabled]=\"schemaForm.name().invalid()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Contestação\" [completed]=\"!schemaForm.email().invalid()\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <ai-input label=\"E-mail\" type=\"email\" [formField]=\"schemaForm.email\" class=\"w-full\" />\r\n\r\n                        <div class=\"flex items-center justify-end gap-x-2\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                            <button ai-button (click)=\"stepper.next()\" [disabled]=\"schemaForm.email().invalid()\">Próximo</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n\r\n                <ai-step label=\"Resumo\">\r\n                    <div class=\"flex flex-col gap-y-4 pt-4\">\r\n                        <p class=\"text-sm text-muted-foreground\">\r\n                            Nome: <span class=\"text-foreground font-medium\">{{ schemaForm.name().value() }}</span>\r\n                        </p>\r\n                        <p class=\"text-sm text-muted-foreground\">\r\n                            E-mail: <span class=\"text-foreground font-medium\">{{ schemaForm.email().value() }}</span>\r\n                        </p>\r\n\r\n                        <div class=\"flex items-center justify-end\">\r\n                            <button ai-button variant=\"outline\" (click)=\"stepper.previous()\">Voltar</button>\r\n                        </div>\r\n                    </div>\r\n                </ai-step>\r\n            </ai-stepper>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoStepperValidationComponent {\r\n    readonly schema = signal<Schema>(makeSchema());\r\n\r\n    readonly schemaForm = form(this.schema, s => {\r\n        required(s.name, { message: \"Nome é obrigatório.\" });\r\n        required(s.email, { message: \"E-mail é obrigatório.\" });\r\n        email(s.email, { message: \"Informe um e-mail válido.\" });\r\n    });\r\n}\r\n"]}

package/esm2022/lib/components/stepper/index.js

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

package/esm2022/lib/components/stepper/index.js.map

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

package/esm2022/lib/components/stepper/stepper.js

@@ -0,0 +1,93 @@
+import { NgTemplateOutlet } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, contentChildren, forwardRef, inject, input, output, signal, TemplateRef, viewChild, ViewEncapsulation, } from "@angular/core";
+import { mergeClasses, transform } from "../../core";
+import { AiIcon } from "../icon";
+import { AiStepperService } from "./stepper.service";
+import { stepCircleVariants, stepConnectorVariants, stepLabelVariants, stepperHeaderVariants, stepperVariants } from "./stepper.variants";
+import * as i0 from "@angular/core";
+export class AiStep {
+    #stepper = inject(forwardRef(() => AiStepper));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : {}), transform });
+    completed = input(false, { ...(ngDevMode ? { debugName: "completed" } : {}), transform });
+    editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : {}), transform });
+    content = viewChild.required(TemplateRef);
+    #completed = signal(false, ...(ngDevMode ? [{ debugName: "#completed" }] : []));
+    isCompleted = computed(() => this.completed() || this.#completed(), ...(ngDevMode ? [{ debugName: "isCompleted" }] : []));
+    index = computed(() => {
+        const steps = this.#stepper.steps();
+        return steps ? steps.indexOf(this) : -1;
+    }, ...(ngDevMode ? [{ debugName: "index" }] : []));
+    active = computed(() => this.index() === this.#stepper.selectedIndex(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    markCompleted() {
+        this.#completed.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AiStep, isStandalone: true, selector: "ai-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["aiStep"], ngImport: i0, template: `
+        <ng-template>
+            <ng-content />
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-step",
+                    exportAs: "aiStep",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <ng-template>
+            <ng-content />
+        </ng-template>
+    `,
+                    host: {
+                        style: "display: none",
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+export class AiStepper {
+    #service = inject(AiStepperService);
+    steps = contentChildren(AiStep, ...(ngDevMode ? [{ debugName: "steps" }] : []));
+    orientation = input("horizontal", ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : {}), transform });
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    selectionChange = output();
+    selectedIndex = computed(() => this.#service.selectedIndex(), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    classes = computed(() => mergeClasses(stepperVariants({ orientation: this.orientation() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    headerClasses = computed(() => mergeClasses(stepperHeaderVariants({ orientation: this.orientation() })), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
+    ngAfterContentInit() {
+        this.#service.configure({
+            linear: this.linear(),
+            onChange: index => this.selectionChange.emit(index),
+        });
+        this._setSteps();
+    }
+    circleClasses = (i) => mergeClasses(stepCircleVariants({ state: this.#service.stepState(i) }));
+    labelClasses = (i) => mergeClasses(stepLabelVariants({ state: this.#service.stepState(i) }));
+    connectorClasses = (i) => mergeClasses(stepConnectorVariants({ completed: this.steps()[i]?.isCompleted() ?? false, orientation: this.orientation() }));
+    isStepDisabled = (i) => this.#service.isStepDisabled(i);
+    selectStep = (i) => this.#service.selectStep(i);
+    next() {
+        this.#service.next();
+    }
+    previous() {
+        this.#service.previous();
+    }
+    _setSteps() {
+        this.#service.setSteps(this.steps().map(step => ({
+            isCompleted: () => step.isCompleted(),
+            editable: () => step.editable(),
+            markCompleted: () => step.markCompleted(),
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiStepper, isStandalone: true, selector: "ai-stepper", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, providers: [AiStepperService], queries: [{ propertyName: "steps", predicate: AiStep, isSignal: true }], exportAs: ["aiStepper"], ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n    <div [class]=\"headerClasses()\">\r\n        @for (step of steps(); track step; let i = $index; let last = $last) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"flex items-center gap-2 cursor-pointer disabled:cursor-default disabled:opacity-50\"\r\n                (click)=\"selectStep(i)\"\r\n                [disabled]=\"isStepDisabled(i)\">\r\n                <div [class]=\"circleClasses(i)\">\r\n                    @if (step.isCompleted() && i !== selectedIndex()) {\r\n                        <ai-icon icon=\"check\" size=\"sm\" />\r\n                    } @else {\r\n                        {{ i + 1 }}\r\n                    }\r\n                </div>\r\n                <div class=\"flex flex-col items-start\">\r\n                    <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                    @if (step.optional()) {\r\n                        <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                    }\r\n                </div>\r\n            </button>\r\n            @if (!last) {\r\n                <div [class]=\"connectorClasses(i)\"></div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @for (step of steps(); track step; let i = $index) {\r\n        <div [style.display]=\"i === selectedIndex() ? 'block' : 'none'\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n        </div>\r\n    }\r\n} @else {\r\n    @for (step of steps(); track step; let i = $index; let last = $last) {\r\n        <div class=\"flex gap-x-3\">\r\n            <div class=\"flex flex-col items-center\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center justify-center cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div [class]=\"circleClasses(i)\">\r\n                        @if (step.isCompleted() && i !== selectedIndex()) {\r\n                            <ai-icon icon=\"check\" size=\"sm\" />\r\n                        } @else {\r\n                            {{ i + 1 }}\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (!last) {\r\n                    <div [class]=\"connectorClasses(i)\"></div>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"flex flex-col flex-1 min-w-0\" [class.pb-4]=\"!last\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center h-8 w-full text-left cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div class=\"flex flex-col items-start\">\r\n                        <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                        @if (step.optional()) {\r\n                            <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (i === selectedIndex()) {\r\n                    <div class=\"pt-1 pb-2\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\n", dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStepper, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-stepper", exportAs: "aiStepper", imports: [AiIcon, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AiStepperService], host: {
+                        "[class]": "classes()",
+                    }, template: "@if (orientation() === 'horizontal') {\r\n    <div [class]=\"headerClasses()\">\r\n        @for (step of steps(); track step; let i = $index; let last = $last) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"flex items-center gap-2 cursor-pointer disabled:cursor-default disabled:opacity-50\"\r\n                (click)=\"selectStep(i)\"\r\n                [disabled]=\"isStepDisabled(i)\">\r\n                <div [class]=\"circleClasses(i)\">\r\n                    @if (step.isCompleted() && i !== selectedIndex()) {\r\n                        <ai-icon icon=\"check\" size=\"sm\" />\r\n                    } @else {\r\n                        {{ i + 1 }}\r\n                    }\r\n                </div>\r\n                <div class=\"flex flex-col items-start\">\r\n                    <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                    @if (step.optional()) {\r\n                        <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                    }\r\n                </div>\r\n            </button>\r\n            @if (!last) {\r\n                <div [class]=\"connectorClasses(i)\"></div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @for (step of steps(); track step; let i = $index) {\r\n        <div [style.display]=\"i === selectedIndex() ? 'block' : 'none'\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n        </div>\r\n    }\r\n} @else {\r\n    @for (step of steps(); track step; let i = $index; let last = $last) {\r\n        <div class=\"flex gap-x-3\">\r\n            <div class=\"flex flex-col items-center\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center justify-center cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div [class]=\"circleClasses(i)\">\r\n                        @if (step.isCompleted() && i !== selectedIndex()) {\r\n                            <ai-icon icon=\"check\" size=\"sm\" />\r\n                        } @else {\r\n                            {{ i + 1 }}\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (!last) {\r\n                    <div [class]=\"connectorClasses(i)\"></div>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"flex flex-col flex-1 min-w-0\" [class.pb-4]=\"!last\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center h-8 w-full text-left cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div class=\"flex flex-col items-start\">\r\n                        <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                        @if (step.optional()) {\r\n                            <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (i === selectedIndex()) {\r\n                    <div class=\"pt-1 pb-2\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\n" }]
+        }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AiStep), { isSignal: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=stepper.js.map

package/esm2022/lib/components/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/stepper/stepper.ts","../../../../../../../libs/ai-ui/src/lib/components/stepper/stepper.html"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { NgTemplateOutlet } from \"@angular/common\";\r\nimport {\r\n    AfterContentInit,\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    contentChildren,\r\n    forwardRef,\r\n    inject,\r\n    input,\r\n    output,\r\n    signal,\r\n    TemplateRef,\r\n    viewChild,\r\n    ViewEncapsulation,\r\n} from \"@angular/core\";\r\n\r\nimport { mergeClasses, transform } from \"../../core\";\r\nimport { AiIcon } from \"../icon\";\r\nimport { AiStepperService } from \"./stepper.service\";\r\nimport { stepCircleVariants, stepConnectorVariants, stepLabelVariants, stepperHeaderVariants, stepperVariants, StepperVariants } from \"./stepper.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-step\",\r\n    exportAs: \"aiStep\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <ng-template>\r\n            <ng-content />\r\n        </ng-template>\r\n    `,\r\n    host: {\r\n        style: \"display: none\",\r\n    },\r\n})\r\nexport class AiStep {\r\n    readonly #stepper = inject(forwardRef(() => AiStepper));\r\n\r\n    readonly label = input.required<string>();\r\n    readonly optional = input<boolean, string | boolean>(false, { transform });\r\n    readonly completed = input<boolean, string | boolean>(false, { transform });\r\n    readonly editable = input<boolean, string | boolean>(true, { transform });\r\n\r\n    readonly content = viewChild.required(TemplateRef);\r\n\r\n    readonly #completed = signal(false);\r\n    readonly isCompleted = computed(() => this.completed() || this.#completed());\r\n\r\n    readonly index = computed(() => {\r\n        const steps = this.#stepper.steps();\r\n        return steps ? steps.indexOf(this) : -1;\r\n    });\r\n\r\n    readonly active = computed(() => this.index() === this.#stepper.selectedIndex());\r\n\r\n    markCompleted() {\r\n        this.#completed.set(true);\r\n    }\r\n}\r\n\r\n@Component({\r\n    selector: \"ai-stepper\",\r\n    exportAs: \"aiStepper\",\r\n    imports: [AiIcon, NgTemplateOutlet],\r\n    templateUrl: \"./stepper.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    providers: [AiStepperService],\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiStepper implements AfterContentInit {\r\n    readonly #service = inject(AiStepperService);\r\n\r\n    readonly steps = contentChildren(AiStep);\r\n\r\n    readonly orientation = input<StepperVariants[\"orientation\"]>(\"horizontal\");\r\n    readonly linear = input<boolean, string | boolean>(false, { transform });\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly selectionChange = output<number>();\r\n\r\n    readonly selectedIndex = computed(() => this.#service.selectedIndex());\r\n\r\n    protected readonly classes = computed(() => mergeClasses(stepperVariants({ orientation: this.orientation() }), this.class()));\r\n    protected readonly headerClasses = computed(() => mergeClasses(stepperHeaderVariants({ orientation: this.orientation() })));\r\n\r\n    ngAfterContentInit() {\r\n        this.#service.configure({\r\n            linear: this.linear(),\r\n            onChange: index => this.selectionChange.emit(index),\r\n        });\r\n        this._setSteps();\r\n    }\r\n\r\n    protected circleClasses = (i: number) => mergeClasses(stepCircleVariants({ state: this.#service.stepState(i) }));\r\n    protected labelClasses = (i: number) => mergeClasses(stepLabelVariants({ state: this.#service.stepState(i) }));\r\n    protected connectorClasses = (i: number) => mergeClasses(stepConnectorVariants({ completed: this.steps()[i]?.isCompleted() ?? false, orientation: this.orientation() }));\r\n    protected isStepDisabled = (i: number): boolean => this.#service.isStepDisabled(i);\r\n    protected selectStep = (i: number) => this.#service.selectStep(i);\r\n\r\n    next() {\r\n        this.#service.next();\r\n    }\r\n\r\n    previous() {\r\n        this.#service.previous();\r\n    }\r\n\r\n    private _setSteps() {\r\n        this.#service.setSteps(\r\n            this.steps().map(step => ({\r\n                isCompleted: () => step.isCompleted(),\r\n                editable: () => step.editable(),\r\n                markCompleted: () => step.markCompleted(),\r\n            })),\r\n        );\r\n    }\r\n}\r\n","@if (orientation() === 'horizontal') {\r\n    <div [class]=\"headerClasses()\">\r\n        @for (step of steps(); track step; let i = $index; let last = $last) {\r\n            <button\r\n                type=\"button\"\r\n                class=\"flex items-center gap-2 cursor-pointer disabled:cursor-default disabled:opacity-50\"\r\n                (click)=\"selectStep(i)\"\r\n                [disabled]=\"isStepDisabled(i)\">\r\n                <div [class]=\"circleClasses(i)\">\r\n                    @if (step.isCompleted() && i !== selectedIndex()) {\r\n                        <ai-icon icon=\"check\" size=\"sm\" />\r\n                    } @else {\r\n                        {{ i + 1 }}\r\n                    }\r\n                </div>\r\n                <div class=\"flex flex-col items-start\">\r\n                    <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                    @if (step.optional()) {\r\n                        <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                    }\r\n                </div>\r\n            </button>\r\n            @if (!last) {\r\n                <div [class]=\"connectorClasses(i)\"></div>\r\n            }\r\n        }\r\n    </div>\r\n\r\n    @for (step of steps(); track step; let i = $index) {\r\n        <div [style.display]=\"i === selectedIndex() ? 'block' : 'none'\">\r\n            <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n        </div>\r\n    }\r\n} @else {\r\n    @for (step of steps(); track step; let i = $index; let last = $last) {\r\n        <div class=\"flex gap-x-3\">\r\n            <div class=\"flex flex-col items-center\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center justify-center cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div [class]=\"circleClasses(i)\">\r\n                        @if (step.isCompleted() && i !== selectedIndex()) {\r\n                            <ai-icon icon=\"check\" size=\"sm\" />\r\n                        } @else {\r\n                            {{ i + 1 }}\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (!last) {\r\n                    <div [class]=\"connectorClasses(i)\"></div>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"flex flex-col flex-1 min-w-0\" [class.pb-4]=\"!last\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center h-8 w-full text-left cursor-pointer disabled:pointer-events-none disabled:opacity-50\"\r\n                    (click)=\"selectStep(i)\"\r\n                    [disabled]=\"isStepDisabled(i)\">\r\n                    <div class=\"flex flex-col items-start\">\r\n                        <span [class]=\"labelClasses(i)\">{{ step.label() }}</span>\r\n                        @if (step.optional()) {\r\n                            <span class=\"text-xs text-muted-foreground\">Opcional</span>\r\n                        }\r\n                    </div>\r\n                </button>\r\n                @if (i === selectedIndex()) {\r\n                    <div class=\"pt-1 pb-2\">\r\n                        <ng-container [ngTemplateOutlet]=\"step.content()\" />\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/stepper/stepper.service.js

@@ -0,0 +1,67 @@
+import { Injectable, signal } from "@angular/core";
+import * as i0 from "@angular/core";
+export class AiStepperService {
+    #selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "#selectedIndex" }] : []));
+    selectedIndex = this.#selectedIndex.asReadonly();
+    #steps = [];
+    #linear = false;
+    #onChange = null;
+    configure(options) {
+        this.#linear = options.linear;
+        this.#onChange = options.onChange;
+    }
+    setSteps(steps) {
+        this.#steps = steps;
+    }
+    stepState(index) {
+        if (index === this.selectedIndex())
+            return "active";
+        if (this.#steps[index]?.isCompleted())
+            return "completed";
+        return "inactive";
+    }
+    isStepDisabled(index) {
+        if (!this.#linear)
+            return false;
+        if (index === this.selectedIndex())
+            return false;
+        if (index < this.selectedIndex()) {
+            return !this.#steps[index]?.editable();
+        }
+        for (let i = this.selectedIndex(); i < index; i++) {
+            if (!this.#steps[i]?.isCompleted())
+                return true;
+        }
+        return false;
+    }
+    selectStep(index) {
+        if (this.isStepDisabled(index))
+            return;
+        this.#selectedIndex.set(index);
+        this.#onChange?.(index);
+    }
+    next() {
+        const current = this.selectedIndex();
+        if (current >= this.#steps.length - 1)
+            return;
+        const currentStep = this.#steps[current];
+        if (this.#linear && !currentStep?.isCompleted()) {
+            currentStep?.markCompleted();
+        }
+        this.#selectedIndex.set(current + 1);
+        this.#onChange?.(current + 1);
+    }
+    previous() {
+        const current = this.selectedIndex();
+        if (current <= 0)
+            return;
+        this.#selectedIndex.set(current - 1);
+        this.#onChange?.(current - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStepperService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiStepperService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=stepper.service.js.map

package/esm2022/lib/components/stepper/stepper.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.service.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/stepper/stepper.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AASnD,MAAM,OAAO,gBAAgB;IAChB,cAAc,GAAG,MAAM,CAAC,CAAC,0DAAC,CAAC;IAC3B,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAE1D,MAAM,GAAiB,EAAE,CAAC;IAC1B,OAAO,GAAG,KAAK,CAAC;IAChB,SAAS,GAAqC,IAAI,CAAC;IAEnD,SAAS,CAAC,OAA+D;QACrE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,QAAQ,CAAC,KAAmB;QACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,SAAS,CAAC,KAAa;QACnB,IAAI,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE;YAAE,OAAO,QAAQ,CAAC;QACpD,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE;YAAE,OAAO,WAAW,CAAC;QAC1D,OAAO,UAAU,CAAC;IACtB,CAAC;IAED,cAAc,CAAC,KAAa;QACxB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAChC,IAAI,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE;YAAE,OAAO,KAAK,CAAC;QAEjD,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC3C,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE;gBAAE,OAAO,IAAI,CAAC;QACpD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,UAAU,CAAC,KAAa;QACpB,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO;QACvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAI;QACA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAE9C,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC;YAC9C,WAAW,EAAE,aAAa,EAAE,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAClC,CAAC;IAED,QAAQ;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACrC,IAAI,OAAO,IAAI,CAAC;YAAE,OAAO;QACzB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAClC,CAAC;uGA7DQ,gBAAgB;2GAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAD5B,UAAU","sourcesContent":["import { Injectable, signal } from \"@angular/core\";\r\n\r\nexport interface StepConfig {\r\n    isCompleted: () => boolean;\r\n    editable: () => boolean;\r\n    markCompleted: () => void;\r\n}\r\n\r\n@Injectable()\r\nexport class AiStepperService {\r\n    readonly #selectedIndex = signal(0);\r\n    readonly selectedIndex = this.#selectedIndex.asReadonly();\r\n\r\n    #steps: StepConfig[] = [];\r\n    #linear = false;\r\n    #onChange: ((index: number) => void) | null = null;\r\n\r\n    configure(options: { linear: boolean; onChange: (index: number) => void }) {\r\n        this.#linear = options.linear;\r\n        this.#onChange = options.onChange;\r\n    }\r\n\r\n    setSteps(steps: StepConfig[]) {\r\n        this.#steps = steps;\r\n    }\r\n\r\n    stepState(index: number): \"active\" | \"completed\" | \"inactive\" {\r\n        if (index === this.selectedIndex()) return \"active\";\r\n        if (this.#steps[index]?.isCompleted()) return \"completed\";\r\n        return \"inactive\";\r\n    }\r\n\r\n    isStepDisabled(index: number): boolean {\r\n        if (!this.#linear) return false;\r\n        if (index === this.selectedIndex()) return false;\r\n\r\n        if (index < this.selectedIndex()) {\r\n            return !this.#steps[index]?.editable();\r\n        }\r\n\r\n        for (let i = this.selectedIndex(); i < index; i++) {\r\n            if (!this.#steps[i]?.isCompleted()) return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    selectStep(index: number) {\r\n        if (this.isStepDisabled(index)) return;\r\n        this.#selectedIndex.set(index);\r\n        this.#onChange?.(index);\r\n    }\r\n\r\n    next() {\r\n        const current = this.selectedIndex();\r\n        if (current >= this.#steps.length - 1) return;\r\n\r\n        const currentStep = this.#steps[current];\r\n        if (this.#linear && !currentStep?.isCompleted()) {\r\n            currentStep?.markCompleted();\r\n        }\r\n\r\n        this.#selectedIndex.set(current + 1);\r\n        this.#onChange?.(current + 1);\r\n    }\r\n\r\n    previous() {\r\n        const current = this.selectedIndex();\r\n        if (current <= 0) return;\r\n        this.#selectedIndex.set(current - 1);\r\n        this.#onChange?.(current - 1);\r\n    }\r\n}\r\n"]}