@dropi/ui-components 1.0.0

package/src/components-source/dropi-drawer/dropi-drawer.component.scss

@@ -0,0 +1,88 @@
+:host ::ng-deep {
+  .dropi-drawer {
+
+    h3 {
+      color: var(--Gray-700, #32394D);
+      font-family: Inter, sans-serif;
+      font-size: 24px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 110%;
+    }
+
+    .p-sidebar-content > * {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+    }
+
+    .p-sidebar {
+      max-width: 100%;
+      min-width: auto;
+    }
+
+    &.size-m { 
+      .p-sidebar {
+        width: 550px;
+      }
+    }
+
+    &.size-l { 
+      .p-sidebar {
+        width: 1137px;
+      }
+    }
+
+    &.size-xl { 
+      .p-sidebar {
+        width: 1280px;
+      }
+    }
+
+    &.size-xxl { 
+      .p-sidebar {
+        width: 1330px;
+      }
+    }
+  
+    // .p-sidebar-right {
+    //   width: 100%;
+    //   max-width: 550px;
+    // }
+  
+    .p-sidebar-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+  
+      .p-sidebar-icon {
+        width: var(--Size-6, 32px);
+        height: var(--Size-6, 32px);
+        color: var(--Gray-400, #858EA6);
+      }
+    }
+  
+    .p-sidebar .p-sidebar-header .p-sidebar-close, .p-sidebar .p-sidebar-header .p-sidebar-icon {
+      width: var(--Size-6, 32px);
+      height: var(--Size-6, 32px);
+      color: var(--Gray-400, #858EA6);
+    }
+
+    .p-sidebar-footer {
+      display: none;
+    }
+
+    &.headless {
+      .p-sidebar-header {
+        display: none;
+      }
+    }
+
+    .actions {
+      .btn.normal {
+        padding: var(--Size-2);
+      }
+    }
+  }
+}

package/src/components-source/dropi-drawer/dropi-drawer.component.spec.ts

@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiDrawerComponent } from './dropi-drawer.component';
+import { DrawerService } from '@app/services/drawer.service';
+import { BehaviorSubject, of } from 'rxjs';
+
+// Mock DrawerService
+const mockDrawerService = {
+  defaultDrawerConfig: {
+    position: 'right',
+    width: '400px',
+    showHeader: true,
+  },
+  drawerContent$: new BehaviorSubject(null),
+  drawerHeader$: new BehaviorSubject(''),
+  drawerIsOpen$: new BehaviorSubject(false),
+  closeDrawer: jest.fn(),
+};
+
+describe('DropiDrawerComponent', () => {
+  let component: DropiDrawerComponent;
+  let fixture: ComponentFixture<DropiDrawerComponent>;
+  let drawerService: typeof mockDrawerService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiDrawerComponent],
+      providers: [{ provide: DrawerService, useValue: mockDrawerService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiDrawerComponent);
+    component = fixture.componentInstance;
+    drawerService = TestBed.inject(DrawerService) as unknown as typeof mockDrawerService;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default drawer config', () => {
+      expect(component.drawerConfig).toEqual(mockDrawerService.defaultDrawerConfig);
+    });
+
+    it('should initialize drawerTitle as null', () => {
+      expect(component.drawerTitle).toBeNull();
+    });
+
+    it('should initialize drawerIsOpen as false', () => {
+      expect(component.drawerIsOpen).toBe(false);
+    });
+
+    it('should initialize componentRef as undefined', () => {
+      expect(component.componentRef).toBeUndefined();
+    });
+  });
+
+  describe('Método close', () => {
+    it('should call drawerService.closeDrawer', () => {
+      component.close();
+      expect(drawerService.closeDrawer).toHaveBeenCalled();
+    });
+  });
+
+  describe('Subscripciones', () => {
+    it('should handle drawerHeader$ subscription without render', () => {
+      // Test subscription behavior without triggering template render
+      mockDrawerService.drawerHeader$.next('Test Header');
+      expect(mockDrawerService.drawerHeader$.getValue()).toBe('Test Header');
+    });
+
+    it('should handle drawerIsOpen$ subscription without render', () => {
+      mockDrawerService.drawerIsOpen$.next(true);
+      expect(mockDrawerService.drawerIsOpen$.getValue()).toBe(true);
+    });
+  });
+
+  describe('Lifecycle hooks', () => {
+    it('should clean up subscriptions on ngOnDestroy', () => {
+      // No error should be thrown
+      component.ngOnDestroy();
+      expect(true).toBe(true);
+    });
+  });
+});

