@dropi/ui-components 1.0.0

package/src/components-source/card-section/card-section.component.html

@@ -0,0 +1,22 @@
+<div class="container-card-section">
+  <div>
+    <h5 *ngIf="type == 'important'" class="tittle-card-section">{{ title }}</h5>
+    <h6 *ngIf="type == 'medium'">{{ title }}</h6>
+    <div class="description-card-section Body-M-Regular">{{ description }}</div>
+  </div>
+  <div class="element-end">
+    <app-switch
+      [isChecked]="isChecked"
+      *ngIf="typeElement === 'switch'"
+      (onChange)="changeValue($event)"
+    ></app-switch>
+    <app-icon
+      (click)="clickIcon()"
+      *ngIf="typeElement === 'dropdown'"
+      name="Dropdown-Right"
+      width="32px"
+      height="32px"
+      color="Gray-Gray-500"
+    ></app-icon>
+  </div>
+</div>

package/src/components-source/card-section/card-section.component.scss

@@ -0,0 +1,14 @@
+.container-card-section{
+    padding: var(--Size-6)  var(--Size-5);
+    border: 1px solid var(--Gray-Gray-200);
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+
+    app-icon{
+        cursor: pointer;
+    }
+    
+}

package/src/components-source/card-section/card-section.component.spec.ts

