@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/index.ts

@@ -8,76 +8,121 @@
  */
 
 // Date Pickers
-export { DatePickerRangeComponent } from './date-picker-range/date-picker-range.component';
-export { DatePickerComponent } from './date-picker/date-picker.component';
+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';
+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';
+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";
+
+// Banners
+export { DropiBannerExternalComponent } from "./dropi-banner-external/dropi-banner-external.component";
+export { AlertValidationComponent } from "./alert-validation/alert-validation.component";
+export { BetaTagComponent } from "./beta-tag/beta-tag.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';
+export { AlertModalComponent } from "./alert-modal/alert-modal.component";
+export { AlertComponent } from "./alert/alert.component";
+export { ConfirmDialogComponent } from "./confirm-dialog/confirm-dialog.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';
+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";
+export { DropiPaginatorComponent } from "./dropi-paginator/dropi-paginator.component";
+export { DropiBreadcrumbComponent } from "./dropi-breadcrumb/dropi-breadcrumb.component";
+export { DropiLanguagesSelectorComponent } from "./dropi-languages-selector/dropi-languages-selector.component";
 
 // Selectors
-export { CitySelectorComponent } from './city-selector/city-selector.component';
-export { DropiSelectComponent } from './dropi-select/dropi-select.component';
+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';
+export { RadioSelectionListComponent } from "./radio-selection-list/radio-selection-list.component";
+export { CheckboxSelectionListComponent } from "./checkbox-selection-list/checkbox-selection-list.component";
+export { DropiCheckboxComponent } from "./dropi-checkbox/dropi-checkbox.component";
+export { DropiRadioButtonComponent } from "./dropi-radio-button/dropi-radio-button.component";
 
 // Loaders & Feedback
-export { LottieLoaderComponent } from './lottie-loader/lottie-loader.component';
-export { ToastComponent } from './toast/toast.component';
+export { LottieLoaderComponent } from "./lottie-loader/lottie-loader.component";
+export { ToastComponent } from "./toast/toast.component";
+export { FileUploadProgressBarComponent } from "./file-upload-progress-bar/file-upload-progress-bar.component";
+export { DropiIlustrationIconComponent } from "./dropi-ilustration-icon/dropi-ilustration-icon.component";
+export { SpinnerComponent } from "./spinner/spinner.component";
 
 // Accordion
-export { AccordionComponent } from './accordion/accordion.component';
-export { AccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
+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';
+export { ReadMoreComponent } from "./read-more/read-more.component";
+export { EmptyComponent } from "./empty/empty.component";
 
 // Icons & Images
-export { IconComponent } from './icon/icon.component';
-export { DropiImageOverlayComponent } from './dropi-image-overlay/dropi-image-overlay.component';
+export { IconComponent } from "./icon/icon.component";
+export { DropiImageOverlayComponent } from "./dropi-image-overlay/dropi-image-overlay.component";
+export { DropiLogoComponent } from "./dropi-logo/dropi-logo.component";
+export { DropiAvatarsComponent } from "./dropi-avatars/dropi-avatars.component";
+export { CountryFlagsComponent } from "./country-flags/country-flags.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';
+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";
+export { DropiTextAreaComponent } from "./dropi-text-area/dropi-text-area.component";
+export { DropiPhoneInputComponent } from "./dropi-phone-input/dropi-phone-input.component";
+export { InputToggleComponent } from "./toggle/input-toggle.component";
+
+// Multimedia
+export { DropiCarouselComponent } from "./dropi-carousel/dropi-carousel.component";
+export { DropiYoutubeLazyVideoComponent } from "./dropi-youtube-lazy-video/dropi-youtube-lazy-video.component";
 
 // Buttons
 export {
   ButtonComponent,
   ButtonComponent as DropiButtonComponent,
-} from './dropi-button/dropi-button.component';
+} from "./dropi-button/dropi-button.component";
 
 // Tables
