valtech-components 2.0.787 → 2.0.795

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

@@ -0,0 +1,432 @@
+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-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>
+          <ion-list>
+            <ion-item *ngFor="let item of filteredItems" button (click)="selectItem(item)" detail="false">
+              <ion-label>{{ item[labelProperty] }}</ion-label>
+              <ion-icon *ngIf="isItemSelected(item)" name="checkmark-outline" slot="end" color="primary"></ion-icon>
+            </ion-item>
+            <ion-item *ngIf="filteredItems.length === 0" lines="none">
+              <ion-label color="dark">{{ getNoResultsText() }}</ion-label>
+            </ion-item>
+          </ion-list>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `,
+  styles: [
+    `
+      ion-header {
+        padding: 8px 8px 0px 8px;
+      }
+    `,
+  ],
+})
+/**
+ * val-select-search
+ *
+ * A searchable select/dropdown input with modal and filtering, integrated with Angular forms.
+ *
+ * @example
+ * <val-select-search [props]="{ control: myControl, label: 'Choose', options: [{ id: '1', name: 'Option 1' }] }"></val-select-search>
+ *
+ * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ */
+export class SelectSearchComponent implements OnChanges, OnDestroy {
+  @ViewChild('modal') modal!: IonModal;
+
+  @Input() label: string = '';
+  @Input() labelProperty: string = 'name';
+  @Input() valueProperty: string = 'id';
+  @Input() multiple: boolean = false;
+  @Input() placeholder: string = '';
+  /**
+   * Input configuration object.
+   * @type {InputMetadata}
+   * @property control - The Angular FormControl for the select input.
+   * @property label - The label for the select.
+   * @property options - The available options for the select.
+   * @property placeholder - The placeholder text.
+   */
+  @Input() props: InputMetadata & { mode?: 'legacy' | 'strict' };
+
+  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('select');
+  }
+
+  /** Get resolved placeholder with i18n fallback */
+  getPlaceholder(): string {
+    return this.props?.placeholder || this.placeholder || this.i18n.t('selectOption');
+  }
+
+  /** Get close button text */
+  getCloseText(): string {
+    return this.i18n.t('close');
+  }
+
+  /** Get no results text */
+  getNoResultsText(): string {
+    return this.i18n.t('noResults');
+  }
+
+  /** 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 {
+    // PERF: Use reference equality first for fast path
+    if (prevOptions === newOptions) return true;
+    if (!prevOptions || !newOptions) return prevOptions === newOptions;
+    if (prevOptions.length !== newOptions.length) return false;
+    // Only compare valueProperty for equality
+    for (let i = 0; i < prevOptions.length; i++) {
+      if (prevOptions[i][this.valueProperty] !== newOptions[i][this.valueProperty]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private initializeItems(): void {
+    // PERF: Avoid unnecessary array copies
+    this.filteredItems = this.props?.options || [];
+  }
+
+  private syncControlValueWithSelectedItems(): void {
+    if (!this.props?.control) {
+      this.selectedItems = [];
+      return;
+    }
+    const controlValue = this.props.control.value;
+    if (this.props.mode === 'legacy') {
+      // Permisivo: muestra el valor aunque no esté en las opciones
+      if (controlValue !== null && controlValue !== undefined) {
+        this.displayValue = controlValue.toString();
+        this.selectedItems = [];
+        return;
+      }
+    } else {
+      // Estricto: solo muestra si coincide con una opción
+      if (controlValue === null || controlValue === undefined) {
+        this.selectedItems = [];
+        return;
+      }
+      if (this.props.options && this.props.options.length > 0) {
+        const map = new Map(this.props.options.map(opt => [opt[this.valueProperty], opt]));
+        const selectedOption = map.get(controlValue);
+        this.selectedItems = selectedOption ? [selectedOption] : [];
+      } 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;
+    }
+
+    // PERF: Avoid repeated replaceSpecialChars and toLowerCase for each option
+    const search = replaceSpecialChars(event.toLowerCase());
+    this.filteredItems = this.props.options.filter(element => {
+      // Only use labelProperty and valueProperty for filtering (faster)
+      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) {
+    if (this.multiple) {
+      const index = this.selectedItems.findIndex(
+        selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]
+      );
+
+      if (index === -1) {
+        this.selectedItems.push(item);
+      } else {
+        this.selectedItems.splice(index, 1);
+      }
+    } else {
+      this.selectedItems = [item];
+      this.closeModal();
+    }
+
+    this.updateDisplayValue();
+    this.applyChanges();
+  }
+
+  isItemSelected(item: any): boolean {
+    return this.selectedItems.some(selectedItem => selectedItem[this.valueProperty] === item[this.valueProperty]);
+  }
+
+  updateDisplayValue() {
+    if (this.props?.mode === 'legacy' && this.selectedItems.length === 0 && this.props?.control?.value) {
+      this.displayValue = this.props.control.value.toString();
+      return;
+    }
+    if (this.selectedItems.length === 0) {
+      this.displayValue = '';
+      return;
+    }
+    if (this.multiple) {
+      if (this.selectedItems.length === 1) {
+        this.displayValue = this.selectedItems[0][this.labelProperty];
+      } else {
+        this.displayValue = this.getItemsSelectedText(this.selectedItems.length);
+      }
+    } else {
+      this.displayValue = this.selectedItems[0][this.labelProperty];
+    }
+  }
+
+  applyChanges() {
+    if (!this.props?.control) {
+      return;
+    }
+
+    try {
+      this.isProcessingChanges = true;
+
+      if (this.selectedItems.length > 0) {
+        this.props.control.setValue(this.selectedItems[0][this.valueProperty]);
+      } else {
+        this.props.control.setValue(null);
+      }
+
+      this.props.control.markAsDirty();
+      this.props.control.updateValueAndValidity();
+    } finally {
+      this.isProcessingChanges = false;
+    }
+  }
+
+  // Método público para reiniciar el componente
+  reset() {
+    this.selectedItems = [];
+    this.displayValue = '';
+    if (this.props?.control) {
+      this.props.control.setValue(null);
+    }
+    this.changeDetector.detectChanges();
+  }
+}

package/src/lib/components/molecules/select-search/select-search.stories.ts

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { FormControl } from '@angular/forms';
+import { SelectSearchComponent } from './select-search.component';
+
+const countryOptions = [
+  { id: 'us', name: 'United States' },
+  { id: 'uk', name: 'United Kingdom' },
+  { id: 'ca', name: 'Canada' },
+  { id: 'au', name: 'Australia' },
+  { id: 'de', name: 'Germany' },
+  { id: 'fr', name: 'France' },
+  { id: 'es', name: 'Spain' },
+  { id: 'it', name: 'Italy' },
+  { id: 'jp', name: 'Japan' },
+  { id: 'br', name: 'Brazil' },
+  { id: 'mx', name: 'Mexico' },
+  { id: 'ar', name: 'Argentina' },
+  { id: 'cl', name: 'Chile' },
+  { id: 'co', name: 'Colombia' },
+  { id: 'pe', name: 'Peru' },
+];
+
+const categoryOptions = [
+  { id: 'electronics', name: 'Electronics' },
+  { id: 'clothing', name: 'Clothing & Apparel' },
+  { id: 'home', name: 'Home & Garden' },
+  { id: 'sports', name: 'Sports & Outdoors' },
+  { id: 'books', name: 'Books & Media' },
+  { id: 'toys', name: 'Toys & Games' },
+];
+
+const statusOptions = [
+  { id: 'active', name: 'Active' },
+  { id: 'pending', name: 'Pending Review' },
+  { id: 'approved', name: 'Approved' },
+  { id: 'rejected', name: 'Rejected' },
+  { id: 'archived', name: 'Archived' },
+];
+
+const createSelectSearchProps = (overrides: Record<string, any> = {}) => ({
+  control: new FormControl(null),
+  options: countryOptions,
+  placeholder: 'Select an option...',
+  ...overrides,
+});
+
+const defaultProps = createSelectSearchProps();
+
+const withPreselectedProps = createSelectSearchProps({
+  control: new FormControl('us'),
+  options: countryOptions,
+  placeholder: 'Select a country...',
+});
+
+const categoriesProps = createSelectSearchProps({
+  control: new FormControl(null),
+  options: categoryOptions,
+  placeholder: 'Select a category...',
+});
+
+const statusProps = createSelectSearchProps({
+  control: new FormControl('active'),
+  options: statusOptions,
+  placeholder: 'Select status...',
+});
+
+const disabledProps = createSelectSearchProps({
+  control: new FormControl({ value: 'uk', disabled: true }),
+  options: countryOptions,
+  placeholder: 'Disabled input',
+});
+
+const emptyOptionsProps = createSelectSearchProps({
+  control: new FormControl(null),
+  options: [],
+  placeholder: 'No options available',
+});
+
+const showcaseCountryProps = createSelectSearchProps({
+  control: new FormControl(null),
+  options: countryOptions,
+  placeholder: 'Select your country...',
+});
+
+const showcaseCategoryProps = createSelectSearchProps({
+  control: new FormControl(null),
+  options: categoryOptions,
+  placeholder: 'Select product category...',
+});
+
+const showcaseStatusProps = createSelectSearchProps({
+  control: new FormControl('pending'),
+  options: statusOptions,
+  placeholder: 'Select status...',
+});
+
+const meta: Meta<SelectSearchComponent> = {
+  title: 'Molecules/SelectSearch',
+  component: SelectSearchComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Configuration object for the select search',
+    },
+    label: {
+      description: 'Label for the modal header',
+      control: 'text',
+    },
+    labelProperty: {
+      description: 'Property name to display as label',
+      control: 'text',
+    },
+    valueProperty: {
+      description: 'Property name to use as value',
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SelectSearchComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    props: { props: defaultProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Country"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const WithPreselected: Story = {
+  render: () => ({
+    props: { props: withPreselectedProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Country"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Categories: Story = {
+  render: () => ({
+    props: { props: categoriesProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Category"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Status: Story = {
+  render: () => ({
+    props: { props: statusProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Status"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  render: () => ({
+    props: { props: disabledProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Country"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const EmptyOptions: Story = {
+  render: () => ({
+    props: { props: emptyOptionsProps },
+    template: `
+      <div style="max-width: 400px;">
+        <val-select-search [props]="props" label="Select Option"></val-select-search>
+      </div>
+    `,
+  }),
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    props: {
+      countryProps: showcaseCountryProps,
+      categoryProps: showcaseCategoryProps,
+      statusProps: showcaseStatusProps,
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+        <div>
+          <h4 style="margin-bottom: 8px;">Country Selection</h4>
+          <p style="color: var(--ion-color-medium); font-size: 14px; margin-bottom: 8px;">Searchable dropdown with many options:</p>
+          <val-select-search [props]="countryProps" label="Select Country"></val-select-search>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Product Category</h4>
+          <p style="color: var(--ion-color-medium); font-size: 14px; margin-bottom: 8px;">Simple category selection:</p>
+          <val-select-search [props]="categoryProps" label="Select Category"></val-select-search>
+        </div>
+
+        <div>
+          <h4 style="margin-bottom: 8px;">Order Status</h4>
+          <p style="color: var(--ion-color-medium); font-size: 14px; margin-bottom: 8px;">With preselected value:</p>
+          <val-select-search [props]="statusProps" label="Select Status"></val-select-search>
+        </div>
+      </div>
+    `,
+  }),
+};