Moved pagination component to common ui

src/lib/pagination/pagination.component.html

@@ -0,0 +1,26 @@
+<div
+    id="pagination-prev-page-btn"
+    (click)="selectPage(currentPage - 1)"
+    [class.disabled]="currentPage < 1"
+    class="page"
+    translate="pagination.previous"
+></div>
+<span>|</span>
+<div
+    (click)="selectPage(page)"
+    *ngFor="let page of displayedPages"
+    [class.active]="page === currentPage"
+    [class.dots]="page === '...'"
+    class="page"
+    [id]="isNumber(page) ? 'pagination-select-page-' + page + '-btn' : 'pagination-pages-between'"
+>
+    {{ displayValue(page) }}
+</div>
+<span>|</span>
+<div
+    id="pagination-next-page-btn"
+    (click)="selectPage(currentPage + 1)"
+    [class.disabled]="currentPage === totalPages - 1"
+    class="page"
+    translate="pagination.next"
+></div>

src/lib/pagination/pagination.component.scss

@@ -0,0 +1,27 @@
+:host {
+    display: flex;
+
+    > *:not(:last-child) {
+        margin-right: 12px;
+    }
+
+    .disabled,
+    span {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .page {
+        cursor: pointer;
+
+        &.disabled,
+        &.dots {
+            cursor: default;
+        }
+
+        &.active {
+            color: var(--iqser-primary);
+            font-weight: bold;
+        }
+    }
+}

src/lib/pagination/pagination.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { NgForOf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'iqser-pagination',
+    templateUrl: './pagination.component.html',
+    styleUrls: ['./pagination.component.scss'],
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgForOf, TranslateModule],
+})
+export class PaginationComponent {
+    displayedPages: (number | string)[] = [];
+    @Output() pageChanged = new EventEmitter<number>();
+
+    private _currentPage: number = 0;
+
+    get currentPage() {
+        return this._currentPage;
+    }
+
+    private _totalPages: number = 0;
+
+    get totalPages() {
+        return this._totalPages;
+    }
+
+    @Input()
+    set settings(value: { currentPage: number; totalPages: number }) {
+        this._currentPage = value.currentPage;
+        this._totalPages = value.totalPages;
+        this._updatePagesArray();
+    }
+
+    selectPage(page: number | string) {
+        if (page !== '...') {
+            this.pageChanged.emit(page as number);
+        }
+    }
+
+    displayValue(page: number | string) {
+        return page === '...' ? page : (page as number) + 1;
+    }
+
+    isNumber(page: number | string) {
+        return Number.isInteger(page);
+    }
+
+    private _updatePagesArray() {
+        this.displayedPages = [0];
+        if (Math.max(1, this.currentPage - 1) > 1) {
+            this.displayedPages.push('...');
+        }
+        for (let page = Math.max(1, this.currentPage - 1); page <= Math.min(this.currentPage + 1, this.totalPages - 1); ++page) {
+            this.displayedPages.push(page);
+        }
+        if (Math.min(this.currentPage + 1, this.totalPages - 1) !== this.totalPages - 1) {
+            if (this.currentPage + 1 < this.totalPages - 2) {
+                this.displayedPages.push('...');
+            }
+            this.displayedPages.push(this.totalPages - 1);
+        }
+    }
+}