@dropi/ui-components 1.0.12 → 1.0.13

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

@@ -1,250 +1,87 @@
-import { CommonModule } from "@angular/common";
 import {
-  ChangeDetectorRef,
   Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
   Input,
-  OnChanges,
-  OnInit,
   Output,
-  SimpleChanges,
-  ViewChild,
+  EventEmitter,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
 } from "@angular/core";
-import { IconComponent } from "../icon/icon.component";
-import { FormsModule } from "@angular/forms";
-import { trigger, transition, style, animate } from "@angular/animations";
-import { DropiCheckboxComponent } from "../dropi-checkbox/dropi-checkbox.component";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule, FormControl } from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
-import { ButtonComponent } from "../dropi-button/dropi-button.component";
 
 @Component({
-  selector: "dropi-wc-search",
+  selector: "app-dropi-search",
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   templateUrl: "./dropi-search.component.html",
   styleUrls: ["./dropi-search.component.scss"],
-  standalone: true,
-  imports: [
-    CommonModule,
-    IconComponent,
-    FormsModule,
-    DropiCheckboxComponent,
-    TranslateModule,
-    ButtonComponent,
-  ],
-  animations: [
-    trigger("fade", [
-      transition(":enter", [
-        style({ opacity: 0 }),
-        animate("150ms ease-out", style({ opacity: 1 })),
-      ]),
-      transition(":leave", [animate("150ms ease-in", style({ opacity: 0 }))]),
-    ]),
-    trigger("slideToggle", [
-      transition(":enter", [
-        style({ height: "0", opacity: 0 }),
-        animate("150ms ease-out", style({ height: "*", opacity: 1 })),
-      ]),
-      transition(":leave", [
-        animate("150ms ease-in", style({ height: "0", opacity: 0 })),
-      ]),
-    ]),
-    trigger("slideToggleReverse", [
-      transition(":enter", [
-        style({ transform: "translateY(100%)", opacity: 0 }),
-        animate(
-          "150ms ease-out",
-          style({ transform: "translateY(0)", opacity: 1 }),
-        ),
-      ]),
-      transition(":leave", [
-        animate(
-          "150ms ease-in",
-          style({ transform: "translateY(100%)", opacity: 0 }),
-        ),
-      ]),
-    ]),
-  ],
 })