@@ -0,0 +1,333 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { CardSectionComponent } from './card-section.component';
+import { DropiSwitchComponent } from '@app/ui/dropi-switch/dropi-switch.component';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+describe('CardSectionComponent', () => {
+  let component: CardSectionComponent;
+  let fixture: ComponentFixture<CardSectionComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CardSectionComponent, DropiSwitchComponent, IconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CardSectionComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      // Verifica que el componente se crea correctamente
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      // Verifica los valores por defecto
+      expect(component.title).toBe('title');
+      expect(component.description).toBe('Description');
+      expect(component.typeElement).toBe('dropdown');
+      expect(component.type).toBe('important');
+      expect(component.isChecked).toBe(false);
+    });
+
+    it('should set default type to important if empty in ngOnInit', () => {
+      // Verifica que establece el tipo por defecto a important si está vacío
+      (component as any).type = '';
+      component.ngOnInit();
+      expect(component.type).toBe('important');
+    });
+
+    it('should set default type to important if only whitespace in ngOnInit', () => {
+      // Verifica que establece el tipo por defecto a important si solo tiene espacios
+      (component as any).type = '   ';
+      component.ngOnInit();
+      expect(component.type).toBe('important');
+    });
+
+    it('should maintain existing type if valid in ngOnInit', () => {
+      // Verifica que mantiene el tipo existente si es válido
+      component.type = 'medium';
+      component.ngOnInit();
+      expect(component.type).toBe('medium');
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept title input', () => {
+      // Verifica que acepta el input title
+      const testTitle = 'Test Title';
+      component.title = testTitle;
+      expect(component.title).toBe(testTitle);
+    });
+
+    it('should accept description input', () => {
+      // Verifica que acepta el input description
+      const testDescription = 'Test Description';
+      component.description = testDescription;
+      expect(component.description).toBe(testDescription);
+    });
+
+    it('should accept typeElement input', () => {
+      // Verifica que acepta el input typeElement
+      component.typeElement = 'switch';
+      expect(component.typeElement).toBe('switch');
+    });
+
+    it('should accept type input', () => {
+      // Verifica que acepta el input type
+      component.type = 'medium';
+      expect(component.type).toBe('medium');
+    });
+
+    it('should accept isChecked input', () => {
+      // Verifica que acepta el input isChecked
+      component.isChecked = true;
+      expect(component.isChecked).toBe(true);
+    });
+  });
+
+  describe('Tipos de elemento', () => {
+    it('should handle dropdown typeElement', () => {
+      // Verifica que maneja el typeElement dropdown
+      component.typeElement = 'dropdown';
+      expect(component.typeElement).toBe('dropdown');
+    });
+
+    it('should handle switch typeElement', () => {
+      // Verifica que maneja el typeElement switch
+      component.typeElement = 'switch';
+      expect(component.typeElement).toBe('switch');
+    });
+  });
+
+  describe('Tipos de tarjeta', () => {
+    it('should handle medium type', () => {
+      // Verifica que maneja el tipo medium
+      component.type = 'medium';
+      expect(component.type).toBe('medium');
+    });
+
+    it('should handle important type', () => {
+      // Verifica que maneja el tipo important
+      component.type = 'important';
+      expect(component.type).toBe('important');
+    });
+  });
+
+  describe('Funcionalidad de cambio de valor', () => {
+    it('should emit onChange event when changeValue is called', () => {
+      // Verifica que emite el evento onChange cuando se llama changeValue
+      jest.spyOn(component.onChange, 'emit');
+      const testValue = true;
+
+      component.changeValue(testValue);
+
+      expect(component.onChange.emit).toHaveBeenCalledWith(testValue);
+    });
+
+    it('should emit onChange with boolean true', () => {
+      // Verifica que emite onChange con boolean true
+      jest.spyOn(component.onChange, 'emit');
+
+      component.changeValue(true);
+
+      expect(component.onChange.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('should emit onChange with boolean false', () => {
+      // Verifica que emite onChange con boolean false
+      jest.spyOn(component.onChange, 'emit');
+
+      component.changeValue(false);
+
+      expect(component.onChange.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('should handle multiple value changes', () => {
+      // Verifica que maneja múltiples cambios de valor
+      jest.spyOn(component.onChange, 'emit');
+
+      component.changeValue(true);
+      component.changeValue(false);
+      component.changeValue(true);
+
+      expect(component.onChange.emit).toHaveBeenCalledTimes(3);
+      expect(component.onChange.emit).toHaveBeenNthCalledWith(1, true);
+      expect(component.onChange.emit).toHaveBeenNthCalledWith(2, false);
+      expect(component.onChange.emit).toHaveBeenNthCalledWith(3, true);
+    });
+  });
+
+  describe('Funcionalidad de clic en icono', () => {
+    it('should emit onClick event when clickIcon is called', () => {
+      // Verifica que emite el evento onClick cuando se llama clickIcon
+      jest.spyOn(component.onClick, 'emit');
+
+      component.clickIcon();
+
+      expect(component.onClick.emit).toHaveBeenCalled();
+    });
+
+    it('should emit onClick without parameters', () => {
+      // Verifica que emite onClick sin parámetros
+      jest.spyOn(component.onClick, 'emit');
+
+      component.clickIcon();
+
+      expect(component.onClick.emit).toHaveBeenCalledWith();
+    });
+
+    it('should handle multiple icon clicks', () => {
+      // Verifica que maneja múltiples clics en el icono
+      jest.spyOn(component.onClick, 'emit');
+
+      component.clickIcon();
+      component.clickIcon();
+      component.clickIcon();
+
+      expect(component.onClick.emit).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Estado del checkbox', () => {
+    it('should maintain isChecked state when changed', () => {
+      // Verifica que mantiene el estado isChecked cuando cambia
+      component.isChecked = false;
+      expect(component.isChecked).toBe(false);
+
+      component.isChecked = true;
+      expect(component.isChecked).toBe(true);
+    });
+
+    it('should work with different boolean values', () => {
+      // Verifica que funciona con diferentes valores booleanos
+      const values = [true, false, true, false];
+
+      values.forEach((value) => {
+        component.isChecked = value;
+        expect(component.isChecked).toBe(value);
+      });
+    });
+  });
+
+  describe('Integración de eventos', () => {
+    it('should handle both onChange and onClick events independently', () => {
+      // Verifica que maneja ambos eventos onChange y onClick independientemente
+      jest.spyOn(component.onChange, 'emit');
+      jest.spyOn(component.onClick, 'emit');
+
+      component.changeValue(true);
+      component.clickIcon();
+
+      expect(component.onChange.emit).toHaveBeenCalledWith(true);
+      expect(component.onClick.emit).toHaveBeenCalled();
+    });
+
+    it('should emit events in correct order when called sequentially', () => {
+      // Verifica que emite eventos en el orden correcto cuando se llaman secuencialmente
+      const eventOrder: string[] = [];
+
+      component.onChange.subscribe(() => eventOrder.push('onChange'));
+      component.onClick.subscribe(() => eventOrder.push('onClick'));
+
+      component.changeValue(true);
+      component.clickIcon();
+      component.changeValue(false);
+
+      expect(eventOrder).toEqual(['onChange', 'onClick', 'onChange']);
+    });
+  });
+
+  describe('Validación de tipos', () => {
+    it('should handle empty string type correctly in ngOnInit', () => {
+      // Verifica que maneja correctamente el tipo de cadena vacía en ngOnInit
+      (component as any).type = '';
+      component.ngOnInit();
+      expect(component.type).toBe('important');
+    });
+
+    it('should handle null type correctly in ngOnInit', () => {
+      // Verifica que maneja correctamente el tipo null en ngOnInit
+      component.type = null as any;
+      component.ngOnInit();
+      expect(component.type).toBe('important');
+    });
+
+    it('should handle undefined type correctly in ngOnInit', () => {
+      // Verifica que maneja correctamente el tipo undefined en ngOnInit
+      component.type = undefined as any;
+      component.ngOnInit();
+      expect(component.type).toBe('important');
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle rapid event emissions', () => {
+      // Verifica que maneja emisiones rápidas de eventos
+      jest.spyOn(component.onChange, 'emit');
+      jest.spyOn(component.onClick, 'emit');
+
+      // Emisiones rápidas
+      for (let i = 0; i < 10; i++) {
+        component.changeValue(i % 2 === 0);
+        component.clickIcon();
+      }
+
+      expect(component.onChange.emit).toHaveBeenCalledTimes(10);
+      expect(component.onClick.emit).toHaveBeenCalledTimes(10);
+    });
+
+    it('should maintain component state through multiple operations', () => {
+      // Verifica que mantiene el estado del componente a través de múltiples operaciones
+      component.title = 'Test Title';
+      component.description = 'Test Description';
+      component.typeElement = 'switch';
+      component.type = 'medium';
+      component.isChecked = true;
+
+      // Realizar operaciones
+      component.ngOnInit();
+      component.changeValue(false);
+      component.clickIcon();
+
+      // Verificar que las propiedades se mantienen
+      expect(component.title).toBe('Test Title');
+      expect(component.description).toBe('Test Description');
+      expect(component.typeElement).toBe('switch');
+      expect(component.type).toBe('medium');
+      expect(component.isChecked).toBe(true);
+    });
+  });
+
+  describe('Configuración completa del componente', () => {
+    it('should work with all properties set to valid values', () => {
+      // Verifica que funciona con todas las propiedades establecidas a valores válidos
+      component.title = 'Complete Title';
+      component.description = 'Complete Description';
+      component.typeElement = 'switch';
+      component.type = 'medium';
+      component.isChecked = true;
+
+      jest.spyOn(component.onChange, 'emit');
+      jest.spyOn(component.onClick, 'emit');
+
+      component.ngOnInit();
+      component.changeValue(false);
+      component.clickIcon();
+
+      expect(component.title).toBe('Complete Title');
+      expect(component.description).toBe('Complete Description');
+      expect(component.typeElement).toBe('switch');
+      expect(component.type).toBe('medium');
+      expect(component.isChecked).toBe(true);
+      expect(component.onChange.emit).toHaveBeenCalledWith(false);
+      expect(component.onClick.emit).toHaveBeenCalled();
+    });
+  });
+});

package/src/components-source/card-section/card-section.component.stories.ts

@@ -0,0 +1,141 @@
+/**
+ * @fileoverview CardSection component stories for Storybook
+ * @description A configurable card component with dropdown or switch interaction modes
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { CardSectionComponent } from './card-section.component';
+import { action } from '@storybook/addon-actions';
+
+const meta: Meta<CardSectionComponent> = {
+  title: 'UI Dropi/Card Section',
+  component: CardSectionComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      inlineStories: false,
+      description: {
+        component: `
+# Card Section Component
+
+A flexible card component that supports dropdown or switch interaction modes.
+
+## Key Features
+- **Dropdown mode**: Expandable content area
+- **Switch mode**: Toggle on/off state
+- **Type variants**: 'medium' and 'important' styles
+- **Customizable**: Title and description text
+
+## Use Cases
+- Settings panels
+- Feature toggles
+- Collapsible sections
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+    (story) => ({
+      ...story(),
+      template: `<div style="width: 80vw">${story().template}</div>`,
+    }),
+  ],
+
+  argTypes: {
+    typeElement: {
+      control: 'select',
+      options: ['dropdown', 'switch'],
+      description: 'Type of interaction element to display',
+    },
+    type: {
+      control: 'select',
+      options: ['medium', 'important'],
+      description: 'Visual style variant of the card',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text displayed in the card',
+    },
+    title: {
+      control: 'text',
+      description: 'Title text displayed in the card header',
+    },
+    isChecked: {
+      control: 'boolean',
+      description: 'Initial checked state (for switch mode)',
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Event emitted when the card state changes',
+    },
+    onClick: {
+      action: 'onClick',
+      description: 'Event emitted when the card is clicked',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CardSectionComponent>;
+
+/**
+ * Dropdown mode - expandable content area
+ */
+export const Dropdown: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card with dropdown expansion for additional content.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=964-859&m=dev',
+    },
+  },
+};
+
+/**
+ * Switch mode - toggle on/off
+ */
+export const Switch: Story = {
+  args: {
+    typeElement: 'switch',
+    type: 'medium',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card with switch toggle for binary on/off states.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=964-864&m=dev',
+    },
+  },
+};
+
+/**
+ * Switch mode with checked state
+ */
+export const SwitchChecked: Story = {
+  args: {
+    typeElement: 'switch',
+    type: 'important',
+    isChecked: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card with switch in checked (active) state using important variant.',
+      },
+    },
+  },
+};

