@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/tabs/tabs.component.ts

@@ -1,93 +1,48 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { NavigationEnd, Router, RouterModule } from '@angular/router';
-
-import { TabProperties } from '@app/utilities/interfaces/ui/tabs.interface';
-import { Subscription } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
-import { DropiBadgeComponent } from '../dropi-badge/dropi-badge.component';
+import { CommonModule } from "@angular/common";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Inject,
+} from "@angular/core";
+import { Subscription } from "rxjs";
+import { TranslateModule } from "@ngx-translate/core";
+import { DropiBadgeComponent } from "../dropi-badge/dropi-badge.component";
+
+export interface TabProperties {
+  id: number;
+  label: string;
+  route: string;
+  completed?: boolean;
+  counter?: number;
+  disabled?: boolean;
+}
 
 @Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss'],
+  selector: "app-tabs",
+  templateUrl: "./tabs.component.html",
+  styleUrls: ["./tabs.component.scss"],
   standalone: true,
-  imports: [CommonModule, RouterModule, TranslateModule, DropiBadgeComponent],
+  imports: [CommonModule, TranslateModule, DropiBadgeComponent],
 })
 export class TabsComponent implements OnInit, OnDestroy {
-  /**
-   * Define las propiedades y la cantidad de tabs a renderizar.
-   *
-   * Cada opción dentro del arreglo debe contener las siguientes propiedades:
-   * - `id`: Identificador único del tab.
-   * - `label`: Texto a mostrar en la pestaña.
-   * - `route`: Ruta a la que se redirige al hacer clic.
-   * - `completed`: Indica si se debe mostrar el icono de completado.
-   * - `counter`: Muestra un contador al lado de la pestaña (Opcional).
-   *
-   * @type {TabProperties[]}
-   */
-
   @Input() public configuration: TabProperties[] = [];
-  /**
-   * Indica si se debe mostrar el icono de completado en la pestaña.
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
-
   @Input() public showIcon: boolean = false;
-
-  /**
-   * Evento emitido cuando se selecciona una opción.
-   *
-   * Al emitirse, se envían las propiedades de la pestaña seleccionada.
-   *
-   * @type {EventEmitter<TabProperties>}
-   */
-  @Output() public onIndexChanged: EventEmitter<TabProperties> = new EventEmitter<TabProperties>();
-
-  /**
-   * Indica el valor de la pestaña activa actualmente.
-   *
-   * Representa el identificador de la pestaña seleccionada y activa.
-   *
-   * @type {number}
-   */
+  @Output() public onIndexChanged: EventEmitter<TabProperties> =
+    new EventEmitter<TabProperties>();
   @Input() public activeTab: number = 0;
-
-  /**
-   * Bloquea el cambio de ruta y activa restricciones
-   *
-   * Cuando es `true`, evita la navegación entre pestañas y permite incorporar:
-   * - Alertas de confirmación antes de cambiar de ruta
-   * - Bloqueo de acciones hasta que se cumplan condiciones específicas
-   * - Validaciones adicionales antes de permitir el cambio de pestaña
-   *
-   * Útil para flujos críticos donde se requiere confirmación del usuario
-   * o validación de datos antes de permitir la navegación.
-   *
-   * @default false
-   * @type {boolean}
-   */
   @Input() public stopAction: boolean = false;
 
-  /**
-   * Subscripciones activas durante el flujo
-   *
-   * Almacena las subscripciones activas para despues eliminarlas en el ciclo de vida
-   *
-   * @type {Subscription}
-   */
-
   private readonly subscriptions: Subscription = new Subscription();
 
-  constructor(private readonly router: Router) {}
+  constructor(@Inject("Router") private readonly router: any) {}
 
   ngOnInit(): void {
     if (this.configuration.find((tab) => tab.route)) {
-      this.setActiveTabByRoute(this.router.url);
+      this.setActiveTabByRoute(this.router?.url || "");
       this.validateUrlChange();
     }
   }
@@ -97,9 +52,10 @@ export class TabsComponent implements OnInit, OnDestroy {
   }
 
   validateUrlChange() {
+    if (!this.router?.events) return;
     this.subscriptions.add(
-      this.router.events.subscribe((event) => {
-        if (event instanceof NavigationEnd) {
+      this.router.events.subscribe((event: any) => {
+        if (event && event.constructor.name === "NavigationEnd") {
           this.setActiveTabByRoute(event.url);
         }
       }),
@@ -107,18 +63,20 @@ export class TabsComponent implements OnInit, OnDestroy {
   }
 
   setActiveTabByRoute(route: string) {
-    const activeTab = this.configuration.find((tab) => route.includes(tab.route));
-    this.activeTab = activeTab ? activeTab.id : 0;
+    if (!route) return;
+    const activeTabArr = (this.configuration as any[]).find(
+      (tab) => tab.route && route.includes(tab.route),
+    );
+    this.activeTab = activeTabArr ? activeTabArr.id : 0;
   }
 
-  ///dashboard/settings/personal-data?section=invoice
   onTabClick(tabClicked: TabProperties) {
+    if (tabClicked.disabled) return;
     this.onIndexChanged.emit(tabClicked);
 
-    if (!this.stopAction) {
+    if (!this.stopAction && this.router) {
       if (tabClicked.route) {
-        // se ajustó para recibir query params y poder trabajar tabs con una misma url
-        let [path, query] = tabClicked.route.split('?');
+        let [path, query] = tabClicked.route.split("?");
         const queryParams = new URLSearchParams(query);
 
         const paramsObj: any = {};

package/src/components-source/toast/toast.component.ts

@@ -1,59 +1,53 @@
-import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { MessageService } from 'primeng/api';
-
-import { ToastService } from '@app/services/toast.service';
-import { ToastProps } from '@app/utilities/interfaces/ui/toast.interface';
-import { CommonModule } from '@angular/common';
-import { SettingsService } from '../../services/setting.service';
-import { ToastModule } from 'primeng/toast';
+import {
+  Component,
+  Input,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnInit,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+
+export interface ToastProps {
+  message?: string;
+  type?: "success" | "error" | "info" | "warning";
+  show?: boolean;
+  severity?: string; // Añadido
+}
 
 @Component({
-  selector: 'app-toast',
-  templateUrl: './toast.component.html',
-  styleUrls: ['./toast.component.scss'],
+  selector: "app-toast",
   standalone: true,
-  imports: [CommonModule, ToastModule],
+  imports: [CommonModule, TranslateModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./toast.component.html",
+  styleUrls: ["./toast.component.scss"],
 })
 export class ToastComponent implements OnInit {
-  @Input() forceBrandIsDropi: boolean = false;
-  private readonly suscriptions: Subscription = new Subscription();
-  brandName: string;
-  brandIsDropi: boolean;
-
-  animations = {
-    success: '/assets/lottie-files/success.json',
-    warn: '/assets/lottie-files/warning.json',
-    info: '/assets/lottie-files/question.json',
-    error: '/assets/lottie-files/failure.json',
+  @Input() public toastProperties: ToastProps;
+
+  // Restaurando propiedades requeridas por el template
+  public brandIsDropi: boolean = true;
+  public animations: any = {
+    success: "",
+    error: "",
+    info: "",
+    warning: "",
   };
-
-  icons = {
-    success: '/assets/img/icons/custom/check.svg',
-    warn: '/assets/img/icons/custom/info.svg',
-    info: '/assets/img/icons/custom/comment-round-info.svg',
-    error: '/assets/img/icons/custom/cross-circle.svg',
+  public icons: any = {
+    success: "",
+    error: "",
+    info: "",
+    warning: "",
+  };
+  public message: any = {
+    severity: "success",
   };
 
   constructor(
-    private readonly messageService: MessageService,
-    private readonly toastService: ToastService,
-    private readonly settingsService: SettingsService,
+    @Inject("ToastService") private readonly toastService: any,
+    @Inject("SettingsService") public settingsService: any,
   ) {}
 
-  ngOnInit() {
-    this.brandName = this.settingsService.getBrand()?.name?.toLowerCase();
-    this.brandIsDropi = this.forceBrandIsDropi || this.brandName === 'dropi';
-
-    this.suscriptions.add(
-      this.toastService.toastOpen$.subscribe((props: ToastProps) => {
-        this.messageService.add(props);
-      }),
-    );
-  }
-
-  ngOnDestroy() {
-    this.suscriptions.unsubscribe();
-  }
+  ngOnInit(): void {}
 }

package/src/components-source/toggle/input-toggle.component.html

@@ -0,0 +1,34 @@
+<ng-container *ngIf="config.param === 'toggle'">
+  <div class="form-check form-switch form-switch-md mb-3" dir="ltr">
+    <input
+      [attr.id]="elemnto"
+      (click)="emitValue()"
+      id="elemnto"
+      *ngIf="data"
+      class="form-check-input"
+      [attr.type]="config.type"
+      [(ngModel)]="data"
+      [formControl]="config.formControl"
+      [attr.active]="data"
+      [attr.formControlName]="config.name"
+      checked
+    />
+
+    <input
+      (click)="emitValue()"
+      *ngIf="!data"
+      [attr.id]="elemnto"
+      id="elemnto"
+      class="form-check-input"
+      [attr.type]="config.type"
+      [(ngModel)]="data"
+      [formControl]="config.formControl"
+      [attr.active]="data"
+      [attr.formControlName]="config.name"
+    />
+
+    <label class="form-check-label" for="elemnto" (click)="emitValue()">
+      {{ config.labelText | translate }}</label
+    >
+  </div>
+</ng-container>

package/src/components-source/toggle/input-toggle.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output, Inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+
+@Component({
+  selector: "app-input-toggle",
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule],
+  templateUrl: "./input-toggle.component.html",
+  styleUrls: ["./input-toggle.component.scss"],
+})
+export class InputToggleComponent {
+  @Input() data: boolean = false;
+  @Input() config: any = {
+    labelText: "",
+    formControl: null,
+  };
+  @Input() elemnto: string =
+    "toggle-" + Math.random().toString(36).substring(7);
+  @Output() dataChange = new EventEmitter<boolean>();
+
+  emitValue() {
+    this.data = !this.data;
+    this.dataChange.emit(this.data);
+  }
+}

package/src/components-source/toggle/inputToggleConfig.ts

@@ -0,0 +1,11 @@
+import { UntypedFormControl } from '@angular/forms';
+
+export interface InputToggleConfig {
+  name: string;
+  disabled: boolean;
+  param: string;
+  type: string;
+  labelText: string;
+  formControl: UntypedFormControl;
+  formValidationMessages: Array<{ type: string; message: string }>;
+}

package/src/components-source/tooltip/tooltip.component.html

@@ -1,11 +1,17 @@
 <span
-  (click)="question.show($event)"
-  (mouseenter)="question.show($event)"
-  (mouseleave)="question.hide($event)"
+  (click)="isVisible = !isVisible"
+  (mouseenter)="isVisible = true"
+  (mouseleave)="isVisible = false"
   class="icon-tooltip"
 >
   <ng-container *ngIf="!outlined; else tooltipOutlined">
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M6.99972 0.144531C5.64351 0.144531 4.31775 0.546696 3.1901 1.30017C2.06245 2.05364 1.18355 3.12458 0.66455 4.37756C0.145549 5.63054 0.00975496 7.00928 0.274339 8.33943C0.538924 9.66959 1.192 10.8914 2.15099 11.8504C3.10998 12.8094 4.33181 13.4625 5.66196 13.7271C6.99212 13.9916 8.37086 13.8558 9.62384 13.3368C10.8768 12.8178 11.9478 11.9389 12.7012 10.8113C13.4547 9.68364 13.8569 8.35789 13.8569 7.00167C13.8549 5.18365 13.1318 3.44065 11.8463 2.15511C10.5607 0.869576 8.81775 0.146498 6.99972 0.144531ZM6.99972 11.5731C6.8867 11.5731 6.77622 11.5396 6.68225 11.4768C6.58828 11.414 6.51504 11.3248 6.47179 11.2203C6.42854 11.1159 6.41722 11.001 6.43927 10.8902C6.46132 10.7793 6.51575 10.6775 6.59566 10.5976C6.67558 10.5177 6.7774 10.4633 6.88824 10.4412C6.99909 10.4192 7.11398 10.4305 7.2184 10.4737C7.32281 10.517 7.41206 10.5902 7.47485 10.6842C7.53764 10.7782 7.57115 10.8887 7.57115 11.0017C7.57115 11.1532 7.51095 11.2986 7.40378 11.4057C7.29662 11.5129 7.15127 11.5731 6.99972 11.5731ZM8.10258 7.29081C7.93395 7.39625 7.79605 7.54423 7.70276 7.71988C7.60947 7.89552 7.56408 8.09263 7.57115 8.29139V8.71596C7.57115 8.86751 7.51095 9.01285 7.40378 9.12002C7.29662 9.22718 7.15127 9.28739 6.99972 9.28739C6.84817 9.28739 6.70283 9.22718 6.59566 9.12002C6.4885 9.01285 6.42829 8.86751 6.42829 8.71596V8.29139C6.41985 7.8882 6.51947 7.4901 6.71682 7.13841C6.91417 6.78672 7.20205 6.49426 7.55058 6.29139C7.76171 6.1751 7.93066 5.99504 8.0333 5.77695C8.13593 5.55886 8.16698 5.3139 8.12201 5.0771C8.07748 4.8515 7.96672 4.6443 7.80386 4.48195C7.64101 4.31961 7.43346 4.20949 7.20772 4.16567C7.04299 4.13518 6.87357 4.14128 6.71146 4.18354C6.54935 4.22579 6.39851 4.30317 6.26962 4.4102C6.14073 4.51722 6.03695 4.65127 5.96562 4.80286C5.8943 4.95444 5.85717 5.11986 5.85686 5.28739C5.85686 5.43894 5.79666 5.58428 5.6895 5.69145C5.58233 5.79861 5.43699 5.85882 5.28544 5.85882C5.13388 5.85882 4.98854 5.79861 4.88138 5.69145C4.77421 5.58428 4.71401 5.43894 4.71401 5.28739C4.71415 4.88425 4.82091 4.48832 5.02347 4.13976C5.22602 3.7912 5.51716 3.50241 5.86735 3.30269C6.21754 3.10297 6.61432 2.99942 7.01745 3.00255C7.42058 3.00568 7.81571 3.11537 8.16276 3.3205C8.5098 3.52562 8.79643 3.81889 8.99355 4.17055C9.19067 4.52221 9.29128 4.91975 9.28517 5.32284C9.27906 5.72593 9.16645 6.12024 8.95876 6.46576C8.75107 6.81128 8.45569 7.0963 8.10258 7.29081Z"
         fill="#7B8190"
@@ -15,21 +21,26 @@
 </span>
 
 <div
-  (click)="question.show($event)"
-  (mouseenter)="question.show($event)"
-  (mouseleave)="question.hide($event)"
+  (mouseenter)="isVisible = true"
+  (mouseleave)="isVisible = false"
   class="icon-tooltip"
   style="width: 100%"
 ></div>
 
-<div class="questiontooltip">
-  <p-overlayPanel #question [styleClass]="'question-tooltip'" [appendTo]="questionTooltip">
+<div class="questiontooltip" *ngIf="isVisible">
+  <div class="tooltip-bubble">
     <div class="inner-container" [innerHTML]="text"></div>
-  </p-overlayPanel>
+  </div>
 </div>
 
 <ng-template #tooltipOutlined>
-  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M6 1.5C5.0111 1.5 4.0444 1.79324 3.22215 2.34265C2.39991 2.89206 1.75904 3.67295 1.3806 4.58658C1.00217 5.50021 0.90315 6.50555 1.09608 7.47545C1.289 8.44536 1.76521 9.33627 2.46447 10.0355C3.16373 10.7348 4.05465 11.211 5.02455 11.4039C5.99446 11.5969 6.99979 11.4978 7.91342 11.1194C8.82705 10.741 9.60794 10.1001 10.1573 9.27785C10.7068 8.45561 11 7.48891 11 6.5C10.9986 5.17436 10.4713 3.90342 9.53395 2.96605C8.59658 2.02868 7.32564 1.50143 6 1.5ZM6 10.6667C5.17591 10.6667 4.37033 10.4223 3.68513 9.96446C2.99992 9.50662 2.46587 8.85587 2.1505 8.09451C1.83514 7.33316 1.75263 6.49538 1.9134 5.68712C2.07417 4.87887 2.47101 4.13644 3.05372 3.55372C3.63644 2.971 4.37887 2.57417 5.18713 2.41339C5.99538 2.25262 6.83316 2.33514 7.59452 2.6505C8.35588 2.96587 9.00662 3.49992 9.46446 4.18512C9.9223 4.87033 10.1667 5.67591 10.1667 6.5C10.1655 7.6047 9.72608 8.6638 8.94494 9.44494C8.1638 10.2261 7.1047 10.6655 6 10.6667Z"
       fill="#A3ABBF"

package/src/components-source/tooltip/tooltip.component.ts

@@ -1,24 +1,39 @@
-import { Component, Input, OnInit, ViewEncapsulation, NO_ERRORS_SCHEMA } from '@angular/core';
-import { OverlayPanelModule } from 'primeng/overlaypanel';
-import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'dropi-tooltip',
-  templateUrl: './tooltip.component.html',
-  styleUrls: ['./tooltip.component.scss'],
-  encapsulation: ViewEncapsulation.None,
+  selector: "dropi-tooltip",
   standalone: true,
-  imports: [CommonModule, OverlayPanelModule],
-  schemas: [NO_ERRORS_SCHEMA],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./tooltip.component.html",
+  styleUrls: ["./tooltip.component.scss"],
 })
 export class TooltipComponent implements OnInit {
-  @Input() text: string | undefined;
-  @Input() outlined: boolean = false;
+  @Input() public text: string | undefined;
+  @Input() public outlined: boolean = false;
+  @Input() public questionTooltip: string = "body";
 
-  // Añade la propiedad `questionTooltip`
-  questionTooltip: string = 'body'; // Puedes establecer el valor según tus necesidades
+  public isVisible: boolean = false;
 
   constructor() {}
 
   ngOnInit(): void {}
+
+  public toggle(): void {
+    this.isVisible = !this.isVisible;
+  }
+
+  public show(event?: any): void {
+    this.isVisible = true;
+  }
+
+  public hide(event?: any): void {
+    this.isVisible = false;
+  }
 }

package/src/components-source/vertical-steps/vertical-steps.component.ts

@@ -6,110 +6,62 @@ import {
   OnInit,
   Output,
   SimpleChanges,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconComponent } from '@app/ui/icon/icon.component';
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
 
-export type VerticalStepState = 'pending' | 'current' | 'completed';
+export type VerticalStepState = "pending" | "current" | "completed";
 
 export interface VerticalStep {
-  /** Etiqueta del paso */
   label?: string;
-  /** Clave de traducción para la etiqueta (alternativa a label) */
   labelKey?: string;
-  /** Estado del paso */
   state?: VerticalStepState;
 }
 
-/**
- * Componente de pasos verticales de Dropi
- * Muestra una lista vertical de pasos con indicadores de estado
- *
- * @example
- * <vertical-steps
- *   [steps]="[
- *     { labelKey: 'STEP_1', state: 'completed' },
- *     { labelKey: 'STEP_2', state: 'current' },
- *     { labelKey: 'STEP_3', state: 'pending' }
- *   ]"
- *   [currentStep]="2"
- *   [clickable]="true"
- *   (stepClick)="onStepClick($event)"
- * />
- */
 @Component({
-  selector: 'vertical-steps',
+  selector: "vertical-steps",
   standalone: true,
   imports: [CommonModule, TranslateModule, IconComponent],
-  templateUrl: './vertical-steps.component.html',
-  styleUrls: ['./vertical-steps.component.scss'],
+  templateUrl: "./vertical-steps.component.html",
+  styleUrls: ["./vertical-steps.component.scss"],
 })
 export class VerticalStepsComponent implements OnInit, OnChanges {
-  /**
-   * Lista de pasos a mostrar
-   * @type {VerticalStep[]}
-   */
   @Input() steps: VerticalStep[] = [];
-
-  /**
-   * Paso actual (1-indexed). Si se proporciona, sobrescribe el estado de los pasos.
-   * Los pasos anteriores serán 'completed', el actual 'current', y los siguientes 'pending'.
-   * @type {number}
-   */
   @Input() currentStep: number = 1;
-
-  /**
-   * Permite hacer clic en los pasos completados y el actual
-   * @default false
-   * @type {boolean}
-   */
   @Input() clickable: boolean = false;
-
-  /**
-   * Mostrar el ícono de check en pasos completados
-   * @default true
-   * @type {boolean}
-   */
   @Input() showCheckIcon: boolean = true;
-
-  /**
-   * Evento emitido cuando se hace clic en un paso
-   * @type {EventEmitter<number>}
-   */
   @Output() stepClick = new EventEmitter<number>();
 
-  /** Pasos procesados con estado calculado */
-  processedSteps: (VerticalStep & { number: number; calculatedState: VerticalStepState })[] = [];
+  processedSteps: (VerticalStep & {
+    number: number;
+    calculatedState: VerticalStepState;
+  })[] = [];
 
   ngOnInit(): void {
     this.processSteps();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['steps'] || changes['currentStep']) {
+    if (changes["steps"] || changes["currentStep"]) {
       this.processSteps();
     }
   }
 
-  /**
-   * Procesa los pasos y calcula el estado de cada uno
-   */
   private processSteps(): void {
     this.processedSteps = this.steps.map((step, index) => {
       const stepNumber = index + 1;
       let calculatedState: VerticalStepState;
 
-      // Si el paso tiene un estado definido, usarlo; si no, calcularlo basado en currentStep
       if (step.state) {
         calculatedState = step.state;
       } else {
         if (stepNumber < this.currentStep) {
-          calculatedState = 'completed';
+          calculatedState = "completed";
         } else if (stepNumber === this.currentStep) {
-          calculatedState = 'current';
+          calculatedState = "current";
         } else {
-          calculatedState = 'pending';
+          calculatedState = "pending";
         }
       }
 
@@ -121,30 +73,16 @@ export class VerticalStepsComponent implements OnInit, OnChanges {
     });
   }
 
-  /**
-   * Determina si un paso es clickeable
-   * @param stepNumber Número del paso (1-indexed)
-   * @returns true si el paso es clickeable
-   */
   isStepClickable(stepNumber: number): boolean {
     return this.clickable && stepNumber <= this.currentStep;
   }
 
-  /**
-   * Maneja el clic en un paso
-   * @param stepNumber Número del paso (1-indexed)
-   */
   onStepClick(stepNumber: number): void {
     if (this.isStepClickable(stepNumber)) {
       this.stepClick.emit(stepNumber);
     }
   }
 
-  /**
-   * Determina si es el último paso
-   * @param index Índice del paso (0-indexed)
-   * @returns true si es el último paso
-   */
   isLastStep(index: number): boolean {
     return index === this.processedSteps.length - 1;
   }