@dropi/ui-components 1.0.0

package/src/components-source/dropi-country-selector/dropi-country-selector.component.scss

@@ -0,0 +1,126 @@
+.custom-select {
+  position: relative;
+  width: 100%;
+  label {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-regular);
+    color: var(--Gray-Gray-600);
+    span {
+      color: var(--Error-Error-500);
+    }
+  }
+}
+
+.select-button {
+  width: 100%;
+  height: 40px;
+  padding: 0.47rem 0.75rem;
+  padding-right: 7px;
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  color: var(--Gray-Gray-500);
+  font-size: var(--font-size-s);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+}
+
+.select-dropdown {
+  position: absolute;
+  width: 100%;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0 0;
+  border: 1px solid transparent;
+  border-radius: var(--Border-2);
+  overflow-y: scroll;
+  z-index: 100;
+}
+
+.option {
+  width: 100%;
+  height: 45px;
+  border-radius: var(--Border-2);
+  padding-top: var(--Size-3);
+  padding-right: var(--Size-4);
+  padding-bottom: var(--Size-3);
+  padding-left: var(--Size-4);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600);
+  font-size: var(--font-size-s);
+  cursor: pointer;
+}
+
+.option:hover {
+  background: var(--Gray-Gray-50);
+}
+
+.expanded-select {
+  max-height: 250px;
+  background: var(--Neutral-White);
+  box-shadow: var(--Shadow-medium);
+  transition: max-height 0.2s ease-in;
+}
+
+.collapsed-select {
+  max-height: 0;
+  background: transparent;
+  box-shadow: none;
+  transition:
+    max-height 0.2s ease-out,
+    background 0.6s ease-out,
+    box-shadow 0.6s ease-out;
+}
+
+.select-button:focus {
+  border-color: var(--Info-Info-500) !important;
+}
+
+.select-button:disabled,
+.option:disabled {
+  border-color: var(--Gray-Gray-200);
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+  cursor: unset;
+}
+
+.select-completed {
+  border-color: var(--Gray-Gray-400);
+  color: var(--Gray-Gray-600);
+  background: var(--Neutral-White);
+}
+
+.select-invalid {
+  border-color: var(--Error-Error-500) !important;
+}
+
+.select-helper {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+  span {
+    display: block;
+    margin-top: 8px;
+    color: var(--Gray-Gray-600);
+    font-size: var(--font-size-xs);
+  }
+}
+
+.invalid-color {
+  color: var(--Error-Error-500) !important;
+}
+
+.country-search {
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  outline: none;
+  font-size: 14px;
+}

package/src/components-source/dropi-country-selector/dropi-country-selector.component.spec.ts

