refactor(query builder): provide drag service to the IgxQueryBuilderTreeComponent (#15524)

* refactor(query-builder): change how drag service is provided

Author: teodosiah

projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts

@@ -1,30 +1,22 @@
 import { filter, fromEvent, sampleTime, Subscription, tap } from 'rxjs';
 import { IgxQueryBuilderTreeComponent } from './query-builder-tree.component';
-import { ElementRef, Inject, Injectable } from '@angular/core';
+import { ElementRef, Injectable } from '@angular/core';
 import { ExpressionGroupItem, ExpressionItem, QueryBuilderSelectors } from './query-builder.common';
 
 const DEFAULT_SET_Z_INDEX_DELAY = 10;
 const Z_INDEX_TO_SET = 10010; //overlay z-index is 10005
 
 /** @hidden @internal */
 @Injectable()
-export class IgxQueryBuilderDragService {
-    constructor(
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent,
-        private _queryBuilderTreeComponentElRef: ElementRef,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderTreeComponentDeleteItem: (expressionItem: ExpressionItem) => void,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderFocusChipAfterDrag: (index: number) => void,
-    ) { }
-
+export class IgxQueryBuilderDragService {    
     public dropGhostChipNode: Node;
     private sourceExpressionItem: ExpressionItem;
     private sourceElement: HTMLElement;
     private targetExpressionItem: ExpressionItem;
     private targetElement: HTMLElement;
     private dropUnder: boolean;
+    private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent;
+    private _queryBuilderTreeComponentElRef: ElementRef;
     private _ghostChipMousemoveSubscription$: Subscription;
     private _keyboardSubscription$: Subscription;
     private _keyDragOffsetIndex: number = 0;
@@ -52,6 +44,12 @@ export class IgxQueryBuilderDragService {
         return this._queryBuilderTreeComponentElRef.nativeElement.querySelector(`.${QueryBuilderSelectors.FILTER_TREE}`);
     }
 
+       
+    public register(tree: IgxQueryBuilderTreeComponent, el: ElementRef) {
+        this._queryBuilderTreeComponent = tree;
+        this._queryBuilderTreeComponentElRef = el;
+    }
+
     /** When chip is picked up for dragging
      * 
      * @param sourceDragElement The HTML element of the chip that's been dragged
@@ -173,7 +171,7 @@ export class IgxQueryBuilderDragService {
 
         this.moveDraggedChipToNewLocation(this.sourceExpressionItem, this.targetExpressionItem, this.dropUnder);
 
-        this._queryBuilderFocusChipAfterDrag(dropLocationIndex);
+        this._queryBuilderTreeComponent.focusChipAfterDrag(dropLocationIndex);
 
         this.resetDragAndDrop(true);
 
@@ -354,7 +352,7 @@ export class IgxQueryBuilderDragService {
         appendToExpressionItem.parent.children.splice(index + (dropUnder ? 1 : 0), 0, dragCopy);
 
         //Delete from old place
-        this._queryBuilderTreeComponentDeleteItem(sourceExpressionItem);
+        this._queryBuilderTreeComponent.deleteItem(sourceExpressionItem);
     }
 
     /** Reset Drag&Drop vars. Optionally the drag source vars too*/

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -68,38 +68,41 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50;
     templateUrl: './query-builder-tree.component.html',
     host: { 'class': 'igx-query-builder-tree' },
     imports: [
-    DatePipe,
-    FormsModule,
-    IgxButtonDirective,
-    IgxCheckboxComponent,
-    IgxChipComponent,
-    IgxComboComponent,
-    IgxComboHeaderDirective,
-    IgxDatePickerComponent,
-    IgxDateTimeEditorDirective,
-    IgxDialogComponent,
-    IgxDragIgnoreDirective,
-    IgxDropDirective,
-    IgxDropDownComponent,
-    IgxDropDownItemComponent,
-    IgxDropDownItemNavigationDirective,
-    IgxFieldFormatterPipe,
-    IgxIconButtonDirective,
-    IgxIconComponent,
-    IgxInputDirective,
-    IgxInputGroupComponent,
-    IgxOverlayOutletDirective,
-    IgxPickerClearComponent,
-    IgxPickerToggleComponent,
-    IgxPrefixDirective,
-    IgxSelectComponent,
-    IgxSelectItemComponent,
-    IgxTimePickerComponent,
-    IgxTooltipDirective,
-    IgxTooltipTargetDirective,
-    NgClass,
-    NgTemplateOutlet
-]
+        DatePipe,
+        FormsModule,
+        IgxButtonDirective,
+        IgxCheckboxComponent,
+        IgxChipComponent,
+        IgxComboComponent,
+        IgxComboHeaderDirective,
+        IgxDatePickerComponent,
+        IgxDateTimeEditorDirective,
+        IgxDialogComponent,
+        IgxDragIgnoreDirective,
+        IgxDropDirective,
+        IgxDropDownComponent,
+        IgxDropDownItemComponent,
+        IgxDropDownItemNavigationDirective,
+        IgxFieldFormatterPipe,
+        IgxIconButtonDirective,
+        IgxIconComponent,
+        IgxInputDirective,
+        IgxInputGroupComponent,
+        IgxOverlayOutletDirective,
+        IgxPickerClearComponent,
+        IgxPickerToggleComponent,
+        IgxPrefixDirective,
+        IgxSelectComponent,
+        IgxSelectItemComponent,
+        IgxTimePickerComponent,
+        IgxTooltipDirective,
+        IgxTooltipTargetDirective,
+        NgClass,
+        NgTemplateOutlet
+    ],
+    providers: [
+        IgxQueryBuilderDragService
+    ]
 })
 export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /**
@@ -519,11 +522,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     }
 
     constructor(public cdr: ChangeDetectorRef,
+        public dragService: IgxQueryBuilderDragService,
         protected platform: PlatformUtil,
-        protected el: ElementRef,
         private elRef: ElementRef,
         @Inject(LOCALE_ID) protected _localeId: string) {
         this.locale = this.locale || this._localeId;
+        this.dragService.register(this, elRef);
     }
 
     /**
@@ -842,7 +846,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    private deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
+    /**
+     * @hidden @internal
+     */
+    public deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
         if (!expressionItem.parent) {
             this.rootGroup = null;
             this.currentGroup = null;
@@ -1025,15 +1032,13 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         this.deleteItem(expressionItem);
     }
 
-    private focusChipAfterDrag = (index: number) => {
-        this._lastFocusedChipIndex = index;
-        this.focusEditedExpressionChip();
-    }
-
     /**
      * @hidden @internal
      */
-    public dragService: IgxQueryBuilderDragService = new IgxQueryBuilderDragService(this, this.el, this.deleteItem, this.focusChipAfterDrag);
+    public focusChipAfterDrag = (index: number) => {
+        this._lastFocusedChipIndex = index;
+        this.focusEditedExpressionChip();
+    }
 
     /**
      * @hidden @internal