refactor: standalone pagination components (#9480)

lib/core/src/lib/pagination/infinite-pagination.component.ts

@@ -19,8 +19,15 @@
 /* eslint-disable rxjs/no-subject-value */
 
 import {
-    ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter,
+    ChangeDetectionStrategy,
-    Input, OnInit, Output, OnDestroy, ViewEncapsulation
+    ChangeDetectorRef,
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    OnDestroy,
+    ViewEncapsulation
 } from '@angular/core';
 
 import { PaginatedComponent } from './paginated-component.interface';
@@ -30,6 +37,10 @@ import { RequestPaginationModel } from '../models/request-pagination.model';
 import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
 import { PaginationModel } from '../models/pagination.model';
 import { takeUntil } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-infinite-pagination',
@@ -37,10 +48,11 @@ import { takeUntil } from 'rxjs/operators';
     templateUrl: './infinite-pagination.component.html',
     styleUrls: ['./infinite-pagination.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, MatButtonModule, MatProgressBarModule, TranslateModule]
 })
 export class InfinitePaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
-
     static DEFAULT_PAGINATION: PaginationModel = new PaginationModel({
         skipCount: 0,
         maxItems: 25,
@@ -55,18 +67,16 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
     set target(target: PaginatedComponent) {
         if (target) {
             this._target = target;
-            target.pagination
+            target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => {
-                .pipe(takeUntil(this.onDestroy$))
+                this.isLoading = false;
-                .subscribe(pagination => {
+                this.pagination = pagination;
-                    this.isLoading = false;
-                    this.pagination = pagination;
 
-                    if (!this.pagination.hasMoreItems) {
+                if (!this.pagination.hasMoreItems) {
-                        this.pagination.hasMoreItems = false;
+                    this.pagination.hasMoreItems = false;
-                    }
+                }
 
-                    this.cdr.detectChanges();
+                this.cdr.detectChanges();
-                });
+            });
         }
     }
 
@@ -93,9 +103,7 @@ export class InfinitePaginationComponent implements OnInit, OnDestroy, Paginatio
         merge: true
     };
 
-    constructor(private cdr: ChangeDetectorRef,
+    constructor(private cdr: ChangeDetectorRef, private userPreferencesService: UserPreferencesService) {}
-                private userPreferencesService: UserPreferencesService) {
-    }
 
     ngOnInit() {
         this.userPreferencesService

lib/core/src/lib/pagination/pagination.component.ts

@@ -15,20 +15,32 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation, OnDestroy, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2 } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewEncapsulation,
+    OnDestroy,
+    ElementRef,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Renderer2
+} from '@angular/core';
 import { PaginatedComponent } from './paginated-component.interface';
 import { PaginationComponentInterface } from './pagination-component.interface';
 import { Subject } from 'rxjs';
 import { PaginationModel } from '../models/pagination.model';
 import { UserPreferencesService, UserPreferenceValues } from '../common/services/user-preferences.service';
 import { takeUntil } from 'rxjs/operators';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 
-export type PaginationAction =
+export type PaginationAction = 'NEXT_PAGE' | 'PREV_PAGE' | 'CHANGE_PAGE_SIZE' | 'CHANGE_PAGE_NUMBER';
-    | 'NEXT_PAGE'
-    | 'PREV_PAGE'
-    | 'CHANGE_PAGE_SIZE'
-    | 'CHANGE_PAGE_NUMBER';
 
 export const DEFAULT_PAGINATION: PaginationModel = {
     skipCount: 0,
@@ -44,7 +56,9 @@ export const DEFAULT_PAGINATION: PaginationModel = {
     templateUrl: './pagination.component.html',
     styleUrls: ['./pagination.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatMenuModule]
 })
 export class PaginationComponent implements OnInit, OnDestroy, PaginationComponentInterface {
     private _pagination: PaginationModel;
@@ -110,14 +124,14 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
         private renderer: Renderer2,
         private cdr: ChangeDetectorRef,
         private userPreferencesService: UserPreferencesService,
-        private translate: TranslateService) {
+        private translate: TranslateService
-    }
+    ) {}
 
     ngOnInit() {
         this.userPreferencesService
             .select(UserPreferenceValues.PaginationSize)
             .pipe(takeUntil(this.onDestroy$))
-            .subscribe(maxItems => {
+            .subscribe((maxItems) => {
                 this.pagination = {
                     ...DEFAULT_PAGINATION,
                     ...this.pagination,
@@ -130,17 +144,15 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
         }
 
         if (this.target) {
-            this.target.pagination
+            this.target.pagination.pipe(takeUntil(this.onDestroy$)).subscribe((pagination) => {
-                .pipe(takeUntil(this.onDestroy$))
+                if (pagination.count === 0 && !this.isFirstPage) {
-                .subscribe(pagination => {
+                    this.goPrevious();
-                    if (pagination.count === 0 && !this.isFirstPage) {
+                }
-                        this.goPrevious();
-                    }
 
-                    this.pagination = {
+                this.pagination = {
-                        ...pagination
+                    ...pagination
-                    };
+                };
-                });
+            });
         }
 
         if (!this.pagination) {
@@ -153,17 +165,13 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
     get lastPage(): number {
         const { maxItems, totalItems } = this.pagination;
 
-        return (totalItems && maxItems)
+        return totalItems && maxItems ? Math.ceil(totalItems / maxItems) : 1;
-            ? Math.ceil(totalItems / maxItems)
-            : 1;
     }
 
     get current(): number {
         const { maxItems, skipCount } = this.pagination;
 
-        return (skipCount && maxItems)
+        return skipCount && maxItems ? Math.floor(skipCount / maxItems) + 1 : 1;
-            ? Math.floor(skipCount / maxItems) + 1
-            : 1;
     }
 
     get isLastPage(): boolean {
@@ -211,7 +219,7 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
     get pages(): number[] {
         return Array(this.lastPage)
             .fill('n')
-            .map((_, index) => (index + 1));
+            .map((_, index) => index + 1);
     }
 
     get limitedPages(): number[] {

lib/core/src/lib/pagination/pagination.module.ts

@@ -15,26 +15,12 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { MaterialModule } from '../material.module';
 import { InfinitePaginationComponent } from './infinite-pagination.component';
 import { PaginationComponent } from './pagination.component';
 
 @NgModule({
-    imports: [
+    imports: [InfinitePaginationComponent, PaginationComponent],
-        CommonModule,
+    exports: [InfinitePaginationComponent, PaginationComponent]
-        MaterialModule,
-        TranslateModule
-    ],
-    declarations: [
-        InfinitePaginationComponent,
-        PaginationComponent
-    ],
-    exports: [
-        InfinitePaginationComponent,
-        PaginationComponent
-    ]
 })
 export class PaginationModule {}