@dropi/ui-components 1.0.0

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

@@ -0,0 +1,345 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { DropiPaginatorComponent } from './dropi-paginator.component';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+/**
+ * # Paginator Component
+ *
+ * A navigation component for paginated content allowing users to move between pages.
+ * Essential for tables, lists, and any content that spans multiple pages.
+ *
+ * ## Features
+ * - **Page navigation**: Previous/next buttons and direct page selection
+ * - **Configurable visibility**: Control how many page numbers are visible
+ * - **Disabled state**: Can be disabled during loading
+ * - **Event emission**: Emits page change events
+ * - **Cursor pagination mode**: For APIs without total page count
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-paginator
+ *   [totalPages]="20"
+ *   [currentPage]="1"
+ *   [maxVisiblePages]="8"
+ *   (pageChange)="onPageChange($event)">
+ * </app-dropi-paginator>
+ * ```
+ *
+ * ## Cursor Pagination Mode
+ * ```html
+ * <app-dropi-paginator
+ *   [totalPages]="2"
+ *   [currentPage]="1"
+ *   [isNotTotalPages]="true"
+ *   (pageChange)="onPageChange($event)">
+ * </app-dropi-paginator>
+ * ```
+ */
+const meta: Meta<DropiPaginatorComponent> = {
+  title: 'UI Dropi/Paginator',
+  component: DropiPaginatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, IconComponent, TranslateModule.forRoot()],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A navigation component for paginated content allowing users to move between pages.
+Essential for tables, lists, and any content that spans multiple pages.
+
+### Key Features
+- **Page navigation**: Previous/next buttons and direct page selection
+- **Configurable visibility**: Control how many page numbers are visible
+- **Disabled state**: Can be disabled during loading
+- **Event emission**: Emits page change events
+- **Cursor pagination mode**: For APIs that use cursor-based pagination without total page count
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    pageChange: {
+      action: 'pageChange',
+      description: 'Event emitted when the page changes',
+    },
+    totalPages: {
+      control: { type: 'number', min: 1, max: 20 },
+      description: 'Total number of pages available',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    currentPage: {
+      control: { type: 'number', min: 1, max: 20 },
+      description: 'Currently active page number',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the paginator when true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isNotTotalPages: {
+      control: 'boolean',
+      description: 'Enables cursor pagination mode (hides page numbers, first/last buttons)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template = (args: DropiPaginatorComponent) => ({
+  props: {
+    ...args,
+    pageChange: args.pageChange,
+  },
+  template: `
+    <app-dropi-paginator
+      [totalPages]="totalPages"
+      [currentPage]="currentPage"
+      [disabled]="disabled"
+      [maxVisiblePages]="maxVisiblePages"
+      [isNotTotalPages]="isNotTotalPages"
+      (pageChange)="pageChange($event)"
+    ></app-dropi-paginator>
+  `,
+});
+
+// Template with mock data to show pagination in action
+const TemplateWithData = (args: any) => ({
+  props: {
+    ...args,
+    currentPage: args.currentPage || 1,
+    totalPages: args.totalPages || 5,
+    mockData: {
+      1: ['Orden #1001 - Juan Pérez', 'Orden #1002 - María García', 'Orden #1003 - Carlos López'],
+      2: [
+        'Orden #1004 - Ana Martínez',
+        'Orden #1005 - Pedro Sánchez',
+        'Orden #1006 - Laura Torres',
+      ],
+      3: [
+        'Orden #1007 - Diego Ramírez',
+        'Orden #1008 - Sofía Hernández',
+        'Orden #1009 - Andrés Castro',
+      ],
+      4: [
+        'Orden #1010 - Valentina Ruiz',
+        'Orden #1011 - Mateo Díaz',
+        'Orden #1012 - Camila Moreno',
+      ],
+      5: [
+        'Orden #1013 - Sebastián Vargas',
+        'Orden #1014 - Isabella Rojas',
+        'Orden #1015 - Nicolás Gómez',
+      ],
+    },
+    onPageChange: function (page: number) {
+      this.currentPage = page;
+      // Simulate cursor pagination: when reaching last page, no more pages
+      if (args.isNotTotalPages && page >= this.totalPages) {
+        // Has no more pages
+        this.totalPages = page;
+      } else if (args.isNotTotalPages && page < 5) {
+        // Simulate has_next: true
+        this.totalPages = page + 1;
+      }
+    },
+  },
+  template: `
+    <div style="width: 400px; font-family: sans-serif;">
+      <div style="background: #f5f5f5; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
+        <h4 style="margin: 0 0 12px 0; color: #333;">Página {{ currentPage }}</h4>
+        <ul style="margin: 0; padding-left: 20px; color: #666;">
+          <li *ngFor="let item of mockData[currentPage] || []" style="margin-bottom: 4px;">{{ item }}</li>
+        </ul>
+      </div>
+
+      <app-dropi-paginator
+        [totalPages]="totalPages"
+        [currentPage]="currentPage"
+        [disabled]="disabled"
+        [maxVisiblePages]="maxVisiblePages"
+        [isNotTotalPages]="isNotTotalPages"
+        (pageChange)="onPageChange($event)"
+      ></app-dropi-paginator>
+
+      <p style="margin-top: 12px; font-size: 12px; color: #999;" *ngIf="isNotTotalPages">
+        Modo cursor: totalPages={{ totalPages }}, currentPage={{ currentPage }}
+      </p>
+    </div>
+  `,
+});
+
+/** Default paginator starting at first page */
+export const Default = Template.bind({});
+Default.args = {
+  totalPages: 10,
+  currentPage: 1,
+  disabled: false,
+  maxVisiblePages: 8,
+  isNotTotalPages: false,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        'Default paginator showing the first page. Navigate using arrows or click page numbers directly.',
+    },
+  },
+};
+
+/** Disabled paginator - cannot be interacted with */
+export const Disabled = Template.bind({});
+Disabled.args = {
+  totalPages: 10,
+  currentPage: 1,
+  disabled: true,
+  maxVisiblePages: 8,
+  isNotTotalPages: false,
+};
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'Paginator in disabled state. Use during loading or when navigation is not allowed.',
+    },
+  },
+};
+
+/** Paginator showing middle pages */
+export const MiddlePage = Template.bind({});
+MiddlePage.args = {
+  totalPages: 10,
+  currentPage: 5,
+  disabled: false,
+  maxVisiblePages: 8,
+  isNotTotalPages: false,
+};
+MiddlePage.parameters = {
+  docs: {
+    description: {
+      story:
+        'Paginator with a middle page selected. Shows ellipsis when pages exceed visible limit.',
+    },
+  },
+};
+
+/** Paginator with many pages */
+export const ManyPages = Template.bind({});
+ManyPages.args = {
+  totalPages: 20,
+  currentPage: 10,
+  disabled: false,
+  maxVisiblePages: 8,
+  isNotTotalPages: false,
+};
+ManyPages.parameters = {
+  docs: {
+    description: {
+      story: 'Paginator handling a large number of pages with smart truncation.',
+    },
+  },
+};
+
+/** Interactive paginator with mock data */
+export const InteractiveWithData = TemplateWithData.bind({});
+InteractiveWithData.args = {
+  totalPages: 5,
+  currentPage: 1,
+  disabled: false,
+  maxVisiblePages: 8,
+  isNotTotalPages: false,
+};
+InteractiveWithData.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive paginator with mock data. Click on page numbers or arrows to see the content change.',
+    },
+  },
+};
+
+/** Cursor pagination mode - first page with more pages available */
+export const CursorPagination = Template.bind({});
+CursorPagination.args = {
+  totalPages: 2, // Simulates has_next: true
+  currentPage: 1,
+  disabled: false,
+  isNotTotalPages: true,
+};
+CursorPagination.parameters = {
+  docs: {
+    description: {
+      story:
+        'Cursor pagination mode on the first page. Only shows Previous/Next buttons, no page numbers. Used for APIs that return `has_next` and `next_cursor` instead of total pages.',
+    },
+  },
+};
+
+/** Cursor pagination - middle page with navigation */
+export const CursorPaginationMiddle = Template.bind({});
+CursorPaginationMiddle.args = {
+  totalPages: 4, // Simulates has_next: true on page 3
+  currentPage: 3,
+  disabled: false,
+  isNotTotalPages: true,
+};
+CursorPaginationMiddle.parameters = {
+  docs: {
+    description: {
+      story:
+        'Cursor pagination on a middle page. Both Previous and Next buttons are visible for navigation.',
+    },
+  },
+};
+
+/** Cursor pagination - last page (no more pages available) */
+export const CursorPaginationNoMore = Template.bind({});
+CursorPaginationNoMore.args = {
+  totalPages: 3, // Simulates has_next: false (totalPages === currentPage)
+  currentPage: 3,
+  disabled: false,
+  isNotTotalPages: true,
+};
+CursorPaginationNoMore.parameters = {
+  docs: {
+    description: {
+      story:
+        'Cursor pagination on the last page (has_next: false). The Next button is hidden since there are no more pages.',
+    },
+  },
+};
+
+/** Interactive cursor pagination with mock data */
+export const CursorPaginationInteractive = TemplateWithData.bind({});
+CursorPaginationInteractive.args = {
+  totalPages: 2, // Start with has_next: true
+  currentPage: 1,
+  disabled: false,
+  isNotTotalPages: true,
+};
+CursorPaginationInteractive.parameters = {
+  docs: {
+    description: {
+      story:
+        'Interactive cursor pagination with mock data. Click Next to advance pages. When you reach page 5, the Next button will be hidden (simulating has_next: false).',
+    },
+  },
+};

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

