From 7b3f03a558accc960db5007ca401c9160e0625e2 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Mon, 14 Mar 2022 18:31:26 -0300
Subject: [PATCH 1/7] Dragganble List in progress

---
 .../draggable-item-panel.component.scss       | 19 +++++++++++
 .../draggable-item-panel.component.ts         | 16 ++++++++++
 .../draggable-list-panel.component.scss       |  0
 .../draggable-list-panel.component.ts         | 32 +++++++++++++++++++
 .../draggable-list-panel.module.ts            | 12 +++++++
 projects/components/src/public-api.ts         |  5 +++
 6 files changed, 84 insertions(+)
 create mode 100644 projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
 create mode 100644 projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
 create mode 100644 projects/components/src/draggable-list/draggable-list-panel.component.scss
 create mode 100644 projects/components/src/draggable-list/draggable-list-panel.component.ts
 create mode 100644 projects/components/src/draggable-list/draggable-list-panel.module.ts

diff --git a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
new file mode 100644
index 000000000..6bcf197a3
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
@@ -0,0 +1,19 @@
+@import 'mixins';
+
+.draggable-list-item {
+  @include popover-menu-item;
+  @include body-1-regular;
+  @include disableable;
+
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
diff --git a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
new file mode 100644
index 000000000..d505965aa
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ht-draggable-item-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./draggable-item-panel.component.scss'],
+  template: `
+    <ng-template #draggableItemPanel>
+      <ng-content></ng-content>
+    </ng-template>
+  `
+})
+export class DraggableItemPanelComponent {
+  @ViewChild('draggableItemPanel', { static: true })
+  public content!: TemplateRef<unknown>;
+}
diff --git a/projects/components/src/draggable-list/draggable-list-panel.component.scss b/projects/components/src/draggable-list/draggable-list-panel.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/components/src/draggable-list/draggable-list-panel.component.ts b/projects/components/src/draggable-list/draggable-list-panel.component.ts
new file mode 100644
index 000000000..2be2d713c
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list-panel.component.ts
@@ -0,0 +1,32 @@
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
+import { DraggableItemPanelComponent } from './draggable-list-item/draggable-item-panel.component';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'ht-draggable-list-panel',
+  styleUrls: ['./draggable-list-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div cdkDropList class="example-list" (cdkDropListDropped)="dropList($event)">
+      <div *ngFor="let dragabblePanel of this.draggablePanels" cdkDrag>
+        <ng-container *ngTemplateOutlet="dragabblePanel.content"></ng-container>
+      </div>
+    </div>
+  `
+})
+export class DraggableListPanelComponent implements AfterContentInit {
+  @Input()
+  public disabled: boolean = false;
+
+  @ContentChildren(DraggableItemPanelComponent) draggableItemPanels!: QueryList<DraggableItemPanelComponent>;
+  public draggablePanels!: DraggableItemPanelComponent[];
+  public draggablePanelsLoaded: boolean = false;
+
+  public ngAfterContentInit(): void {
+    this.draggablePanels = this.draggableItemPanels.toArray();
+  }
+
+  public dropList(event: CdkDragDrop<DraggableItemPanelComponent[]>): void {
+    moveItemInArray(this.draggablePanels, event.previousIndex, event.currentIndex);
+  }
+}
diff --git a/projects/components/src/draggable-list/draggable-list-panel.module.ts b/projects/components/src/draggable-list/draggable-list-panel.module.ts
new file mode 100644
index 000000000..c646496ad
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list-panel.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DraggableListPanelComponent } from './draggable-list-panel.component';
+import { DraggableItemPanelComponent } from './draggable-list-item/draggable-item-panel.component';
+
+@NgModule({
+  declarations: [DraggableListPanelComponent, DraggableItemPanelComponent],
+  imports: [CommonModule, DragDropModule],
+  exports: [DraggableListPanelComponent, DraggableItemPanelComponent]
+})
+export class DraggableListPanelModule {}
diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index cbdafa48e..7f3620943 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -65,6 +65,11 @@ export * from './description/description.module';
 export * from './divider/divider.component';
 export * from './divider/divider.module';
 
+// Draggable list
+export { DraggableListPanelComponent } from './draggable-list/draggable-list-panel.component';
+export { DraggableItemPanelComponent } from './draggable-list/draggable-list-item/draggable-item-panel.component';
+export { DraggableListPanelModule } from './draggable-list/draggable-list-panel.module';
+
 // Dropdown menu
 export { MenuDropdownComponent } from './menu-dropdown/menu-dropdown.component';
 export { MenuItemComponent } from './menu-dropdown/menu-item/menu-item.component';

From c6524fcc8bd23e29346e782ab0799b9b01d255ea Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 18:13:17 -0300
Subject: [PATCH 2/7] feat: add draggable list

---
 .../draggable-item.component.ts               | 18 +++++++
 .../draggable-item-panel.component.scss       | 19 --------
 .../draggable-item-panel.component.ts         | 16 -------
 .../draggable-list-panel.component.scss       |  0
 .../draggable-list-panel.component.ts         | 32 -------------
 .../draggable-list-panel.module.ts            | 12 -----
 .../draggable-list.component.test.ts          | 29 ++++++++++++
 .../draggable-list.component.ts               | 47 +++++++++++++++++++
 .../draggable-list/draggable-list.module.ts   | 12 +++++
 projects/components/src/public-api.ts         |  6 +--
 10 files changed, 109 insertions(+), 82 deletions(-)
 create mode 100644 projects/components/src/draggable-list/draggable-item/draggable-item.component.ts
 delete mode 100644 projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
 delete mode 100644 projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
 delete mode 100644 projects/components/src/draggable-list/draggable-list-panel.component.scss
 delete mode 100644 projects/components/src/draggable-list/draggable-list-panel.component.ts
 delete mode 100644 projects/components/src/draggable-list/draggable-list-panel.module.ts
 create mode 100644 projects/components/src/draggable-list/draggable-list.component.test.ts
 create mode 100644 projects/components/src/draggable-list/draggable-list.component.ts
 create mode 100644 projects/components/src/draggable-list/draggable-list.module.ts

diff --git a/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts b/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts
new file mode 100644
index 000000000..30270abcc
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts
@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ht-draggable-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-template #draggableItem>
+      <ng-content></ng-content>
+    </ng-template>
+  `
+})
+export class DraggableItemComponent {
+  @ViewChild('draggableItem', { static: true })
+  public content!: TemplateRef<unknown>;
+
+  @Input()
+  public disabled: boolean = false;
+}
diff --git a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
deleted file mode 100644
index 6bcf197a3..000000000
--- a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import 'mixins';
-
-.draggable-list-item {
-  @include popover-menu-item;
-  @include body-1-regular;
-  @include disableable;
-
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
diff --git a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts b/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
deleted file mode 100644
index d505965aa..000000000
--- a/projects/components/src/draggable-list/draggable-list-item/draggable-item-panel.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild } from '@angular/core';
-
-@Component({
-  selector: 'ht-draggable-item-panel',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./draggable-item-panel.component.scss'],
-  template: `
-    <ng-template #draggableItemPanel>
-      <ng-content></ng-content>
-    </ng-template>
-  `
-})
-export class DraggableItemPanelComponent {
-  @ViewChild('draggableItemPanel', { static: true })
-  public content!: TemplateRef<unknown>;
-}
diff --git a/projects/components/src/draggable-list/draggable-list-panel.component.scss b/projects/components/src/draggable-list/draggable-list-panel.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/projects/components/src/draggable-list/draggable-list-panel.component.ts b/projects/components/src/draggable-list/draggable-list-panel.component.ts
deleted file mode 100644
index 2be2d713c..000000000
--- a/projects/components/src/draggable-list/draggable-list-panel.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, Input, QueryList } from '@angular/core';
-import { DraggableItemPanelComponent } from './draggable-list-item/draggable-item-panel.component';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-
-@Component({
-  selector: 'ht-draggable-list-panel',
-  styleUrls: ['./draggable-list-panel.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div cdkDropList class="example-list" (cdkDropListDropped)="dropList($event)">
-      <div *ngFor="let dragabblePanel of this.draggablePanels" cdkDrag>
-        <ng-container *ngTemplateOutlet="dragabblePanel.content"></ng-container>
-      </div>
-    </div>
-  `
-})
-export class DraggableListPanelComponent implements AfterContentInit {
-  @Input()
-  public disabled: boolean = false;
-
-  @ContentChildren(DraggableItemPanelComponent) draggableItemPanels!: QueryList<DraggableItemPanelComponent>;
-  public draggablePanels!: DraggableItemPanelComponent[];
-  public draggablePanelsLoaded: boolean = false;
-
-  public ngAfterContentInit(): void {
-    this.draggablePanels = this.draggableItemPanels.toArray();
-  }
-
-  public dropList(event: CdkDragDrop<DraggableItemPanelComponent[]>): void {
-    moveItemInArray(this.draggablePanels, event.previousIndex, event.currentIndex);
-  }
-}
diff --git a/projects/components/src/draggable-list/draggable-list-panel.module.ts b/projects/components/src/draggable-list/draggable-list-panel.module.ts
deleted file mode 100644
index c646496ad..000000000
--- a/projects/components/src/draggable-list/draggable-list-panel.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { DraggableListPanelComponent } from './draggable-list-panel.component';
-import { DraggableItemPanelComponent } from './draggable-list-item/draggable-item-panel.component';
-
-@NgModule({
-  declarations: [DraggableListPanelComponent, DraggableItemPanelComponent],
-  imports: [CommonModule, DragDropModule],
-  exports: [DraggableListPanelComponent, DraggableItemPanelComponent]
-})
-export class DraggableListPanelModule {}
diff --git a/projects/components/src/draggable-list/draggable-list.component.test.ts b/projects/components/src/draggable-list/draggable-list.component.test.ts
new file mode 100644
index 000000000..fc2c3afa4
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list.component.test.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { DraggableListComponent } from './draggable-list.component';
+
+describe('Draggable List Component', () => {
+  const createHost = createHostFactory<DraggableListComponent>({
+    component: DraggableListComponent,
+    imports: [CommonModule],
+    declarations: [MockComponent(DraggableItemComponent)],
+    shallow: true
+  });
+
+  let spectator: SpectatorHost<DraggableListComponent>;
+
+  test('should display draggable list component', () => {
+    spectator = createHost(
+      `<ht-draggable-list>
+        <ht-draggable-item>Item 1</ht-draggable-item>
+        <ht-draggable-item>Item 2</ht-draggable-item>
+      </ht-draggable-list>
+      `
+    );
+
+    expect(spectator.component.disabled).toBe(false);
+    expect(spectator.component.draggableItems.length).toBe(2);
+  });
+});
diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
new file mode 100644
index 000000000..c51fbf541
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -0,0 +1,47 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList
+} from '@angular/core';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'ht-draggable-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div cdkDropList class="example-list" (cdkDropListDropped)="dropList($event)">
+      <div
+        *ngFor="let draggableItem of this.draggableItems"
+        cdkDrag
+        [cdkDragDisabled]="disabled || draggableItem.disabled"
+      >
+        <ng-container *ngTemplateOutlet="draggableItem.content"></ng-container>
+      </div>
+    </div>
+  `
+})
+export class DraggableListComponent implements AfterContentInit {
+  @Input()
+  public disabled: boolean = false;
+
+  @Output()
+  public readonly listOrderChange: EventEmitter<DraggableItemComponent[]> = new EventEmitter();
+
+  @ContentChildren(DraggableItemComponent) draggableItemsRef!: QueryList<DraggableItemComponent>;
+  public draggableItems: DraggableItemComponent[] = [];
+
+  public ngAfterContentInit(): void {
+    this.draggableItems = this.draggableItemsRef.toArray();
+  }
+
+  public dropList(event: CdkDragDrop<DraggableItemComponent[]>): void {
+    moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
+    this.listOrderChange.emit(this.draggableItems);
+  }
+}
diff --git a/projects/components/src/draggable-list/draggable-list.module.ts b/projects/components/src/draggable-list/draggable-list.module.ts
new file mode 100644
index 000000000..58f3b37a7
--- /dev/null
+++ b/projects/components/src/draggable-list/draggable-list.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DraggableListComponent } from './draggable-list.component';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+
+@NgModule({
+  declarations: [DraggableListComponent, DraggableItemComponent],
+  imports: [CommonModule, DragDropModule],
+  exports: [DraggableListComponent, DraggableItemComponent]
+})
+export class DraggableListModule {}
diff --git a/projects/components/src/public-api.ts b/projects/components/src/public-api.ts
index 7f3620943..423fd7d26 100644
--- a/projects/components/src/public-api.ts
+++ b/projects/components/src/public-api.ts
@@ -66,9 +66,9 @@ export * from './divider/divider.component';
 export * from './divider/divider.module';
 
 // Draggable list