package/src/components-source/dropi-drawer/dropi-drawer.component.ts

@@ -0,0 +1,90 @@
+import { AfterViewInit, Component, ComponentRef, EventEmitter, Input, NO_ERRORS_SCHEMA, OnDestroy, ViewChild, ViewContainerRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+
+import { NgPrimeModule } from '@app/ngprime.module';
+import { DrawerService } from '@app/services/drawer.service';
+import { DrawerConfig } from '@app/utilities/interfaces/ui/drawer.interface';
+
+@Component({
+  selector: 'dropi-drawer',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgPrimeModule
+  ],
+  templateUrl: './dropi-drawer.component.html',
+  styleUrls: ['./dropi-drawer.component.scss'],
+  schemas: [NO_ERRORS_SCHEMA]
+})
+export class DropiDrawerComponent implements OnDestroy, AfterViewInit {
+  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
+
+    drawerConfig: DrawerConfig;
+    drawerTitle: string = null;
+    drawerIsOpen: boolean = false;
+    componentRef: ComponentRef<any> | null;
+    private readonly subscriptions = new Subscription();
+  
+    constructor(private readonly drawerService: DrawerService) {
+      this.drawerConfig = this.drawerService.defaultDrawerConfig;
+    }
+  
+    ngAfterViewInit() {
+      this.subscriptions.add(
+        this.drawerService.drawerContent$.subscribe((content) => {
+          if (content && this.container) {
+            this.container.clear();
+            if (this.componentRef) this.componentRef.destroy();
+  
+            this.componentRef = this.container.createComponent(content.component);
+  
+            if (content.inputs) {
+              Object.keys(content.inputs).forEach((key) => {
+                this.componentRef.instance[key] = content.inputs[key];
+              });
+            }
+  
+            if (content.outputs) {
+              Object.keys(content.outputs).forEach((key) => {
+                if (this.componentRef.instance[key] instanceof EventEmitter) {
+                  this.subscriptions.add(
+                    this.componentRef.instance[key].subscribe((...args: any[]) => {
+                      content.outputs[key](...args);
+                    })
+                  )
+                }
+              });
+            }
+            this.drawerConfig = content.config;
+            this.componentRef.changeDetectorRef.detectChanges();
+          }
+        }),
+      );
+  
+      this.subscriptions.add(
+        this.drawerService.drawerHeader$.subscribe(
+          (header) => (this.drawerTitle = header),
+        ),
+      );
+  
+      this.subscriptions.add(
+        this.drawerService.drawerIsOpen$.subscribe(
+          (isOpen) => (this.drawerIsOpen = isOpen),
+        ),
+      );
+    }
+  
+    close() {
+      this.drawerService.closeDrawer();
+    }
+
+    get sizeClass(): string {
+      return (this.drawerConfig?.size ?? '').toLowerCase();
+    }
+
+  
+    ngOnDestroy() {
+      this.subscriptions.unsubscribe();
+    }
+}

package/src/components-source/dropi-dropdown/dropi-dropdown.component.html

