add pagination component

src/components/sq-pagination/sq-pagination.component.html

@@ -0,0 +1,45 @@
+
+<div class='pagination-wrapper {{ customClass }}'>
+  <ul class="pagination">
+    <li class='page-item' [ngClass]="{
+      'disabled': page === 1,
+    }">
+      <button (click)='handlePageChange(page - 1)'>
+        <i class="fa-solid fa-chevrons-left"></i>
+      </button>
+    </li>
+
+    <li class="disabled" *ngIf="showDotMin()">
+      <button>
+        <i class="fa-solid fa-ellipsis"></i>
+      </button>
+    </li>
+
+    <ng-container *ngFor="let p of pages">
+      <li
+        [ngClass]="{
+          'active': page === p,
+        }"
+        *ngIf="canShow(p)"
+      >
+        <button (click)='handlePageChange(p)'>
+          {{ p }}
+        </button>
+      </li>
+    </ng-container>
+
+    <li class="disabled" *ngIf="showDotMax()">
+      <button>
+        <i class="fa-solid fa-ellipsis"></i>
+      </button>
+    </li>
+
+    <li class='page-item' [ngClass]="{
+      'disabled': page >= totalPages,
+    }">
+      <button (click)='handlePageChange(page + 1)'>
+        <i class="fa-solid fa-chevrons-right"></i>
+      </button>
+    </li>
+  </ul>
+</div>

src/components/sq-pagination/sq-pagination.component.md

@@ -0,0 +1,41 @@
+# Pagination
+
+## Inputs/Props
+
+### 1. customClass
+
+- description: Add custom class to the component
+- type: `string`
+
+### 2. currentPage
+
+- description: Current page
+- type: `number`
+
+### 3. totalPages
+
+- description: Total pages
+- type: `number`
+
+### 4. showPages
+
+- description: Number of pages to show
+- type: `number`
+
+## Outputs
+
+### 1. pageChange
+
+- description: Emit when the pagination buttons is triggers
+- type: `number`
+
+## Example
+
+```html
+<sq-pagination
+  [totalPages]='18'
+  (pageChange)='nextPageStories($event)'
+  [showPages]='5'
+  [currentPage]='1'
+><sq-pagination>
+```

src/components/sq-pagination/sq-pagination.component.scss

@@ -0,0 +1,7 @@
+.pagination-wrapper {
+  width: 100%;
+  text-align: center;
+}
+.pagination li.active {
+  color: var(--primary_color);
+}

src/components/sq-pagination/sq-pagination.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'
+import { useMemo } from '../../helpers/memo.helper'
+
+@Component({
+  selector: 'sq-pagination',
+  templateUrl: './sq-pagination.component.html',
+  styleUrls: ['./sq-pagination.component.scss']
+})
+export class SqPaginationComponent implements OnChanges {
+  @Input() customClass = ''
+  @Input() currentPage = 1
+  @Input() totalPages = 1
+  @Input() showPages = 5
+
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>()
+
+  page = this.currentPage
+  pages = Array.from({ length: this.totalPages }, (_, i) => i + 1)
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['currentPage'] && changes['currentPage'].currentValue !== changes['currentPage'].previousValue) {
+      this.page = this.currentPage
+    }
+    if (changes['totalPages'] && changes['totalPages'].currentValue !== changes['totalPages'].previousValue) {
+      this.pages = Array.from({ length: this.totalPages }, (_, i) => i + 1)
+    }
+  }
+
+  canShow = useMemo((actualPage: number) => {
+    const half = Math.floor(this.showPages / 2)
+    return actualPage === this.currentPage || (actualPage >= this.currentPage - half && actualPage <= this.currentPage + half)
+  })
+
+  showDotMax = useMemo(() => {
+    const half = Math.floor(this.showPages / 2)
+    return this.currentPage + half < this.totalPages
+  })
+
+  showDotMin = useMemo(() => {
+    const half = Math.floor(this.showPages / 2)
+    return this.currentPage - half > 1
+  })
+
+  handlePageChange(newPage: number) {
+    if (newPage < 1 || newPage > this.totalPages) {
+      return
+    }
+    this.page = newPage
+    const searchParams = new URLSearchParams(window.location.search)
+    searchParams.set('page', newPage.toString())
+    window.location.search = searchParams.toString()
+    this.pageChange.emit(newPage)
+  }
+}

src/main.module.ts

@@ -14,6 +14,7 @@ import { SqInfinityComponent } from './components/sq-infinity-scroll/sq-infinity
 import { SqOverlayComponent } from './components/sq-overlay/sq-overlay.component'
 import { SqModalComponent } from './components/sq-modal/sq-modal.component'
 import { SqCollapseComponent } from './components/sq-accordion/sq-collapse/sq-collapse.component'
+import { SqPaginationComponent } from './components/sq-pagination/sq-pagination.component'
 
 @NgModule({
   declarations: [
@@ -30,7 +31,8 @@ import { SqCollapseComponent } from './components/sq-accordion/sq-collapse/sq-co
     SqInfinityComponent,
     SqOverlayComponent,
     SqModalComponent,
-    SqCollapseComponent
+    SqCollapseComponent,
+    SqPaginationComponent
   ],
   imports: [
     CommonModule
@@ -49,7 +51,8 @@ import { SqCollapseComponent } from './components/sq-accordion/sq-collapse/sq-co
     SqInfinityComponent,
     SqOverlayComponent,
     SqModalComponent,
-    SqCollapseComponent
+    SqCollapseComponent,
+    SqPaginationComponent
   ]
 })
 export class SquidCSSModule { }

src/public-api.ts

@@ -14,6 +14,7 @@ export * from './components/sq-overlay/sq-overlay.component'
 export * from './components/sq-modal/sq-modal.component'
 export * from './components/sq-accordion/sq-collapse/sq-collapse.component'
 export * from './components/sq-accordion/sq-accordion.component'
+export * from './components/sq-pagination/sq-pagination.component'
 
 export * from './directives/sq-tooltip/sq-tooltip.directive'