-export { DraggableListPanelComponent } from './draggable-list/draggable-list-panel.component';
-export { DraggableItemPanelComponent } from './draggable-list/draggable-list-item/draggable-item-panel.component';
-export { DraggableListPanelModule } from './draggable-list/draggable-list-panel.module';
+export { DraggableListComponent } from './draggable-list/draggable-list.component';
+export { DraggableItemComponent } from './draggable-list/draggable-item/draggable-item.component';
+export { DraggableListModule } from './draggable-list/draggable-list.module';
 
 // Dropdown menu
 export { MenuDropdownComponent } from './menu-dropdown/menu-dropdown.component';

From 32e07e52d67b2eb0462fe105a2054839db26636d Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 18:22:53 -0300
Subject: [PATCH 3/7] feat: fixing lint

---
 .../components/src/draggable-list/draggable-list.module.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/draggable-list/draggable-list.module.ts b/projects/components/src/draggable-list/draggable-list.module.ts
index 58f3b37a7..8349a82c4 100644
--- a/projects/components/src/draggable-list/draggable-list.module.ts
+++ b/projects/components/src/draggable-list/draggable-list.module.ts
@@ -1,8 +1,8 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { DraggableListComponent } from './draggable-list.component';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { DraggableListComponent } from './draggable-list.component';
 
 @NgModule({
   declarations: [DraggableListComponent, DraggableItemComponent],

From 7877340746801b1a6ee49ab15c706bd75371c5e9 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 18:27:39 -0300
Subject: [PATCH 4/7] feat: fixing lint

---
 .../src/draggable-list/draggable-list.component.ts          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index c51fbf541..ff0f9c2b0 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -1,3 +1,4 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -9,7 +10,6 @@ import {
   QueryList
 } from '@angular/core';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'ht-draggable-list',
@@ -33,7 +33,9 @@ export class DraggableListComponent implements AfterContentInit {
   @Output()
   public readonly listOrderChange: EventEmitter<DraggableItemComponent[]> = new EventEmitter();
 
-  @ContentChildren(DraggableItemComponent) draggableItemsRef!: QueryList<DraggableItemComponent>;
+  @ContentChildren(DraggableItemComponent) 
+  public draggableItemsRef!: QueryList<DraggableItemComponent>;
+  
   public draggableItems: DraggableItemComponent[] = [];
 
   public ngAfterContentInit(): void {

From 321a0d73ce8827d452837fddaae4f73a97684b05 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Tue, 15 Mar 2022 18:35:10 -0300
Subject: [PATCH 5/7] feat: fix prettier

---
 .../components/src/draggable-list/draggable-list.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index ff0f9c2b0..56957379c 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -33,9 +33,9 @@ export class DraggableListComponent implements AfterContentInit {
   @Output()
   public readonly listOrderChange: EventEmitter<DraggableItemComponent[]> = new EventEmitter();
 
-  @ContentChildren(DraggableItemComponent) 
+  @ContentChildren(DraggableItemComponent)
   public draggableItemsRef!: QueryList<DraggableItemComponent>;
-  
+
   public draggableItems: DraggableItemComponent[] = [];
 
   public ngAfterContentInit(): void {

From cf92ffbefc9639b5ffbae77c7b68d289eb644000 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Wed, 16 Mar 2022 16:46:45 -0300
Subject: [PATCH 6/7] feat: adding disabled styles and modify child component

---
 .../draggable-item/draggable-item.component.ts  | 17 +++++++----------
 .../draggable-list.component.scss               | 11 +++++++++++
 .../draggable-list/draggable-list.component.ts  | 17 +++++++++++------
 3 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 projects/components/src/draggable-list/draggable-list.component.scss

diff --git a/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts b/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts
index 30270abcc..54181457b 100644
--- a/projects/components/src/draggable-list/draggable-item/draggable-item.component.ts
+++ b/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;
 }
diff --git a/projects/components/src/draggable-list/draggable-list.component.scss b/projects/components/src/draggable-list/draggable-list.component.scss
new file mode 100644
index 000000000..7c786c961
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index 56957379c..ca444e3d2 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/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
+    );
   }
 }

From 9bc4e3533c1122da355aa1acc5c0cfb157a08520 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Wed, 16 Mar 2022 17:25:06 -0300
Subject: [PATCH 7/7] feat: adding T to draggable list

---
 .../draggable-list.component.test.ts          | 29 -------------------
 .../draggable-list.component.ts               | 12 ++++----
 2 files changed, 5 insertions(+), 36 deletions(-)
 delete mode 100644 projects/components/src/draggable-list/draggable-list.component.test.ts

diff --git a/projects/components/src/draggable-list/draggable-list.component.test.ts b/projects/components/src/draggable-list/draggable-list.component.test.ts
deleted file mode 100644
index fc2c3afa4..000000000
--- a/projects/components/src/draggable-list/draggable-list.component.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { MockComponent } from 'ng-mocks';
-import { DraggableItemComponent } from './draggable-item/draggable-item.component';
-import { DraggableListComponent } from './draggable-list.component';
-
-describe('Draggable List Component', () => {
-  const createHost = createHostFactory<DraggableListComponent>({
-    component: DraggableListComponent,
-    imports: [CommonModule],
-    declarations: [MockComponent(DraggableItemComponent)],
-    shallow: true
-  });
-
-  let spectator: SpectatorHost<DraggableListComponent>;
-
-  test('should display draggable list component', () => {
-    spectator = createHost(
-      `<ht-draggable-list>
-        <ht-draggable-item>Item 1</ht-draggable-item>
-        <ht-draggable-item>Item 2</ht-draggable-item>
-      </ht-draggable-list>
-      `
-    );
-
-    expect(spectator.component.disabled).toBe(false);
-    expect(spectator.component.draggableItems.length).toBe(2);
-  });
-});
diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index ca444e3d2..f4b7b3d81 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -29,17 +29,17 @@ import { DraggableItemComponent } from './draggable-item/draggable-item.componen
     </div>
   `
 })
-export class DraggableListComponent implements AfterContentInit {
+export class DraggableListComponent<T> implements AfterContentInit {
   @Input()
   public disabled: boolean = false;
 
   @Output()
-  public readonly draggableListChange: EventEmitter<unknown> = new EventEmitter();
+  public readonly draggableListChange: EventEmitter<T[]> = new EventEmitter();
 
   @ContentChildren(DraggableItemComponent)
-  public draggableItemsRef!: QueryList<DraggableItemComponent<unknown>>;
+  public draggableItemsRef!: QueryList<DraggableItemComponent<T>>;
 
-  public draggableItems: DraggableItemComponent<unknown>[] = [];
+  public draggableItems: DraggableItemComponent<T>[] = [];
 
   public ngAfterContentInit(): void {
     this.draggableItems = this.draggableItemsRef.toArray();
@@ -47,8 +47,6 @@ export class DraggableListComponent implements AfterContentInit {
 
   public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
     moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
-    this.draggableListChange.emit(
-      this.draggableItems.find((_dragabbleItem, index) => event.currentIndex === index)?.data
-    );
+    this.draggableListChange.emit(this.draggableItems.map(dragabbleItem => dragabbleItem.data!));
   }
 }