valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/pagination/pagination.component.ts

@@ -0,0 +1,194 @@
+import { Component, Input, OnChanges, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { IonButton, IonIcon } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PaginationMetadata, PageChangeEvent } from './types';
+import { addIcons } from 'ionicons';
+import { chevronBack, chevronForward, playBack, playForward } from 'ionicons/icons';
+
+addIcons({ chevronBack, chevronForward, playBack, playForward });
+
+@Component({
+  selector: 'val-pagination',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon],
+  template: `
+    <div class="pagination-container" [class.disabled]="props.disabled">
+      @if (props.showFirstLast !== false) {
+        <ion-button
+          fill="clear"
+          [size]="props.size || 'default'"
+          [color]="props.color || 'primary'"
+          [disabled]="props.disabled || props.currentPage <= 1"
+          (click)="goToPage(1)"
+        >
+          <ion-icon slot="icon-only" name="play-back"></ion-icon>
+        </ion-button>
+      }
+
+      @if (props.showPrevNext !== false) {
+        <ion-button
+          fill="clear"
+          [size]="props.size || 'default'"
+          [color]="props.color || 'primary'"
+          [disabled]="props.disabled || props.currentPage <= 1"
+          (click)="goToPage(props.currentPage - 1)"
+        >
+          <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
+        </ion-button>
+      }
+
+      @for (page of visiblePages; track page) {
+        @if (page === -1) {
+          <span class="ellipsis">...</span>
+        } @else {
+          <ion-button
+            [fill]="page === props.currentPage ? 'solid' : 'clear'"
+            [size]="props.size || 'default'"
+            [color]="props.color || 'primary'"
+            [disabled]="props.disabled"
+            (click)="goToPage(page)"
+          >
+            {{ page }}
+          </ion-button>
+        }
+      }
+
+      @if (props.showPrevNext !== false) {
+        <ion-button
+          fill="clear"
+          [size]="props.size || 'default'"
+          [color]="props.color || 'primary'"
+          [disabled]="props.disabled || props.currentPage >= totalPages"
+          (click)="goToPage(props.currentPage + 1)"
+        >
+          <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
+        </ion-button>
+      }
+
+      @if (props.showFirstLast !== false) {
+        <ion-button
+          fill="clear"
+          [size]="props.size || 'default'"
+          [color]="props.color || 'primary'"
+          [disabled]="props.disabled || props.currentPage >= totalPages"
+          (click)="goToPage(totalPages)"
+        >
+          <ion-icon slot="icon-only" name="play-forward"></ion-icon>
+        </ion-button>
+      }
+
+      @if (props.showPageInfo) {
+        <span class="page-info">Page {{ props.currentPage }} of {{ totalPages }}</span>
+      }
+    </div>
+  `,
+  styleUrls: ['./pagination.component.scss'],
+})
+/**
+ * val-pagination
+ *
+ * A pagination component for navigating through paged content.
+ *
+ * @example Basic usage
+ * <val-pagination [props]="{
+ *   currentPage: 1,
+ *   totalPages: 10,
+ *   showPageInfo: true
+ * }" (pageChange)="onPageChange($event)"></val-pagination>
+ *
+ * @example With total items
+ * <val-pagination [props]="{
+ *   currentPage: 1,
+ *   totalItems: 100,
+ *   pageSize: 10,
+ *   maxVisiblePages: 5
+ * }"></val-pagination>
+ *
+ * @input props: PaginationMetadata - Configuration for pagination
+ * @output pageChange: PageChangeEvent - Emits when page changes
+ */
+export class PaginationComponent implements OnChanges {
+  @Input() props: PaginationMetadata;
+
+  @Output() pageChange = new EventEmitter<PageChangeEvent>();
+
+  visiblePages: number[] = [];
+  totalPages: number = 1;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.calculateTotalPages();
+      this.calculateVisiblePages();
+    }
+  }
+
+  goToPage(page: number): void {
+    if (page < 1 || page > this.totalPages || page === this.props.currentPage) {
+      return;
+    }
+
+    const event: PageChangeEvent = {
+      page,
+      previousPage: this.props.currentPage,
+      pageSize: this.props.pageSize || 10,
+    };
+
+    this.pageChange.emit(event);
+  }
+
+  private calculateTotalPages(): void {
+    if (this.props.totalPages) {
+      this.totalPages = this.props.totalPages;
+    } else if (this.props.totalItems && this.props.pageSize) {
+      this.totalPages = Math.ceil(this.props.totalItems / this.props.pageSize);
+    } else {
+      this.totalPages = 1;
+    }
+  }
+
+  private calculateVisiblePages(): void {
+    const maxVisible = this.props.maxVisiblePages || 5;
+    const current = this.props.currentPage;
+    const total = this.totalPages;
+
+    if (total <= maxVisible) {
+      this.visiblePages = Array.from({ length: total }, (_, i) => i + 1);
+      return;
+    }
+
+    const pages: number[] = [];
+    const half = Math.floor(maxVisible / 2);
+
+    let start = Math.max(1, current - half);
+    let end = Math.min(total, start + maxVisible - 1);
+
+    if (end - start < maxVisible - 1) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    // Always show first page
+    if (start > 1) {
+      pages.push(1);
+      if (start > 2) {
+        pages.push(-1); // Ellipsis
+      }
+    }
+
+    // Middle pages
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) {
+        pages.push(i);
+      }
+    }
+
+    // Always show last page
+    if (end < total) {
+      if (end < total - 1) {
+        pages.push(-1); // Ellipsis
+      }
+      pages.push(total);
+    }
+
+    this.visiblePages = pages;
+  }
+}

