feat: Draggable List

projects/components/src/draggable-list/draggable-item/draggable-item.component.ts

@@ -1,18 +1,15 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../../public-api';
 
 @Component({
   selector: 'ht-draggable-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-template #draggableItem>
-      <ng-content></ng-content>
-    </ng-template>
-  `
+  template: CONTENT_HOLDER_TEMPLATE
 })
-export class DraggableItemComponent {
-  @ViewChild('draggableItem', { static: true })
-  public content!: TemplateRef<unknown>;
-
+export class DraggableItemComponent<T> extends ContentHolder {
   @Input()
   public disabled: boolean = false;
+
+  @Input()
+  public data?: T;
 }

projects/components/src/draggable-list/draggable-list.component.scss

@@ -0,0 +1,11 @@
+@import 'color-palette';
+
+.draggable-list .draggable-item {
+  cursor: move;
+
+  &.disabled {
+    background-color: $gray-2;
+    color: $gray-5;
+    cursor: not-allowed;
+  }
+}

projects/components/src/draggable-list/draggable-list.component.ts

@@ -14,11 +14,14 @@ import { DraggableItemComponent } from './draggable-item/draggable-item.componen
 @Component({
   selector: 'ht-draggable-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./draggable-list.component.scss'],
   template: `
-    <div cdkDropList class="example-list" (cdkDropListDropped)="dropList($event)">
+    <div cdkDropList class="draggable-list" (cdkDropListDropped)="this.dropList($event)">
       <div
         *ngFor="let draggableItem of this.draggableItems"
         cdkDrag
+        class="draggable-item"
+        [ngClass]="{ disabled: disabled || draggableItem.disabled }"
         [cdkDragDisabled]="disabled || draggableItem.disabled"
       >
         <ng-container *ngTemplateOutlet="draggableItem.content"></ng-container>
@@ -31,19 +34,21 @@ export class DraggableListComponent implements AfterContentInit {
   public disabled: boolean = false;
 
   @Output()
-  public readonly listOrderChange: EventEmitter<DraggableItemComponent[]> = new EventEmitter();
+  public readonly draggableListChange: EventEmitter<unknown> = new EventEmitter();
 
   @ContentChildren(DraggableItemComponent)
-  public draggableItemsRef!: QueryList<DraggableItemComponent>;
+  public draggableItemsRef!: QueryList<DraggableItemComponent<unknown>>;
 
-  public draggableItems: DraggableItemComponent[] = [];
+  public draggableItems: DraggableItemComponent<unknown>[] = [];
 
   public ngAfterContentInit(): void {
     this.draggableItems = this.draggableItemsRef.toArray();
   }
 
-  public dropList(event: CdkDragDrop<DraggableItemComponent[]>): void {
+  public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
     moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
-    this.listOrderChange.emit(this.draggableItems);
+    this.draggableListChange.emit(
+      this.draggableItems.find((_dragabbleItem, index) => event.currentIndex === index)?.data
+    );
   }
 }