-export { DropiTableComponent } from './dropi-table/dropi-table.component';
+export { DropiTableComponent } from "./dropi-table/dropi-table.component";
+
+// Elements
+export { DropiFavoriteButtonComponent } from "./dropi-favorite-button/dropi-favorite-button.component";
+export { DropiCardCheckboxComponent } from "./dropi-card-checkbox/dropi-card-checkbox.component";
+export { CardSectionComponent } from "./card-section/card-section.component";
+export { CardProductComponent } from "./card-product/card-product.component";
+export { ColorPickerComponent } from "./color-picker/color-picker.component";
+export { DropiBadgeComponent } from "./dropi-badge/dropi-badge.component";
+export { BadgeComponent } from "./badge/badge.component";
+export { DropiSkeletonComponent } from "./dropi-skeleton/dropi-skeleton.component";
+export { EmptyStateComponent } from "./empty-state/empty-state.component";
 
 // File Upload
-export { DropiFileUploadComponent } from './dropi-file-upload/dropi-file-upload.component';
-export { DropZoneComponent } from './dropi-file-upload/drop-zone/drop-zone.component';
+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';
+export { DropiCountrySelectorComponent } from "./dropi-country-selector/dropi-country-selector.component";
+
+// Containers
+export { DropiDrawerComponent } from "./dropi-drawer/dropi-drawer.component";
+export { SidebarComponent } from "./sidebar/sidebar.component";
+export { DropiNavBarComponent } from "./dropi-navbar/dropi-navbar.component";
+export { DropiDropdownComponent } from "./dropi-dropdown/dropi-dropdown.component";
 
 /**
  * Array con todos los componentes UI para importar en módulos

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

@@ -1,97 +1,113 @@
 <div
+  class="dropi-input-container"
   [ngClass]="{
-    'fixed-label-container': fixedLabel
+    'dropi-input--error':
+      inputProperties.formControl.invalid &&
+      inputProperties.formControl.touched,
+    'dropi-input--disabled': disabled || inputProperties.formControl.disabled,
+    'dropi-input--with-icon-right':
+      inputProperties.icon && inputProperties.iconPos === 'right',
+    'dropi-input--with-icon-left':
+      inputProperties.icon && inputProperties.iconPos === 'left',
   }"
 >
-  <div class="Body-S-Regular input-label" *ngIf="fixedLabel">
-    {{ inputProperties.label | translate }}
-    <span
-      *ngIf="isRequired() && showAsterisk && (!disabled || !inputProperties.formControl.disabled)"
-      >*</span
+  <div class="input-wrapper">
+    <div
+      class="icon-container left"
+      *ngIf="inputProperties.icon && inputProperties.iconPos === 'left'"
     >
-  </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>
+    </div>
 
+    <div class="input-field-wrapper">
       <input
-        #inputElement
-        class="form-control"
-        [id]="inputProperties.id ? inputProperties.id : inputProperties.label"
-        [attr.data-cy]="inputProperties.dataCy"
-        type="text"
+        [type]="showPassword ? 'text' : inputProperties.type || 'text'"
+        class="dropi-input Body-M-Regular"
         [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
+          'fixed-label-input': fixedLabel,
         }"
+        [id]="inputProperties.id ? inputProperties.id : inputProperties.label"
+        [attr.data-cy]="inputProperties.dataCy"
         [formControl]="inputProperties.formControl"
         [placeholder]="inputProperties.placeholder | translate"
+        [maxlength]="inputProperties.maxLength"
         [attr.inputmode]="inputProperties.inputMode || 'text'"
+        [disabled]="disabled || inputProperties.formControl.disabled"
         appThousandSeparator
-        [applyFormat]="!!(inputProperties?.isMoneyInput || inputProperties?.isThousandSeparator)"
-        [showCurrency]="!!inputProperties?.isMoneyInput"
+        [applyFormat]="
+          !!(
+            inputProperties?.isMoneyInput ||
+            inputProperties?.isThousandSeparator
+          )
+        "
         appOnlyNumbers
+        [showCurrency]="!!inputProperties?.isMoneyInput"
         [applyOnlyNumbers]="!!inputProperties?.isNumericInput"
         appOnlyLetters
         [applyOnlyLetters]="!!inputProperties?.isLettersOnly"
-        [maxlength]="inputProperties?.maxLength"
       />
-      <label class="Body-S-Regular label-bottom" *ngIf="!fixedLabel" [for]="inputProperties.label"
+
+      <label
+        class="Body-S-Regular label-bottom"
+        *ngIf="!fixedLabel"
+        [for]="inputProperties.label"
         >{{ inputProperties.label | translate }}
         <span
+          class="asterisk"
           *ngIf="
-            isRequired() && showAsterisk && (!disabled || !inputProperties.formControl.disabled)
+            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>
+      </label>
     </div>
+
+    <div
+      class="icon-container right"
+      *ngIf="inputProperties.icon && inputProperties.iconPos === 'right'"
+    >
+      <app-icon
+        [name]="inputProperties.icon"
+        width="20px"
+        height="20px"
+        color="Gray-Gray-500"
+      ></app-icon>
+    </div>
+
+    <div
+      class="icon-container right password-toggle"
+      *ngIf="inputProperties.type === 'password'"
+    >
+      <app-icon
+        [name]="showPassword ? 'Visibility-off' : 'Visibility'"
+        width="20px"
+        height="20px"
+        color="Gray-Gray-500"
+        (click)="showOrHidePassword()"
+      ></app-icon>
+    </div>
+  </div>
+
+  <div
+    class="helper-text-container"
+    *ngIf="
+      inputProperties.textHelper &&
+      (!inputProperties.showHelperOnlyOnError ||
+        (inputProperties.formControl.invalid &&
+          inputProperties.formControl.touched))
+    "
+  >
+    <span class="helper-text Label-S-Regular">{{
+      (getErrorMessage() | translate) ||
+        (inputProperties.textHelper | translate)
+    }}</span>
   </div>
 </div>

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

@@ -1,126 +1,80 @@
 import {
   Component,
   Input,
-  OnChanges,
   OnInit,
-  SimpleChanges,
-  SimpleChange,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { InputProperties } from "@app/utilities/interfaces/ui/input-interface";
-import { Validators, ReactiveFormsModule } from "@angular/forms";
-import { IconComponent } from "../icon/icon.component";
-import { ThousandSeparatorDirective } from "@app/utilities/directives/thousand-separator.directive";
+import { ReactiveFormsModule } from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
-import { OnlyNumbersDirective } from "@app/utilities/directives/only-numbers.directive";
-import { OnlyLettersDirective } from "@app/utilities/directives/only-letters.directive";
+import { InputProperties } from "../../utilities/interfaces/ui/input-interface";
+import { IconComponent } from "../icon/icon.component";
+import { Directive, Input as NgInput } from "@angular/core";
+
+@Directive({
+  selector: "[appThousandSeparator]",
+  standalone: true,
+})
+export class ThousandSeparatorDirectiveStub {
+  @NgInput() applyFormat: boolean = false;
+  @NgInput() showCurrency: boolean = false;
+}
+
+@Directive({
+  selector: "[appOnlyNumbers]",
+  standalone: true,
+})
+export class OnlyNumbersDirectiveStub {
+  @NgInput() applyOnlyNumbers: boolean = false;
+}
+
+@Directive({
+  selector: "[appOnlyLetters]",
+  standalone: true,
+})
+export class OnlyLettersDirectiveStub {
+  @NgInput() applyOnlyLetters: boolean = false;
+}
 
 @Component({
-  selector: "dropi-wc-input",
+  selector: "app-input",
   standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
     IconComponent,
-    ThousandSeparatorDirective,
     TranslateModule,
-    OnlyNumbersDirective,
-    OnlyLettersDirective,
+    ThousandSeparatorDirectiveStub,
+    OnlyNumbersDirectiveStub,
+    OnlyLettersDirectiveStub,
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: "./input.component.html",
   styleUrls: ["./input.component.scss"],
 })
-export class InputComponent implements OnInit, OnChanges {
-  /**
-   * Define las propiedades necesarias para un campo de entrada (`input`).
-   *
-   * Cada campo debe contener las siguientes propiedades:
-   * - `formControl`: Control de formulario asociado al campo.
-   * - `label`: Texto descriptivo que se mostrará como etiqueta.
-   * - `placeholder`: Texto de ejemplo dentro del campo.
-   * - `maxLength`: Número máximo de caracteres permitidos.
-   *
-   * Propiedades opcionales:
-   * - `textHelper`: Texto de ayuda que se mostrará debajo del campo.
-   * - `icon`: Nombre del icono a mostrar dentro del input.
-   * - `iconColor`: Color aplicado al icono del input.
-   * - `isMoneyInput`: Indica si debe aplicarse una directiva para separar valores.
-   * - `isPasswordInput: Indica si el input debe tener comportamiento de campo de contraseña`
-   * - `isNumericInput: Indica si el input solo acepta caracteres numericos`
-   * @type {InputProperties}
-   */
+export class InputComponent implements OnInit {
   @Input() public inputProperties: InputProperties;
-  /**
-   * Indica si se debe mostrar deshabilitiado el input.
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
   @Input() public disabled: boolean = false;
-  /**
-   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl
-   *
-   * Valor por defecto: `true`.
-   *
-   * @type {boolean}
-   */
-  @Input() public showObligatoryAsterisk: boolean = true;
-
-  /**
-   * Indica si se debe mostrar el label fijo en la parte superior del input
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
-  @Input() public fixedLabel: boolean = false;
-  /**
-   * Indica si se debe mostrar el asterisco de obligatorio basado en si es requerido el formControl y si showObligatoryAsterisk es true
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
-  public showAsterisk: boolean = false;
-  /**
-   * Indica si se debe ocultar los caracteres dentro del input
-   *
-   * Valor por defecto: `false`.
-   *
-   * @type {boolean}
-   */
-  public showPassword: boolean = false;
-
-  ngOnInit() {
-    this.validateDisabled();
-    this.addObligatoryAsterisk();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["disabled"]) {
-      const disabledChange = changes["disabled"];
-    }
-  }
+  @Input() public showObligatoryAsterisk: boolean = false;
+  @Input() public showPassword = false;
+  @Input() public fixedLabel = false;
+  @Input() public showAsterisk = true;
 