-export class DropiSearchComponent implements OnInit, OnChanges {
-  @Input() type: "default" | "dropdown" | "dropdown-button" | "default-light" =
-    "default";
-  @Input() placeholder: string = "";
-  @Input() textInput: string = "";
-  @Input() typeInput: "text" | "number" = "text";
-  @Input() maxLength: number = null;
-  @Input() showIcon: boolean = true;
-  @Input() dataToSearch: {}[] = [];
-  @Input() dataName: string = "name";
-  @Input() position: "down" | "top" = "down";
-  @Input() heightOverlay: number = 230;
-  @Input() model: {}[] = [];
-  @Input() label: string = "";
-  @Output() modelChange = new EventEmitter<any>();
-  @Output() onBlur = new EventEmitter<any>();
-  @Output() onInput = new EventEmitter();
-  @Output() onKeyEnter = new EventEmitter();
-  @Output() onChange = new EventEmitter();
-  @Output() onClear = new EventEmitter();
-  @ViewChild("containerRef") containerRef!: ElementRef;
-  @ViewChild("overlay") overlay!: ElementRef;
-  isFocus = false;
-  isClickedDropButton = false;
-  isVisibleContent = false;
-  overlaySelected = "content-no-found";
-  colorSearch = "var(--Gray-Gray-500)";
-  dataModel = [];
-  dataToSearchCache = [];
-  initialOverlaySize = 0;
-  backgroundInput = "";
-  textDropButton = "";
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this.selectInitialDropButton();
-    this.backgroundInput =
-      this.type !== "default-light" ? "var(--Gray-Gray-50)" : "--Neutral-White";
-    this.checkListModel(this.model);
-    this.initialOverlaySize = this.heightOverlay;
-    this.dataToSearchCache = this.dataToSearch;
-    this.selectStyle();
-    this.cdr.detectChanges();
+export class DropiSearchComponent implements OnInit {
+  @Input() public type: string = "default";
+  @Input() public typeInput: string = "text";
+  @Input() public placeholder: string = "Search";
+  @Input() public textDropButton: string = "Search";
+  @Input() public textInput: string = "";
+  @Input() public showIcon: boolean = true;
+  @Input() public label: string = "";
+  @Input() public colorSearch: string = "inherit";
+  @Input() public overlaySelected: string = "";
+  @Input() public backgroundInput: string = "transparent";
+  @Input() public maxLength: number = 200;
+
+  @Output() public textInputChange = new EventEmitter<string>();
+  @Output() public onClick = new EventEmitter<any>();
+  @Output() public onSearch = new EventEmitter<string>();
+  @Output() public onInput = new EventEmitter<any>();
+  @Output() public onKeyEnter = new EventEmitter<any>();
+  @Output() public onClear = new EventEmitter<any>();
+
+  public searchControl = new FormControl("");
+  public isVisibleContent: boolean = false;
+  public isClickedDropButton: boolean = false;
+  public isFocus: boolean = false;
+  public dataToSearchCache: any[] = [];
+  public dataName: string = "name";
+
+  ngOnInit(): void {}
+
+  public onFocus(): void {
+    this.isFocus = true;
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes["dataToSearch"] && changes["dataToSearch"].currentValue) {
-      this.dataToSearchCache = [...changes["dataToSearch"].currentValue];
-      this.selectStyle(); // <-- para que el overlay se actualice también
-    }
-
-    if (changes["model"] && changes["model"].currentValue) {
-      setTimeout(() => {
-        this.checkListModel(this.model);
-      });
-    }
+  public onBlur(): void {
+    this.isFocus = false;
   }
 
-  @HostListener("document:click", ["$event"])
-  handleClickOutside(event: MouseEvent): void {
-    setTimeout(() => {
-      if (
-        this.containerRef &&
-        !this.containerRef.nativeElement.contains(event.target)
-      ) {
-        this.isVisibleContent = false;
-        this.isFocus = false;
-        this.isClickedDropButton = false;
-
-        this.onBlur.emit();
-      }
-    });
-  }
-  changeText(e) {
-    this.colorSearch =
-      e.target.value.length > 0
-        ? "var(--Gray-Gray-600)"
-        : "var(--Gray-Gray-500)";
-    if (this.type !== "dropdown-button") {
-      this.searchText(e.target.value);
-    }
-    this.onInput.emit(e.target.value);
+  public changeText(event: any): void {
+    const val = event.target.value;
+    this.textInput = val;
+    this.textInputChange.emit(val);
+    this.onInput.emit(event);
   }
 
-  onEnter(e): void {
-    console.log("jkdjfkjdfjdfk");
-    console.log("e.target.value", e.target.value);
-
-    this.onKeyEnter.emit(e.target.value);
-  }
+  public onChangHandler(event: any): void {}
 
-  onChangHandler(e) {
-    this.onChange.emit(e.target.value);
+  public onEnter(event: any): void {
+    this.onKeyEnter.emit(event);
   }
 
-  clearText() {
+  public clearText(): void {
     this.textInput = "";
-    this.dataToSearchCache = this.dataToSearch;
-    this.onClear.emit();
+    this.textInputChange.emit("");
+    this.onClear.emit(null);
   }
 
-  onFocus() {
-    this.isFocus = true;
-    if (this.isFocus) {
-      // Espera a que se haga la animación (300ms) y luego muestra contenido
-      setTimeout(() => {
-        this.isVisibleContent = true;
-      }, 300);
-    } else {
-      this.isVisibleContent = false;
-    }
-  }
-
-  selectStyle() {
-    this.overlaySelected =
-      this.dataToSearch?.length > 0 ? "content-found" : "content-no-found";
-  }
-
-  getOverlayStyles() {
-    if (this.position == "top") {
-      return {
-        "max-height": this.heightOverlay + "px",
-        position: "absolute",
-        bottom: "calc(12px + 100%)" /* Se posiciona justo encima del input */,
-        left: 0,
-        width: "100%",
-      };
-    } else {
-      return {
-        "max-height": this.heightOverlay + "px",
-        position: "absolute",
-        top: "calc(12px + 100%)" /* Se posiciona justo encima del input */,
-        left: 0,
-        width: "100%",
-      };
-    }
-  }
-  checkListModel(data: any[]) {
-    this.dataToSearchCache = this.dataToSearchCache.map((cache) => {
-      const isSelected = this.model.some((mod: any) => mod.id === cache.id);
-      return { ...cache, isChecked: isSelected };
-    });
+  public handleClickDropButton(event: any): void {
+    this.isClickedDropButton = !this.isClickedDropButton;
+    this.onClick.emit(event);
   }
 
-  checkingList(e, data) {
-    data.isChecked = e;
-
-    const existsData = this.model.some(
-      (datModel: any) => datModel.id === data.id,
-    );
-
-    if (e === true && !existsData) {
-      this.model = [...this.model, data]; // crea una nueva referencia
-    } else if (e === false && existsData) {
-      this.model = this.model.filter(
-        (datModel: any) => datModel.id !== data.id,
-      ); //también crea nueva referencia
-    }
-
-    this.modelChange.emit(this.model);
-
-    this.checkListModel(this.model); // <--- esto asegura el reflejo visual
-  }
-  searchText(text) {
-    this.dataToSearchCache = this.dataToSearch.filter((data: any) => {
-      return data[this.dataName].toLowerCase().includes(text.toLowerCase());
-    });
-
-    this.checkListModel(this.model);
-  }
-
-  handleClickDropButton(event) {
-    this.isClickedDropButton = true;
-  }
+  public checkingList(event: any, data: any): void {}
 
-  selectInitialDropButton() {
-    if (this.type == "dropdown-button" && this.dataToSearchCache.length > 0) {
-      this.textDropButton = this.dataToSearchCache[0][this.dataName];
-    }
+  public getOverlayStyles(): any {
+    return {};
   }
 }

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

@@ -1,158 +1,109 @@
-<div class="custom-select">
-  <label
-    *ngIf="!selectProperties?.dropdownType"
-    [ngClass]="{ 'disabled-label': disabled, 'Body-S-Regular': isGrouped }"
-    >{{ selectProperties.label | translate }}
-    <span *ngIf="selectProperties.showObligatory && !disabled">*</span></label
+<div class="dropi-select-container">
+  <label *ngIf="label" class="select-label">{{ label | translate }}</label>
+
+  <div
+    class="select-trigger"
+    [ngClass]="{ 'is-open': isOpen, 'has-error': selectProperties?.hasError }"
+    (click)="toggleDropdown()"
   >
-  <div class="dropdown-container">
-    <!-- Label a la izquierda solo si hay dropdownType == true-->
-    <div *ngIf="selectProperties?.dropdownType" class="left-label Body-M-Regular">
-      {{ selectProperties.label | translate }}
-    </div>
-    <button
-      *ngIf="!multiSelect"
-      #buttonSelect
-      type="button"
-      class="select-button"
-      [disabled]="disabled"
-      [ngClass]="{
-        'select-completed': !!selectedOption,
-        'select-button-error':
-          selectProperties?.hasError ||
-          (selectProperties?.formControl?.invalid &&
-            (selectProperties?.formControl?.touched || selectProperties?.formControl?.dirty)),
-        'no-border': selectProperties?.dropdownType,
-        'Label-L': selectProperties?.dropdownType,
-        'with-flag': showCountryFlags && getSelectedCountryCode()
-      }"
-      (click)="showOptions()"
-    >
-      <div class="button-content">
-        <app-country-flags
-          *ngIf="showCountryFlags && getSelectedCountryCode()"
-          [country]="getSelectedCountryCode()"
-          [style]="'rectangle'"
-        ></app-country-flags>
-        <div class="elipsis">
+    <div class="selected-value">
+      <ng-container *ngIf="selectedOption; else placeholderTpl">
+        <app-icon
+          *ngIf="showCountryFlags && selectedOption.countryCode"
+          [name]="selectedOption.countryCode"
+        ></app-icon>
+        <span>{{
+          selectedOption.label || selectedOption.name | translate
+        }}</span>
+      </ng-container>
+      <ng-template #placeholderTpl>
+        <span class="placeholder">
           {{
-            (selectedOption
-              ? showCountryFlags && selectedOption.shortLabel
-                ? selectedOption.shortLabel
-                : selectedOption.label
-              : selectProperties.placeholder
-            ) | translate
+            (labelDrop ? labelDrop : selectProperties?.placeholder) | translate
           }}
-        </div>
-      </div>
-      <app-icon
-        [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
-        width="20px"
-        height="20px"
-        color="Gray-Gray-400"
-      ></app-icon>
-    </button>
+        </span>
+      </ng-template>
+    </div>
 
-    <button
-      *ngIf="multiSelect"
-      #buttonSelect
-      type="button"
-      class="select-button"
-      [disabled]="disabled"
-      [ngClass]="{
-        'select-completed': !!selectedOption
-      }"
-      (click)="showOptions()"
-    >
-      <div class="elipsis">
-        {{ (labelDrop ? labelDrop : selectProperties.placeholder) | translate }}
-      </div>
+    <div class="icons">
       <app-icon
         [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
         [width]="selectProperties?.dropdownType ? '24px' : '20px'"
         [height]="selectProperties?.dropdownType ? '24px' : '20px'"
-        [color]="
-          disabled
-            ? 'Gray-Gray-300'
-            : selectProperties?.dropdownType
-              ? 'Gray-Gray-600'
-              : 'Gray-Gray-500'
-        "
       ></app-icon>
-    </button>
+    </div>
   </div>
 
-  <div *ngIf="selectProperties.textHelper" class="select-helper">
+  <div *ngIf="selectProperties?.textHelper" class="select-helper">
     <span>{{ selectProperties.textHelper | translate }}</span>
   </div>
 
-  <div *ngIf="selectProperties.hasError" class="select-helper-error">
-    <app-icon name="Warning-circle" width="12px" height="12px" color="Error-Error-500"></app-icon>
+  <div *ngIf="selectProperties?.hasError" class="select-helper-error">
     <span>{{ selectProperties.errorText | translate }}</span>
   </div>
-</div>
-
-<!-- Template para el dropdown que se renderizará en el overlay -->
-<ng-template #dropdownTemplate>
-  <ul @selectAnimation class="select-dropdown-overlay" (scroll)="onScroll($event)">
-    <ng-container *ngIf="searchEnabled">
-      <li class="sticky-search">
-        <app-dropi-search
-          [placeholder]="selectProperties.placeHolderSearch || 'Buscar'"
-          [(textInput)]="searchTerm"
-          (onInput)="filterOptions($event)"
-          (onKeyEnter)="onKeyPress($event)"
-          (onClear)="onClearHanddle()"
-        ></app-dropi-search>
-      </li>
-    </ng-container>
 
-    <ng-container *ngIf="multiSelect">
-      <li>
-        <app-dropi-dropdown
-          [options]="multiSelecOptions"
-          [parameters]="parametersDrop"
-          [isInSelect]="true"
-          [valueModel]="'label'"
-          (modelChange)="getValueDrop($event)"
-        ></app-dropi-dropdown>
-      </li>
-    </ng-container>
-
-    <ng-container *ngIf="isGrouped">
-      <ng-container *ngFor="let group of filteredOptions">
-        <li class="option-group-title Body-M-Medium">{{ group.category | translate }}</li>
+  <div
+    class="select-dropdown-overlay"
+    *ngIf="isOpen"
+    (scroll)="onScroll($event)"
+  >
+    <div class="search-container" *ngIf="searchEnabled">
+      <app-dropi-search
+        [placeholder]="selectProperties?.placeHolderSearch || 'Buscar'"
+        [(ngModel)]="searchTerm"
+        (onInput)="filterOptions($event)"
+        (onKeyEnter)="onKeyPress($event)"
+        (onClear)="onClearHanddle()"
+      ></app-dropi-search>
+    </div>
 
-        <li *ngFor="let option of group.options">
-          <button
-            class="option option-group Body-M-Regular"
-            (click)="selectOption(option)"
-            [disabled]="option.disabled"
-          >
-            {{ option.label | translate }}
-          </button>
+    <ul class="options-list">
+      <ng-container *ngIf="isGrouped">
+        <li *ngFor="let group of filteredOptions" class="option-group">
+          <span class="group-label">{{ group.label | translate }}</span>
+          <ul>
+            <li
+              *ngFor="let option of group.items"
+              (click)="selectOption(option)"
+              class="option-item"
+            >
+              {{ option.label | translate }}
+            </li>
+          </ul>
         </li>
       </ng-container>
-    </ng-container>
 
-    <ng-container *ngIf="!isGrouped && !multiSelect">
-      <li *ngFor="let option of filteredOptions">
-        <button
-          class="option"
-          [ngClass]="{ 'option-with-flag': showCountryFlags && option.countryCode }"
+      <ng-container *ngIf="!isGrouped && !multiSelect">
+        <li
+          *ngFor="let option of filteredOptions"
+          class="option-item"
+          [ngClass]="{
+            'option-with-flag': showCountryFlags && option.countryCode,
+          }"
           (click)="selectOption(option)"
-          [disabled]="option.disabled"
         >
           <app-country-flags
             *ngIf="showCountryFlags && option.countryCode"
             [country]="option.countryCode"
-            [style]="'rectangle'"
           ></app-country-flags>
-          <span>{{
-            (showCountryFlags && option.shortLabel ? option.shortLabel : option.label) | translate
-          }}</span>
-        </button>
-      </li>
-    </ng-container>
-  </ul>
-</ng-template>
+          <span>
+            {{
+              (showCountryFlags && option.shortLabel
+                ? option.shortLabel
+                : option.label || option.name
+              ) | translate
+            }}
+          </span>
+        </li>
+      </ng-container>
+
+      <ng-container *ngIf="multiSelect">
+        <app-dropi-dropdown
+          [options]="multiSelecOptions"
+          [parameters]="parametersDrop"
+          (modelChange)="getValueDrop($event)"
+        ></app-dropi-dropdown>
+      </ng-container>
+    </ul>
+  </div>
+</div>