@dropi/ui-components 1.0.12 → 1.0.13

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

@@ -1,93 +1,92 @@
-<div class="phone-input-container d-flex col-12">
-  <!-- <div class="country-select">
-    <ng-select
-      data-cy="area-code-input"
-      inputId="area-code"
-      [(ngModel)]="ngModelCodArea"
-      style="caret-color: transparent; max-width: fit-content"
-      (change)="cambioCod()"
-      [ngModelOptions]="{ standalone: true }"
-      [clearable]="false"
-      bindLabel="country"
-      [searchable]="true"
-      [multiple]="false"
-      class="ng-selected selectcountry"
-      [ngClass]="{
-        'is-invalid-country': isValidPhone === false
-      }"
+<div class="dropi-input-phone" [ngClass]="{ disabled: disabled }">
+  <label
+    class="dropi-input-phone__label Label-S-SemiBold"
+    *ngIf="selectProperties?.label"
+  >
+    {{ selectProperties.label | translate }}
+    <span
+      *ngIf="selectProperties.showObligatory"
+      class="dropi-input-phone__obligatory"
+      >*</span
     >
-      <ng-option [value]="country.code" *ngFor="let country of countries">
-        <div class="d-flex flag-code">
+  </label>
+
+  <div class="dropi-input-phone__container-select">
+    <!-- Selector de país -->
+    <div
+      class="dropi-input-phone__select"
+      [ngClass]="{ 'is-expanded': isExpanded, disabled: disabled }"
+      (click)="showOptions()"
+    >
+      <div class="dropi-input-phone__selected">
+        <div class="dropi-input-phone__flag-container" *ngIf="selectedOption">
           <img
-            [src]="'https://flagsapi.com/' + country.flag + '/flat/24.png'"
-            [alt]="country.flag"
+            [src]="selectedOption.flag"
+            [alt]="selectedOption.name"
+            class="dropi-input-phone__flag"
           />
-          <p class="mb-0">{{ country.code }}</p>
-          <ng-template ng-header-tmp>
-            <div class="custom-arrow">
-              <i class="fa fa-chevron-down"></i>
-            </div>
-          </ng-template>
+          <span class="dropi-input-phone__code Body-M-Medium"
+            >+{{ selectedOption.code }}</span
+          >
         </div>
-      </ng-option>
-    </ng-select>
-  </div> -->
+        <div class="dropi-input-phone__placeholder" *ngIf="!selectedOption">
+          {{ selectProperties?.placeholder || "Seleccionar" | translate }}
+        </div>
+      </div>
 
-  <div class="custom-select">
-    <button
-      type="button"
-      class="select-button"
-      [disabled]="disabled || disabledInput"
-      [ngClass]="{
-        'select-completed': !!selectedOption,
-        'select-invalid': hasError
-      }"
-      (click)="showOptions()"
-    >
-      <span *ngIf="selectedOption" style="display: flex; gap: 0.5rem">
-        <img [src]="'https://flagsapi.com/' + selectedOption.flag + '/flat/24.png'" alt="flag" />
-        {{ selectedOption.code }}
-      </span>
       <app-icon
         [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
-        width="20px"
-        height="20px"
+        width="24px"
+        height="24px"
         color="Gray-Gray-500"
       ></app-icon>
-    </button>
-    <ul class="select-dropdown" [ngClass]="isExpanded ? 'expanded-select' : 'collapsed-select'">
-      <li *ngFor="let option of countries">
-        <button
-          type="button"
-          class="option"
-          (click)="cambioCod(option)"
-          [disabled]="option.disabled"
+
+      <!-- Lista de opciones desplegable -->
+      <div class="dropi-input-phone__options" *ngIf="isExpanded">
+        <div
+          *ngFor="let option of countries"
+          class="dropi-input-phone__option"
+          [ngClass]="{ selected: selectedOption?.code === option.code }"
+          (click)="cambioCod(option); $event.stopPropagation()"
         >
-          <img [src]="'https://flagsapi.com/' + option.flag + '/flat/24.png'" alt="option.flag" />
+          <img
+            [src]="option.flag"
+            [alt]="option.name"
+            class="dropi-input-phone__flag"
+          />
+          <span class="dropi-input-phone__option-name Body-M-Regular">{{
+            option.name
+          }}</span>
+          <span class="dropi-input-phone__option-code Body-M-Regular"
+            >(+{{ option.code }})</span
+          >
+        </div>
+      </div>
+    </div>
 
-          {{ option.code | translate }}
-        </button>
-      </li>
-    </ul>
+    <!-- Input de número de teléfono -->
+    <div class="dropi-input-phone__input-container">
+      <input
+        type="text"
+        class="dropi-input-phone__input Body-M-Regular"
+        [ngClass]="{
+          'is-invalid': isValidPhone === false || hasError,
+        }"
+        [(ngModel)]="ngModelPhone"
+        (input)="cambioPhone()"
+        (keyup)="cambioPhone($event)"
+        (change)="cambioPhone()"
+        [placeholder]="phoneNumberPlaceholder"
+        (paste)="handlePaste($event)"
+        [maxlength]="maxLengthPhone"
+        [disabled]="disabledInput"
+      />
+    </div>
   </div>
 
