feat: allow providing a Custom Pagination Component (#1275)

* feat: allow providing a Custom Pagination Component

* fix: remove SASS deprecated `@import` and replace by `@use`

* chore: add new `silenceWarnings` grid option

docs/getting-started/quick-start.md

@@ -35,8 +35,8 @@ You could also compile the SASS files with your own customization, for that simp
 $cell-odd-background-color: lightyellow;
 $row-mouse-hover-color: lightgreen;
 
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+/* make sure to add the @use the SlickGrid Bootstrap Theme AFTER the variables changes */
+@use '../node_modules/@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 ```
 
 ### 3. Include it in your App

docs/styling/styling.md

@@ -28,11 +28,11 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 ##### with CSS
 ```scss
 /* style.css */
-@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
-// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
+// @use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
+// @use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
 
 ##### with SASS
@@ -43,11 +43,11 @@ $slick-cell-odd-background-color: lightyellow;
 $slick-row-mouse-hover-color: lightgreen;
 
 /* style.scss */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 ```
 
 ### Using CSS Variables _(instead of SASS)_
@@ -77,8 +77,8 @@ $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12
 $slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
 $slick-icon-group-font-size:   13px;
 
-// then on the last line, import the Theme that you wish to override
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+// then on the last line, load the Theme that you wish to override
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 ```
 
 > **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)

package.json

@@ -49,7 +49,7 @@
     "@jest/types": "^29.6.3",
     "@lerna-lite/cli": "^3.10.0",
     "@lerna-lite/publish": "^3.10.0",
-    "@slickgrid-universal/common": "^5.8.0",
+    "@slickgrid-universal/common": "^5.9.0",
     "@types/jest": "^29.5.13",
     "@types/node": "^22.7.7",
     "conventional-changelog-conventionalcommits": "^7.0.2",

packages/aurelia-slickgrid/package.json

@@ -53,13 +53,13 @@
     "@aurelia/runtime": "^2.0.0-beta.22",
     "@aurelia/runtime-html": "^2.0.0-beta.22",
     "@formkit/tempo": "^0.1.2",
-    "@slickgrid-universal/common": "~5.8.0",
-    "@slickgrid-universal/custom-footer-component": "~5.8.0",
-    "@slickgrid-universal/empty-warning-component": "~5.8.0",
-    "@slickgrid-universal/event-pub-sub": "~5.8.0",
-    "@slickgrid-universal/pagination-component": "~5.8.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.8.0",
-    "@slickgrid-universal/utils": "~5.8.0",
+    "@slickgrid-universal/common": "~5.9.0",
+    "@slickgrid-universal/custom-footer-component": "~5.9.0",
+    "@slickgrid-universal/empty-warning-component": "~5.9.0",
+    "@slickgrid-universal/event-pub-sub": "~5.9.0",
+    "@slickgrid-universal/pagination-component": "~5.9.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.9.0",
+    "@slickgrid-universal/utils": "~5.9.0",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.3"
   },

packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts

@@ -1,6 +1,9 @@
-// interfaces/types
+import type { ICollectionObserver, ICollectionSubscriber } from '@aurelia/runtime';
+import { bindable, BindingMode, customElement, IContainer, IEventAggregator, type IDisposable, IObserverLocator, resolve } from 'aurelia';
+import { dequal } from 'dequal/lite';
 import type {
   BackendService,
+  BasePaginationComponent,
   AutocompleterEditor,
   BackendServiceApi,
   BackendServiceOption,
@@ -12,10 +15,9 @@ import type {
   Locale,
   Metrics,
   Pagination,
+  PaginationMetadata,
   SelectEditor,
-  ServicePagination,
 } from '@slickgrid-universal/common';
-
 import {
   // services
   autoAddEditorFormatterToColumnsWithEditor,
@@ -53,10 +55,6 @@ import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-c
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { extend } from '@slickgrid-universal/utils';
 
-import { bindable, BindingMode, customElement, IContainer, IEventAggregator, type IDisposable, IObserverLocator, resolve } from 'aurelia';
-import type { ICollectionObserver, ICollectionSubscriber } from '@aurelia/runtime';
-import { dequal } from 'dequal/lite';
-
 import { Constants } from '../constants';
 import { GlobalGridOptions } from '../global-grid-options';
 import type { AureliaGridInstance, GridOption } from '../models/index';
@@ -117,7 +115,8 @@ export class AureliaSlickgridCustomElement {
   // components / plugins
   slickEmptyWarning: SlickEmptyWarningComponent | undefined;
   slickFooter: SlickFooterComponent | undefined;
-  slickPagination: SlickPaginationComponent | undefined;
+  paginationComponent: BasePaginationComponent | undefined;
+  slickPagination: BasePaginationComponent | undefined;
   slickRowDetailView?: SlickRowDetailView;
 
   // services
@@ -193,7 +192,7 @@ export class AureliaSlickgridCustomElement {
 
     this.gridStateService = new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
     this.gridService = new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
-    this.headerGroupingService = new HeaderGroupingService(this.extensionUtility, this._eventPubSubService);
+    this.headerGroupingService = new HeaderGroupingService(this.extensionUtility);
 
     this.serviceList = [
       this.extensionService,
@@ -478,6 +477,7 @@ export class AureliaSlickgridCustomElement {
       groupingService: this.headerGroupingService,
       headerGroupingService: this.headerGroupingService,
       extensionService: this.extensionService,
+      paginationComponent: this.slickPagination,
       paginationService: this.paginationService,
       resizerService: this.resizerService,
       sortService: this.sortService,
@@ -943,7 +943,7 @@ export class AureliaSlickgridCustomElement {
    * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
    * Also if we use Row Selection or the Checkbox Selector with a Backend Service (Odata, GraphQL), we need to reset any selection
    */
-  paginationChanged(pagination: ServicePagination) {
+  paginationChanged(pagination: PaginationMetadata) {
     const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false;
     if (this.grid && !isSyncGridSelectionEnabled && this.gridOptions?.backendServiceApi && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
       this.grid.setSelectedRows([]);
@@ -1175,7 +1175,7 @@ export class AureliaSlickgridCustomElement {
       this.paginationService.totalItems = this.totalItems;
       this.paginationService.init(this.grid, paginationOptions, this.backendServiceApi);
       this.subscriptions.push(
-        this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges: ServicePagination) => this.paginationChanged(paginationChanges)),
+        this._eventPubSubService.subscribe('onPaginationChanged', (paginationChanges: PaginationMetadata) => this.paginationChanged(paginationChanges)),
         this._eventPubSubService.subscribe('onPaginationVisibilityChanged', (visibility: { visible: boolean }) => {
           this.showPagination = visibility?.visible ?? false;
           if (this.gridOptions?.backendServiceApi) {
@@ -1484,11 +1484,26 @@ export class AureliaSlickgridCustomElement {
    * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
    * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
    */
-  protected renderPagination(showPagination = true) {
-    if (this.gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
-      this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.translaterService);
-      this.slickPagination.renderPagination(this.elm.querySelector('div') as HTMLDivElement);
-      this._isPaginationInitialized = true;
+  protected async renderPagination(showPagination = true) {
+    if (this.grid && this.gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
+      if (this.gridOptions.customPaginationComponent) {
+        const paginationContainer = document.createElement('section');
+        this.elm.appendChild(paginationContainer);
+        const vm = await this.aureliaUtilService.createAureliaViewModelAddToSlot(this.gridOptions.customPaginationComponent!, undefined, paginationContainer);
+        const elmBindingContext = vm?.controller?.children?.[0].scope.bindingContext;
+        if (elmBindingContext) {
+          this.instances!.paginationComponent = elmBindingContext as BasePaginationComponent;
+          this.slickPagination = elmBindingContext as BasePaginationComponent;
+        }
+      } else {
+        this.slickPagination = new SlickPaginationComponent();
+      }
+
+      if (this.slickPagination) {
+        this.slickPagination.init(this.grid, this.paginationService, this._eventPubSubService, this.translaterService);
+        this.slickPagination.renderPagination(this.elm.querySelector('div') as HTMLDivElement);
+        this._isPaginationInitialized = true;
+      }
     } else if (!showPagination) {
       this.slickPagination?.dispose();
       this._isPaginationInitialized = false;
@@ -1546,7 +1561,7 @@ export class AureliaSlickgridCustomElement {
   }
 
   protected suggestDateParsingWhenHelpful() {
-    if (/* !this.gridOptions.silenceWarnings && */ this.dataview?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.preParseDateColumns && this.grid.getColumns().some(c => isColumnDateType(c.type))) {
+    if (!this.gridOptions.silenceWarnings && this.dataview?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.preParseDateColumns && this.grid.getColumns().some(c => isColumnDateType(c.type))) {
       console.warn(
         '[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' +
         'for more info visit => https://ghiscoding.gitbook.io/aurelia-slickgrid/column-functionalities/sorting#pre-parse-date-columns-for-better-perf'

packages/aurelia-slickgrid/src/models/aureliaGridInstance.interface.ts

@@ -1,5 +1,6 @@
 import type {
   BackendService,
+  BasePaginationComponent,
   ExtensionService,
   FilterService,
   GridEventService,
@@ -57,6 +58,9 @@ export interface AureliaGridInstance {
   /** Grouping (and colspan) Service */
   headerGroupingService: HeaderGroupingService;
 
+  /** Pagination Component */
+  paginationComponent?: BasePaginationComponent;
+
   /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
   paginationService?: PaginationService;
 

packages/demo/package.json

@@ -43,19 +43,19 @@
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^5.8.0",
-    "@slickgrid-universal/composite-editor-component": "^5.8.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.8.0",
-    "@slickgrid-universal/excel-export": "^5.8.0",
-    "@slickgrid-universal/graphql": "^5.8.0",
-    "@slickgrid-universal/odata": "^5.8.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^5.8.0",
-    "@slickgrid-universal/rxjs-observable": "^5.8.0",
-    "@slickgrid-universal/text-export": "^5.8.0",
+    "@slickgrid-universal/common": "^5.9.0",
+    "@slickgrid-universal/composite-editor-component": "^5.9.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.9.0",
+    "@slickgrid-universal/excel-export": "^5.9.0",
+    "@slickgrid-universal/graphql": "^5.9.0",
+    "@slickgrid-universal/odata": "^5.9.0",
+    "@slickgrid-universal/row-detail-view-plugin": "^5.9.0",
+    "@slickgrid-universal/rxjs-observable": "^5.9.0",
+    "@slickgrid-universal/text-export": "^5.9.0",
     "aurelia": "^2.0.0-beta.22",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",
-    "i18next": "^23.15.1",
+    "i18next": "^23.16.1",
     "i18next-fetch-backend": "^6.0.0",
     "rxjs": "^7.8.1"
   },

packages/demo/src/examples/slickgrid/example25.scss

@@ -1,8 +1,7 @@
-$slick-preheader-font-size: 18px;
-$slick-preheader-border-right: 1px solid lightgrey;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-preheader-font-size: 18px,
+  $slick-preheader-border-right: 1px solid lightgrey
+);
 
 .alert {
   padding: 8px;

packages/demo/src/examples/slickgrid/example27.scss

@@ -1,5 +1,5 @@
-/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
+/* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss' with (...);
 
 #grid27 {
   .slick-cell {

packages/demo/src/examples/slickgrid/example28.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss' with (...);
 
 #grid28 {
   .slick-cell {

packages/demo/src/examples/slickgrid/example31.scss

@@ -1,2 +1 @@
-/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss' with (...);

packages/demo/src/examples/slickgrid/example33.scss

@@ -1,7 +1,9 @@
 @use 'sass:color';
+$button-border-color: #ababab;
 
-$slick-button-border-color: #ababab !default;
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-button-border-color: $button-border-color
+);
 
 // --
 // Custom Tooltips CSS Variables (or SASS equivalent)
@@ -26,12 +28,12 @@ $slick-button-border-color: #ababab !default;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$slick-button-border-color};
+  border: 1px solid #{$button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }
 

packages/demo/src/examples/slickgrid/example34.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss' with (...);
 
 $sparkline-color: #00b78d;
 // $sparkline-color: #573585;

packages/demo/src/examples/slickgrid/example42-pager.scss

@@ -0,0 +1,56 @@
+@use 'sass:color';
+
+.custom-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px;
+  font-size: 13px;
+
+  .custom-pagination-settings {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 30px;
+  }
+
+  .custom-pagination-nav {
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+
+    .page-item {
+      display: flex;
+      width: 26px;
+      justify-content: center;
+      margin: 0;
+      &.disabled .pagination-link {
+        color: rgb(180, 179, 179);
+        background-color: rgb(180, 179, 179);
+      }
+    }
+
+    .page-number {
+      .page-number {
+        padding: 0 5px;
+        display: inline-flex;
+        justify-content: center;
+        width: 20px;
+      }
+    }
+
+    nav {
+      ul.custom-pagination-ul  {
+        display: flex;
+        margin: 0;
+        padding: 0 5px;
+        color: #0d6efd;
+
+        .pagination-link {
+          color: #0d6efd;
+          &:hover {
+            color: color.adjust(#0d6efd, $lightness: 10%);
+          }
+        }
+      }
+    }
+  }
+}