Merge pull request #13915 from IgniteUI/text-highlight-service

refactor(text-highlight): abstracting service from directive

Author: kdinev

CHANGELOG.md

@@ -34,8 +34,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxForOf`
     - Unified logic for vertical and horizontal virtualization such as - caching, updating, max browser size exceeding.
     - Added new method - `addScroll` that can shift the scroll thumb by the specified amount in pixels (negative number to scroll to previous, positive to scroll next). Similar to `addScrollTop` but works for both vertical and horizontal virtualization.
-
-
+- `IgxTextHighlightDirective` is now correctly tree-shaken out of the bundle when not used.
+    - **Breaking Change** A new `IgxTextHighlightService` is now exposed and methods `setActiveHighlight` and `clearActiveHighlight` have been moved to it.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Tree-shaking of the grids has been improved:
         - The `igx-paginator`, `igx-grid-toolbar` and `igx-action-strip` components should now correctly tree-shake when not used in a grid.

projects/igniteui-angular/src/lib/core/utils.ts

@@ -71,7 +71,7 @@ export const copyDescriptors = (obj) => {
         return Object.create(
             Object.getPrototypeOf(obj),
             Object.getOwnPropertyDescriptors(obj)
-            );
+        );
     }
 }
 

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts

@@ -4,6 +4,7 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { IgxTextHighlightDirective, IActiveHighlightInfo} from './text-highlight.directive';
 
 import { configureTestSuite } from '../../test-utils/configure-suite';
+import { IgxTextHighlightService } from './text-highlight.service';
 
 describe('IgxHighlight', () => {
     configureTestSuite();
@@ -321,6 +322,8 @@ class HighlightLoremIpsumComponent {
     // eslint-disable-next-line max-len
     public html = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate luctus dui ut maximus. Quisque sed suscipit lorem. Vestibulum sit.';
 
+    constructor(private highlightService: IgxTextHighlightService) { }
+
     public highlightText(text: string, caseSensitive?: boolean, exactMatch?: boolean) {
         return this.highlight.highlight(text, caseSensitive, exactMatch);
     }
@@ -339,6 +342,6 @@ class HighlightLoremIpsumComponent {
             column: 0,
             index
         };
-        IgxTextHighlightDirective.setActiveHighlight(this.groupName, activeHighlightInfo);
+        this.highlightService.setActiveHighlight(this.groupName, activeHighlightInfo);
     }
 }

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts

@@ -2,7 +2,6 @@ import {
     AfterViewInit,
     Directive,
     ElementRef,
-    EventEmitter,
     Input,
     OnChanges,
     OnDestroy,
@@ -13,6 +12,7 @@ import {
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { compareMaps } from '../../core/utils';
+import { IgxTextHighlightService } from './text-highlight.service';
 
 export interface IBaseSearchInfo {
     searchText: string;
@@ -49,9 +49,6 @@ export interface IActiveHighlightInfo {
     standalone: true
 })
 export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges {
-    public static highlightGroupsMap = new Map<string, IActiveHighlightInfo>();
-    private static onActiveElementChanged = new EventEmitter<string>();
-
     /**
      * Determines the `CSS` class of the highlight elements.
      * This allows the developer to provide custom `CSS` to customize the highlight.
@@ -202,8 +199,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     private _defaultCssClass = 'igx-highlight';
     private _defaultActiveCssClass = 'igx-highlight--active';
 
-    constructor(private element: ElementRef, public renderer: Renderer2) {
-        IgxTextHighlightDirective.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => {
+    constructor(private element: ElementRef, private service: IgxTextHighlightService, private renderer: Renderer2) {
+        this.service.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => {
             if (this.groupName === groupName) {
                 if (this._activeElementIndex !== -1) {
                     this.deactivate();
@@ -213,25 +210,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
         });
     }
 
-    /**
-     * Activates the highlight at a given index.
-     * (if such index exists)
-     */
-    public static setActiveHighlight(groupName: string, highlight: IActiveHighlightInfo) {
-        IgxTextHighlightDirective.highlightGroupsMap.set(groupName, highlight);
-        IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
-    }
-
-    /**
-     * Clears any existing highlight.
-     */
-    public static clearActiveHighlight(groupName) {
-        IgxTextHighlightDirective.highlightGroupsMap.set(groupName, {
-            index: -1
-        });
-        IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
-    }
-
     /**
      * @hidden
      */
@@ -267,8 +245,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     public ngAfterViewInit() {
         this.parentElement = this.renderer.parentNode(this.element.nativeElement);
 
-        if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) {
-            IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, {
+        if (this.service.highlightGroupsMap.has(this.groupName) === false) {
+            this.service.highlightGroupsMap.set(this.groupName, {
                 index: -1
             });
         }
@@ -338,7 +316,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * Activates the highlight if it is on the currently active row and column.
      */
     public activateIfNecessary(): void {
-        const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName);
+        const group = this.service.highlightGroupsMap.get(this.groupName);
 
         if (group.index >= 0 && group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
             this.activate(group.index);

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.service.ts

@@ -0,0 +1,32 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { IActiveHighlightInfo } from './text-highlight.directive';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IgxTextHighlightService {
+    public highlightGroupsMap = new Map<string, IActiveHighlightInfo>();
+    public onActiveElementChanged = new EventEmitter<string>();
+
+    constructor() { }
+
+    /**
+     * Activates the highlight at a given index.
+     * (if such index exists)
+     */
+    public setActiveHighlight(groupName: string, highlight: IActiveHighlightInfo) {
+        this.highlightGroupsMap.set(groupName, highlight);
+        this.onActiveElementChanged.emit(groupName);
+    }
+
+    /**
+     * Clears any existing highlight.
+     */
+    public clearActiveHighlight(groupName) {
+        this.highlightGroupsMap.set(groupName, {
+            index: -1
+        });
+        this.onActiveElementChanged.emit(groupName);
+    }
+
+}

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -5,7 +5,7 @@ import { mkenum } from '../../core/utils';
  * - quickFilter: Default mode with a filter row UI between the column headers and the first row of records.
  * - excelStyleFilter: Filter mode where an Excel-style filter is used.
  */
-export const FilterMode = mkenum({
+export const FilterMode = /*@__PURE__*/mkenum({
     quickFilter: 'quickFilter',
     excelStyleFilter: 'excelStyleFilter'
 });
@@ -16,7 +16,7 @@ export type FilterMode = (typeof FilterMode)[keyof typeof FilterMode];
  * - top: Default value; Summary rows are displayed at the top of the grid.
  * - bottom: Summary rows are displayed at the bottom of the grid.
  */
-export const GridSummaryPosition = mkenum({
+export const GridSummaryPosition = /*@__PURE__*/mkenum({
     top: 'top',
     bottom: 'bottom'
 });
@@ -28,7 +28,7 @@ export type GridSummaryPosition = (typeof GridSummaryPosition)[keyof typeof Grid
  * - childLevelsOnly: Summaries are calculated only for child levels.
  * - rootAndChildLevels: Default value; Summaries are calculated for both root and child levels.
  */
-export const GridSummaryCalculationMode = mkenum({
+export const GridSummaryCalculationMode = /*@__PURE__*/mkenum({
     rootLevelOnly: 'rootLevelOnly',
     childLevelsOnly: 'childLevelsOnly',
     rootAndChildLevels: 'rootAndChildLevels'
@@ -42,8 +42,8 @@ export type GridSummaryCalculationMode = (typeof GridSummaryCalculationMode)[key
  */
 export type GridValidationTrigger = 'change' | 'blur' ;
 
-/** 
- * Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid. 
+/**
+ * Type representing the type of the target object (elements of the grid) for keydown (fired when a key is pressed) events in the grid.
  * - 'dataCell': Represents a data cell within the grid. It contains and displays individual data values
  * - 'summaryCell': Summary cells display aggregated/summarized data at the bottom of the grid. They provide insights like total record count, min/max values, etc.
  * - 'groupRow': Group row within the grid. Group rows are used to group related data rows by columns. Contains the related group expression, level, sub-records and group value.
@@ -66,7 +66,7 @@ export type GridKeydownTargetType =
  * - 'multiple': Default cell selection mode. More than one element can be selected at a time.
  * - 'multipleCascade': Similar to multiple selection. It is used in hierarchical or tree grids. Allows selection not only to an individual item but also all its related or nested items in a single action
  */
-export const GridSelectionMode = mkenum({
+export const GridSelectionMode = /*@__PURE__*/mkenum({
     none: 'none',
     single: 'single',
     multiple: 'multiple',
@@ -75,7 +75,7 @@ export const GridSelectionMode = mkenum({
 export type GridSelectionMode = (typeof GridSelectionMode)[keyof typeof GridSelectionMode];
 
 /** Enumeration representing different column display order options. */
-export const ColumnDisplayOrder = mkenum({
+export const ColumnDisplayOrder = /*@__PURE__*/mkenum({
     Alphabetical: 'Alphabetical',
     DisplayOrder: 'DisplayOrder'
 });

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -40,7 +40,7 @@ import { GridColumnDataType } from '../data-operations/data-util';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
 import { IForOfDataChangingEventArgs, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
-import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
+import { IgxTextHighlightService } from '../directives/text-highlight/text-highlight.service';
 import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy } from './grid.common';
 import type { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
@@ -3306,6 +3306,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         public navigation: IgxGridNavigationService,
         /** @hidden @internal */
         public filteringService: IgxFilteringService,
+        protected textHighlightService: IgxTextHighlightService,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
         /** @hidden @internal */
         public summaryService: IgxGridSummaryService,
@@ -5072,7 +5073,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.rebuildMatchCache();
 
             if (updateActiveInfo) {
-                const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id);
+                const activeInfo = this.textHighlightService.highlightGroupsMap.get(this.id);
                 this.lastSearchInfo.matchInfoCache.forEach((match, i) => {
                     if (match.column === activeInfo.column &&
                         match.row === activeInfo.row &&
@@ -7527,15 +7528,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.scrollTo(matchInfo.row, matchInfo.column);
             }
 
-            IgxTextHighlightDirective.setActiveHighlight(this.id, {
+            this.textHighlightService.setActiveHighlight(this.id, {
                 column: matchInfo.column,
                 row: matchInfo.row,
                 index: matchInfo.index,
                 metadata: matchInfo.metadata,
             });
 
         } else {
-            IgxTextHighlightDirective.clearActiveHighlight(this.id);
+            this.textHighlightService.clearActiveHighlight(this.id);
         }
 
         return this.lastSearchInfo.matchCount;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts

@@ -40,6 +40,7 @@ import { IgxOverlayService } from '../../services/overlay/overlay';
 import { State, Transaction, TransactionService } from '../../services/transaction/transaction';
 import { IgxGridTransaction } from '../common/types';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
+import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
 
 export const hierarchicalTransactionServiceFactory = () => new IgxTransactionService();
 
@@ -156,6 +157,7 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         envInjector: EnvironmentInjector,
         navigation: IgxHierarchicalGridNavigationService,
         filteringService: IgxFilteringService,
+        textHighlightService: IgxTextHighlightService,
         @Inject(IgxOverlayService) overlayService: IgxOverlayService,
         summaryService: IgxGridSummaryService,
         @Optional() @Inject(DisplayDensityToken) _displayDensityOptions: IDisplayDensityOptions,
@@ -178,6 +180,7 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
             envInjector,
             navigation,
             filteringService,
+            textHighlightService,
             overlayService,
             summaryService,
             _displayDensityOptions,

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -48,6 +48,7 @@ import { IgxPaginatorDirective } from '../../paginator/paginator-interfaces';
 import { IgxFlatTransactionFactory } from '../../services/transaction/transaction-factory.service';
 import { IGridCreatedEventArgs } from './events';
 import { IgxGridValidationService } from '../grid/grid-validation.service';
+import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -234,6 +235,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
         envInjector: EnvironmentInjector,
         navigation: IgxHierarchicalGridNavigationService,
         filteringService: IgxFilteringService,
+        textHighlightService: IgxTextHighlightService,
         @Inject(IgxOverlayService) overlayService: IgxOverlayService,
         summaryService: IgxGridSummaryService,
         @Optional() @Inject(DisplayDensityToken) _displayDensityOptions: IDisplayDensityOptions,
@@ -256,6 +258,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             envInjector,
             navigation,
             filteringService,
+            textHighlightService,
             overlayService,
             summaryService,
             _displayDensityOptions,

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -91,6 +91,7 @@ import { IgxGridDragSelectDirective } from '../selection/drag-select.directive';
 import { IgxGridBodyDirective } from '../grid.common';
 import { IgxColumnResizingService } from '../resizing/resizing.service';
 import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../../data-operations/data-clone-strategy';
+import { IgxTextHighlightService } from '../../directives/text-highlight/text-highlight.service';
 
 let NEXT_ID = 0;
 const MINIMUM_COLUMN_WIDTH = 200;
@@ -976,6 +977,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         envInjector: EnvironmentInjector,
         navigation: IgxPivotGridNavigationService,
         filteringService: IgxFilteringService,
+        textHighlightService: IgxTextHighlightService,
         @Inject(IgxOverlayService) overlayService: IgxOverlayService,
         summaryService: IgxGridSummaryService,
         @Optional() @Inject(DisplayDensityToken) _displayDensityOptions: IDisplayDensityOptions,
@@ -998,6 +1000,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             envInjector,
             navigation,
             filteringService,
+            textHighlightService,
             overlayService,
             summaryService,
             _displayDensityOptions,