@@ -0,0 +1,244 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiCountrySelectorComponent } from './dropi-country-selector.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IconComponent } from '../icon/icon.component';
+import { FormsModule } from '@angular/forms';
+import { ChangeDetectorRef } from '@angular/core';
+
+describe('DropiCountrySelectorComponent', () => {
+  let component: DropiCountrySelectorComponent;
+  let fixture: ComponentFixture<DropiCountrySelectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DropiCountrySelectorComponent,
+        IconComponent,
+        TranslateModule.forRoot(),
+        FormsModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiCountrySelectorComponent);
+    component = fixture.componentInstance;
+    component.selectProperties = {
+      label: 'Country',
+      placeholder: 'Select country',
+      options: [],
+    };
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.disabled).toBe(false);
+      expect(component.isExpanded).toBe(false);
+      expect(component.searchTerm).toBe('');
+    });
+
+    it('should load countries data', () => {
+      expect(component.countries).toBeDefined();
+      expect(component.countries.length).toBeGreaterThan(0);
+      expect(component.filteredCountries.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Selección de país', () => {
+    it('should select a country', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const mockCountry = component.countries[0];
+
+      component.selectOption(mockCountry);
+
+      expect(component.selectedOption).toEqual(mockCountry);
+      expect(emitSpy).toHaveBeenCalledWith(mockCountry);
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should clear search term after selection', () => {
+      component.searchTerm = 'test';
+      const mockCountry = component.countries[0];
+
+      component.selectOption(mockCountry);
+
+      expect(component.searchTerm).toBe('');
+    });
+
+    it('should reset filtered countries after selection', () => {
+      component.filteredCountries = [component.countries[0]];
+      const mockCountry = component.countries[0];
+
+      component.selectOption(mockCountry);
+
+      expect(component.filteredCountries).toEqual(component.countries);
+    });
+  });
+
+  describe('Búsqueda de países', () => {
+    it('should filter countries by name', () => {
+      component.searchTerm = 'united';
+      component.filterCountries();
+
+      expect(component.filteredCountries.length).toBeGreaterThan(0);
+      component.filteredCountries.forEach((country) => {
+        expect(country.name.toLowerCase()).toContain('united');
+      });
+    });
+
+    it('should return empty array when no match', () => {
+      component.searchTerm = 'xyz123nonexistent';
+      component.filterCountries();
+
+      expect(component.filteredCountries.length).toBe(0);
+    });
+
+    it('should be case insensitive', () => {
+      component.searchTerm = 'UNITED';
+      component.filterCountries();
+
+      expect(component.filteredCountries.length).toBeGreaterThan(0);
+    });
+
+    it('should show all countries when search term is empty', () => {
+      component.searchTerm = '';
+      component.filterCountries();
+
+      expect(component.filteredCountries.length).toBe(component.countries.length);
+    });
+  });
+
+  describe('Selección por código', () => {
+    it('should set property by country code', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const testCode = 'US';
+
+      component.setPropertyById(testCode);
+
+      const expectedCountry = component.countries.find((c) => c.code === testCode);
+      expect(component.selectedOption).toEqual(expectedCountry);
+      expect(emitSpy).toHaveBeenCalledWith(expectedCountry);
+    });
+
+    it('should not set property for invalid code', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+
+      component.setPropertyById('INVALID');
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Selección por nombre', () => {
+    it('should set property by country name', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const testName = component.countries[0].name;
+
+      component.setPropertyByLabel(testName);
+
+      expect(component.selectedOption.name).toBe(testName);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Control de dropdown', () => {
+    it('should toggle dropdown when showOptions is called', () => {
+      component.disabled = false;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(true);
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should not open dropdown when disabled', () => {
+      component.disabled = true;
+      component.isExpanded = false;
+
+      component.showOptions();
+
+      expect(component.isExpanded).toBe(false);
+    });
+
+    it('should close dropdown on document click', () => {
+      component.isExpanded = true;
+      const mockEvent = new MouseEvent('click');
+
+      component.closeDropdown(mockEvent);
+
+      expect(component.isExpanded).toBe(false);
+    });
+  });
+
+  describe('Current selection input', () => {
+    it('should set country by code via input', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+      const testCode = 'US';
+
+      component.currentSelection = testCode;
+
+      const expectedCountry = component.countries.find((c) => c.code === testCode);
+      expect(component.selectedOption).toEqual(expectedCountry);
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should get current selection value', () => {
+      component.currentSelection = 'US';
+
+      expect(component.currentSelection).toBe('US');
+    });
+  });
+
+  describe('Estado deshabilitado', () => {
+    it('should accept disabled state', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+
+      expect(component.disabled).toBe(true);
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should handle complete selection workflow', () => {
+      const emitSpy = jest.spyOn(component.onChangeSelect, 'emit');
+
+      // Open dropdown
+      component.showOptions();
+      expect(component.isExpanded).toBe(true);
+
+      // Search
+      component.searchTerm = 'united';
+      component.filterCountries();
+      expect(component.filteredCountries.length).toBeGreaterThan(0);
+
+      // Select
+      const country = component.filteredCountries[0];
+      component.selectOption(country);
+
+      expect(component.selectedOption).toEqual(country);
+      expect(component.isExpanded).toBe(false);
+      expect(component.searchTerm).toBe('');
+      expect(emitSpy).toHaveBeenCalledWith(country);
+    });
+
+    it('should work with select properties', () => {
+      component.selectProperties = {
+        label: 'Select Country',
+        placeholder: 'Choose a country',
+        options: [],
+        showObligatory: true,
+        textHelper: 'Select your country',
+      };
+
+      expect(component.selectProperties.label).toBe('Select Country');
+      expect(component.selectProperties.showObligatory).toBe(true);
+    });
+  });
+});

package/src/components-source/dropi-country-selector/dropi-country-selector.component.stories.ts

