@dropi/ui-components 1.0.12 → 1.0.13

package/src/components-source/card-section/card-section.component.html

@@ -5,18 +5,18 @@
     <div class="description-card-section Body-M-Regular">{{ description }}</div>
   </div>
   <div class="element-end">
-    <app-switch
+    <app-switch-stub
       [isChecked]="isChecked"
       *ngIf="typeElement === 'switch'"
       (onChange)="changeValue($event)"
-    ></app-switch>
-    <app-icon
+    ></app-switch-stub>
+    <app-icon-stub
       (click)="clickIcon()"
       *ngIf="typeElement === 'dropdown'"
       name="Dropdown-Right"
-      width="32px"
-      height="32px"
-      color="Gray-Gray-500"
-    ></app-icon>
+      [width]="'32px'"
+      [height]="'32px'"
+      [color]="'Gray-Gray-500'"
+    ></app-icon-stub>
   </div>
 </div>

package/src/components-source/card-section/card-section.component.ts

@@ -1,31 +1,57 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DropiSwitchComponent } from '@app/ui/dropi-switch/dropi-switch.component';
-import { IconComponent } from '@app/ui/icon/icon.component';
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'app-card-section',
-  templateUrl: './card-section.component.html',
-  styleUrls: ['./card-section.component.scss'],
+  selector: "app-switch-stub",
   standalone: true,
