Merge branch 'feature/draggable' of https://github.com/darkomtc11/ngx-smart-modal into darkomtc11-feature/draggable

Author: Maxime Lafarie

package-lock.json

@@ -37,6 +37,8 @@ <h1 class="title">ngx-smart-modal</h1>
                 style="position:absolute;top: 300px;left: 900px;">Custom target modal</button>
         <button class="button -regular"
                 (click)="goNewDynamic()">Create dynamic modal<span>new</span></button>
+        <button class="button -regular"
+                (click)="draggableModal.open()">Draggable modal<span>new</span></button>
     </div>
 
     <h3 class="title">Examples with CSS frameworks</h3>
@@ -343,3 +345,26 @@ <h1>Hey, I am a modal placed relatively to an element!</h1>
     <button class="button -dark"
             (click)="customTarget.close()">Close</button>
 </ngx-smart-modal>
+
+<ngx-smart-modal #draggableModal 
+                 [draggable]="true" 
+                 [draggableEdges]="true" 
+                 identifier="draggableModal">
+    <h1>Hey, you can drag me anywhere by holding my edges or handle!</h1>
+    <p>Add class ".draggable" to any element inside modal to make it a drag handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+    <button class="button -regular" (click)="secondDraggableModal.open()">Second draggable
+        modal<span>new</span></button>
+</ngx-smart-modal>
+
+<ngx-smart-modal #secondDraggableModal 
+                 [draggable]="true" 
+                 identifier="secondDraggableModal">
+    <h1>Hey, I will move independently from my parent!</h1>
+    <p>I can only be moved by a handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+</ngx-smart-modal>

src/app/demo/main/main.component.html

@@ -29,3 +29,11 @@
     }
   }
 }
+
+span.draggable {
+  color: white;
+  padding: 5px;
+  text-align: center;
+  background-color: gray;
+  margin-right: 10px;
+}