valtech-components 2.0.690 → 2.0.691

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

@@ -0,0 +1,168 @@
+.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
+@media (prefers-color-scheme: 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

@@ -0,0 +1,471 @@
+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();
+  }
+}