@dropi/ui-components 1.0.0

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

@@ -0,0 +1,267 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { action } from '@storybook/addon-actions';
+import { DropiSearchComponent } from './dropi-search.component';
+
+/**
+ * # Search Component
+ *
+ * A versatile search input component with autocomplete and filtering capabilities.
+ * Supports both simple text search and multi-select with checkboxes.
+ *
+ * ## Features
+ * - **Autocomplete**: Shows filtered results as user types
+ * - **Multi-select mode**: Optional checkbox selection for multiple items
+ * - **Customizable data**: Works with any data structure
+ * - **Position control**: Dropdown can appear above or below
+ * - **Event rich**: Multiple events for different interactions
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-search
+ *   placeholder="Search products..."
+ *   [dataToSearch]="products"
+ *   dataName="name"
+ *   (onInput)="handleSearch($event)"
+ *   (onChange)="handleSelect($event)">
+ * </app-dropi-search>
+ * ```
+ */
+const meta: Meta<DropiSearchComponent> = {
+  title: 'UI Dropi/Search',
+  component: DropiSearchComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A versatile search input component with autocomplete and filtering capabilities.
+Supports both simple text search and multi-select with checkboxes.
+
+### Key Features
+- **Autocomplete**: Shows filtered results as user types
+- **Multi-select mode**: Optional checkbox selection for multiple items
+- **Customizable data**: Works with any data structure
+- **Position control**: Dropdown can appear above or below
+- **Event rich**: Multiple events for different interactions
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Hint text displayed when the input is empty',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    textInput: {
+      control: 'text',
+      description: 'Current text value in the input field',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show the search icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    dataToSearch: {
+      control: 'object',
+      description: 'Array of data objects used for filtering and displaying results',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    dataName: {
+      control: 'text',
+      description: 'Property name in data objects to display as result text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    position: {
+      control: 'text',
+      description: 'Position of the results overlay ("top" or "bottom")',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'bottom' },
+      },
+    },
+    heightOverlay: {
+      control: 'number',
+      description: 'Height in pixels for the results overlay',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    model: {
+      control: 'object',
+      description: 'Model binding for selected objects (checkbox mode only)',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+    onInput: {
+      action: 'onInput',
+      description: 'Event emitted on each keystroke for real-time search',
+    },
+    onKeyEnter: {
+      action: 'onKeyEnter',
+      description: 'Event emitted when Enter key is pressed',
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Event emitted when the input value changes',
+    },
+    onBlur: {
+      action: 'onBlur',
+      description: 'Event emitted when focus leaves the input (useful for checkbox mode)',
+    },
+  },
+};
+const comerciosSelected = [];
+
+const comercios = [
+  { id: 1, name: 'Dropi' },
+  { id: 2, name: 'Walmart' },
+  { id: 3, name: 'Starbucks' },
+  { id: 4, name: 'Target' },
+  { id: 5, name: 'Best Buy' },
+  { id: 6, name: 'Apple Store' },
+  { id: 7, name: 'Nike' },
+  { id: 8, name: 'Adidas' },
+  { id: 9, name: 'Zara' },
+  { id: 10, name: 'H&M' },
+  { id: 11, name: 'Costco' },
+  { id: 12, name: 'IKEA' },
+  { id: 13, name: 'Uber Eats' },
+  { id: 14, name: "Domino's Pizza" },
+  { id: 15, name: 'Netflix' },
+  { id: 16, name: 'Spotify' },
+  { id: 17, name: 'Mercado Libre' },
+  { id: 18, name: 'Shein' },
+  { id: 19, name: 'Rappi' },
+  { id: 20, name: 'AliExpress' },
+];
+
+export default meta;
+type Story = StoryObj<DropiSearchComponent>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'placeholder',
+    textInput: '',
+  },
+
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=150-75&m=dev',
+    },
+  },
+};
+
+export const withCloseIcon: Story = {
+  args: {
+    placeholder: 'placeholder',
+    textInput: 'Hello world',
+    showIcon: true,
+  },
+
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=150-74&m=dev',
+    },
+  },
+};
+
+export const WithDropdown: Story = {
+  args: {
+    placeholder: 'placeholder',
+    textInput: 'Hello world',
+    showIcon: true,
+    type: 'dropdown',
+    dataToSearch: comercios,
+    model: comerciosSelected,
+    dataName: 'name',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <app-dropi-search
+    [(model)]="comerciosSelected"
+    [placeholder]="'placeholder'"
+    [textInput]="'Hello world'"
+    [showIcon]="true"
+    [type]="'dropdown'"
+    [dataToSearch]="comercios"
+    [dataName]="'name'"
+  ></app-dropi-search>
+          `.trim(),
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=150-3916&m=dev',
+    },
+  },
+};
+
+export const topDropdown: Story = {
+  args: {
+    placeholder: 'placeholder',
+    textInput: 'Hello world',
+    showIcon: true,
+    type: 'dropdown',
+    dataToSearch: comercios,
+    model: comerciosSelected,
+    position: 'top',
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+
+
+      <div class="container-search-dropi" style="display: flex; justify-content: center; align-items: end; padding-bottom: 100px; height: 100vh; ">
+         <app-dropi-search
+            [placeholder]="placeholder"
+            [textInput]="textInput"
+            [showIcon]="showIcon"
+            [dataToSearch]="dataToSearch"
+            [position]="position"
+            [model]="model"
+            [type]="type"
+          ></app-dropi-search>
+        </div>
+      `,
+  }),
+};
+
+export const CustomHeight: Story = {
+  args: {
+    placeholder: 'placeholder',
+    textInput: 'Hello world',
+    showIcon: true,
+    type: 'dropdown',
+    dataToSearch: comercios,
+    model: comerciosSelected,
+    heightOverlay: 400,
+  },
+};

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

@@ -0,0 +1,230 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} 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 { TranslateModule } from '@ngx-translate/core';
+import { ButtonComponent } from '../dropi-button/dropi-button.component';
+
+@Component({
+  selector: 'app-dropi-search',
+  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();
+  }
+
+  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);
+      });
+    }
+  }
+
+  @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);
+  }
+
+  onEnter(e): void {
+    console.log('jkdjfkjdfjdfk');
+    console.log('e.target.value', e.target.value);
+
+    this.onKeyEnter.emit(e.target.value);
+  }
+
+  onChangHandler(e) {
+    this.onChange.emit(e.target.value);
+  }
+
+  clearText() {
+    this.textInput = '';
+    this.dataToSearchCache = this.dataToSearch;
+    this.onClear.emit();
+  }
+
+  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 };
+    });
+  }
+
+  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;
+  }
+
+  selectInitialDropButton() {
+    if (this.type == 'dropdown-button' && this.dataToSearchCache.length > 0) {
+      this.textDropButton = this.dataToSearchCache[0][this.dataName];
+    }
+  }
+}

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

@@ -0,0 +1,158 @@
+<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="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">
+          {{
+            (selectedOption
+              ? showCountryFlags && selectedOption.shortLabel
+                ? selectedOption.shortLabel
+                : selectedOption.label
+              : selectProperties.placeholder
+            ) | translate
+          }}
+        </div>
+      </div>
+      <app-icon
+        [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
+        width="20px"
+        height="20px"
+        color="Gray-Gray-400"
+      ></app-icon>
+    </button>
+
+    <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>
+      <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 *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>
+    <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>
+
+        <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>
+        </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 }"
+          (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>