fix: allow partial overrides of CSS classes

siemens · Feb 27, 2025 · 8957afa · 8957afa
1 parent a00d2f3
commit 8957afa
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 30 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -353,15 +353,7 @@ export class DatatableComponent<TRow = any>
   /**
    * Css class overrides
    */
-  @Input() cssClasses: Partial<INgxDatatableConfig['cssClasses']> = {
-    sortAscending: 'datatable-icon-up',
-    sortDescending: 'datatable-icon-down',
-    sortUnset: 'datatable-icon-sort-unset',
-    pagerLeftArrow: 'datatable-icon-left',
-    pagerRightArrow: 'datatable-icon-right',
-    pagerPrevious: 'datatable-icon-prev',
-    pagerNext: 'datatable-icon-skip'
-  };
+  @Input() cssClasses: Partial<INgxDatatableConfig['cssClasses']> = {};
 
   /**
    * Message overrides for localization

diff --git a/projects/ngx-datatable/src/lib/components/footer/footer.component.ts b/projects/ngx-datatable/src/lib/components/footer/footer.component.ts
@@ -57,10 +57,10 @@ export class DataTableFooterComponent {
   @Input() rowCount: number;
   @Input() pageSize: number;
   @Input() offset: number;
-  @Input() pagerLeftArrowIcon: string;
-  @Input() pagerRightArrowIcon: string;
-  @Input() pagerPreviousIcon: string;
-  @Input() pagerNextIcon: string;
+  @Input() pagerLeftArrowIcon?: string;
+  @Input() pagerRightArrowIcon?: string;
+  @Input() pagerPreviousIcon?: string;
+  @Input() pagerNextIcon?: string;
   @Input() totalMessage: string;
   @Input() footerTemplate: DatatableFooterDirective;
 

diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts
@@ -8,12 +8,12 @@ import { Page } from '../../types/internal.types';
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
         <a role="button" aria-label="go to first page" (click)="selectPage(1)">
-          <i class="{{ pagerPreviousIcon }}"></i>
+          <i class="{{ pagerPreviousIcon ?? 'datatable-icon-prev' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canPrevious()">
         <a role="button" aria-label="go to previous page" (click)="prevPage()">
-          <i class="{{ pagerLeftArrowIcon }}"></i>
+          <i class="{{ pagerLeftArrowIcon ?? 'datatable-icon-left' }}"></i>
         </a>
       </li>
       @for (pg of pages; track pg.number) {
@@ -29,12 +29,12 @@ import { Page } from '../../types/internal.types';
       }
       <li [class.disabled]="!canNext()">
         <a role="button" aria-label="go to next page" (click)="nextPage()">
-          <i class="{{ pagerRightArrowIcon }}"></i>
+          <i class="{{ pagerRightArrowIcon ?? 'datatable-icon-right' }}"></i>
         </a>
       </li>
       <li [class.disabled]="!canNext()">
         <a role="button" aria-label="go to last page" (click)="selectPage(totalPages)">
-          <i class="{{ pagerNextIcon }}"></i>
+          <i class="{{ pagerNextIcon ?? 'datatable-icon-skip' }}"></i>
         </a>
       </li>
     </ul>
@@ -46,10 +46,10 @@ import { Page } from '../../types/internal.types';
   standalone: true
 })
 export class DataTablePagerComponent {
-  @Input() pagerLeftArrowIcon: string;
-  @Input() pagerRightArrowIcon: string;
-  @Input() pagerPreviousIcon: string;
-  @Input() pagerNextIcon: string;
+  @Input() pagerLeftArrowIcon?: string;
+  @Input() pagerRightArrowIcon?: string;
+  @Input() pagerPreviousIcon?: string;
+  @Input() pagerNextIcon?: string;
 
   @Input()
   set size(val: number) {

diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts
@@ -66,9 +66,9 @@ export class DataTableHeaderCellComponent implements OnInit {
   private cd = inject(ChangeDetectorRef);
 
   @Input() sortType: SortType;
-  @Input() sortAscendingIcon: string;
-  @Input() sortDescendingIcon: string;
-  @Input() sortUnsetIcon: string;
+  @Input() sortAscendingIcon?: string;
+  @Input() sortDescendingIcon?: string;
+  @Input() sortUnsetIcon?: string;
 
   @Input() isTarget: boolean;
   @Input() targetMarkerTemplate: TemplateRef<any>;
@@ -256,11 +256,11 @@ export class DataTableHeaderCellComponent implements OnInit {
       return;
     }
     if (sortDir === SortDirection.asc) {
-      return `sort-btn sort-asc ${this.sortAscendingIcon}`;
+      return `sort-btn sort-asc ${this.sortAscendingIcon ?? 'datatable-icon-up'}`;
     } else if (sortDir === SortDirection.desc) {
-      return `sort-btn sort-desc ${this.sortDescendingIcon}`;
+      return `sort-btn sort-desc ${this.sortDescendingIcon ?? 'datatable-icon-down'}`;
     } else {
-      return `sort-btn ${this.sortUnsetIcon}`;
+      return `sort-btn ${this.sortUnsetIcon ?? 'datatable-icon-sort-unset'}`;
     }
   }
 }
diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts
@@ -108,9 +108,9 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges {
   private cd = inject(ChangeDetectorRef);
   private scrollbarHelper = inject(ScrollbarHelper);
 
-  @Input() sortAscendingIcon: string;
-  @Input() sortDescendingIcon: string;
-  @Input() sortUnsetIcon: string;
+  @Input() sortAscendingIcon?: string;
+  @Input() sortDescendingIcon?: string;
+  @Input() sortUnsetIcon?: string;
   @Input() scrollbarH: boolean;
   @Input() dealsWithGroup: boolean;
   @Input() targetMarkerTemplate: TemplateRef<unknown>;