feat(services): make everything extendable by using protected

packages/binding/src/binding.service.ts

@@ -111,7 +111,7 @@ export class BindingService {
    * 2- when an event is provided, we will replace the DOM element (by an attribute) every time an event is triggered
    *    2.1- we could also provide an extra callback method to execute when the event gets triggered
    */
-  private bindSingleElement(element: Element | null, attribute: string, eventName?: string, callback?: (val: any) => any) {
+  protected bindSingleElement(element: Element | null, attribute: string, eventName?: string, callback?: (val: any) => any) {
     const binding: ElementBinding | ElementBindingWithListener = { element, attribute };
     if (element) {
       if (eventName) {
@@ -137,7 +137,7 @@ export class BindingService {
     }
   }
 
-  private sanitizeText(dirtyText: string): string {
+  protected sanitizeText(dirtyText: string): string {
     return (DOMPurify?.sanitize) ? DOMPurify.sanitize(dirtyText, {}) : dirtyText;
   }
 }

packages/common/src/filters/filterFactory.ts

@@ -6,9 +6,9 @@ import { RxJsFacade } from '../services/rxjsFacade';
 
 export class FilterFactory {
   /** The options from the SlickgridConfig */
-  private _options: any;
+  protected _options: any;
 
-  constructor(private config: SlickgridConfig, private readonly translaterService?: TranslaterService, private readonly collectionService?: CollectionService, private rxjs?: RxJsFacade) {
+  constructor(protected config: SlickgridConfig, protected readonly translaterService?: TranslaterService, protected readonly collectionService?: CollectionService, protected rxjs?: RxJsFacade) {
     this._options = this.config?.options ?? {};
   }
 

packages/common/src/services/backendUtility.service.ts

@@ -3,7 +3,7 @@ import { BackendServiceApi, GridOption } from '../interfaces/index';
 import { Observable, RxJsFacade, Subject } from './rxjsFacade';
 
 export class BackendUtilityService {
-  constructor(private rxjs?: RxJsFacade) { }
+  constructor(protected rxjs?: RxJsFacade) { }
 
   addRxJsResource(rxjs: RxJsFacade) {
     this.rxjs = rxjs;

packages/common/src/services/bindingEvent.service.ts

@@ -1,7 +1,7 @@
 import { ElementEventListener } from '../interfaces/elementEventListener.interface';
 
 export class BindingEventService {
-  private _boundedEvents: ElementEventListener[] = [];
+  protected _boundedEvents: ElementEventListener[] = [];
 
   /** Bind an event listener to any element */
   bind(element: Element, eventNameOrNames: string | string[], listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {

packages/common/src/services/collection.service.ts

@@ -11,7 +11,7 @@ import { uniqueArray } from './utilities';
 import { TranslaterService } from './translater.service';
 
 export class CollectionService<T = any> {
-  constructor(private translaterService?: TranslaterService) { }
+  constructor(protected readonly translaterService?: TranslaterService) { }
 
   /**
    * Filter 1 or more items from a collection

packages/common/src/services/extension.service.ts

@@ -31,30 +31,30 @@ interface ExtensionWithColumnIndexPosition {
 }
 
 export class ExtensionService {
-  private _extensionCreatedList: ExtensionList<any, any> = {} as ExtensionList<any, any>;
-  private _extensionList: ExtensionList<any, any> = {} as ExtensionList<any, any>;
+  protected _extensionCreatedList: ExtensionList<any, any> = {} as ExtensionList<any, any>;
+  protected _extensionList: ExtensionList<any, any> = {} as ExtensionList<any, any>;
 
   get extensionList() {
     return this._extensionList;
   }
 
   constructor(
-    private readonly autoTooltipExtension: AutoTooltipExtension,
-    private readonly cellExternalCopyExtension: CellExternalCopyManagerExtension,
-    private readonly cellMenuExtension: CellMenuExtension,
-    private readonly checkboxSelectorExtension: CheckboxSelectorExtension,
-    private readonly columnPickerExtension: ColumnPickerExtension,
-    private readonly contextMenuExtension: ContextMenuExtension,
-    private readonly draggableGroupingExtension: DraggableGroupingExtension,
-    private readonly gridMenuExtension: GridMenuExtension,
-    private readonly groupItemMetaExtension: GroupItemMetaProviderExtension,
-    private readonly headerButtonExtension: HeaderButtonExtension,
-    private readonly headerMenuExtension: HeaderMenuExtension,
-    private readonly rowDetailViewExtension: RowDetailViewExtension,
-    private readonly rowMoveManagerExtension: RowMoveManagerExtension,
-    private readonly rowSelectionExtension: RowSelectionExtension,
-    private readonly sharedService: SharedService,
-    private readonly translaterService?: TranslaterService,
+    protected readonly autoTooltipExtension: AutoTooltipExtension,
+    protected readonly cellExternalCopyExtension: CellExternalCopyManagerExtension,
+    protected readonly cellMenuExtension: CellMenuExtension,
+    protected readonly checkboxSelectorExtension: CheckboxSelectorExtension,
+    protected readonly columnPickerExtension: ColumnPickerExtension,
+    protected readonly contextMenuExtension: ContextMenuExtension,
+    protected readonly draggableGroupingExtension: DraggableGroupingExtension,
+    protected readonly gridMenuExtension: GridMenuExtension,
+    protected readonly groupItemMetaExtension: GroupItemMetaProviderExtension,
+    protected readonly headerButtonExtension: HeaderButtonExtension,
+    protected readonly headerMenuExtension: HeaderMenuExtension,
+    protected readonly rowDetailViewExtension: RowDetailViewExtension,
+    protected readonly rowMoveManagerExtension: RowMoveManagerExtension,
+    protected readonly rowSelectionExtension: RowSelectionExtension,
+    protected readonly sharedService: SharedService,
+    protected readonly translaterService?: TranslaterService,
   ) { }
 
   /** Dispose of all the controls & plugins */
@@ -424,7 +424,7 @@ export class ExtensionService {
   }
 
   //
-  // private functions
+  // protected functions
   // -------------------
 
   /**
@@ -435,7 +435,7 @@ export class ExtensionService {
    * @param columnDefinitions
    * @param gridOptions
    */
-  private createExtensionByTheirColumnIndex(featureWithIndexPositions: ExtensionWithColumnIndexPosition[], columnDefinitions: Column[], gridOptions: GridOption) {
+  protected createExtensionByTheirColumnIndex(featureWithIndexPositions: ExtensionWithColumnIndexPosition[], columnDefinitions: Column[], gridOptions: GridOption) {
     // 1- first step is to sort them by their index position
     featureWithIndexPositions.sort((feat1, feat2) => feat1.columnIndexPosition - feat2.columnIndexPosition);
 
@@ -452,7 +452,7 @@ export class ExtensionService {
    * Get an Extension that was created by calling its "create" method (there are only 3 extensions which uses this method)
    *  @param name
    */
-  private getCreatedExtensionByName<P extends (SlickControlList | SlickPluginList) = any, E extends Extension = any>(name: ExtensionName): ExtensionModel<P, E> | undefined {
+  protected getCreatedExtensionByName<P extends (SlickControlList | SlickPluginList) = any, E extends Extension = any>(name: ExtensionName): ExtensionModel<P, E> | undefined {
     if (this._extensionCreatedList && this._extensionCreatedList.hasOwnProperty(name)) {
       return this._extensionCreatedList[name];
     }
@@ -464,7 +464,7 @@ export class ExtensionService {
    * @param externalExtension - extension instance
    * @param extensionName - extension name
    */
-  private recreateExternalAddon(externalExtension: Extension, extensionName: ExtensionName) {
+  protected recreateExternalAddon(externalExtension: Extension, extensionName: ExtensionName) {
     externalExtension.dispose();
     const instance = externalExtension.register();
     const extension = this.getExtensionByName(extensionName);
@@ -474,7 +474,7 @@ export class ExtensionService {
   }
 
   /** Translate an array of items from an input key and assign translated value to the output key */
-  private translateItems(items: any[], inputKey: string, outputKey: string) {
+  protected translateItems(items: any[], inputKey: string, outputKey: string) {
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.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.');
     }

packages/common/src/services/grid.service.ts

@@ -32,17 +32,17 @@ const GridServiceUpdateOptionDefaults: GridServiceUpdateOption = { highlightRow:
 const HideColumnOptionDefaults: HideColumnOption = { autoResizeColumns: true, triggerEvent: true, hideFromColumnPicker: false, hideFromGridMenu: false };
 
 export class GridService {
-  private _grid!: SlickGrid;
-  private _rowSelectionPlugin?: SlickRowSelectionModel;
+  protected _grid!: SlickGrid;
+  protected _rowSelectionPlugin?: SlickRowSelectionModel;
 
   constructor(
-    private gridStateService: GridStateService,
-    private filterService: FilterService,
-    private pubSubService: PubSubService,
-    private paginationService: PaginationService,
-    private sharedService: SharedService,
-    private sortService: SortService,
-    private treeDataService: TreeDataService,
+    protected gridStateService: GridStateService,
+    protected filterService: FilterService,
+    protected pubSubService: PubSubService,
+    protected paginationService: PaginationService,
+    protected sharedService: SharedService,
+    protected sortService: SortService,
+    protected treeDataService: TreeDataService,
   ) { }
 
   /** Getter of SlickGrid DataView object */
@@ -897,11 +897,11 @@ export class GridService {
   }
 
   // --
-  // private functions
+  // protected functions
   // -------------------
 
   /** Check wether the grid has the Row Selection enabled */
-  private hasRowSelectionEnabled() {
+  protected hasRowSelectionEnabled() {
     const selectionModel = this._grid.getSelectionModel();
     const isRowSelectionEnabled = this._gridOptions.enableRowSelection || this._gridOptions.enableCheckboxSelector;
     return (isRowSelectionEnabled && selectionModel);

packages/common/src/services/gridEvent.service.ts

@@ -13,7 +13,7 @@ import {
 declare const Slick: SlickNamespace;
 
 export class GridEventService {
-  private _eventHandler: SlickEventHandler;
+  protected _eventHandler: SlickEventHandler;
 
   get eventHandler(): SlickEventHandler {
     return this._eventHandler;

packages/common/src/services/gridState.service.ts

@@ -32,22 +32,22 @@ import { TreeDataService } from './treeData.service';
 declare const Slick: SlickNamespace;
 
 export class GridStateService {
-  private _eventHandler = new Slick.EventHandler();
-  private _columns: Column[] = [];
-  private _currentColumns: CurrentColumn[] = [];
-  private _grid!: SlickGrid;
-  private _subscriptions: EventSubscription[] = [];
-  private _selectedRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
-  private _selectedFilteredRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
-  private _wasRecheckedAfterPageChange = true; // used with row selection & pagination
+  protected _eventHandler = new Slick.EventHandler();
+  protected _columns: Column[] = [];
+  protected _currentColumns: CurrentColumn[] = [];
+  protected _grid!: SlickGrid;
+  protected _subscriptions: EventSubscription[] = [];
+  protected _selectedRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
+  protected _selectedFilteredRowDataContextIds: Array<number | string> | undefined = []; // used with row selection
+  protected _wasRecheckedAfterPageChange = true; // used with row selection & pagination
 
   constructor(
-    private readonly extensionService: ExtensionService,
-    private readonly filterService: FilterService,
-    private readonly pubSubService: PubSubService,
-    private readonly sharedService: SharedService,
-    private readonly sortService: SortService,
-    private readonly treeDataService: TreeDataService,
+    protected readonly extensionService: ExtensionService,
+    protected readonly filterService: FilterService,
+    protected readonly pubSubService: PubSubService,
+    protected readonly sharedService: SharedService,
+    protected readonly sortService: SortService,
+    protected readonly treeDataService: TreeDataService,
   ) { }
 
   /** Getter of SlickGrid DataView object */
@@ -56,11 +56,11 @@ export class GridStateService {
   }
 
   /** Getter for the Grid Options pulled through the Grid Object */
-  private get _gridOptions(): GridOption {
+  protected get _gridOptions(): GridOption {
     return this._grid?.getOptions?.() ?? {};
   }
 
-  private get datasetIdPropName(): string {
+  protected get datasetIdPropName(): string {
     return this._gridOptions.datasetIdPropertyName || 'id';
   }
 
@@ -475,7 +475,7 @@ export class GridStateService {
   }
 
   // --
-  // private methods
+  // protected methods
   // ------------------
 
   /**
@@ -487,7 +487,7 @@ export class GridStateService {
    * @param {Array<Column>} fullColumnDefinitions - full column definitions array that includes every columns (including Row Selection, Row Detail, Row Move when enabled)
    * @param {Array<Column>} newArrangedColumns - output array that will be use to show in the UI (it could have less columns than fullColumnDefinitions array since user might hide some columns)
    */
-  private addColumnDynamicWhenFeatureEnabled(dynamicAddonColumnByIndexPositionList: Array<{ columnId: string; columnIndexPosition: number; }>, fullColumnDefinitions: Column[], newArrangedColumns: Column[]) {
+  protected addColumnDynamicWhenFeatureEnabled(dynamicAddonColumnByIndexPositionList: Array<{ columnId: string; columnIndexPosition: number; }>, fullColumnDefinitions: Column[], newArrangedColumns: Column[]) {
     // 1- first step is to sort them by their index position
     dynamicAddonColumnByIndexPositionList.sort((feat1, feat2) => feat1.columnIndexPosition - feat2.columnIndexPosition);
 
@@ -508,7 +508,7 @@ export class GridStateService {
    * @param extension name
    * @param event name
    */
-  private bindExtensionAddonEventToGridStateChange(extensionName: ExtensionName, eventName: string) {
+  protected bindExtensionAddonEventToGridStateChange(extensionName: ExtensionName, eventName: string) {
     const extension = this.extensionService?.getExtensionByName?.(extensionName);
     const slickEvent = extension?.instance?.[eventName];
 
@@ -526,7 +526,7 @@ export class GridStateService {
    * @param event - event name
    * @param grid - SlickGrid object
    */
-  private bindSlickGridColumnChangeEventToGridStateChange(eventName: string, grid: SlickGrid) {
+  protected bindSlickGridColumnChangeEventToGridStateChange(eventName: string, grid: SlickGrid) {
     const slickGridEvent = (grid as any)?.[eventName];
 
     if (slickGridEvent && typeof slickGridEvent.subscribe === 'function') {
@@ -542,7 +542,7 @@ export class GridStateService {
    * Bind a Grid Event (of grid option changes) to a Grid State change event, if we detect that any of the pinning (frozen) options changes then we'll trigger a Grid State change
    * @param grid - SlickGrid object
    */
-  private bindSlickGridOnSetOptionsEventToGridStateChange(grid: SlickGrid) {
+  protected bindSlickGridOnSetOptionsEventToGridStateChange(grid: SlickGrid) {
     const onSetOptionsHandler = grid.onSetOptions;
     (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onSetOptionsHandler>>).subscribe(onSetOptionsHandler, (_e, args) => {
       const { frozenBottom: frozenBottomBefore, frozenColumn: frozenColumnBefore, frozenRow: frozenRowBefore } = args.optionsBefore;
@@ -565,7 +565,7 @@ export class GridStateService {
    * 3. if we use Pagination and we change page, we'll keep track with a flag (this flag will be used to skip any deletion when we're changing page)
    * 4. after the Page or DataView is changed or updated, we'll do an extra (and delayed) check to make sure that what we have in our global array of selected IDs is displayed on screen
    */
-  private bindSlickGridRowSelectionToGridStateChange() {
+  protected bindSlickGridRowSelectionToGridStateChange() {
     if (this._grid && this._gridOptions && this._dataView) {
       const onBeforePagingInfoChangedHandler = this._dataView.onBeforePagingInfoChanged;
       (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onBeforePagingInfoChangedHandler>>).subscribe(onBeforePagingInfoChangedHandler, () => {
@@ -636,13 +636,13 @@ export class GridStateService {
   }
 
   /** Check wether the grid has the Row Selection enabled */
-  private hasRowSelectionEnabled() {
+  protected hasRowSelectionEnabled() {
     const selectionModel = this._grid.getSelectionModel();
     const isRowSelectionEnabled = this._gridOptions.enableRowSelection || this._gridOptions.enableCheckboxSelector;
     return (isRowSelectionEnabled && selectionModel);
   }
 
-  private reEvaluateRowSelectionAfterFilterChange() {
+  protected reEvaluateRowSelectionAfterFilterChange() {
     const currentSelectedRowIndexes = this._grid.getSelectedRows();
     const previousSelectedFilteredRowDataContextIds = (this._selectedFilteredRowDataContextIds || []).slice();
     const filteredDataContextIds = this.refreshFilteredRowSelections();
@@ -655,7 +655,7 @@ export class GridStateService {
   }
 
   /** When a Filter is triggered or when user request it, we will refresh the filtered selection array and return it */
-  private refreshFilteredRowSelections(): Array<number | string> {
+  protected refreshFilteredRowSelections(): Array<number | string> {
     let tmpFilteredArray: Array<number | string> = [];
     const filteredDataset = this._dataView.getFilteredItems() || [];
     if (Array.isArray(this._selectedRowDataContextIds)) {

packages/common/src/services/groupingAndColspan.service.ts

@@ -19,10 +19,10 @@ import { emptyElement } from './utilities';
 declare const Slick: SlickNamespace;
 
 export class GroupingAndColspanService {
-  private _eventHandler: SlickEventHandler;
-  private _grid!: SlickGrid;
+  protected _eventHandler: SlickEventHandler;
+  protected _grid!: SlickGrid;
 
-  constructor(private readonly extensionUtility: ExtensionUtility, private readonly extensionService: ExtensionService, private readonly pubSubService: PubSubService,) {
+  constructor(protected readonly extensionUtility: ExtensionUtility, protected readonly extensionService: ExtensionService, protected readonly pubSubService: PubSubService,) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -37,12 +37,12 @@ export class GroupingAndColspanService {
   }
 
   /** Getter for the Grid Options pulled through the Grid Object */
-  private get _gridOptions(): GridOption {
+  protected get _gridOptions(): GridOption {
     return (this._grid?.getOptions) ? this._grid.getOptions() : {};
   }
 
   /** Getter for the Column Definitions pulled through the Grid Object */
-  private get _columnDefinitions(): Column[] {
+  protected get _columnDefinitions(): Column[] {
     return (this._grid && this._grid.getColumns) ? this._grid.getColumns() : [];
   }