-  addObligatoryAsterisk() {
-    this.showAsterisk =
-      this.showObligatoryAsterisk &&
-      this.inputProperties.formControl.hasValidator(Validators.required);
-  }
+  ngOnInit() {}
 
-  isRequired() {
-    return this.inputProperties.formControl.hasValidator(Validators.required);
+  showOrHidePassword() {
+    this.showPassword = !this.showPassword;
   }
 
-  validateDisabled() {
-    if (this.disabled) {
-      this.inputProperties.formControl.disable();
-    }
+  isRequired(): boolean {
+    const control = this.inputProperties?.formControl;
+    if (!control || !control.validator) return false;
+    const validationResult = control.validator({} as any);
+    return !!validationResult?.["required"];
   }
 
-  showOrHidePassword() {
-    if (this.disabled || this.inputProperties.formControl.disabled) return;
-    this.showPassword = !this.showPassword;
+  getErrorMessage() {
+    return "";
   }
 }

package/src/components-source/lottie-loader/lottie-loader.component.ts

@@ -1,20 +1,17 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { NgIf } from '@angular/common';
+import { Component, Input, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-    selector: 'app-lottie-loader',
-    templateUrl: './lottie-loader.component.html',
-    styleUrls: ['./lottie-loader.component.scss'],
-    standalone: true,
-    imports: [NgIf]
+  selector: "app-lottie-loader",
+  standalone: true,
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./lottie-loader.component.html",
+  styleUrls: ["./lottie-loader.component.scss"],
 })
-export class LottieLoaderComponent implements OnInit {
-  @Input() visible: boolean = true;
-  @Input() loadingAnimation: string = '/assets/lottie-files/loading.json';
-  @Input() title: string = 'Cargando...';
-  @Input() message: string = 'Por favor, espere un momento';
-
-  constructor() {}
-
-  ngOnInit(): void {}
+export class LottieLoaderComponent {
+  @Input() loadingAnimation: string = "";
+  @Input() visible: boolean = false; // Añadido
+  @Input() title: string = ""; // Añadido
+  @Input() message: string = ""; // Añadido
 }