valtech-components 2.0.795 → 2.0.796

package/src/lib/components/molecules/multi-select-search/multi-select-search.component.scss

@@ -1,172 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.multi-select-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  .main-input {
-    flex: 1;
-    cursor: pointer;
-
-    &.is-open {
-      border-color: var(--ion-color-primary);
-    }
-  }
-
-  .dropdown-icon {
-    position: absolute;
-    right: 12px;
-    font-size: 16px;
-    color: var(--ion-color-medium);
-    transition: transform 0.2s ease;
-    pointer-events: none;
-
-    &.rotated {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-.dropdown-overlay {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background: var(--ion-color-light);
-  border: 1px solid var(--ion-color-medium);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  max-height: 300px;
-  overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: all 0.2s ease;
-
-  &.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  .search-container {
-    padding: 8px;
-    border-bottom: 1px solid var(--ion-color-light-shade);
-
-    ion-searchbar {
-      --background: var(--ion-color-light);
-      --border-radius: 6px;
-      --box-shadow: none;
-      padding: 0;
-    }
-  }
-
-  .actions-container {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px;
-    border-bottom: 1px solid var(--ion-color-light-shade);
-    background: var(--ion-color-light-tint);
-
-    ion-button {
-      --padding-start: 8px;
-      --padding-end: 8px;
-      font-size: 12px;
-      height: 28px;
-    }
-  }
-
-  .options-container {
-    max-height: 200px;
-    overflow-y: auto;
-
-    .options-list {
-      padding: 0;
-      margin: 0;
-
-      .option-item {
-        --padding-start: 12px;
-        --padding-end: 12px;
-        --inner-padding-end: 0;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-
-        &:hover {
-          --background: var(--ion-color-light-shade);
-        }
-
-        ion-checkbox {
-          margin-right: 12px;
-        }
-
-        ion-label {
-          font-size: 14px;
-          color: var(--ion-color-dark);
-        }
-      }
-
-      .no-results {
-        --padding-start: 12px;
-        --padding-end: 12px;
-        cursor: default;
-
-        ion-label {
-          font-size: 14px;
-          font-style: italic;
-        }
-      }
-    }
-  }
-}
-
-// Dark mode support
-:host-context(body.dark) .dropdown-overlay,
-:host-context(.dark) .dropdown-overlay,
-:host-context(.ion-palette-dark) .dropdown-overlay,
-:host-context(html.ion-palette-dark) .dropdown-overlay,
-:host-context([data-theme='dark']) .dropdown-overlay {
-  background: var(--ion-color-dark);
-  border-color: var(--ion-color-medium-shade);
-
-  .search-container {
-    border-bottom-color: var(--ion-color-dark-shade);
-
-    ion-searchbar {
-      --background: var(--ion-color-dark-tint);
-    }
-  }
-
-  .actions-container {
-    border-bottom-color: var(--ion-color-dark-shade);
-    background: var(--ion-color-dark-tint);
-  }
-
-  .options-list {
-    .option-item {
-      &:hover {
-        --background: var(--ion-color-dark-shade);
-      }
-
-      ion-label {
-        color: var(--ion-color-light);
-      }
-    }
-  }
-}
-
-// Mobile responsive
-@media (max-width: 768px) {
-  .dropdown-overlay {
-    .options-container {
-      max-height: 180px;
-    }
-
-    .actions-container ion-button {
-      font-size: 11px;
-      height: 26px;
-    }
-  }
-}

package/src/lib/components/molecules/multi-select-search/multi-select-search.component.ts

@@ -1,471 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectorRef,
-  Component,
-  inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IonicModule, IonModal } from '@ionic/angular';
-import { Subscription } from 'rxjs';
-import { I18nService } from '../../../services/i18n';
-import { IconService } from '../../../services/icons.service';
-import { applyDefaultValueToControl } from '../../../shared/utils/form-defaults';
-import { replaceSpecialChars } from '../../../shared/utils/text';
-import { InputMetadata, InputOption } from '../../types';
-import { SearchbarComponent } from '../searchbar/searchbar.component';
-
-@Component({
-  selector: 'val-multi-select-search',
-  standalone: true,
-  imports: [CommonModule, IonicModule, FormsModule, SearchbarComponent, ReactiveFormsModule],
-  template: `
-    <ion-input
-      type="text"
-      [value]="displayValue"
-      [placeholder]="getPlaceholder()"
-      readonly
-      (mousedown)="preventDefaultBehavior($event)"
-    />
-
-    <ion-input style="position: absolute;" [formControl]="props.control" type="hidden"></ion-input>
-
-    <ion-modal
-      #modal
-      trigger="open-modal"
-      [initialBreakpoint]="1"
-      [breakpoints]="[0, 0.5, 0.75, 1]"
-      (didDismiss)="resetState()"
-    >
-      <ng-template>
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>{{ getLabel() }}</ion-title>
-            <ion-buttons slot="end">
-              <ion-button (click)="cancelModal()">{{ getCloseText() }}</ion-button>
-            </ion-buttons>
-          </ion-toolbar>
-          <ion-toolbar>
-            <val-searchbar (filterEvent)="onFilter($event)" (focusEvent)="onFocus()" (blurEvent)="onBlur()" />
-          </ion-toolbar>
-        </ion-header>
-        <ion-content>
-          <!-- Action buttons for multi-select -->
-          <div class="actions-container" style="padding: 16px; border-bottom: 1px solid var(--ion-color-light-shade);">
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="selectAll()"
-              [disabled]="filteredItems.length === 0"
-            >
-              {{ getSelectAllText() }}
-            </ion-button>
-            <ion-button
-              fill="clear"
-              size="small"
-              color="medium"
-              (click)="clearAll()"
-              [disabled]="selectedItems.length === 0"
-            >
-              {{ getClearText() }}
-            </ion-button>
-          </div>
-
-          <ion-list>
-            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
-              <ion-checkbox
-                slot="start"
-                [checked]="isItemSelected(item)"
-              ></ion-checkbox>
-              <ion-label>{{ item[labelProperty] }}</ion-label>
-            </ion-item>
-            <ion-item *ngIf="filteredItems.length === 0" lines="none">
-              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-content>
-        <ion-footer>
-          <ion-toolbar>
-            <ion-button expand="full" (click)="applyAndClose()">
-              {{ getApplyText() }}
-            </ion-button>
-          </ion-toolbar>
-        </ion-footer>
-      </ng-template>
-    </ion-modal>
-  `,
-  styles: [
-    `
-      ion-header {
-        padding: 8px 8px 0px 8px;
-      }
-      .actions-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    `,
-  ],
-})
-export class MultiSelectSearchComponent implements OnChanges, OnDestroy {
-  @ViewChild('modal') modal!: IonModal;
-
-  @Input() label: string = '';
-  @Input() labelProperty: string = 'name';
-  @Input() valueProperty: string = 'id';
-  @Input() placeholder: string = '';
-
-  @Input() props: InputMetadata;
-
-  icon = inject(IconService);
-  private changeDetector = inject(ChangeDetectorRef);
-  private i18n = inject(I18nService);
-
-  /** Get resolved label with i18n fallback */
-  getLabel(): string {
-    return this.label || this.i18n.t('selectOptions');
-  }
-
-  /** Get resolved placeholder with i18n fallback */
-  getPlaceholder(): string {
-    return this.props?.placeholder || this.placeholder || this.i18n.t('selectOptions');
-  }
-
-  /** Get close button text */
-  getCloseText(): string {
-    return this.i18n.t('close');
-  }
-
-  /** Get no results text */
-  getNoResultsText(): string {
-    return this.i18n.t('noResults');
-  }
-
-  /** Get select all text */
-  getSelectAllText(): string {
-    return this.i18n.t('selectAll');
-  }
-
-  /** Get clear text */
-  getClearText(): string {
-    return this.i18n.t('clear');
-  }
-
-  /** Get apply text */
-  getApplyText(): string {
-    return this.i18n.t('apply');
-  }
-
-  /** Get items selected text */
-  getItemsSelectedText(count: number): string {
-    return `${count} ${this.i18n.t('itemsSelected')}`;
-  }
-
-  searchTerm: string = '';
-  filteredItems: InputOption[] = [];
-  selectedItems: InputOption[] = [];
-  displayValue: string = '';
-
-  private previousOptions: any[] = [];
-  private isProcessingChanges = false;
-  private valueChangesSubscription?: Subscription;
-
-  ngOnInit() {
-    this.applyDefaultValue();
-    this.initializeItems();
-    this.syncControlValueWithSelectedItems();
-    this.updateDisplayValue();
-    this.subscribeToValueChanges();
-  }
-
-  ngOnDestroy() {
-    // Limpiar suscripciones para evitar memory leaks
-    if (this.valueChangesSubscription) {
-      this.valueChangesSubscription.unsubscribe();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // Evitar bucles infinitos
-    if (this.isProcessingChanges) {
-      return;
-    }
-
-    // Cuando cambia props o props.options
-    if (changes['props']) {
-      try {
-        this.isProcessingChanges = true;
-
-        // Desuscribirse del antiguo control si existe
-        if (this.valueChangesSubscription) {
-          this.valueChangesSubscription.unsubscribe();
-        }
-
-        if (this.props?.options) {
-          // Verificar si las opciones han cambiado realmente
-          const optionsChanged = !this.areOptionsEqual(this.previousOptions, this.props.options);
-
-          if (optionsChanged) {
-            this.previousOptions = [...this.props.options];
-            this.initializeItems();
-          }
-        }
-
-        // Sincronizar con el nuevo control si existe
-        this.syncControlValueWithSelectedItems();
-        this.updateDisplayValue();
-
-        // Suscribirse al nuevo control
-        this.subscribeToValueChanges();
-      } finally {
-        this.isProcessingChanges = false;
-      }
-    }
-  }
-
-  ionViewWillEnter(): void {
-    if (this.isProcessingChanges) {
-      return;
-    }
-
-    try {
-      this.isProcessingChanges = true;
-      this.initializeItems();
-      this.syncControlValueWithSelectedItems();
-      this.updateDisplayValue();
-      this.subscribeToValueChanges();
-    } finally {
-      this.isProcessingChanges = false;
-    }
-  }
-
-  // Suscribirse a cambios en el FormControl
-  private subscribeToValueChanges() {
-    if (!this.props?.control) return;
-
-    this.valueChangesSubscription = this.props.control.valueChanges.subscribe(value => {
-      if (this.isProcessingChanges) return;
-
-      try {
-        this.isProcessingChanges = true;
-        this.syncControlValueWithSelectedItems();
-        this.updateDisplayValue();
-      } finally {
-        this.isProcessingChanges = false;
-      }
-    });
-  }
-
-  // Compara si dos arrays de opciones son iguales
-  private areOptionsEqual(prevOptions: any[], newOptions: any[]): boolean {
-    if (prevOptions === newOptions) return true;
-    if (!prevOptions || !newOptions) return prevOptions === newOptions;
-    if (prevOptions.length !== newOptions.length) return false;
-    for (let i = 0; i < prevOptions.length; i++) {
-      if (prevOptions[i][this.valueProperty] !== newOptions[i][this.valueProperty]) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private initializeItems(): void {
-    this.filteredItems = this.props?.options || [];
-  }
-
-  private syncControlValueWithSelectedItems(): void {
-    if (!this.props?.control) {
-      this.selectedItems = [];
-      return;
-    }
-    const controlValue = this.props.control.value;
-    if (controlValue === null || controlValue === undefined || controlValue === '') {
-      this.selectedItems = [];
-      return;
-    }
-
-    // Parse comma-separated values for multi-select
-    const values = typeof controlValue === 'string' 
-      ? controlValue.split(',').map(v => v.trim()).filter(v => v !== '')
-      : Array.isArray(controlValue) ? controlValue : [controlValue];
-
-    if (this.props.options && this.props.options.length > 0) {
-      const map = new Map(this.props.options.map(opt => [String(opt[this.valueProperty]), opt]));
-      this.selectedItems = values.map(val => map.get(String(val))).filter(Boolean);
-    } else {
-      this.selectedItems = [];
-    }
-  }
-
-  private applyDefaultValue(): void {
-    applyDefaultValueToControl(this.props);
-  }
-
-  onFilter(event) {
-    // If no search term, show all options
-    if (!event || event.trim() === '') {
-      this.filteredItems = this.props?.options ? [...this.props.options] : [];
-      this.changeDetector.detectChanges();
-      return;
-    }
-
-    // If no options, nothing to filter
-    if (!this.props?.options || this.props.options.length === 0) {
-      this.filteredItems = [];
-      this.changeDetector.detectChanges();
-      return;
-    }
-
-    const search = replaceSpecialChars(event.toLowerCase());
-    this.filteredItems = this.props.options.filter(element => {
-      const label = element[this.labelProperty]
-        ? replaceSpecialChars(String(element[this.labelProperty]).toLowerCase())
-        : '';
-      const value = element[this.valueProperty]
-        ? replaceSpecialChars(String(element[this.valueProperty]).toLowerCase())
-        : '';
-      return label.includes(search) || value.includes(search);
-    });
-    this.changeDetector.detectChanges();
-  }
-
-  onFocus() {
-    console.log('onFocus');
-  }
-
-  onBlur() {
-    console.log('onBlur');
-  }
-
-  openModal() {
-    if (this.modal) {
-      this.modal.present();
-    }
-  }
-
-  preventDefaultBehavior(event: MouseEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.openModal();
-  }
-
-  /**
-   * Reset state only - called by didDismiss event
-   * Separated from closeModal to avoid double dismissal and scroll issues
-   */
-  resetState(): void {
-    this.searchTerm = '';
-    this.filteredItems = this.props?.options ? [...this.props.options] : [];
-  }
-
-  /**
-   * Close modal only - does not reset state (didDismiss will handle that)
-   */
-  closeModal(): void {
-    if (this.modal) {
-      this.modal.dismiss();
-    }
-  }
-
-  /**
-   * @deprecated Use closeModal() instead. Kept for backwards compatibility.
-   */
-  cancelModal(): void {
-    this.closeModal();
-  }
-
-  selectItem(item: any) {
-    // Multi-select logic: toggle selection
-    const index = this.selectedItems.findIndex(
-      selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]
-    );
-
-    if (index === -1) {
-      // Add to selection
-      this.selectedItems.push(item);
-    } else {
-      // Remove from selection
-      this.selectedItems.splice(index, 1);
-    }
-
-    this.updateDisplayValue();
-    this.applyChanges();
-  }
-
-  selectAll(): void {
-    // Add all filtered items that aren't already selected
-    this.filteredItems.forEach(item => {
-      const isAlreadySelected = this.selectedItems.some(
-        selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]
-      );
-      if (!isAlreadySelected) {
-        this.selectedItems.push(item);
-      }
-    });
-
-    this.updateDisplayValue();
-    this.applyChanges();
-  }
-
-  clearAll(): void {
-    this.selectedItems = [];
-    this.updateDisplayValue();
-    this.applyChanges();
-  }
-
-  isItemSelected(item: any): boolean {
-    return this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
-  }
-
-  updateDisplayValue() {
-    if (this.selectedItems.length === 0) {
-      this.displayValue = '';
-      return;
-    }
-
-    if (this.selectedItems.length === 1) {
-      this.displayValue = this.selectedItems[0][this.labelProperty];
-    } else {
-      this.displayValue = this.getItemsSelectedText(this.selectedItems.length);
-    }
-  }
-
-  applyChanges() {
-    if (!this.props?.control) {
-      return;
-    }
-
-    try {
-      this.isProcessingChanges = true;
-
-      // Convert selected items to comma-separated string of values
-      const selectedValues = this.selectedItems.map(item => String(item[this.valueProperty]));
-      const value = selectedValues.join(',');
-
-      this.props.control.setValue(value);
-      this.props.control.markAsDirty();
-      this.props.control.updateValueAndValidity();
-    } finally {
-      this.isProcessingChanges = false;
-    }
-  }
-
-  applyAndClose() {
-    this.applyChanges();
-    this.closeModal();
-  }
-
-  // Método público para reiniciar el componente
-  reset() {
-    this.selectedItems = [];
-    this.displayValue = '';
-    if (this.props?.control) {
-      this.props.control.setValue('');
-    }
-    this.changeDetector.detectChanges();
-  }
-}