-  imports: [DropiSwitchComponent, CommonModule, IconComponent],
+  template:
+    '<input type="checkbox" [checked]="isChecked" (change)="onToggle($event)">',
+  imports: [CommonModule],
+})
+export class SwitchStubComponent {
+  @Input() isChecked: boolean = false;
+  @Output() onChange = new EventEmitter<boolean>();
+
+  onToggle(event: any) {
+    this.onChange.emit(event.target.checked);
+  }
+}
+
+@Component({
+  selector: "app-icon-stub",
+  standalone: true,
+  template: "<i></i>",
+})
+export class IconStubComponent {
+  @Input() name: string = "";
+  @Input() width: string = "";
+  @Input() height: string = "";
+  @Input() color: string = "";
+}
+
+@Component({
+  selector: "app-card-section",
+  templateUrl: "./card-section.component.html",
+  styleUrls: ["./card-section.component.scss"],
+  standalone: true,
+  imports: [CommonModule, SwitchStubComponent, IconStubComponent],
 })
 export class CardSectionComponent implements OnInit {
-  @Input() title: string = 'title';
-  @Input() description: string = 'Description';
-  @Input() typeElement: 'dropdown' | 'switch' = 'dropdown';
+  @Input() title: string = "title";
+  @Input() description: string = "Description";
+  @Input() typeElement: "dropdown" | "switch" = "dropdown";
   @Output() onChange = new EventEmitter<boolean>();
   @Output() onClick = new EventEmitter();
-  @Input() type: 'medium' | 'important' = 'important';
+  @Input() type: "medium" | "important" = "important";
   @Input() isChecked: boolean = false;
 
   ngOnInit() {
-    if (!this.type || this.type.trim() === '') {
-      this.type = 'important';
+    if (!this.type || this.type.trim() === "") {
+      this.type = "important";
     }
   }
 
-  changeValue(event) {
+  changeValue(event: any) {
     this.onChange.emit(event);
   }
 

package/src/components-source/checkbox-selection-list/checkbox-selection-list.component.ts

@@ -1,219 +1,82 @@
 import {
-  ChangeDetectorRef,
   Component,
   EventEmitter,
-  forwardRef,
   Input,
-  OnChanges,
   OnInit,
   Output,
   SimpleChanges,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-  FormControl,
-  FormsModule,
-  ReactiveFormsModule,
-} from '@angular/forms';
-
-import { debounceTime } from 'rxjs/operators';
-import { Option } from '@app/utilities/interfaces/ui/checkbox-selection-list-interface';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
-import { Subscription } from 'rxjs';
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { Subscription } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { Option } from "../../utilities/interfaces/ui/selection-list-interface";
 
-/**
- * Componente que renderiza un listado de opciones con checkboxes.
- * Permite buscar dentro del listado de opciones.
- * Emite eventos cuando se selecciona o deselecciona una opción.
- *
- * @example
- * <app-checkbox-selection-list
- *   [showFilter]="true"
- *   [options]="[
- *     { label: 'Opción 1', value: 'opcion-1' },
- *     { label: 'Opción 2', value: 'opcion-2' },
- *     { label: 'Opción 3', value: 'opcion-3' }
- *   ]"
- *   (ngModel)="selectedOptions"
- * ></app-checkbox-selection-list>
- *
- * @example
- * <app-checkbox-selection-list
- *   [showFilter]="true"
- *   [options]="[
- *     { label: 'Opción 1', value: 'opcion-1' },
- *     { label: 'Opción 2', value: 'opcion-2' },
- *     { label: 'Opción 3', value: 'opcion-3' }
- *   ]"
- *   [formControlName]="selectedOptions"
- * ></app-checkbox-selection-list>
- * */
 @Component({
-  selector: 'app-checkbox-selection-list',
-  templateUrl: './checkbox-selection-list.component.html',
-  styleUrls: ['./checkbox-selection-list.component.scss'],
+  selector: "app-checkbox-selection-list",
   standalone: true,
-  imports: [
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    DropiCheckboxComponent,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CheckboxSelectionListComponent),
-      multi: true,
-    },
-  ],
+  imports: [CommonModule, TranslateModule, ReactiveFormsModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./checkbox-selection-list.component.html",
+  styleUrls: ["./checkbox-selection-list.component.scss"],
 })
-export class CheckboxSelectionListComponent implements ControlValueAccessor, OnInit, OnChanges {
-  /**
-   * Listado de opciones disponibles para seleccionar
-   */
+export class CheckboxSelectionListComponent implements OnInit {
   @Input() options: Option[] = [];
-
-  /**
-   * Permite mostrar u ocultar el campo de búsqueda
-   * @default true
-   */
-  @Input() showFilter: boolean = true;
-
-  /**
-   * Placeholder para el campo de búsqueda
-   */
-  @Input() filterPlaceholder: string = 'Search';
-
-  /**
-   * Tiempo de demora en milisegundos para realizar la búsqueda
-   */
+  @Input() showFilter: boolean = false;
+  @Input() filterPlaceholder: string = "Search";
+  @Input() showNotFound: boolean = false;
+  @Input() notFoundMessage: string = "No results found";
   @Input() searchDelay: number = 100;
+  @Output() valueChange: EventEmitter<any[]> = new EventEmitter<any[]>();
 
-  /**
-   * Permite mostrar u ocultar el mensaje de "No se encontraron resultados"
-   * @default true
-   */
-  @Input() showNotFound: boolean = true;
-
-  /**
-   * Mensaje personalizado para mostrar cuando no se encuentran resultados
-   * @default "No se encontraron resultados"
-   */
-  @Input() notFoundMessage: string = 'No related results found';
-
-  /**
-   * Permite seleccionar multiples opciones
-   * @default true
-   */
-  @Input() multiSelect: boolean = true;
-
-  /**
-   * Evento que se dispara al realizar una búsqueda (Se emite cuando se cambia el valor del input de búsqueda basado en @SearchDelay)
-   */
-  @Output() onSearch = new EventEmitter<string>();
-
-  /**
-   * Evento que se dispara al cambiar el estado de los checkbox
-   */
-  @Output() checkedValues = new EventEmitter<Option[]>();
-
-  searchControl = new FormControl('');
-  selectedValues: Option[] = [];
-  filteredOptions: Option[] = [];
-
-  private onChange: (value: Option[]) => void = () => {};
-  private onTouched: () => void = () => {};
   private readonly subscriptions: Subscription = new Subscription();
+  searchControl = new FormControl("");
+  filteredOptions: Option[] = [];
 
   constructor(
-    private readonly changeDetector: ChangeDetectorRef,
-    private readonly translate: TranslateService,
+    @Inject(TranslateService)
+    private readonly translateService: TranslateService,
   ) {}
 
   ngOnInit() {
     this.subscriptions.add(
-      this.searchControl.valueChanges.pipe(debounceTime(this.searchDelay)).subscribe((value) => {
-        this.filterOption(value);
-        this.onSearch.emit(value);
-      }),
+      this.searchControl.valueChanges
+        .pipe(debounceTime(this.searchDelay))
+        .subscribe((value) => {
+          this.filterOption(value);
+        }),
     );
 
     this.filteredOptions = this.options;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['options']) this.syncCheckedValues();
-  }
-
-  clearSearchInput() {
-    this.searchControl.setValue('');
-    this.onSearch.emit('');
+    if (changes["options"]) this.filteredOptions = this.options;
   }
 
-  toggleSelection(checked: boolean, option: Option) {
-    if (this.multiSelect) {
-      option.checked = checked;
-      this.selectedValues = this.options.filter((o) => o.checked);
-      this.checkedValues.emit(this.selectedValues);
-      this.onChange(this.selectedValues);
-      this.onTouched();
-    } else {
-      // Desmarcar todas
-      this.options.forEach((o) => (o.checked = false));
-      // Marcar solo el actual si se está marcando
-      option.checked = checked;
-      this.selectedValues = this.options.filter((o) => o.checked);
-      // Reflejar cambios visuales también en el filtrado
-      this.filteredOptions = [...this.options];
-      // Emitir
-      this.checkedValues.emit(this.selectedValues);
-      this.onChange(this.selectedValues);
-      this.onTouched();
-    }
-  }
-
-  filterOption(optionLabel: string) {
-    if (!optionLabel?.trim()) {
+  filterOption(optionName: any) {
+    const val = typeof optionName === "string" ? optionName : "";
+    if (!val.trim()) {
       this.filteredOptions = this.options;
       return;
     }
     this.filteredOptions = this.options.filter((o) =>
-      o.label.toLowerCase().includes(optionLabel.toLowerCase()),
+      o.name.toLowerCase().includes(val.toLowerCase()),
     );
   }
 
-  writeValue(value: Option[]): void {
-    this.selectedValues = value || [];
-    this.options.forEach((option) => {
-      option.checked = this.selectedValues.some((o) => o.id === option.id);
-    });
-    this.filteredOptions = [...this.options];
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
+  toggleSelection(event: any, option: Option): void {
+    const checked =
+      typeof event === "boolean" ? event : event?.checked || false;
+    option.checked = checked;
+    const selected = this.options.filter((o) => o.checked).map((o) => o.id);
+    this.valueChange.emit(selected);
   }
 
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    // Si tu componente tuviera un disabled global lo controlas aquí.
-  }
-
-  private syncCheckedValues() {
-    this.options.forEach((option) => {
-      option.checked = this.selectedValues.some((o) => o.id === option.id);
-    });
-    this.filteredOptions = [...this.options];
-  }
-
-  ngOnDestroy() {
-    this.subscriptions.unsubscribe();
+  clearSearchInput() {
+    this.searchControl.setValue("");
   }
 }

package/src/components-source/city-selector/city-selector.component.ts

@@ -1,151 +1,51 @@
-import { Component, Input, Output, EventEmitter, OnInit, NO_ERRORS_SCHEMA } from '@angular/core';
-import { SelectItemGroup, SharedModule } from 'primeng/api';
-import { CityService } from '../../pages/service/city/city.service';
-import { CacheService } from '../../services/cache.service';
-import { Subscription } from 'rxjs';
-import { FormsModule } from '@angular/forms';
-import { MultiSelectModule } from 'primeng/multiselect';
-import { TranslateModule } from '@ngx-translate/core';
-
-interface GroupedCities {
-  label: string;
-  value: string;
-  items: City[];
-}
-
-interface City {
-  label: string;
-  value: number;
-}
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
+import { DropiSelectComponent } from "../dropi-select/dropi-select.component";
 
 @Component({
-  selector: 'dropi-city-selector',
-  templateUrl: './city-selector.component.html',
-  styleUrls: ['./city-selector.component.scss'],
+  selector: "app-city-selector",
   standalone: true,
-  imports: [MultiSelectModule, FormsModule, SharedModule, TranslateModule],
-  schemas: [NO_ERRORS_SCHEMA],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    IconComponent,
+    DropiSelectComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./city-selector.component.html",
+  styleUrls: ["./city-selector.component.scss"],
 })
 export class CitySelectorComponent implements OnInit {
-  @Input() selectedCities!: any[];
-  @Input() disabled: boolean = false;
-
-  @Output() selectedCitiesChange = new EventEmitter<any>();
+  @Input() public formControlCity: any;
+  @Input() public disabled: boolean = false;
 
-  groupedCities!: SelectItemGroup[];
-  country: string = '';
-
-  private subscription: Subscription;
-  private localStorageKey = 'groupedCities';
-  private allCities: any[] = []; // Almacena todas las ciudades
-  private chunkSize = 100; // Tamaño del chunk para la carga diferida
+  public groupedCities: any[] = [];
+  public selectedCities: any[] = [];
+  @Output() public onCityChange = new EventEmitter<any>();
 
   constructor(
-    private cityService: CityService,
-    private cacheService: CacheService,
+    @Inject("CityService") public cityService: any,
+    @Inject("SettingsService") public settingsService: any,
   ) {}
 
-  ngOnInit() {
-    console.log(this.disabled);
-
-    const country = JSON.parse(localStorage.getItem('DROPI_configurations'))[0].country || '';
-    if (country) {
-      this.country = country;
-    }
-    if (!this.selectedCities) {
-      this.selectedCities = [];
-    } else {
-      this.selectedCities =
-        this.selectedCities.map((city: any) => city.value) || this.selectedCities;
-    }
-
-    // Verificar caché por dominio primero
-    const domain = window.location.hostname;
-    const cacheKey = `grouped-cities-${domain}`;
-    const cachedCities = this.cacheService.get<any[]>(cacheKey);
-
-    if (cachedCities) {
-      console.log('🔄 Usando ciudades desde caché para dominio:', domain);
-      this.allCities = cachedCities;
-      this.groupedCities = this.allCities.slice(0, this.chunkSize);
-      return;
-    }
-
-    // Fallback a localStorage si no hay caché por dominio
-    const storedCities = localStorage.getItem(this.localStorageKey);
-    if (storedCities) {
-      this.allCities = JSON.parse(storedCities);
-      this.groupedCities = this.allCities.slice(0, this.chunkSize);
-    } else {
-      this.fetchCitiesFromAPI();
-    }
-  }
-
-  fetchCitiesFromAPI() {
-    //console.log('Fetching cities from API for country:', this.country);
-    this.subscription = this.cityService.getCitiesByCountry({ country: this.country }).subscribe(
-      (res: any) => {
-        if (!res.data) return;
-
-        let response = res.data;
-        console.log('State response', response);
-
-        const capitalize = (str: string) => {
-          return str
-            .toLowerCase()
-            .replace(/\b\w/g, (char) => char.toUpperCase())
-            .replace(/\s*\(.*?\)\s*/g, ''); // Eliminar texto entre paréntesis
-        };
-
-        if (Array.isArray(response)) {
-          this.allCities = response.map((state: any) => {
-            return {
-              label: capitalize(state.label),
-              value: state.id_state.toString(),
-              items: state.items
-                ? state.items.map((city: any) => {
-                    return {
-                      label: capitalize(city.label),
-                      value: city.id_city.toString(),
-                    };
-                  })
-                : [],
-            };
-          });
+  ngOnInit(): void {}
 
-          this.groupedCities = this.allCities.slice(0, this.chunkSize); // Carga inicial
-
-          // Guardar en localStorage (fallback)
-          localStorage.setItem(this.localStorageKey, JSON.stringify(this.allCities));
-
-          // Guardar en caché por dominio (6 horas)
-          const domain = window.location.hostname;
-          const cacheKey = `grouped-cities-${domain}`;
-          this.cacheService.set(cacheKey, this.allCities, 6 * 60 * 60 * 1000);
-          console.log('💾 Guardando ciudades en caché para dominio:', domain);
-        } else {
-          console.error('Response is not an array:', response);
-        }
-      },
-      (error: any) => {
-        console.error('❌ Error fetching cities:', error);
-      },
-    );
+  public onSelectCityChange(event: any): void {
+    this.onCityChange.emit(event);
   }
 
-  loadCities(event: any) {
-    // Cargar más datos cuando se desplaza
-    const { first, last } = event;
-    if (last > this.groupedCities.length) {
-      const moreCities = this.allCities.slice(
-        this.groupedCities.length,
-        this.groupedCities.length + this.chunkSize,
-      );
-      this.groupedCities = [...this.groupedCities, ...moreCities];
-    }
-  }
-
-  onSelectCityChange(event: any) {
-    this.selectedCitiesChange.emit(event);
-  }
+  public loadCities(event: any): void {}
 }

package/src/components-source/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,26 @@
+<div class="wrapper text-center">
+  <div class="header text-center">
+    <!-- <mat-icon class="notranslate warn-500-fg s-64">error_outline</mat-icon> -->
+    <img
+      src="../../../assets/img/theme/interrogation.png"
+      class="md-avatar"
+      style="width: 90px; height: 90px; border-radius: 100%"
+    />
+  </div>
+  <div mat-dialog-content>{{ data.message }}</div>
+  <div class="actions">
+    <button class="btn btn-primary" (click)="close('yes')">{{ 'Yes' | translate }}</button>
+    <button class="btn btn-secondary" (click)="close('no')">{{ 'No' | translate }}</button>
+  </div>
+  <!-- <div mat-dialog-actions class="pt-24" class="d-flex justify-content-center">
+    <button mat-raised-button class="mat-accent mr-16" (click)="close('yes')">
+      {{ 'Yes' | translate }}
+    </button>
+    <button mat-raised-button class="mat-accent mr-16" (click)="close('no')">
+      {{ 'No' | translate }}
+    </button>
+    <button mat-raised-button class="mat-accent mr-16" (click)="close('cancel')" *ngIf="data.show">
+      {{ 'Cancel' | translate }}
+    </button>
+  </div> -->
+</div>

package/src/components-source/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,55 @@
+.wrapper {
+    padding: 20px;
+    overflow: hidden !important;
+    height: 25%;
+}
+
+.icono {
+    font-size: 60px !important;
+}
+
+.mat-icon {
+    background-repeat: no-repeat !important;
+    display: inline-block !important;
+    fill: currentColor !important;
+    height: 50px !important;
+    width: 40px !important;
+}
+
+.mat-flat-button.mat-accent,
+.mat-raised-button.mat-accent,
+.mat-fab.mat-accent,
+.mat-mini-fab.mat-accent {
+    background-color: #198cf0;
+}
+
+.actions {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    margin-top: 1.5rem;
+}
+
+button {
+    flex: 1;
+    outline: none;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
+    &.btn-primary {
+      background: var(--Primary-Naranja, #ff9333);
+      border: navajowhite;
+      height: 40px;
+      padding: 8px 20px 8px 16px;
+
+      font-weight: 600;
+    }
+    &.btn-secondary {
+      background: #fff;
+      color: var(--Primary-Naranja, #ff9333);
+      border: 1px solid;
+      font-weight: 500;
+    }
+}

package/src/components-source/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, Inject, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-confirm-dialog',
+    templateUrl: 'confirm-dialog.component.html',
+    styleUrls: ['./confirm-dialog.component.scss'],
+    standalone: true,
+    imports: [TranslateModule]
+})
+export class ConfirmDialogComponent {
+  @Input() public data: any = {
+    message: '',
+    show: true
+  };
+  constructor(public dialogRef: NgbActiveModal) {}
+
+  close(type): void {
+    this.dialogRef.close({ type: type });
+  }
+}