diff --git a/src/components/sq-pagination/sq-pagination.component.html b/src/components/sq-pagination/sq-pagination.component.html
new file mode 100644
index 0000000..2299c49
--- /dev/null
+++ b/src/components/sq-pagination/sq-pagination.component.html
@@ -0,0 +1,45 @@
+
+
diff --git a/src/components/sq-pagination/sq-pagination.component.md b/src/components/sq-pagination/sq-pagination.component.md
new file mode 100644
index 0000000..1c2b175
--- /dev/null
+++ b/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
+
+```
diff --git a/src/components/sq-pagination/sq-pagination.component.scss b/src/components/sq-pagination/sq-pagination.component.scss
new file mode 100644
index 0000000..f5c3755
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/sq-pagination/sq-pagination.component.ts b/src/components/sq-pagination/sq-pagination.component.ts
new file mode 100644
index 0000000..09c7394
--- /dev/null
+++ b/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 = new EventEmitter()
+
+ 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)
+ }
+}
diff --git a/src/main.module.ts b/src/main.module.ts
index fe5cda8..2bb19c4 100644
--- a/src/main.module.ts
+++ b/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 { }
diff --git a/src/public-api.ts b/src/public-api.ts
index bd31e81..d9013d0 100644
--- a/src/public-api.ts
+++ b/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'