@@ -0,0 +1,85 @@
+import { Component, Input, Output, EventEmitter, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-dropi-paginator',
+  standalone: true,
+  imports: [CommonModule, IconComponent, TranslateModule],
+  templateUrl: './dropi-paginator.component.html',
+  styleUrls: ['./dropi-paginator.component.scss'],
+})
+export class DropiPaginatorComponent {
+  @Input() totalPages: number = 1;
+  @Input() currentPage: number = 1;
+  @Input() disabled: boolean = false;
+  @Input() maxVisiblePages: number = 8; // Máximo de páginas visibles (ajustable)
+  @Input() isNotTotalPages: boolean = false;
+  @Output() pageChange = new EventEmitter<number>();
+
+  constructor(translate: TranslateModule) {}
+
+  get pages(): (number | string)[] {
+    const pages: (number | string)[] = [];
+    const total = this.totalPages;
+    const current = this.currentPage;
+    const max = this.maxVisiblePages;
+    if (total <= max) {
+      // Si hay pocas páginas, mostrar todas
+      for (let i = 1; i <= total; i++) pages.push(i);
+      return pages;
+    }
+    const visible = max - 2; // Reservar espacio para el primer y último elemento
+    let start = Math.max(2, current - Math.floor(visible / 2));
+    let end = Math.min(total - 1, current + Math.floor(visible / 2));
+    if (start <= 2) {
+      start = 2;
+      end = start + visible - 1;
+    }
+    if (end >= total - 1) {
+      end = total - 1;
+      start = end - visible + 1;
+    }
+    pages.push(1);
+    if (start > 2) pages.push('...');
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (end < total - 1) pages.push('...');
+    pages.push(total);
+    return pages;
+  }
+
+  goToPage(page: number) {
+    if (!this.disabled && page !== this.currentPage) {
+      this.pageChange.emit(page);
+    }
+  }
+
+  prevPage() {
+    if ((!this.disabled && this.currentPage > 1) || (!this.isNotTotalPages && !this.disabled)) {
+      this.pageChange.emit(this.currentPage - 1);
+    }
+  }
+
+  nextPage() {
+    if (!this.disabled && (this.currentPage < this.totalPages || this.isNotTotalPages)) {
+      this.pageChange.emit(this.currentPage + 1);
+    }
+  }
+
+  goToFirstPage() {
+    if (this.currentPage !== 1) {
+      this.pageChange.emit(1);
+    }
+  }
+
+  goToLastPage() {
+    if (this.currentPage !== this.totalPages) {
+      this.pageChange.emit(this.totalPages);
+    }
+  }
+  showFirstLastButtons(): boolean {
+    // si esta en la primera o última página no se muestran los botones
+    return this.currentPage > 1 && this.currentPage < this.totalPages;
+  }
+}