@@ -0,0 +1,30 @@
+<div
+  [ngClass]="isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown'"
+  [style.--custom-height]="height || '388px'"
+>
+  <div class="content-dropdown" *ngFor="let optionlItem of options; let i = index">
+    <div
+      class="container-check-dropdown"
+      [ngClass]="{ 'active-option': optionlItem?.checked }"
+      *ngIf="parameters.type === 'checkbox'"
+    >
+      <app-dropi-checkbox
+        [checked]="optionlItem?.checked || false"
+        (onChange)="toggleValue($event, optionlItem, i)"
+      ></app-dropi-checkbox>
+      <!-- si vamos a activar el avatar para transportadora -->
+      <dropi-avatars
+        *ngIf="parameters.iconCurrier"
+        [image]="optionlItem[valueModel] | carrierImageUrl"
+        [type]="'transport'"
+      ></dropi-avatars>
+
+      <dropi-avatars
+        *ngIf="parameters.icon"
+        [image]="optionlItem.image"
+        [type]="'transport'"
+      ></dropi-avatars>
+      <span class="Body-M-Regular">{{ optionlItem[valueModel] }}</span>
+    </div>
+  </div>
+</div>

package/src/components-source/dropi-dropdown/dropi-dropdown.component.scss

@@ -0,0 +1,58 @@
+.container-dropi-dropdown {
+  border-bottom-left-radius: var(--Size-2);
+  border-bottom-right-radius: var(--Size-2);
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  height: var(--custom-height);
+  overflow-y: auto;
+}
+
+.container-dropi-dropdown-select {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+}
+
+.content-dropdown {
+  display: flex;
+  border-radius: var(--Size-1);
+}
+
+.active-option {
+  background-color: var(--Primary-Primary-50);
+  .Body-M-Regular {
+    color: var(--Primary-Primary-500);
+  }
+}
+
+.container-check-dropdown {
+  display: flex;
+  width: 100%;
+  gap: var(--Size-2);
+  padding: var(--Size-3) var(--Size-4);
+  align-items: center;
+  min-width: 0;
+}
+
+.container-check-dropdown:not(.active-option):hover {
+  background-color: var(--Gray-Gray-50);
+}
+
+::ng-deep .container-check-dropdown {
+  dropi-avatars {
+    .dropi-avatars {
+      .dropi-avatar.transport {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}
+
+.container-check-dropdown .Body-M-Regular {
+  flex: 1;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}

package/src/components-source/dropi-dropdown/dropi-dropdown.component.spec.ts

@@ -0,0 +1,213 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiDropdownComponent } from './dropi-dropdown.component';
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+import { DropiAvatarsComponent } from '../dropi-avatars/dropi-avatars.component';
+import { CarrierImageUrl } from '@app/utilities/pipes/carrier-image-url.pipe';
+
+describe('DropiDropdownComponent', () => {
+  let component: DropiDropdownComponent;
+  let fixture: ComponentFixture<DropiDropdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DropiDropdownComponent,
+        DropiCheckboxComponent,
+        DropiAvatarsComponent,
+        CarrierImageUrl,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiDropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.height).toBe('');
+      expect(component.options).toEqual([]);
+      expect(component.valueModel).toBe('name');
+      expect(component.isInSelect).toBe(false);
+    });
+
+    it('should initialize parameters with default values', () => {
+      expect(component.parameters).toBeDefined();
+      expect(component.parameters.type).toBe('checkbox');
+      expect(component.parameters.icon).toBe('');
+      expect(component.parameters.iconCurrier).toBe(false);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept custom height', () => {
+      component.height = '200px';
+      expect(component.height).toBe('200px');
+    });
+
+    it('should accept options array', () => {
+      const mockOptions = [
+        { id: 1, name: 'Option 1', checked: false },
+        { id: 2, name: 'Option 2', checked: false },
+      ];
+      component.options = mockOptions;
+      expect(component.options).toEqual(mockOptions);
+    });
+
+    it('should accept custom valueModel', () => {
+      component.valueModel = 'label';
+      expect(component.valueModel).toBe('label');
+    });
+
+    it('should accept isInSelect flag', () => {
+      component.isInSelect = true;
+      expect(component.isInSelect).toBe(true);
+    });
+
+    it('should accept custom parameters', () => {
+      const customParams = {
+        type: 'checkbox' as const,
+        icon: 'home',
+        iconCurrier: true,
+      };
+      component.parameters = customParams;
+      expect(component.parameters).toEqual(customParams);
+    });
+  });
+
+  describe('Funcionalidad de toggle', () => {
+    beforeEach(() => {
+      component.options = [
+        { id: 1, name: 'Option 1', checked: false },
+        { id: 2, name: 'Option 2', checked: false },
+        { id: 3, name: 'Option 3', checked: false },
+      ];
+    });
+
+    it('should toggle value to checked', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.toggleValue(true, component.options[0], 0);
+
+      expect(component.options[0].checked).toBe(true);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should toggle value to unchecked', () => {
+      component.options[0].checked = true;
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.toggleValue(false, component.options[0], 0);
+
+      expect(component.options[0].checked).toBe(false);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should emit only checked values', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.toggleValue(true, component.options[0], 0);
+      component.toggleValue(true, component.options[2], 2);
+
+      const expectedValues = [
+        { id: 1, name: 'Option 1', checked: true },
+        { id: 3, name: 'Option 3', checked: true },
+      ];
+
+      expect(emitSpy).toHaveBeenCalledWith(expectedValues);
+    });
+
+    it('should handle multiple toggles correctly', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.toggleValue(true, component.options[0], 0);
+      component.toggleValue(true, component.options[1], 1);
+      component.toggleValue(false, component.options[0], 0);
+
+      const lastEmit = emitSpy.mock.calls[emitSpy.mock.calls.length - 1][0];
+      expect(lastEmit.length).toBe(1);
+      expect(lastEmit[0].id).toBe(2);
+    });
+  });
+
+  describe('Funcionalidad de reset', () => {
+    beforeEach(() => {
+      component.options = [
+        { id: 1, name: 'Option 1', checked: true },
+        { id: 2, name: 'Option 2', checked: true },
+        { id: 3, name: 'Option 3', checked: false },
+      ];
+    });
+
+    it('should reset all checks to false', () => {
+      component.resetChecks();
+
+      component.options.forEach((option) => {
+        expect(option.checked).toBe(false);
+      });
+    });
+
+    it('should emit empty array when reset', () => {
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      component.resetChecks();
+
+      expect(emitSpy).toHaveBeenCalledWith([]);
+    });
+
+    it('should handle reset on empty options', () => {
+      component.options = [];
+
+      expect(() => component.resetChecks()).not.toThrow();
+    });
+  });
+
+  describe('Escenarios de integración', () => {
+    it('should work with all features enabled', () => {
+      component.height = '300px';
+      component.options = [
+        { id: 1, name: 'Option 1', checked: false },
+        { id: 2, name: 'Option 2', checked: false },
+      ];
+      component.valueModel = 'name';
+      component.isInSelect = true;
+      component.parameters = {
+        type: 'checkbox',
+        icon: 'home',
+        iconCurrier: true,
+      };
+
+      fixture.detectChanges();
+
+      expect(component.height).toBe('300px');
+      expect(component.options.length).toBe(2);
+      expect(component.isInSelect).toBe(true);
+    });
+
+    it('should handle complex selection workflow', () => {
+      component.options = [
+        { id: 1, name: 'A', checked: false },
+        { id: 2, name: 'B', checked: false },
+        { id: 3, name: 'C', checked: false },
+      ];
+
+      const emitSpy = jest.spyOn(component.modelChange, 'emit');
+
+      // Select all
+      component.toggleValue(true, component.options[0], 0);
+      component.toggleValue(true, component.options[1], 1);
+      component.toggleValue(true, component.options[2], 2);
+
+      expect(component.options.filter((o) => o.checked).length).toBe(3);
+
+      // Reset
+      component.resetChecks();
+      expect(component.options.filter((o) => o.checked).length).toBe(0);
+      expect(emitSpy).toHaveBeenLastCalledWith([]);
+    });
+  });
+});