package/src/components-source/card-section/card-section.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DropiSwitchComponent } from '@app/ui/dropi-switch/dropi-switch.component';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+@Component({
+  selector: 'app-card-section',
+  templateUrl: './card-section.component.html',
+  styleUrls: ['./card-section.component.scss'],
+  standalone: true,
+  imports: [DropiSwitchComponent, CommonModule, IconComponent],
+})
+export class CardSectionComponent implements OnInit {
+  @Input() title: string = 'title';
+  @Input() description: string = 'Description';
+  @Input() typeElement: 'dropdown' | 'switch' = 'dropdown';
+  @Output() onChange = new EventEmitter<boolean>();
+  @Output() onClick = new EventEmitter();
+  @Input() type: 'medium' | 'important' = 'important';
+  @Input() isChecked: boolean = false;
+
+  ngOnInit() {
+    if (!this.type || this.type.trim() === '') {
+      this.type = 'important';
+    }
+  }
+
+  changeValue(event) {
+    this.onChange.emit(event);
+  }
+
+  clickIcon() {
+    this.onClick.emit();
+  }
+}

package/src/components-source/checkbox-selection-list/checkbox-selection-list.component.html

@@ -0,0 +1,38 @@
+<div class="checkbox-selection-list">
+  <div class="filter-container" *ngIf="showFilter">
+    <span class="input-icon">
+      <i class="pi pi-search"></i>
+      <input
+        data-cy="checkbox-selection-search-input"
+        type="text"
+        class="search-input"
+        [formControl]="searchControl"
+        [placeholder]="filterPlaceholder"
+      />
+    </span>
+    <button *ngIf="searchControl.value.length > 0" (click)="clearSearchInput()">
+      <i class="pi pi-times"></i>
+    </button>
+  </div>
+
+  <div class="selection-list">
+    <div class="selection-item" *ngFor="let option of filteredOptions">
+      <div class="checkbox-item">
+        <app-dropi-checkbox 
+          [checked]="option.checked"
+          (onChange)="toggleSelection($event, option)" 
+          [attr.data-cy]="'checkbox-selection-' + option.id"
+        />
+        <img *ngIf="option.preIcon" [src]="option.preIcon" [alt]="option.label" />
+        <span>{{ option.label | translate}}</span>
+      </div>
+    </div>
+ 
+    <div *ngIf="showNotFound && (!filteredOptions || filteredOptions.length === 0)" class="empty-container">
+      <div class="empty" data-cy="checkbox-selection-empty">
+        <img src="\assets\utils\logo-dropi-img-loader.png" alt="Not-found" />
+        <span>{{ notFoundMessage }}</span>
+      </div>
+    </div>
+  </div>
+</div>