-  <input
-    data-cy="phone-input"
-    id="phone-input"
-    type="text"
-    class="form-control phone-input"
-    appNumericInput
-    [ngClass]="{
-      'is-invalid': isValidPhone === false || hasError
-    }"
-    [(ngModel)]="ngModelPhone"
-    (input)="cambioPhone()"
-    (keyup)="cambioPhone($event)"
-    (change)="cambioPhone()"
-    [placeholder]="phoneNumberPlaceholder"
-    (paste)="handlePaste($event)"
-    [maxlength]="maxLengthPhone"
-    data-cy="phone-input"
-    [disabled]="disabledInput"
-  />
+  <span
+    class="dropi-input-phone__helper Label-S-Regular"
+    *ngIf="selectProperties?.textHelper"
+    >{{ selectProperties.textHelper | translate }}</span
+  >
 </div>

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

@@ -7,18 +7,12 @@ import {
   EventEmitter,
   ElementRef,
   HostListener,
-} from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { UserService } from 'src/app/pages/service/auth/user.service';
-import { Api } from 'src/app/services/api.service';
-import { SettingsService } from 'src/app/services/setting.service';
-import { COUNTRIES } from 'src/app/constants/constants';
-import { TranslateModule } from '@ngx-translate/core';
-import { NumericInputDirective } from './numeric-input.directive';
-import { NgClass, NgFor, CommonModule } from '@angular/common';
-import { FormsModule, FormControl } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { IconComponent } from '../icon/icon.component';
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, FormControl } from "@angular/forms";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 
 interface Country {
   code: string;
@@ -36,28 +30,18 @@ interface SelectProperties {
 }
 
 @Component({
-  selector: 'app-dropi-phone-input',
-  templateUrl: './dropi-phone-input.component.html',
-  styleUrls: ['./dropi-phone-input.component.scss'],
+  selector: "app-dropi-phone-input",
+  templateUrl: "./dropi-phone-input.component.html",
+  styleUrls: ["./dropi-phone-input.component.scss"],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [
-    CommonModule,
-    NgSelectModule,
-    FormsModule,
-    NgClass,
-    NgFor,
-    NumericInputDirective,
-    TranslateModule,
-    IconComponent,
-  ],
+  imports: [CommonModule, FormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class DropiPhoneInputComponent implements OnInit {
   private _CodArea!: string;
   @Input() set CodArea(value: any) {
     this._CodArea = value;
-
-    // Si ya tienes la lista de países cargada:
     if (this.countries && Array.isArray(this.countries)) {
       const match = this.countries.find((c) => c.code === value);
       if (match) {
@@ -69,21 +53,13 @@ export class DropiPhoneInputComponent implements OnInit {
     return this._CodArea;
   }
 
-  @Input() ngModelPhone = '';
+  @Input() ngModelPhone = "";
   @Input() phoneNumberPlaceholder: string = null;
   @Input() isValidPhone = undefined;
   @Input() public selectedOption: Country;
   @Input() public selectProperties: SelectProperties;
-
-  /**
-   * Establece si el campo del teléfono debe ser verificado al inicializar el componente.
-   * @default true
-   */
   @Input() validateOnInit = true;
   @Input() disabledInput = false;
-  /**
-   * FormControl opcional para validación y mostrar errores
-   */
   @Input() public formControl: FormControl;
 
   @Output() ngModelChangeCod = new EventEmitter();
@@ -92,21 +68,18 @@ export class DropiPhoneInputComponent implements OnInit {
   @Output() onChangeSelect: EventEmitter<Country> = new EventEmitter();
 
   maxLengthPhone = 10;
-  countries: Country[] = COUNTRIES;
+  countries: Country[] = [];
   disabled: any;
-  isExpanded: boolean;
+  isExpanded: boolean = false;
 
   constructor(
     private elementRef: ElementRef,
-    public userService: UserService,
-    public settingsService: SettingsService,
-    public apiService: Api,
+    @Inject("UserService") public userService: any,
+    @Inject("SettingsService") public settingsService: any,
+    @Inject("ApiService") public apiService: any,
     private readonly translateService: TranslateService,
   ) {}
 
-  /**
-   * Verifica si el formControl tiene errores y está dirty/touched
-   */
   get hasError(): boolean {
     return (
       this.formControl &&
@@ -117,23 +90,21 @@ export class DropiPhoneInputComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.validateOnInit) this.validtaeLengthPhone();
-
     if (!this.phoneNumberPlaceholder)
-      this.phoneNumberPlaceholder = this.translateService.instant('Enter phone number');
+      this.phoneNumberPlaceholder =
+        this.translateService.instant("Enter phone number");
   }
 
   cambioCod(option): void {
     this.isExpanded = false;
     this.selectedOption = option;
-    this.ngModelPhone = '';
+    this.ngModelPhone = "";
     this.ngModelChangeCod.emit(option.code);
     this.validtaeLengthPhone();
   }
 
   cambioPhone(event?: KeyboardEvent): void {
-    if (this.ngModelPhone?.length === 0 && event?.key === 'Backspace') return;
-    if (this.ngModelPhone === '' && event) this.ngModelPhone = event?.key;
-
+    if (this.ngModelPhone?.length === 0 && event?.key === "Backspace") return;
     this.ngModelChangePhone.emit(this.ngModelPhone);
     this.validtaeLengthPhone();
   }
@@ -142,25 +113,12 @@ export class DropiPhoneInputComponent implements OnInit {
     const country = this.countries.find((c) => c.code === this.CodArea);
     if (country) {
       this.maxLengthPhone = country.maxLength;
-
-      // Nueva logica para Ecuador: acepta tanto 9 como 10 dígitos
-      if (this.CodArea === '593') {
-        const phoneLength = this.ngModelPhone?.length || 0;
-        if (phoneLength === 9 || phoneLength === 10) {
-          this.isValidPhone = true;
-          this.verifiedField.emit(true);
-        } else {
-          this.isValidPhone = false;
-          this.verifiedField.emit(false);
-        }
+      if (this.ngModelPhone?.length === this.maxLengthPhone) {
+        this.isValidPhone = true;
+        this.verifiedField.emit(true);
       } else {
-        if (this.ngModelPhone?.length === this.maxLengthPhone) {
-          this.isValidPhone = true;
-          this.verifiedField.emit(true);
-        } else {
-          this.isValidPhone = false;
-          this.verifiedField.emit(false);
-        }
+        this.isValidPhone = false;
+        this.verifiedField.emit(false);
       }
     } else {
       this.isValidPhone = false;
@@ -169,13 +127,13 @@ export class DropiPhoneInputComponent implements OnInit {
 
   handlePaste(event: ClipboardEvent): void {
     event.preventDefault();
-    const pastedText = event.clipboardData?.getData('text') || '';
-    const sanitizedText = pastedText.replace(/\D+/g, '');
+    const pastedText = event.clipboardData?.getData("text") || "";
+    const sanitizedText = pastedText.replace(/\D+/g, "");
     this.ngModelPhone = sanitizedText;
     this.cambioPhone();
   }
 
-  @HostListener('document:click', ['$event'])
+  @HostListener("document:click", ["$event"])
   closeDropdown(event?: MouseEvent): void {
     if (event && !this.elementRef.nativeElement.contains(event.target)) {
       this.isExpanded = false;
@@ -186,18 +144,4 @@ export class DropiPhoneInputComponent implements OnInit {
     if (this.disabled) return;
     this.isExpanded = !this.isExpanded;
   }
-
-  setPropertyById(code: string) {
-    this.selectedOption = this.selectProperties.options.find(
-      (propertie) => propertie.code === code,
-    );
-    this.onChangeSelect.emit(this.selectedOption);
-  }
-
-  setPropertyByLabel(name: string) {
-    this.selectedOption = this.selectProperties.options.find(
-      (propertie) => propertie.name === name,
-    );
-    this.onChangeSelect.emit(this.selectedOption);
-  }
 }