@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/radio-selection-list/radio-selection-list.component.ts

@@ -6,138 +6,77 @@ import {
   Output,
   SimpleChanges,
   TemplateRef,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-import {
-  Option,
-  RadioSelectionFilteredOptions,
-} from '@app/utilities/interfaces/ui/radio-selection-list.interface';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+  Inject,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { Subscription } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { Option } from "../../utilities/interfaces/ui/selection-list-interface";
 
 @Component({
-  selector: 'app-radio-selection-list',
+  selector: "app-radio-selection-list",
   standalone: true,
   imports: [CommonModule, TranslateModule, ReactiveFormsModule],
-  templateUrl: './radio-selection-list.component.html',
-  styleUrls: ['./radio-selection-list.component.scss'],
+  templateUrl: "./radio-selection-list.component.html",
+  styleUrls: ["./radio-selection-list.component.scss"],
 })
-/**
- * Componente para mostrar una lista de opciones que se pueden seleccionar.
- * Los botones de cada opción se renderizan con una imagen y un texto.
- * Luego de seleccionar una opción, se emite un evento {@link valueChange} con el id de la opción seleccionada.
- *
- * @example
- * <app-radio-selection-list
- *   [options]="options"
- *   (valueChange)="onValueChange($event)"
- *   [alwaysShowDescription]="true"
- *   [selectedOption]="'option-1'"
- * ></app-radio-selection-list>
- *
- * @export
- * @class RadioSelectionListComponent
- */
 export class RadioSelectionListComponent implements OnInit {
   @Input() extraContent: TemplateRef<any> | null = null;
   @Input() withExtraContentId: string | null = null;
-  /**
-   * Opciones a mostrar en la lista.
-   * Cada opción debe tener un id, un nombre y opcionalmente una descripción y una lista de iconos.
-   * @type {Option[]}
-   */
   @Input() options: Option[] = [];
-
-  /**
-   * Layout de la lista de opciones.
-   * Por defecto es 'default', acá se define si se muestra con las imagenes a la derecha o con una imagen a la izquierda.
-   * @type {'description'|'default'}
-   */
-  @Input() typeLayout: 'description' | 'default' = 'default';
-
-  /**
-   * Si se muestra la descripción de la opción aunque no está seleccionada.
-   * Por defecto es verdadero.
-   * @type {boolean}
-   */
+  @Input() typeLayout: "description" | "default" | string = "default";
   @Input() alwaysShowDescription: boolean = true;
-
-  /**
-   * Id de la opción seleccionada.
-   * Por defecto es nulo.
-   * @type {string}
-   */
   @Input() selectedOption?: string = null;
-
-  /**
-   * Permite mostrar u ocultar el campo de búsqueda
-   * @default true
-   */
   @Input() showFilter: boolean = false;
-
-  /**
-   * Placeholder para el campo de búsqueda
-   */
-  @Input() filterPlaceholder: string = 'Search';
-
-  /**
-   * Tiempo de demora en milisegundos para realizar la búsqueda
-   */
+  @Input() filterPlaceholder: string = "Search";
   @Input() searchDelay: number = 100;
-
-  /**
-   * Evento emitido cuando se selecciona una opción.
-   * El valor emitido es el id de la opción seleccionada.
-   * @type {EventEmitter<string>}
-   */
   @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
-
-  /**
-   * Evento que se dispara al realizar una búsqueda (Se emite cuando se cambia el valor del input de búsqueda basado en @SearchDelay)
-   */
-  @Output() onSearch = new EventEmitter<RadioSelectionFilteredOptions>();
+  @Output() onSearch = new EventEmitter<any>();
 
   private readonly subscriptions: Subscription = new Subscription();
-  searchControl = new FormControl('');
+  searchControl = new FormControl("");
   filteredOptions: Option[] = [];
 
-  constructor(private readonly translateService: TranslateService) {}
+  constructor(
+    @Inject(TranslateService)
+    private readonly translateService: TranslateService,
+  ) {}
 
   ngOnInit() {
     this.subscriptions.add(
-      this.searchControl.valueChanges.pipe(debounceTime(this.searchDelay)).subscribe((value) => {
-        this.filterOption(value);
-        this.onSearch.emit({
-          searchValue: value,
-          filteredOptions: this.filteredOptions,
-        });
-      }),
+      this.searchControl.valueChanges
+        .pipe(debounceTime(this.searchDelay))
+        .subscribe((value) => {
+          this.filterOption(value);
+        }),
     );
 
     this.filteredOptions = this.options;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['options']) this.filteredOptions = this.options;
+    if (changes["options"]) this.filteredOptions = this.options;
   }
 
-  filterOption(optionName: string) {
-    if (!optionName?.trim()) this.filteredOptions = this.options;
+  filterOption(optionName: any) {
+    const val = typeof optionName === "string" ? optionName : "";
+    if (!val.trim()) {
+      this.filteredOptions = this.options;
+      return;
+    }
     this.filteredOptions = this.options.filter((o) =>
-      o.name.toLowerCase().includes(optionName.toLowerCase()),
+      o.name.toLowerCase().includes(val.toLowerCase()),
     );
   }
 
-  /**
-   * Función que se ejecuta al seleccionar una opción.
-   * @param optionId Id de la opción seleccionada.
-   * @type {void}
-   */
   selectOption(optionId: string): void {
     this.selectedOption = optionId;
     this.valueChange.emit(this.selectedOption);
   }
+
+  clearSearchInput() {
+    this.searchControl.setValue("");
+  }
 }

package/src/components-source/sidebar/sidebar.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import {  NavigationEnd } from ' ';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { SidebarComponent } from './sidebar.component';
@@ -11,7 +11,7 @@ describe('SidebarComponent', () => {
   let component: SidebarComponent;
   let fixture: ComponentFixture<SidebarComponent>;
   let debugElement: DebugElement;
-  let mockRouter: any;
+  let mockany: any;
   let routerEventsSubject: Subject<any>;
 
   const mockSidebarData: SidebarProperties[] = [
@@ -59,14 +59,14 @@ describe('SidebarComponent', () => {
 
   beforeEach(async () => {
     routerEventsSubject = new Subject();
-    mockRouter = {
+    mockany = {
       url: '/dashboard',
       navigate: jest.fn().mockResolvedValue(true),
       events: routerEventsSubject.asObservable(),
     };
 
     // Instanciación directa del componente standalone
-    component = new SidebarComponent(mockRouter);
+    component = new SidebarComponent(mockany);
 
     // Mock del fixture para compatibilidad
     fixture = {
@@ -237,7 +237,7 @@ describe('SidebarComponent', () => {
     it('should navigate to route when item without subItems is clicked', () => {
       component.onItemClick(component.sideBarProperties[0]);
 
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/dashboard']);
+      expect(mockany.navigate).toHaveBeenCalledWith(['/dashboard']);
     });
 
     it('should toggle expansion when item with subItems is clicked', () => {
@@ -246,7 +246,7 @@ describe('SidebarComponent', () => {
       component.onItemClick(component.sideBarProperties[1]);
 
       expect(setExpandedSpy).toHaveBeenCalledWith(2);
-      expect(mockRouter.navigate).not.toHaveBeenCalled();
+      expect(mockany.navigate).not.toHaveBeenCalled();
     });
 
     it('should emit onIndexChanged when sub-item is clicked', () => {
@@ -263,7 +263,7 @@ describe('SidebarComponent', () => {
 
       component.onSubItemClick(subItem);
 
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/products/list']);
+      expect(mockany.navigate).toHaveBeenCalledWith(['/products/list']);
     });
 
     it('should handle item without route', () => {
@@ -273,7 +273,7 @@ describe('SidebarComponent', () => {
         component.onItemClick(itemWithoutRoute);
       }).not.toThrow();
 
-      expect(mockRouter.navigate).not.toHaveBeenCalled();
+      expect(mockany.navigate).not.toHaveBeenCalled();
     });
   });
 
@@ -322,12 +322,12 @@ describe('SidebarComponent', () => {
     });
 
     it('should handle router navigation errors', () => {
-      mockRouter.navigate.mockRejectedValue(new Error('Navigation failed'));
+      mockany.navigate.mockRejectedValue(new Error('Navigation failed'));
 
       // Use a valid item with proper structure
       const validItem = component.sideBarProperties[0];
       component.onItemClick(validItem);
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/dashboard']);
+      expect(mockany.navigate).toHaveBeenCalledWith(['/dashboard']);
     });
   });
 
@@ -341,7 +341,7 @@ describe('SidebarComponent', () => {
 
       // Navigate to settings
       component.onItemClick(component.sideBarProperties[2]);
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/settings']);
+      expect(mockany.navigate).toHaveBeenCalledWith(['/settings']);
 
       // Products should still be expanded
       expect(component.sideBarProperties[1].expandedMenu).toBe(true);

package/src/components-source/sidebar/sidebar.component.stories.ts

@@ -3,8 +3,8 @@
  * @description A collapsible sidebar navigation menu with icon and text support
  */
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { Routes } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Routes } from ' ';
+import { anyTestingModule } from ' /testing';
 import { SidebarComponent } from './sidebar.component';
 import { Component } from '@angular/core';
 
@@ -39,7 +39,7 @@ const meta: Meta<SidebarComponent> = {
   component: SidebarComponent,
   decorators: [
     moduleMetadata({
-      imports: [RouterTestingModule.withRoutes(routes)],
+      imports: [anyTestingModule.withRoutes(routes)],
       declarations: [DummyComponent],
     }),
   ],

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

@@ -1,51 +1,48 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from '../icon/icon.component';
-import { SidebarProperties } from '@app/utilities/interfaces/ui/sidebar.interface';
-import { NavigationEnd, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Inject,
+  OnDestroy,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { IconComponent } from "../icon/icon.component";
+import { NavigationEnd } from "@angular/router";
+import { Subscription } from "rxjs";
+import { TranslateModule } from "@ngx-translate/core";
+
+export interface SidebarProperties {
+  id: number;
+  icon: string;
+  text: string;
+  route: string;
+  expandedMenu?: boolean;
+  active?: boolean;
+  subItems?: SidebarProperties[];
+}
 
 @Component({
-  selector: 'app-sidebar',
+  selector: "app-sidebar",
   standalone: true,
   imports: [CommonModule, IconComponent, TranslateModule],
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
+  templateUrl: "./sidebar.component.html",
+  styleUrls: ["./sidebar.component.scss"],
 })
-export class SidebarComponent implements OnInit {
-  /**
-   * Define las propiedades y la cantidad de elementos a renderizar.
-   *
-   * Cada opción dentro del arreglo debe contener las siguientes propiedades:
-   * - `id`: Identificador único del elemento.
-   * - `icon`: Icono a mostrar en el elemento.
-   * - `text`: Texto a mostrar en el elemento.
-   * - `route`: Ruta a la que se redirige al hacer clic.
-   * - `expandedMenu`: Indica si el menú está expandido (opcional).
-   * - `active`: Indica si el elemento está activo (opcional).
-   * - `subItems`: Lista de subelementos en el menu, cada uno con las mismas propiedades antes descritas.
-   *
-   * @type {SidebarProperties[]}
-   */
-
+export class SidebarComponent implements OnInit, OnDestroy {
   @Input() public sideBarProperties: SidebarProperties[] = [];
-  /**
-   * Evento emitido cuando se selecciona una opción.
-   *
-   * Al emitirse, se envían las propiedades del elemento seleccionado.
-   *
-   * @type {EventEmitter<SidebarProperties>}
-   */
   @Output() public onIndexChanged: EventEmitter<SidebarProperties> =
     new EventEmitter<SidebarProperties>();
 
   private subscriptions: Subscription = new Subscription();
 
-  constructor(private router: Router) {}
+  constructor(@Inject("Router") private router: any) {}
 
   ngOnInit(): void {
-    this.setActiveIndex(this.router.url);
+    if (this.router?.url) {
+      this.setActiveIndex(this.router.url);
+    }
     this.handleUrlChange();
   }
 
@@ -54,16 +51,19 @@ export class SidebarComponent implements OnInit {
   }
 
   handleUrlChange() {
-    this.subscriptions.add(
-      this.router.events.subscribe((event) => {
-        if (event instanceof NavigationEnd) {
-          this.setActiveIndex(event.url);
-        }
-      }),
-    );
+    if (this.router?.events) {
+      this.subscriptions.add(
+        this.router.events.subscribe((event: any) => {
+          if (event instanceof NavigationEnd) {
+            this.setActiveIndex(event.url);
+          }
+        }),
+      );
+    }
   }
 
   setActiveIndex(route: string) {
+    if (!this.sideBarProperties) return;
     this.sideBarProperties.forEach((propertie) => {
       if (propertie.subItems && propertie.subItems.length > 0) {
         propertie.subItems = propertie.subItems.map((subItem) => {
@@ -79,9 +79,13 @@ export class SidebarComponent implements OnInit {
   }
 
   setExpandedPropertie(id: number) {
-    const propertieClicked = this.sideBarProperties.findIndex((item) => item.id === id);
-    this.sideBarProperties[propertieClicked].expandedMenu =
-      !this.sideBarProperties[propertieClicked].expandedMenu;
+    const propertieClicked = (this.sideBarProperties as any[]).findIndex(
+      (item) => item.id === id,
+    );
+    if (propertieClicked !== -1) {
+      this.sideBarProperties[propertieClicked].expandedMenu =
+        !this.sideBarProperties[propertieClicked].expandedMenu;
+    }
   }
 
   onItemClick(itemClicked: SidebarProperties) {
@@ -92,14 +96,14 @@ export class SidebarComponent implements OnInit {
     }
 
     if (itemClicked.route) {
-      this.router.navigate([itemClicked.route]);
+      this.router?.navigate?.([itemClicked.route]);
     }
   }
 
   onSubItemClick(itemClicked: SidebarProperties) {
     this.onIndexChanged.emit(itemClicked);
     if (itemClicked.route) {
-      this.router.navigate([itemClicked.route]);
+      this.router?.navigate?.([itemClicked.route]);
     }
   }
 }

package/src/components-source/simple-stepper/simple-stepper.component.ts

@@ -1,43 +1,26 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FlowMode } from '@app/utilities/enums/ui/simple-stepper.enum';
+import { Component, Input, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+// Stub del enum FlowMode para desacoplamiento
+export enum FlowMode {
+  Simultaneous = "simultaneous",
+  Sequential = "sequential",
+}
 
-/**
- * Componente que representa un stepper simple.
- * Permite avanzar en modo secuencial o simultáneo y muestra visualmente los pasos activos.
- */
 @Component({
-  selector: 'app-simple-stepper',
+  selector: "app-simple-stepper",
   standalone: true,
   imports: [CommonModule],
-  templateUrl: './simple-stepper.component.html',
-  styleUrls: ['./simple-stepper.component.scss'],
+  templateUrl: "./simple-stepper.component.html",
+  styleUrls: ["./simple-stepper.component.scss"],
 })
 export class SimpleStepperComponent implements OnInit {
-  /**
-   * Número total de pasos del stepper.
-   * @default 3
-   */
   @Input() stepsCount: number = 3;
-
-  /**
-   * Paso actual del stepper (comienza en 0).
-   */
-  @Input() typeStep: string = 'point'; // 'number'  | 'point'
+  @Input() typeStep: string = "point";
   @Input() currentStep: number = 0;
   @Input() labelStepper: Array<string> = [];
-
-  /**
-   * Modo de avance del stepper: simultáneo o secuencial.
-   * @default FlowMode.simultaneous
-   */
   @Input() flowMode: FlowMode = FlowMode.Simultaneous;
-
-  /**
-   * white_brand: modificará el color del stepper en caso de se envie un valor en white_brand distinto a dropi
-   * @default "dropi"
-   */
-  @Input() white_brand: string = 'dropi';
+  @Input() white_brand: string = "dropi";
 
   steps: number[] = [];
 
@@ -45,8 +28,10 @@ export class SimpleStepperComponent implements OnInit {
     this.steps = Array(this.stepsCount - 1).fill(0);
 
     const color =
-      this.white_brand?.toLowerCase() === 'dropi' ? '#f49a3d' : 'var(--Secondary-Secondary-500)';
-    document.documentElement.style.setProperty('--stepper-color', color);
+      this.white_brand?.toLowerCase() === "dropi"
+        ? "#f49a3d"
+        : "var(--Secondary-Secondary-500)";
+    document.documentElement.style.setProperty("--stepper-color", color);
   }
 
   isLineActive(index: number): boolean {
@@ -62,8 +47,8 @@ export class SimpleStepperComponent implements OnInit {
   }
 
   get secondaryColor(): string {
-    return this.white_brand?.toLowerCase() === 'dropi'
-      ? '#f49a3d'
-      : 'var(--Secondary-Secondary-500, #008DBF)';
+    return this.white_brand?.toLowerCase() === "dropi"
+      ? "#f49a3d"
+      : "var(--Secondary-Secondary-500, #008DBF)";
   }
 }

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

@@ -0,0 +1,6 @@
+<div class="text-center loader-text">
+  <a *ngIf="loading" href="javascript:void(0);" class="text-primary"
+    ><i class="mdi mdi-loading mdi-spin font-size-20 align-middle me-2"></i>
+    {{ 'Loading' | translate }} ...
+  </a>
+</div>

package/src/components-source/spinner/spinner.component.scss

@@ -0,0 +1,15 @@
+.loader-text {
+  background: #fff;
+  max-width: fit-content;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  margin: 0 auto 20px;
+  a {
+    color: #74788d !important;
+  }
+  i {
+    color: #74788d !important;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIf } from '@angular/common';
+
+@Component({
+    selector: 'app-spinner',
+    templateUrl: './spinner.component.html',
+    styleUrls: ['./spinner.component.scss'],
+    standalone: true,
+    imports: [NgIf, TranslateModule]
+})
+export class SpinnerComponent implements OnInit {
+  @Input() loading: boolean = true;
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Router, NavigationEnd } from '@angular/router';
+import {  NavigationEnd } from ' ';
 import { TabsComponent } from './tabs.component';
 import { IconComponent } from '../icon/icon.component';
 import { TabProperties } from '@app/utilities/interfaces/ui/tabs.interface';
@@ -9,20 +9,20 @@ import { TranslateModule } from '@ngx-translate/core';
 describe('TabsComponent', () => {
   let component: TabsComponent;
   let fixture: ComponentFixture<TabsComponent>;
-  let mockRouter: any;
+  let mockany: any;
   let routerEventsSubject: Subject<any>;
 
   beforeEach(async () => {
     routerEventsSubject = new Subject();
 
-    mockRouter = {
+    mockany = {
       url: '/test-route',
       events: routerEventsSubject.asObservable(),
       navigate: jest.fn().mockResolvedValue(true),
     };
 
     // Crear el componente directamente sin TestBed para evitar problemas de dependencias
-    component = new TabsComponent(mockRouter);
+    component = new TabsComponent(mockany);
 
     // Mock fixture básico
     fixture = {
@@ -49,7 +49,7 @@ describe('TabsComponent', () => {
         { id: 1, label: 'Tab 2', route: '/other-route' },
       ];
       component.configuration = mockConfig;
-      mockRouter.url = '/test-route';
+      mockany.url = '/test-route';
 
       component.ngOnInit();
 
@@ -111,7 +111,7 @@ describe('TabsComponent', () => {
 
       component.onTabClick(mockTab);
 
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/test-route'], { queryParams: {} });
+      expect(mockany.navigate).toHaveBeenCalledWith(['/test-route'], { queryParams: {} });
     });
 
     it('should handle route with query params', () => {
@@ -123,7 +123,7 @@ describe('TabsComponent', () => {
 
       component.onTabClick(mockTab);
 
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/test-route'], {
+      expect(mockany.navigate).toHaveBeenCalledWith(['/test-route'], {
         queryParams: { section: 'invoice' },
       });
     });
@@ -206,7 +206,7 @@ describe('TabsComponent', () => {
       component.onTabClick(mockConfig[1]);
 
       expect(emitSpy).toHaveBeenCalledWith(mockConfig[1]);
-      expect(mockRouter.navigate).toHaveBeenCalled();
+      expect(mockany.navigate).toHaveBeenCalled();
     });
   });
 });

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { Routes } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Routes } from ' ';
+import { anyTestingModule } from ' /testing';
 import { TabsComponent } from './tabs.component';
 import { Component } from '@angular/core';
 
@@ -23,7 +23,7 @@ const routes: Routes = [
  * Tabs allow users to switch between different views within the same context.
  *
  * ## Features
- * - **Route integration**: Works with Angular Router for navigation
+ * - **Route integration**: Works with Angular any for navigation
  * - **Completion indicators**: Optional icons showing completion status
  * - **Flexible configuration**: Customizable labels and routes
  * - **Accessible**: Keyboard navigable with ARIA support
@@ -44,7 +44,7 @@ const meta: Meta<TabsComponent> = {
   component: TabsComponent,
   decorators: [
     moduleMetadata({
-      imports: [RouterTestingModule.withRoutes(routes)],
+      imports: [anyTestingModule.withRoutes(routes)],
       declarations: [DummyComponent],
     }),
   ],
@@ -58,7 +58,7 @@ A navigation component for organizing content into multiple tabbed sections.
 Tabs allow users to switch between different views within the same context.
 
 ### Key Features
-- **Route integration**: Works with Angular Router for navigation
+- **Route integration**: Works with Angular any for navigation
 - **Completion indicators**: Optional icons showing completion status
 - **Flexible configuration**: Customizable labels and routes
 - **Accessible**: Keyboard navigable with ARIA support