@@ -0,0 +1,117 @@
+/**
+ * @fileoverview CountrySelector component stories for Storybook
+ * @description A country selection dropdown with flag icons and country codes
+ */
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DropiCountrySelectorComponent } from './dropi-country-selector.component';
+
+const meta: Meta<DropiCountrySelectorComponent> = {
+  title: 'UI Dropi/Country Select',
+  component: DropiCountrySelectorComponent,
+  decorators: [moduleMetadata({})],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# Country Selector Component
+
+A dropdown component for selecting countries with flag icons.
+
+## Key Features
+- **Flag icons**: Visual country identification
+- **Country codes**: Phone codes and ISO codes
+- **Searchable**: Filter countries by name
+- **Configurable**: Labels, placeholders, required state
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    selectProperties: {
+      control: 'object',
+      description: 'Configuration properties for the country selector',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the selector',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiCountrySelectorComponent>;
+const createStory = (args: any): Story => ({
+  render: (args, { parameters }) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      <div style="margin: 30px;">
+        <app-dropi-country-selector #selectComp [selectProperties]="selectProperties" [disabled]="disabled"></app-dropi-country-selector>
+      </div>
+    `,
+  }),
+  args,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=2-393&p=f&t=ZXcjH0F1XQjX4mft-0',
+    },
+  },
+});
+
+export const Default = createStory({
+  selectProperties: {
+    label: 'Example country selector',
+    showObligatory: false,
+    placeholder: 'Select',
+  },
+  disabled: false,
+});
+
+export const DefaultRequired = createStory({
+  selectProperties: {
+    label: 'Example country selector',
+    showObligatory: true,
+    placeholder: 'Select',
+  },
+  disabled: false,
+});
+
+export const Disabled = createStory({
+  selectProperties: {
+    label: 'Example country selector',
+    showObligatory: true,
+    placeholder: 'Select',
+  },
+  disabled: true,
+});
+
+export const WithHelper = createStory({
+  selectProperties: {
+    label: 'Example basic select',
+    textHelper: 'Example helper',
+    showObligatory: true,
+    placeholder: 'Select',
+    options: [
+      {
+        id: 1,
+        label: 'Option 1',
+        disabled: false,
+      },
+      {
+        id: 2,
+        label: 'Option 2',
+        disabled: false,
+      },
+      {
+        id: 3,
+        label: 'Option 3',
+        disabled: false,
+      },
+    ],
+  },
+  disabled: false,
+});

package/src/components-source/dropi-country-selector/dropi-country-selector.component.ts

@@ -0,0 +1,179 @@
+import {
+  Component,
+  HostListener,
+  Input,
+  ElementRef,
+  Output,
+  EventEmitter,
+  ChangeDetectorRef,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  OptionsCountrySelect,
+  SelectProperties,
+} from '@app/utilities/interfaces/ui/country-selector.interface';
+import { IconComponent } from '../icon/icon.component';
+import { COUNTRIES } from './countries.data';
+import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-dropi-country-selector',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, IconComponent, FormsModule, ReactiveFormsModule],
+  templateUrl: './dropi-country-selector.component.html',
+  styleUrls: ['./dropi-country-selector.component.scss'],
+})
+export class DropiCountrySelectorComponent {
+  /**
+   *
+   * Define las propiedades necesarias para un campo de entrada (`input`).
+   *
+   * Cada campo debe contener las siguientes propiedades:
+   * - `label`: Texto descriptivo que se mostrará como etiqueta.
+   * - `placeholder`: Texto de ejemplo dentro del campo.
+   * - `options`: opciones que se mostraran en el menu desplegable que tienen los tipos:
+   *     - `id`: Indicativo con el cual se identifica la opcion
+   *     - `label`: Texto descriptivo de la opción
+   *     - `disabled`: Indicador de opción deshabilitada
+   *
+   * Propiedades opcionales:
+   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
+   * - `showObligatory`: Indicador para mostrar si el campo es obligatorio
+   *
+   * @type {SelectProperties}
+   */
+  @Input() public selectProperties: SelectProperties;
+  /**
+   * Indica si se debe mostrar deshabilitiado el select.
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  @Input() public disabled: boolean = false;
+  /**
+   * FormControl opcional para validación y mostrar errores
+   * Si se proporciona, el componente mostrará borde rojo cuando tenga errores
+   *
+   * @type {FormControl}
+   */
+  @Input() public formControl: FormControl;
+  /**
+   * Evento que emite el valor del select cuando se selecciona
+   *
+   * @type {OptionsSelect}
+   */
+  @Output() onChangeSelect: EventEmitter<OptionsCountrySelect> = new EventEmitter();
+
+  /**
+   * Setear el pais del modelo inicial, debes enviarle el code del pais.
+   *
+   * @type {string}
+   */
+  private _currentSelection = '';
+
+  @Input() set currentSelection(value: string) {
+    this._currentSelection = value;
+    if (value) {
+      const found = this.countries.find((propertie) => propertie.code === value);
+      if (found) {
+        this.selectedOption = found;
+        this.onChangeSelect.emit(this.selectedOption);
+        this.cdr.detectChanges(); // 👈🏼 Forzar a Angular a actualizar el DOM
+      }
+    }
+  }
+
+  @Input() public searchTerm: string = '';
+  @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
+
+  get currentSelection() {
+    return this._currentSelection;
+  }
+  /**
+   * Indica si el select esta desplegado
+   *
+   * Valor por defecto: `false`.
+   *
+   * @type {boolean}
+   */
+  public isExpanded: boolean = false;
+  /**
+   * Almacena la opción actual seleccionada
+   *
+   * @type {OptionsSelect}
+   */
+  public selectedOption: OptionsCountrySelect;
+  countries = COUNTRIES;
+  public filteredCountries: OptionsCountrySelect[] = this.countries;
+
+  /**
+   * Verifica si el formControl tiene errores y está dirty/touched
+   */
+  get hasError(): boolean {
+    return (
+      this.formControl &&
+      this.formControl.invalid &&
+      (this.formControl.dirty || this.formControl.touched)
+    );
+  }
+
+  constructor(
+    private elementRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  @HostListener('document:click', ['$event'])
+  closeDropdown(event?: MouseEvent): void {
+    if (event && !this.elementRef.nativeElement.contains(event.target)) {
+      this.isExpanded = false;
+    }
+  }
+
+  selectOption(option: OptionsCountrySelect) {
+    this.isExpanded = false;
+    this.selectedOption = option;
+    this.searchTerm = '';
+    this.filteredCountries = this.countries;
+    this.onChangeSelect.emit(option);
+  }
+
+  showOptions() {
+    if (this.disabled) return;
+    this.isExpanded = !this.isExpanded;
+
+    if (this.isExpanded) {
+      setTimeout(() => {
+        this.searchInput?.nativeElement.focus();
+      }, 0);
+    }
+  }
+
+  setPropertyById(code: string) {
+    const found = this.countries.find((propertie) => propertie.code === code);
+    if (found) {
+      this.selectedOption = found;
+      this.onChangeSelect.emit(this.selectedOption);
+    }
+  }
+
+  setPropertyByLabel(name: string) {
+    this.selectedOption = this.countries.find((propertie) => propertie.name === name);
+    this.onChangeSelect.emit(this.selectedOption);
+  }
+
+  filterCountries() {
+    const term = this.searchTerm.toLowerCase();
+    this.filteredCountries = this.countries.filter((country) =>
+      country.name.toLowerCase().includes(term),
+    );
+  }
+
+  clearSelection() {
+    this.selectedOption = null;
+    this.searchTerm = '';
+    this.filteredCountries = this.countries;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div 
+  [class]="'dropi-drawer size-' + drawerConfig.size.toLowerCase()" [ngClass]="{
+    headless: drawerConfig.headless,
+  }"
+>
+  <p-sidebar
+    [(visible)]="drawerIsOpen"
+    (onHide)="close()"
+    [blockScroll]="true"
+    [position]="drawerConfig.position"
+    [showCloseIcon]="!drawerConfig.headless"
+    [styleClass]="drawerConfig.customClass"
+    style="z-index: 999;"
+  >
+    <ng-template pTemplate="header">
+      <div *ngIf="!drawerConfig.headless">
+        <h3>{{ drawerTitle }}</h3>
+      </div>
+    </ng-template>
+    
+    <ng-container #container />
+  </p-sidebar>
+</div>