@slickgrid-universal/pagination-component 5.7.0 → 5.9.0

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC"}

package/dist/types/slick-pagination.component.d.ts

@@ -1,15 +1,12 @@
-import type { GridOption, Locale, PaginationService, PubSubService, ServicePagination, SharedService, SlickGrid, Subscription, TranslaterService } from '@slickgrid-universal/common';
+import type { GridOption, Locale, BasePaginationComponent, PaginationService, PubSubService, PaginationMetadata, SlickGrid, Subscription, TranslaterService } from '@slickgrid-universal/common';
 import { BindingEventService, BindingHelper } from '@slickgrid-universal/binding';
-export declare class SlickPaginationComponent {
-    protected readonly paginationService: PaginationService;
-    protected readonly pubSubService: PubSubService;
-    protected readonly sharedService: SharedService;
-    protected readonly translaterService?: TranslaterService | undefined;
+export declare class SlickPaginationComponent implements BasePaginationComponent {
     protected _bindingHelper: BindingHelper;
     protected _bindingEventService: BindingEventService;
     protected _paginationElement: HTMLDivElement;
     protected _enableTranslate: boolean;
-    protected _gridParentContainerElm?: HTMLElement;
+    protected _grid: SlickGrid;
+    protected _gridContainerElm?: HTMLElement;
     protected _itemPerPageElm: HTMLSelectElement;
     protected _spanInfoFromToElm: HTMLSpanElement;
     protected _seekFirstElm: HTMLLIElement;
@@ -17,7 +14,10 @@ export declare class SlickPaginationComponent {
     protected _seekNextElm: HTMLLIElement;
     protected _seekEndElm: HTMLLIElement;
     protected _subscriptions: Subscription[];
-    currentPagination: ServicePagination;
+    protected _paginationService: PaginationService;
+    protected _pubSubService: PubSubService;
+    protected _translaterService?: TranslaterService;
+    currentPagination: PaginationMetadata;
     firstButtonClasses: string;
     lastButtonClasses: string;
     prevButtonClasses: string;
@@ -26,7 +26,7 @@ export declare class SlickPaginationComponent {
     textItems: string;
     textOf: string;
     textPage: string;
-    constructor(paginationService: PaginationService, pubSubService: PubSubService, sharedService: SharedService, translaterService?: TranslaterService | undefined);
+    constructor();
     get availablePageSizes(): number[];
     get dataFrom(): number;
     get dataTo(): number;
@@ -34,15 +34,20 @@ export declare class SlickPaginationComponent {
     set itemsPerPage(count: number);
     get pageCount(): number;
     get pageNumber(): number;
-    get grid(): SlickGrid;
+    /** Getter for the Grid Options pulled through the Grid Object */
     get gridOptions(): GridOption;
     get gridUid(): string;
     get locales(): Locale;
     get totalItems(): number;
     get isLeftPaginationDisabled(): boolean;
     get isRightPaginationDisabled(): boolean;
+    init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService, translaterService?: TranslaterService | undefined): void;
+    /** dispose of all Subscriptions, DOM element & bindings */
     dispose(): void;
-    renderPagination(gridParentContainerElm: HTMLElement): void;
+    /** dispose of the DOM element & bindings only (regular PubSub subscription will be preserved) */
+    disposeDom(): void;
+    /** render the Pagination in the DOM with all events & bindings */
+    renderPagination(containerElm: HTMLElement): void;
     /** Render and fill the Page Sizes <select> element */
     renderPageSizes(): void;
     /** Add some DOM Element bindings */

package/dist/types/slick-pagination.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slick-pagination.component.d.ts","sourceRoot":"","sources":["../../src/slick-pagination.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"slick-pagination.component.d.ts","sourceRoot":"","sources":["../../src/slick-pagination.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,MAAM,EACN,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,YAAY,EACZ,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElF,qBAAa,wBAAyB,YAAW,uBAAuB;IACtE,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC;IACxC,SAAS,CAAC,oBAAoB,EAAE,mBAAmB,CAAC;IACpD,SAAS,CAAC,kBAAkB,EAAG,cAAc,CAAC;IAC9C,SAAS,CAAC,gBAAgB,UAAS;IACnC,SAAS,CAAC,KAAK,EAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC1C,SAAS,CAAC,eAAe,EAAG,iBAAiB,CAAC;IAC9C,SAAS,CAAC,kBAAkB,EAAG,eAAe,CAAC;IAC/C,SAAS,CAAC,aAAa,EAAG,aAAa,CAAC;IACxC,SAAS,CAAC,YAAY,EAAG,aAAa,CAAC;IACvC,SAAS,CAAC,YAAY,EAAG,aAAa,CAAC;IACvC,SAAS,CAAC,WAAW,EAAG,aAAa,CAAC;IACtC,SAAS,CAAC,cAAc,EAAE,YAAY,EAAE,CAAM;IAC9C,SAAS,CAAC,kBAAkB,EAAG,iBAAiB,CAAC;IACjD,SAAS,CAAC,cAAc,EAAG,aAAa,CAAC;IACzC,SAAS,CAAC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;IACjD,iBAAiB,EAAS,kBAAkB,CAAC;IAC7C,kBAAkB,SAAM;IACxB,iBAAiB,SAAM;IACvB,iBAAiB,SAAM;IACvB,iBAAiB,SAAM;IAGvB,gBAAgB,SAAoB;IACpC,SAAS,SAAW;IACpB,MAAM,SAAQ;IACd,QAAQ,SAAU;;IAOlB,IAAI,kBAAkB,IAAI,MAAM,EAAE,CAEjC;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,iEAAiE;IACjE,IAAI,WAAW,IAAI,UAAU,CAE5B;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,IAAI,MAAM,CAGpB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,IAAI,wBAAwB,IAAI,OAAO,CAEtC;IAED,IAAI,yBAAyB,IAAI,OAAO,CAEvC;IAED,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAsClJ,2DAA2D;IAC3D,OAAO,IAAI,IAAI;IAKf,iGAAiG;IACjG,UAAU,IAAI,IAAI;IAMlB,kEAAkE;IAClE,gBAAgB,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI;IA6CjD,sDAAsD;IACtD,eAAe,IAAI,IAAI;IAQvB,oCAAoC;IACpC,WAAW,IAAI,IAAI;IAqBnB,2CAA2C;IAC3C,iBAAiB,IAAI,IAAI;IAQzB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAM1C,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMzC,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMzC,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAM7C,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAI7C,kBAAkB,CAAC,KAAK,EAAI;QAAE,MAAM,EAAE,GAAG,CAAC;KAAE,GAAG,IAAI;IAInD,+HAA+H;IAC/H,wBAAwB,IAAI,IAAI;IAmBhC,sCAAsC;IACtC,SAAS,CAAC,yBAAyB,IAAI,cAAc;IAarD,SAAS,CAAC,uBAAuB,IAAI,cAAc;IA+BnD,SAAS,CAAC,+BAA+B,IAAI,eAAe;IAwB5D,SAAS,CAAC,0BAA0B,IAAI,IAAI;CAM7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slickgrid-universal/pagination-component",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "description": "Slick Pagination Component - Vanilla Implementation of a Pagination Component",
   "main": "./dist/cjs/index.js",
   "types": "./dist/types/index.d.ts",
@@ -38,8 +38,8 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/binding": "~5.7.0",
-    "@slickgrid-universal/common": "~5.7.0"
+    "@slickgrid-universal/binding": "~5.9.0",
+    "@slickgrid-universal/common": "~5.9.0"
   },
-  "gitHead": "f5b514677e13f20273ee6e5e4f5437648e2744b8"
+  "gitHead": "2f6ea0833a0fd3b59e71c5cf2e228a57afbfc53a"
 }

package/src/index.ts

@@ -1 +1 @@
-export * from './slick-pagination.component';
+export * from './slick-pagination.component.js';

package/src/slick-pagination.component.ts

@@ -1,10 +1,10 @@
 import type {
   GridOption,
   Locale,
+  BasePaginationComponent,
   PaginationService,
   PubSubService,
-  ServicePagination,
-  SharedService,
+  PaginationMetadata,
   SlickGrid,
   Subscription,
   TranslaterService,
@@ -12,12 +12,13 @@ import type {
 import { Constants, createDomElement, getTranslationPrefix } from '@slickgrid-universal/common';
 import { BindingEventService, BindingHelper } from '@slickgrid-universal/binding';
 
-export class SlickPaginationComponent {
+export class SlickPaginationComponent implements BasePaginationComponent {
   protected _bindingHelper: BindingHelper;
   protected _bindingEventService: BindingEventService;
   protected _paginationElement!: HTMLDivElement;
   protected _enableTranslate = false;
-  protected _gridParentContainerElm?: HTMLElement;
+  protected _grid!: SlickGrid;
+  protected _gridContainerElm?: HTMLElement;
   protected _itemPerPageElm!: HTMLSelectElement;
   protected _spanInfoFromToElm!: HTMLSpanElement;
   protected _seekFirstElm!: HTMLLIElement;
@@ -25,7 +26,10 @@ export class SlickPaginationComponent {
   protected _seekNextElm!: HTMLLIElement;
   protected _seekEndElm!: HTMLLIElement;
   protected _subscriptions: Subscription[] = [];
-  currentPagination: ServicePagination;
+  protected _paginationService!: PaginationService;
+  protected _pubSubService!: PubSubService;
+  protected _translaterService?: TranslaterService;
+  currentPagination = {} as PaginationMetadata;
   firstButtonClasses = '';
   lastButtonClasses = '';
   prevButtonClasses = '';
@@ -37,81 +41,45 @@ export class SlickPaginationComponent {
   textOf = 'of';
   textPage = 'Page';
 
-  constructor(protected readonly paginationService: PaginationService, protected readonly pubSubService: PubSubService, protected readonly sharedService: SharedService, protected readonly translaterService?: TranslaterService | undefined) {
+  constructor() {
     this._bindingHelper = new BindingHelper();
     this._bindingEventService = new BindingEventService();
-    this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `;
-    this.currentPagination = this.paginationService.getFullPagination();
-    this._enableTranslate = this.gridOptions?.enableTranslate ?? false;
-
-    if (this._enableTranslate && (!this.translaterService || !this.translaterService.translate)) {
-      throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
-    }
-    this.translatePaginationTexts();
-
-    if (this._enableTranslate && this.pubSubService?.subscribe) {
-      const translateEventName = this.translaterService?.eventName ?? 'onLanguageChange';
-      this._subscriptions.push(
-        this.pubSubService.subscribe(translateEventName, () => this.translatePaginationTexts())
-      );
-    }
-
-    // Anytime the pagination is initialized or has changes,
-    // we'll copy the data into a local object so that we can add binding to this local object
-    this._subscriptions.push(
-      this.pubSubService.subscribe<ServicePagination>('onPaginationRefreshed', paginationChanges => {
-        for (const key of Object.keys(paginationChanges)) {
-          (this.currentPagination as any)[key] = (paginationChanges as any)[key];
-        }
-        this.updatePageButtonsUsability();
-        if (this._spanInfoFromToElm?.style) {
-          this._spanInfoFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : '';
-        }
-      }),
-      this.pubSubService.subscribe('onPaginationSetCursorBased', () => {
-        this.dispose(); // recreate pagination component, probably only used for GraphQL E2E tests
-        this.renderPagination(this._gridParentContainerElm!);
-      })
-    );
   }
 
   get availablePageSizes(): number[] {
-    return this.paginationService.availablePageSizes || [];
+    return this._paginationService.availablePageSizes || [];
   }
 
   get dataFrom(): number {
-    return this.paginationService.dataFrom;
+    return this._paginationService.dataFrom;
   }
 
   get dataTo(): number {
-    return this.paginationService.dataTo;
+    return this._paginationService.dataTo;
   }
 
   get itemsPerPage(): number {
-    return this.paginationService.itemsPerPage;
+    return this._paginationService.itemsPerPage;
   }
   set itemsPerPage(count: number) {
-    this.paginationService.changeItemPerPage(count);
+    this._paginationService.changeItemPerPage(count);
   }
 
   get pageCount(): number {
-    return this.paginationService.pageCount;
+    return this._paginationService.pageCount;
   }
 
   get pageNumber(): number {
-    return this.paginationService.pageNumber;
-  }
-
-  get grid(): SlickGrid {
-    return this.sharedService.slickGrid;
+    return this._paginationService.pageNumber;
   }
 
+  /** Getter for the Grid Options pulled through the Grid Object */
   get gridOptions(): GridOption {
-    return this.sharedService.gridOptions;
+    return this._grid?.getOptions() ?? {};
   }
 
   get gridUid(): string {
-    return this.grid?.getUID() ?? '';
+    return this._grid?.getUID() || '';
   }
 
   get locales(): Locale {
@@ -120,7 +88,7 @@ export class SlickPaginationComponent {
   }
 
   get totalItems(): number {
-    return this.paginationService.totalItems;
+    return this._paginationService.totalItems;
   }
 
   get isLeftPaginationDisabled(): boolean {
@@ -131,17 +99,60 @@ export class SlickPaginationComponent {
     return this.pageNumber === this.pageCount || this.totalItems === 0;
   }
 
+  init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService, translaterService?: TranslaterService | undefined): void {
+    this._grid = grid;
+    this._pubSubService = pubSubService;
+    this._translaterService = translaterService;
+    this._paginationService = paginationService;
+    this.currentPagination = paginationService.getFullPagination();
+    this._bindingHelper.querySelectorPrefix = this.gridUid ? `.${this.gridUid} ` : '';
+    this._enableTranslate = this.gridOptions?.enableTranslate ?? false;
+
+    if (this._enableTranslate && (!this._translaterService || !this._translaterService.translate)) {
+      throw new Error('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
+    }
+    this.translatePaginationTexts();
+
+    if (this._enableTranslate && this._pubSubService?.subscribe) {
+      const translateEventName = this._translaterService?.eventName ?? 'onLanguageChange';
+      this._subscriptions.push(
+        this._pubSubService.subscribe(translateEventName, () => this.translatePaginationTexts())
+      );
+    }
+
+    // Anytime the pagination is initialized or has changes,
+    // we'll copy the data into a local object so that we can add binding to this local object
+    this._subscriptions.push(
+      this._pubSubService.subscribe<PaginationMetadata>('onPaginationRefreshed', paginationChanges => {
+        Object.keys(paginationChanges).forEach(key => (this.currentPagination as any)[key] = paginationChanges[key as keyof PaginationMetadata]);
+        this.updatePageButtonsUsability();
+        if (this._spanInfoFromToElm?.style) {
+          this._spanInfoFromToElm.style.display = (this.currentPagination.totalItems === 0) ? 'none' : '';
+        }
+      }),
+      this._pubSubService.subscribe('onPaginationSetCursorBased', () => {
+        this.disposeDom(); // recreate pagination component, probably only used for GraphQL E2E tests
+        this.renderPagination(this._gridContainerElm!);
+      })
+    );
+  }
+
+  /** dispose of all Subscriptions, DOM element & bindings */
   dispose(): void {
-    // also dispose of all Subscriptions
-    this.pubSubService.unsubscribeAll(this._subscriptions);
-    this._bindingEventService.unbindAll();
+    this._pubSubService.unsubscribeAll(this._subscriptions);
+    this.disposeDom();
+  }
 
+  /** dispose of the DOM element & bindings only (regular PubSub subscription will be preserved) */
+  disposeDom(): void {
+    this._bindingEventService.unbindAll();
     this._bindingHelper.dispose();
     this._paginationElement.remove();
   }
 
-  renderPagination(gridParentContainerElm: HTMLElement): void {
-    this._gridParentContainerElm = gridParentContainerElm;
+  /** render the Pagination in the DOM with all events & bindings */
+  renderPagination(containerElm: HTMLElement): void {
+    this._gridContainerElm = containerElm;
     const paginationElm = this.createPaginationContainer();
     const divNavContainerElm = createDomElement('div', { className: 'slick-pagination-nav' });
 
@@ -175,8 +186,8 @@ export class SlickPaginationComponent {
     paginationElm.appendChild(divNavContainerElm);
     paginationElm.appendChild(paginationSettingsElm);
     this._paginationElement.appendChild(paginationElm);
-    if (gridParentContainerElm?.appendChild && this._paginationElement) {
-      gridParentContainerElm.appendChild(this._paginationElement);
+    if (containerElm?.appendChild && this._paginationElement) {
+      containerElm.appendChild(this._paginationElement);
     }
 
     this.renderPageSizes();
@@ -205,7 +216,7 @@ export class SlickPaginationComponent {
     this._bindingHelper.addElementBinding(this.currentPagination, 'totalItems', 'span.total-items', 'textContent');
     this._bindingHelper.addElementBinding(this.currentPagination, 'pageCount', 'span.page-count', 'textContent');
     this._bindingHelper.addElementBinding(this.currentPagination, 'pageSize', 'select.items-per-page', 'value');
-    this.paginationService.isCursorBased
+    this._paginationService.isCursorBased
       ? this._bindingHelper.addElementBinding(this.currentPagination, 'pageNumber', 'span.page-number', 'textContent')
       : this._bindingHelper.addElementBinding(this.currentPagination, 'pageNumber', 'input.page-number', 'value', 'change', this.changeToCurrentPage.bind(this));
 
@@ -227,30 +238,30 @@ export class SlickPaginationComponent {
 
   changeToFirstPage(event: MouseEvent): void {
     if (!this.isLeftPaginationDisabled) {
-      this.paginationService.goToFirstPage(event);
+      this._paginationService.goToFirstPage(event);
     }
   }
 
   changeToLastPage(event: MouseEvent): void {
     if (!this.isRightPaginationDisabled) {
-      this.paginationService.goToLastPage(event);
+      this._paginationService.goToLastPage(event);
     }
   }
 
   changeToNextPage(event: MouseEvent): void {
     if (!this.isRightPaginationDisabled) {
-      this.paginationService.goToNextPage(event);
+      this._paginationService.goToNextPage(event);
     }
   }
 
   changeToPreviousPage(event: MouseEvent): void {
     if (!this.isLeftPaginationDisabled) {
-      this.paginationService.goToPreviousPage(event);
+      this._paginationService.goToPreviousPage(event);
     }
   }
 
   changeToCurrentPage(pageNumber: number): void {
-    this.paginationService.goToPageNumber(+pageNumber);
+    this._paginationService.goToPageNumber(+pageNumber);
   }
 
   updateItemsPerPage(event: & { target: any; }): void {
@@ -259,12 +270,12 @@ export class SlickPaginationComponent {
 
   /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
   translatePaginationTexts(): void {
-    if (this._enableTranslate && this.translaterService?.translate) {
+    if (this._enableTranslate && this._translaterService?.translate) {
       const translationPrefix = getTranslationPrefix(this.gridOptions);
-      this.textItemsPerPage = this.translaterService.translate(`${translationPrefix}ITEMS_PER_PAGE`);
-      this.textItems = this.translaterService.translate(`${translationPrefix}ITEMS`);
-      this.textOf = this.translaterService.translate(`${translationPrefix}OF`);
-      this.textPage = this.translaterService.translate(`${translationPrefix}PAGE`);
+      this.textItemsPerPage = this._translaterService.translate(`${translationPrefix}ITEMS_PER_PAGE`);
+      this.textItems = this._translaterService.translate(`${translationPrefix}ITEMS`);
+      this.textOf = this._translaterService.translate(`${translationPrefix}OF`);
+      this.textPage = this._translaterService.translate(`${translationPrefix}PAGE`);
     } else if (this.locales) {
       this.textItemsPerPage = this.locales.TEXT_ITEMS_PER_PAGE || 'TEXT_ITEMS_PER_PAGE';
       this.textItems = this.locales.TEXT_ITEMS || 'TEXT_ITEMS';
@@ -295,7 +306,7 @@ export class SlickPaginationComponent {
     const divElm = createDomElement('div', { className: 'slick-page-number' });
     createDomElement('span', { className: 'text-page', textContent: 'Page' }, divElm);
     divElm.appendChild(document.createTextNode(' '));
-    if (this.paginationService.isCursorBased) {
+    if (this._paginationService.isCursorBased) {
       // cursor based navigation cannot jump to an arbitrary page. Simply display current page number.
       createDomElement('span', {
         className: 'page-number',