package/src/components-source/dropi-dropdown/dropi-dropdown.component.stories.ts

@@ -0,0 +1,143 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { action } from '@storybook/addon-actions';
+import { DropiDropdownComponent } from './dropi-dropdown.component';
+
+/**
+ * # Dropdown Component
+ *
+ * A versatile dropdown component for displaying selectable options in an overlay panel.
+ * Supports both single selection and multi-selection with checkboxes.
+ *
+ * ## Features
+ * - **Multi-select**: Support for checkbox-based multi-selection
+ * - **Custom options**: Display options with text, icons, or carrier images
+ * - **Height control**: Configurable maximum height
+ * - **Two-way binding**: Model binding for selected values
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-dropdown
+ *   [options]="carriers"
+ *   [valueModel]="'name'"
+ *   [parameters]="{ type: 'checkbox', iconCurrier: true }"
+ *   (modelChange)="onSelectionChange($event)">
+ * </app-dropi-dropdown>
+ * ```
+ */
+const meta: Meta<DropiDropdownComponent> = {
+  title: 'UI Dropi/Dropdown',
+  component: DropiDropdownComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A versatile dropdown component for displaying selectable options in an overlay panel.
+Supports both single selection and multi-selection with checkboxes.
+
+### Key Features
+- **Multi-select**: Support for checkbox-based multi-selection
+- **Custom options**: Display options with text, icons, or carrier images
+- **Height control**: Configurable maximum height
+- **Two-way binding**: Model binding for selected values
+        `,
+      },
+    },
+  },
+  argTypes: {
+    height: {
+      control: 'text',
+      description: 'Maximum height of the dropdown panel',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    options: {
+      control: 'object',
+      description: 'Array of options to display in the dropdown',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    valueModel: {
+      control: 'text',
+      description: 'Property name to use as the display value for each option',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    parameters: {
+      control: 'object',
+      description: 'Configuration object for dropdown behavior (type, icon, iconCurrier)',
+      table: {
+        type: { summary: 'object' },
+      },
+    },
+    modelChange: {
+      action: 'modelChange',
+      description: 'Event emitted when the selection changes',
+    },
+  },
+};
+
+const transportadoras: { id: string; name: string }[] = [
+  { id: '01', name: 'Servientrega' },
+  { id: '02', name: 'Inter Rapidísimo' },
+  { id: '03', name: 'Coordinadora' },
+  { id: '04', name: 'Deprisa' },
+  { id: '05', name: 'Envía' },
+  { id: '06', name: 'TCC' },
+  { id: '07', name: 'FedEx' },
+  { id: '08', name: 'UPS' },
+  { id: '09', name: 'DHL' },
+  { id: '10', name: 'Mensajeros Urbanos' },
+  { id: '11', name: 'Logyca' },
+  { id: '12', name: 'Picap Express' },
+];
+
+export default meta;
+type Story = StoryObj<DropiDropdownComponent>;
+
+export const Checkbox: Story = {
+  args: {
+    options: transportadoras,
+    valueModel: 'name',
+    parameters: {
+      type: 'checkbox',
+      icon: '',
+      iconCurrier: false,
+    },
+  },
+};
+
+export const CheckboxwithIcon: Story = {
+  args: {
+    options: transportadoras,
+    valueModel: 'name',
+    parameters: {
+      type: 'checkbox',
+      icon: 'assets/images/delivery/envia.png',
+      iconCurrier: false,
+    },
+  },
+};
+
+export const CheckboxwithCarrierIcon: Story = {
+  args: {
+    options: transportadoras,
+    valueModel: 'name',
+    parameters: {
+      type: 'checkbox',
+      icon: '',
+      iconCurrier: true,
+    },
+  },
+};