package/src/components-source/dropi-phone-input/dropi-phone-input.component.html

@@ -0,0 +1,93 @@
+<div class="phone-input-container d-flex col-12">
+  <!-- <div class="country-select">
+    <ng-select
+      data-cy="area-code-input"
+      inputId="area-code"
+      [(ngModel)]="ngModelCodArea"
+      style="caret-color: transparent; max-width: fit-content"
+      (change)="cambioCod()"
+      [ngModelOptions]="{ standalone: true }"
+      [clearable]="false"
+      bindLabel="country"
+      [searchable]="true"
+      [multiple]="false"
+      class="ng-selected selectcountry"
+      [ngClass]="{
+        'is-invalid-country': isValidPhone === false
+      }"
+    >
+      <ng-option [value]="country.code" *ngFor="let country of countries">
+        <div class="d-flex flag-code">
+          <img
+            [src]="'https://flagsapi.com/' + country.flag + '/flat/24.png'"
+            [alt]="country.flag"
+          />
+          <p class="mb-0">{{ country.code }}</p>
+          <ng-template ng-header-tmp>
+            <div class="custom-arrow">
+              <i class="fa fa-chevron-down"></i>
+            </div>
+          </ng-template>
+        </div>
+      </ng-option>
+    </ng-select>
+  </div> -->
+
+  <div class="custom-select">
+    <button
+      type="button"
+      class="select-button"
+      [disabled]="disabled || disabledInput"
+      [ngClass]="{
+        'select-completed': !!selectedOption,
+        'select-invalid': hasError
+      }"
+      (click)="showOptions()"
+    >
+      <span *ngIf="selectedOption" style="display: flex; gap: 0.5rem">
+        <img [src]="'https://flagsapi.com/' + selectedOption.flag + '/flat/24.png'" alt="flag" />
+        {{ selectedOption.code }}
+      </span>
+      <app-icon
+        [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
+        width="20px"
+        height="20px"
+        color="Gray-Gray-500"
+      ></app-icon>
+    </button>
+    <ul class="select-dropdown" [ngClass]="isExpanded ? 'expanded-select' : 'collapsed-select'">
+      <li *ngFor="let option of countries">
+        <button
+          type="button"
+          class="option"
+          (click)="cambioCod(option)"
+          [disabled]="option.disabled"
+        >
+          <img [src]="'https://flagsapi.com/' + option.flag + '/flat/24.png'" alt="option.flag" />
+
+          {{ option.code | translate }}
+        </button>
+      </li>
+    </ul>
+  </div>
+
+  <input
+    data-cy="phone-input"
+    id="phone-input"
+    type="text"
+    class="form-control phone-input"
+    appNumericInput
+    [ngClass]="{
+      'is-invalid': isValidPhone === false || hasError
+    }"
+    [(ngModel)]="ngModelPhone"
+    (input)="cambioPhone()"
+    (keyup)="cambioPhone($event)"
+    (change)="cambioPhone()"
+    [placeholder]="phoneNumberPlaceholder"
+    (paste)="handlePaste($event)"
+    [maxlength]="maxLengthPhone"
+    data-cy="phone-input"
+    [disabled]="disabledInput"
+  />
+</div>