fix(components): add "cssText" option to both Footer/Pagination

- the "cssText" is used by the width calculation, which calculate (100% width - rightPadding), but user could overwrite it with his own width or any other css style to the Footer/Pagination container element

packages/common/src/interfaces/customFooterOption.interface.ts

@@ -1,4 +1,14 @@
 export interface CustomFooterOption {
+  /**
+   * Defaults to "width: calc(100% - ${gridOptions.autoResize.rightPadding}px)", CSS width of the Custom Footer element.
+   * The width is calculated by taking in consideration "autoResize.rightPadding" that might optionally be provided in the grid options
+   *
+   * IMPORTANT NOTE:
+   * This property is already used by the "width" calculation, which is the default CSS styling (width: calc(100% - {rightPadding})),
+   * If you want to use it for something else than the width then make sure to also include the width calculation inside that text styling
+   */
+  cssText?: string;
+
   /** Optionally pass some text to be displayed on the left side (in the "left-footer" css class) */
   leftFooterText?: string;
 
@@ -8,8 +18,8 @@ export interface CustomFooterOption {
   /** Date format used when showing the "Last Update" timestamp in the metrics section. */
   dateFormat?: string;
 
-  /** Defaults to 25, height of the Custom Footer in pixels (this is required and is used by the auto-resizer) */
-  footerHeight?: number;
+  /** Defaults to 25, height of the Custom Footer in pixels, it could be a number (25) or a string ("25px") but it has to be in pixels. It will be used by the auto-resizer calculations. */
+  footerHeight?: number | string;
 
   /** Defaults to false, do we want to hide the last update timestamp (endTime)? */
   hideLastUpdateTimestamp?: boolean;

packages/common/src/interfaces/gridOption.interface.ts

@@ -368,7 +368,7 @@ export interface GridOption {
   /** Defaults to true, which will display numbers indicating column sort precedence are displayed in the columns when multiple columns selected */
   numberedMultiColumnSort?: boolean;
 
-  /** Pagination options, these are currently used ONLY with a Backend Service API (GraphQL/OData Services) */
+  /** Pagination options (pageSize, pageSizes, pageNumber, totalItems) */
   pagination?: Pagination;
 
   /** if you want to pass custom paramaters to your Formatter/Editor or anything else */

packages/common/src/interfaces/pagination.interface.ts

@@ -1,4 +1,14 @@
 export interface Pagination {
+  /**
+   * Defaults to "width: calc(100% - ${gridOptions.autoResize.rightPadding}px)", CSS width of the Pagination element.
+   * The width is calculated by taking in consideration "autoResize.rightPadding" that might optionally be provided in the grid options
+   *
+   * IMPORTANT NOTE:
+   * This property is already used by the "width" calculation, which is the default CSS styling (width: calc(100% - {rightPadding})),
+   * If you want to use it for something else than the width then make sure to also include the width calculation inside that text styling
+   */
+  cssText?: string;
+
   /** Current page number that we are we currently displaying. */
   pageNumber?: number;
 

packages/vanilla-bundle/src/components/__tests__/slick-footer.spec.ts

@@ -62,7 +62,7 @@ describe('Slick-Footer Component', () => {
       mockGridOptions.autoResize = { rightPadding: 15 };
       component.renderFooter(div);
 
-      expect(component.width).toBe('width: calc(100% - 15px);');
+      expect(component.cssText).toBe('width: calc(100% - 15px);');
     });
 
     it('should create a the Slick-Footer component in the DOM', () => {

packages/vanilla-bundle/src/components/__tests__/slick-pagination.spec.ts

@@ -93,7 +93,7 @@ describe('Slick-Pagination Component', () => {
       mockGridOptions.autoResize = { rightPadding: 15 };
       component.renderPagination(div);
 
-      expect(component.width).toBe('width: calc(100% - 15px);');
+      expect(component.cssText).toBe('width: calc(100% - 15px);');
     });
 
     it('should create a the Slick-Pagination component in the DOM', () => {

packages/vanilla-bundle/src/components/slick-footer.ts

@@ -16,7 +16,7 @@ import { BindingHelper } from '../services/binding.helper';
 export class SlickFooterComponent {
   private _bindingHelper: BindingHelper;
   private _footerElement: HTMLDivElement;
-  private _width = '100%';
+  private _defaultCssText = '100%';
 
   get gridUid(): string {
     return this.grid?.getUID() ?? '';
@@ -32,8 +32,8 @@ export class SlickFooterComponent {
     return this.gridOptions.locales || Constants.locales;
   }
 
-  get width() {
-    return this._width;
+  get cssText() {
+    return this._defaultCssText;
   }
 
   set metrics(metrics: Metrics) {
@@ -86,12 +86,12 @@ export class SlickFooterComponent {
   private createFooterContainer(gridParentContainerElm: HTMLElement) {
     // when user adds an extra right padding on the auto-resize, we need to deduct it from our footer width
     if (this.gridOptions.autoResize?.rightPadding) {
-      this._width = `width: calc(100% - ${this.gridOptions.autoResize.rightPadding}px);`;
+      this._defaultCssText = `width: calc(100% - ${this.gridOptions.autoResize.rightPadding}px);`;
     }
 
     const footerElm = document.createElement('div');
     footerElm.className = `slick-custom-footer row ${this.gridUid}`;
-    footerElm.style.cssText = this._width;
+    footerElm.style.cssText = this.customFooterOptions?.cssText ?? this._defaultCssText;
     footerElm.style.height = `${this.customFooterOptions.footerHeight || 20}px`;
 
     const leftFooterElm = document.createElement('div');

packages/vanilla-bundle/src/components/slick-pagination.ts

@@ -19,7 +19,7 @@ export class SlickPaginationComponent {
   private _enableTranslate = false;
   private _locales: Locale;
   private _subscriptions: Subscription[] = [];
-  private _width = '100%';
+  private _defaultCssText = '100%';
   currentPagination: ServicePagination;
   firstButtonClasses = '';
   lastButtonClasses = '';
@@ -121,8 +121,8 @@ export class SlickPaginationComponent {
     return this.pageNumber === this.pageCount || this.totalItems === 0;
   }
 
-  get width() {
-    return this._width;
+  get cssText() {
+    return this._defaultCssText;
   }
 
   dispose() {
@@ -140,14 +140,14 @@ export class SlickPaginationComponent {
     if (paginationTemplate) {
       // when user adds an extra right padding on the auto-resize, we need to deduct it from our pagination width
       if (this.gridOptions.autoResize?.rightPadding) {
-        this._width = `width: calc(100% - ${this.gridOptions.autoResize.rightPadding}px);`;
+        this._defaultCssText = `width: calc(100% - ${this.gridOptions.autoResize.rightPadding}px);`;
       }
 
       const temp = document.createElement('div');
       temp.innerHTML = paginationTemplate;
       this._paginationElement = temp.firstChild as HTMLDivElement;
       this._paginationElement.classList.add(this.gridUid, 'pager');
-      this._paginationElement.style.cssText = this._width;
+      this._paginationElement.style.cssText = this.gridOptions.pagination?.cssText ?? this._defaultCssText;
 
       if (gridParentContainerElm?.appendChild && this._paginationElement) {
         gridParentContainerElm.appendChild(this._paginationElement);

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -484,7 +484,8 @@ export class SlickVanillaGridBundle {
     const fixedGridDimensions = (this._gridOptions?.gridHeight || this._gridOptions?.gridWidth) ? { height: this._gridOptions?.gridHeight, width: this._gridOptions?.gridWidth } : undefined;
     const autoResizeOptions = this._gridOptions?.autoResize ?? { bottomPadding: 0 };
     if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined) {
-      autoResizeOptions.bottomPadding += this._gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
+      const footerHeight: string | number = this._gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
+      autoResizeOptions.bottomPadding += parseInt(`${footerHeight}`, 10);
     }
     if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this._gridOptions.enablePagination) {
       autoResizeOptions.bottomPadding += DATAGRID_PAGINATION_HEIGHT;