fix(ngx-layout): Fix a circular dependency issue in webpack builds

Author: IbenTesara

libs/layout/src/lib/abstracts/drag-and-drop/drag-and-drop-item.directive.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { NgxHasFocusDragAndDropAbstractDirective } from './has-focus.directive';
+
+/**
+ * An abstract class to avoid circular dependency with the ItemDirective and the HostDirective
+ */
+@Directive()
+export abstract class NgxAccessibleAbstractDragAndDropItemDirective extends NgxHasFocusDragAndDropAbstractDirective {
+	/**
+	 * An unique id of the draggable item
+	 */
+	abstract itemId: string;
+
+	/**
+	 *  Marks the item as focussed and selected
+	 */
+	abstract markAsActive(): void;
+}

libs/layout/src/lib/directives/drag-and-drop/has-focus.directive.ts renamed to libs/layout/src/lib/abstracts/drag-and-drop/has-focus.directive.ts

@@ -0,0 +1,3 @@
+export * from './drag-and-drop-item.directive';
+export * from './has-focus.directive';
+export * from './drag-and-drop.service';

libs/layout/src/lib/abstracts/drag-and-drop/index.ts

@@ -1,2 +1,2 @@
 export * from './display-content/display-content.component';
-export * from './drag-and-drop/drag-and-drop.service';
+export * from './drag-and-drop';

libs/layout/src/lib/abstracts/index.ts

@@ -1,7 +1,9 @@
 import { ContentChildren, Directive, ElementRef, Input, QueryList } from '@angular/core';
 
-import { NgxAccessibleDragAndDropAbstractService } from '../../abstracts';
-import { NgxAccessibleDragAndDropItemDirective } from './drag-and-drop-item.directive';
+import {
+	NgxAccessibleAbstractDragAndDropItemDirective,
+	NgxAccessibleDragAndDropAbstractService,
+} from '../../abstracts';
 import { NgxAccessibleDragAndDropContainerDirective } from './drag-and-drop-container.directive';
 
 /**
@@ -16,8 +18,7 @@ export class NgxAccessibleDragAndDropHostDirective {
 	/**
 	 * A list of all the drag and drop items
 	 */
-	@ContentChildren(NgxAccessibleDragAndDropItemDirective, { descendants: true })
-	public items: QueryList<NgxAccessibleDragAndDropItemDirective>;
+	public items: Record<string, NgxAccessibleAbstractDragAndDropItemDirective> = {};
 
 	/**
 	 * A list of all the drag and drop containers
@@ -41,7 +42,7 @@ export class NgxAccessibleDragAndDropHostDirective {
 	 * @param  id - The id of the drag and drop item
 	 */
 	public markAsActive(id: string): void {
-		this.items?.find((item) => item.itemId === id)?.markAsActive();
+		this.items[id].markAsActive();
 	}
 
 	/**
@@ -59,4 +60,8 @@ export class NgxAccessibleDragAndDropHostDirective {
 			.setDragAndDropDescription(this.elementRef.nativeElement, this.description)
 			.subscribe();
 	}
+
+	public registerDragAndDropItem(item: NgxAccessibleAbstractDragAndDropItemDirective): void {
+		this.items[item.itemId] = item;
+	}
 }

libs/layout/src/lib/directives/drag-and-drop/drag-and-drop-host.directive.ts

@@ -11,9 +11,11 @@ import {
 } from '@angular/core';
 import { CdkDropList } from '@angular/cdk/drag-drop';
 
-import { NgxAccessibleDragAndDropAbstractService } from '../../abstracts';
+import {
+	NgxAccessibleAbstractDragAndDropItemDirective,
+	NgxAccessibleDragAndDropAbstractService,
+} from '../../abstracts';
 import { NgxAccessibleDragAndDropMoveEvent, NgxAccessibleDragAndDropMoveType } from '../../types';
-import { NgxHasFocusDragAndDropAbstractDirective } from './has-focus.directive';
 import { NgxAccessibleDragAndDropContainerDirective } from './drag-and-drop-container.directive';
 import { NgxAccessibleDragAndDropHostDirective } from './drag-and-drop-host.directive';
 
@@ -28,7 +30,7 @@ import { NgxAccessibleDragAndDropHostDirective } from './drag-and-drop-host.dire
 		'[attr.tabIndex]': 'tabIndex()',
 	},
 })
-export class NgxAccessibleDragAndDropItemDirective extends NgxHasFocusDragAndDropAbstractDirective {
+export class NgxAccessibleDragAndDropItemDirective extends NgxAccessibleAbstractDragAndDropItemDirective {
 	/**
 	 * The tab index of the item
 	 */
@@ -152,6 +154,13 @@ export class NgxAccessibleDragAndDropItemDirective extends NgxHasFocusDragAndDro
 			.subscribe();
 	}
 
+	/**
+	 * Registers the item with the drop host
+	 */
+	ngOnInit(): void {
+		this.dropHost.registerDragAndDropItem(this);
+	}
+
 	/**
 	 * Handles the pressing of a button in the drag and drop host
 	 */