@dropi/ui-components 1.0.0

package/src/components-source/index.ts

@@ -0,0 +1,89 @@
+/**
+ * UI Dropi Components - Barrel Exports
+ *
+ * Este archivo exporta todos los componentes UI standalone.
+ * Uso: import { IconComponent, AlertComponent } from '@app/ui';
+ *
+ * Para importar todos: import * as UiComponents from '@app/ui';
+ */
+
+// Date Pickers
+export { DatePickerRangeComponent } from './date-picker-range/date-picker-range.component';
+export { DatePickerComponent } from './date-picker/date-picker.component';
+
+// Tooltips
+export { TooltipComponent } from './tooltip/tooltip.component';
+export { DropiTooltipComponent } from './dropi-tooltip/dropi-tooltip.component';
+
+// Tags & Badges
+export { TagTypeProductComponent } from './tag-type-product/tag-type-product.component';
+export { DropiTagComponent } from './dropi-tag/dropi-tag.component';
+export { DropiChipsComponent } from './dropi-chips/dropi-chips.component';
+
+// Modals & Alerts
+export { AlertModalComponent } from './alert-modal/alert-modal.component';
+export { AlertComponent } from './alert/alert.component';
+export { DropiModalComponent } from './dropi-modal/dropi-modal.component';
+export { PTemplateDirective } from './dropi-modal/p-template.directive';
+
+// Steppers & Navigation
+export { SimpleStepperComponent } from './simple-stepper/simple-stepper.component';
+export { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+export { TabsComponent } from './tabs/tabs.component';
+export { DropiStepsComponent } from './dropi-steps/dropi-steps.component';
+export { VerticalStepsComponent } from './vertical-steps/vertical-steps.component';
+export type { VerticalStep, VerticalStepState } from './vertical-steps/vertical-steps.component';
+
+// Selectors
+export { CitySelectorComponent } from './city-selector/city-selector.component';
+export { DropiSelectComponent } from './dropi-select/dropi-select.component';
+
+// Lists & Selection
+export { RadioSelectionListComponent } from './radio-selection-list/radio-selection-list.component';
+export { CheckboxSelectionListComponent } from './checkbox-selection-list/checkbox-selection-list.component';
+
+// Loaders & Feedback
+export { LottieLoaderComponent } from './lottie-loader/lottie-loader.component';
+export { ToastComponent } from './toast/toast.component';
+
+// Accordion
+export { AccordionComponent } from './accordion/accordion.component';
+export { AccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
+
+// Text & Content
+export { ReadMoreComponent } from './read-more/read-more.component';
+
+// Icons & Images
+export { IconComponent } from './icon/icon.component';
+export { DropiImageOverlayComponent } from './dropi-image-overlay/dropi-image-overlay.component';
+
+// Form Controls
+export { InputComponent } from './input/input.component';
+export { DropiSwitchComponent } from './dropi-switch/dropi-switch.component';
+export { DropiSearchComponent } from './dropi-search/dropi-search.component';
+export { OtpSendCodeComponent } from './otp-send-code/otp-send-code.component';
+
+// Buttons
+export {
+  ButtonComponent,
+  ButtonComponent as DropiButtonComponent,
+} from './dropi-button/dropi-button.component';
+
+// Tables
+export { DropiTableComponent } from './dropi-table/dropi-table.component';
+
+// File Upload
+export { DropiFileUploadComponent } from './dropi-file-upload/dropi-file-upload.component';
+export { DropZoneComponent } from './dropi-file-upload/drop-zone/drop-zone.component';
+
+// Country Selector
+export { DropiCountrySelectorComponent } from './dropi-country-selector/dropi-country-selector.component';
+
+/**
+ * Array con todos los componentes UI para importar en módulos
+ * Uso en imports de @NgModule o standalone component:
+ * imports: [...UI_COMPONENTS]
+ */
+export const UI_COMPONENTS = [
+  // Importar desde los paths relativos en el archivo que lo use
+] as const;

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

@@ -0,0 +1,97 @@
+<div
+  [ngClass]="{
+    'fixed-label-container': fixedLabel
+  }"
+>
+  <div class="Body-S-Regular input-label" *ngIf="fixedLabel">
+    {{ inputProperties.label | translate }}
+    <span
+      *ngIf="isRequired() && showAsterisk && (!disabled || !inputProperties.formControl.disabled)"
+      >*</span
+    >
+  </div>
+  <div class="form-group">
+    <div class="input-container">
+      <app-icon
+        *ngIf="inputProperties.icon && inputProperties.formControl.value"
+        class="icon-input"
+        [name]="inputProperties.icon"
+        [color]="inputProperties.iconColor"
+        width="20px"
+        height="20px"
+      ></app-icon>
+
+      <app-icon
+        *ngIf="inputProperties.isPasswordInput"
+        class="icon-input-password"
+        [name]="showPassword ? 'Eye' : 'Eye-crossed'"
+        width="20px"
+        height="20px"
+        color="Gray-Gray-500"
+        (click)="showOrHidePassword()"
+      ></app-icon>
+
+      <input
+        #inputElement
+        class="form-control"
+        [id]="inputProperties.id ? inputProperties.id : inputProperties.label"
+        [attr.data-cy]="inputProperties.dataCy"
+        type="text"
+        [ngClass]="{
+          'form-control-valid': inputProperties.formControl.valid,
+          'form-control-invalid':
+            inputProperties.formControl.invalid && inputProperties.formControl.dirty,
+          'padding-icon': inputProperties.icon && inputProperties.formControl.value,
+          'text-password': inputProperties.isPasswordInput && !showPassword,
+          'fixed-label-input': fixedLabel
+        }"
+        [formControl]="inputProperties.formControl"
+        [placeholder]="inputProperties.placeholder | translate"
+        [attr.inputmode]="inputProperties.inputMode || 'text'"
+        appThousandSeparator
+        [applyFormat]="!!(inputProperties?.isMoneyInput || inputProperties?.isThousandSeparator)"
+        [showCurrency]="!!inputProperties?.isMoneyInput"
+        appOnlyNumbers
+        [applyOnlyNumbers]="!!inputProperties?.isNumericInput"
+        appOnlyLetters
+        [applyOnlyLetters]="!!inputProperties?.isLettersOnly"
+        [maxlength]="inputProperties?.maxLength"
+      />
+      <label class="Body-S-Regular label-bottom" *ngIf="!fixedLabel" [for]="inputProperties.label"
+        >{{ inputProperties.label | translate }}
+        <span
+          *ngIf="
+            isRequired() && showAsterisk && (!disabled || !inputProperties.formControl.disabled)
+          "
+          >*</span
+        ></label
+      >
+
+      <div
+        *ngIf="
+          inputProperties.textHelper &&
+          (!inputProperties.showHelperOnlyOnError ||
+            (inputProperties.formControl.invalid && inputProperties.formControl.dirty))
+        "
+        class="form-control-helper"
+      >
+        <app-icon
+          *ngIf="inputProperties.formControl.invalid && inputProperties.formControl.dirty"
+          name="Warning-circle"
+          width="12px"
+          height="12px"
+          color="Error-Error-500"
+        ></app-icon>
+        <span
+          *ngIf="inputProperties.textHelper"
+          [ngClass]="{
+            'disabled-helper': disabled,
+            'invalid-color':
+              inputProperties.formControl.invalid && inputProperties.formControl.dirty
+          }"
+          >{{ inputProperties.textHelper | translate }}</span
+        >
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,149 @@
+.form-group {
+  position: relative;
+  width: 100%;
+  .icon-input {
+    position: absolute;
+    top: 8px;
+    left: 5px;
+  }
+
+  .icon-input-password {
+    position: absolute;
+    top: 8px;
+    right: 13px;
+    cursor: pointer;
+  }
+}
+.input-container {
+  position: relative;
+}
+
+.form-control {
+  width: 100%;
+  padding: var(--Size-2);
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  font-size: var(--font-size-s);
+  transition: border-color 0.3s ease-in-out;
+  height: 40px;
+}
+
+.padding-icon {
+  padding-left: 28px;
+}
+
+.form-control-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);
+  }
+}
+
+.text-password {
+  -webkit-text-security: disc;
+}
+
+.form-control:focus::placeholder {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:focus {
+  border-color: var(--Info-Info-500)!important;
+  outline: none;
+}
+
+.form-control-valid {
+  border: 1px solid var(--Gray-Gray-400) !important;
+  color: var(--Gray-Gray-600);
+  outline: none;
+}
+
+.form-control-invalid {
+  border: 1px solid var(--Error-Error-500) !important;
+  color: var(--Gray-Gray-600);
+  outline: none;
+}
+
+.form-control:disabled {
+  border: 1px solid var(--Gray-Gray-200) !important;
+  color: var(--Gray-Gray-400);
+  background-color: var(--Gray-Gray-50);
+  outline: none;
+}
+
+.fixed-label {
+  position: relative;
+  top: 0;
+  left: 0;
+  margin-bottom: 8px;
+  font-size: var(--font-size-xs);
+  width: unset;
+  color: var(--Gray-Gray-600);
+}
+
+label.label-bottom {
+  position: absolute;
+  font-weight: var(--font-weight-regular);
+  top: 10px;
+  font-size: var(--font-size-s);
+  color: var(--Gray-Gray-500);
+  left: 10px;
+  transition: all 0.2s ease-in-out;
+  pointer-events: none;
+  overflow: hidden;
+  width: 90%;
+  white-space: nowrap;
+  span {
+    color: var(--Error-Error-500);
+  }
+}
+
+.form-control:focus + label.label-bottom,
+.form-control:not(:placeholder-shown) + label {
+  top: -28px;
+  left: 0;
+  margin-bottom: 8px;
+  font-size: var(--font-size-xs);
+  width: unset;
+  color: var(--Gray-Gray-600);
+}
+
+.form-control:disabled + label.label-bottom {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:disabled + label.label-bottom + .form-control-helper {
+  color: var(--Gray-Gray-500);
+}
+
+.form-control:not(:focus):not(.fixed-label-input)::placeholder {
+  color: transparent;
+  transition: all 0.2s ease-in-out;
+}
+
+.invalid-color {
+  color: var(--Error-Error-500) !important;
+}
+
+.disabled-helper {
+  color: var(--Gray-Gray-500) !important;
+}
+
+.fixed-label-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+.input-label {
+  color: var(--Gray-Gray-600, #475066);
+}

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

@@ -0,0 +1,243 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, Validators } from '@angular/forms';
+import { InputComponent } from './input.component';
+import { InputProperties } from '@app/utilities/interfaces/ui/input-interface';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateService } from '@ngx-translate/core';
+import { mockTranslateService } from '../../../test-utils/jest-mocks';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(() => {
+    // Crear el componente directamente sin TestBed para evitar problemas de dependencias
+    component = new InputComponent();
+
+    // Mock fixture básico
+    fixture = {
+      componentInstance: component,
+      detectChanges: () => {},
+      nativeElement: {},
+    } as any;
+
+    // Configurar propiedades básicas del input
+    component.inputProperties = {
+      formControl: new FormControl(''),
+      label: 'Test Label',
+      placeholder: 'Test Placeholder',
+      maxLength: 50,
+    } as InputProperties;
+
+    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.showObligatoryAsterisk).toBe(true);
+      expect(component.showAsterisk).toBe(false);
+      expect(component.showPassword).toBe(false);
+    });
+
+    it('should call validateDisabled on init', () => {
+      const spy = jest.spyOn(component, 'validateDisabled');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Propiedades del input', () => {
+    it('should accept input properties', () => {
+      const testProperties: InputProperties = {
+        formControl: new FormControl('test'),
+        label: 'Custom Label',
+        placeholder: 'Custom Placeholder',
+        maxLength: 100,
+        textHelper: 'Helper text',
+        icon: 'search',
+      } as InputProperties;
+
+      component.inputProperties = testProperties;
+
+      expect(component.inputProperties.label).toBe('Custom Label');
+      expect(component.inputProperties.placeholder).toBe('Custom Placeholder');
+      expect(component.inputProperties.maxLength).toBe(100);
+      expect(component.inputProperties.textHelper).toBe('Helper text');
+      expect(component.inputProperties.icon).toBe('search');
+    });
+  });
+
+  describe('Validación de campos requeridos', () => {
+    it('should detect required field correctly', () => {
+      component.inputProperties.formControl = new FormControl('', Validators.required);
+
+      const isRequired = component.isRequired();
+      expect(isRequired).toBe(true);
+    });
+
+    it('should detect non-required field correctly', () => {
+      component.inputProperties.formControl = new FormControl('');
+
+      const isRequired = component.isRequired();
+      expect(isRequired).toBe(false);
+    });
+
+    it('should show asterisk for required fields when showObligatoryAsterisk is true', () => {
+      component.inputProperties.formControl = new FormControl('', Validators.required);
+      component.showObligatoryAsterisk = true;
+
+      component.addObligatoryAsterisk();
+
+      expect(component.showAsterisk).toBe(true);
+    });
+
+    it('should not show asterisk when showObligatoryAsterisk is false', () => {
+      component.inputProperties.formControl = new FormControl('', Validators.required);
+      component.showObligatoryAsterisk = false;
+
+      component.addObligatoryAsterisk();
+
+      expect(component.showAsterisk).toBe(false);
+    });
+
+    it('should not show asterisk for non-required fields', () => {
+      component.inputProperties.formControl = new FormControl('');
+      component.showObligatoryAsterisk = true;
+
+      component.addObligatoryAsterisk();
+
+      expect(component.showAsterisk).toBe(false);
+    });
+  });
+
+  describe('Manejo de estado deshabilitado', () => {
+    it('should disable form control when disabled is true', () => {
+      component.disabled = true;
+      component.inputProperties.formControl = new FormControl('');
+
+      component.validateDisabled();
+
+      expect(component.inputProperties.formControl.disabled).toBe(true);
+    });
+
+    it('should not disable form control when disabled is false', () => {
+      component.disabled = false;
+      component.inputProperties.formControl = new FormControl('');
+
+      component.validateDisabled();
+
+      expect(component.inputProperties.formControl.disabled).toBe(false);
+    });
+  });
+
+  describe('Funcionalidad de mostrar/ocultar contraseña', () => {
+    it('should toggle password visibility when not disabled', () => {
+      component.disabled = false;
+      component.inputProperties.formControl = new FormControl('');
+      component.showPassword = false;
+
+      component.showOrHidePassword();
+
+      expect(component.showPassword).toBe(true);
+
+      component.showOrHidePassword();
+
+      expect(component.showPassword).toBe(false);
+    });
+
+    it('should not toggle password visibility when component is disabled', () => {
+      component.disabled = true;
+      component.showPassword = false;
+
+      component.showOrHidePassword();
+
+      expect(component.showPassword).toBe(false);
+    });
+
+    it('should not toggle password visibility when form control is disabled', () => {
+      component.disabled = false;
+      component.inputProperties.formControl = new FormControl('');
+      component.inputProperties.formControl.disable();
+      component.showPassword = false;
+
+      component.showOrHidePassword();
+
+      expect(component.showPassword).toBe(false);
+    });
+  });
+
+  describe('Casos edge', () => {
+    it('should handle form control with multiple validators', () => {
+      component.inputProperties.formControl = new FormControl('', [
+        Validators.required,
+        Validators.minLength(5),
+        Validators.email,
+      ]);
+
+      const isRequired = component.isRequired();
+      expect(isRequired).toBe(true);
+    });
+
+    it('should handle empty form control validators', () => {
+      component.inputProperties.formControl = new FormControl('', []);
+
+      const isRequired = component.isRequired();
+      expect(isRequired).toBe(false);
+    });
+
+    it('should handle null form control value', () => {
+      component.inputProperties.formControl = new FormControl(null);
+
+      expect(() => component.validateDisabled()).not.toThrow();
+    });
+  });
+
+  describe('Integración completa', () => {
+    it('should work with complete input configuration', () => {
+      const testProperties: InputProperties = {
+        formControl: new FormControl('', [Validators.required, Validators.minLength(3)]),
+        label: 'Email Address',
+        placeholder: 'Enter your email',
+        maxLength: 255,
+        textHelper: 'We will never share your email',
+        icon: 'email',
+      } as InputProperties;
+
+      component.inputProperties = testProperties;
+      component.disabled = false;
+      component.showObligatoryAsterisk = true;
+
+      component.ngOnInit();
+      component.addObligatoryAsterisk();
+
+      expect(component.inputProperties.label).toBe('Email Address');
+      expect(component.inputProperties.formControl.disabled).toBe(false);
+      expect(component.showAsterisk).toBe(true);
+      expect(component.isRequired()).toBe(true);
+    });
+
+    it('should work with password input configuration', () => {
+      const testProperties: InputProperties = {
+        formControl: new FormControl(''),
+        label: 'Password',
+        placeholder: 'Enter your password',
+        maxLength: 50,
+        isPasswordInput: true,
+      } as InputProperties;
+
+      component.inputProperties = testProperties;
+      component.showPassword = false;
+
+      component.showOrHidePassword();
+      expect(component.showPassword).toBe(true);
+
+      component.showOrHidePassword();
+      expect(component.showPassword).toBe(false);
+    });
+  });
+});