package/src/lib/components/molecules/pagination/pagination.stories.ts

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { PaginationComponent } from './pagination.component';
+
+const meta: Meta<PaginationComponent> = {
+  title: 'Molecules/Pagination',
+  component: PaginationComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, PaginationComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Pagination configuration object',
+      control: 'object',
+    },
+    pageChange: {
+      action: 'pageChange',
+      description: 'Event emitted when page changes',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-pagination
+
+A pagination component for navigating through paged content.
+
+### Usage
+
+\`\`\`html
+<val-pagination [props]="{
+  currentPage: 1,
+  totalPages: 10,
+  showPageInfo: true
+}" (pageChange)="onPageChange($event)"></val-pagination>
+\`\`\`
+
+### Features
+
+- First/Last page buttons
+- Previous/Next navigation
+- Visible page numbers with ellipsis
+- Page info display
+- Configurable button count
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<PaginationComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      currentPage: 1,
+      totalPages: 10,
+    },
+  },
+};
+
+export const MiddlePage: Story = {
+  args: {
+    props: {
+      currentPage: 5,
+      totalPages: 10,
+    },
+  },
+};
+
+export const LastPage: Story = {
+  args: {
+    props: {
+      currentPage: 10,
+      totalPages: 10,
+    },
+  },
+};
+
+export const WithPageInfo: Story = {
+  args: {
+    props: {
+      currentPage: 3,
+      totalPages: 15,
+      showPageInfo: true,
+    },
+  },
+};
+
+export const ManyPages: Story = {
+  args: {
+    props: {
+      currentPage: 25,
+      totalPages: 100,
+      maxVisiblePages: 5,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'With many pages, ellipsis is shown to indicate hidden pages.',
+      },
+    },
+  },
+};
+
+export const FewPages: Story = {
+  args: {
+    props: {
+      currentPage: 2,
+      totalPages: 3,
+    },
+  },
+};
+
+export const WithTotalItems: Story = {
+  args: {
+    props: {
+      currentPage: 1,
+      totalPages: 0,
+      totalItems: 250,
+      pageSize: 10,
+      showPageInfo: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can use `totalItems` and `pageSize` instead of `totalPages`.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    props: {
+      currentPage: 3,
+      totalPages: 10,
+      size: 'small',
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    props: {
+      currentPage: 3,
+      totalPages: 10,
+      size: 'large',
+    },
+  },
+};
+
+export const SecondaryColor: Story = {
+  args: {
+    props: {
+      currentPage: 5,
+      totalPages: 10,
+      color: 'secondary',
+    },
+  },
+};
+
+export const NoFirstLast: Story = {
+  args: {
+    props: {
+      currentPage: 5,
+      totalPages: 10,
+      showFirstLast: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hide first/last buttons with `showFirstLast: false`.',
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    props: {
+      currentPage: 3,
+      totalPages: 10,
+      disabled: true,
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Basic Pagination</h3>
+        <val-pagination [props]="{
+          currentPage: 1,
+          totalPages: 10
+        }"></val-pagination>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Middle Page</h3>
+        <val-pagination [props]="{
+          currentPage: 5,
+          totalPages: 10
+        }"></val-pagination>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Page Info</h3>
+        <val-pagination [props]="{
+          currentPage: 3,
+          totalPages: 15,
+          showPageInfo: true
+        }"></val-pagination>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Many Pages (with ellipsis)</h3>
+        <val-pagination [props]="{
+          currentPage: 50,
+          totalPages: 100,
+          maxVisiblePages: 5
+        }"></val-pagination>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Sizes</h3>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Small</p>
+            <val-pagination [props]="{ currentPage: 2, totalPages: 5, size: 'small' }"></val-pagination>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Default</p>
+            <val-pagination [props]="{ currentPage: 2, totalPages: 5 }"></val-pagination>
+          </div>
+          <div>
+            <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Large</p>
+            <val-pagination [props]="{ currentPage: 2, totalPages: 5, size: 'large' }"></val-pagination>
+          </div>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Colors</h3>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <val-pagination [props]="{ currentPage: 3, totalPages: 7, color: 'primary' }"></val-pagination>
+          <val-pagination [props]="{ currentPage: 3, totalPages: 7, color: 'secondary' }"></val-pagination>
+          <val-pagination [props]="{ currentPage: 3, totalPages: 7, color: 'success' }"></val-pagination>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Minimal (no first/last)</h3>
+        <val-pagination [props]="{
+          currentPage: 3,
+          totalPages: 10,
+          showFirstLast: false
+        }"></val-pagination>
+      </div>
+    `,
+  }),
+};

package/src/lib/components/molecules/pagination/types.ts

@@ -0,0 +1,43 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Metadata for the pagination component.
+ */
+export interface PaginationMetadata {
+  /** Current page number (1-based) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Items per page */
+  pageSize?: number;
+  /** Total number of items (alternative to totalPages) */
+  totalItems?: number;
+  /** Maximum visible page buttons */
+  maxVisiblePages?: number;
+  /** Show first/last page buttons */
+  showFirstLast?: boolean;
+  /** Show previous/next buttons */
+  showPrevNext?: boolean;
+  /** Pagination color */
+  color?: Color;
+  /** Size variant */
+  size?: 'small' | 'default' | 'large';
+  /** Disable pagination */
+  disabled?: boolean;
+  /** Show page info text (e.g., "Page 1 of 10") */
+  showPageInfo?: boolean;
+  /** Unique token identifier */
+  token?: string;
+}
+
+/**
+ * Event emitted when page changes.
+ */
+export interface PageChangeEvent {
+  /** New page number */
+  page: number;
+  /** Previous page number */
+  previousPage: number;
+  /** Page size */
+  pageSize: number;
+}