ng2-dnd - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

index.js

@@ -7,5 +7,5 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import { DragDropService, DragDropSortableService, dragDropServiceFactory, dragDropSortableServiceFactory } from './src/dnd.service';
-import { DraggableComponent } from './src/draggable.component';
+import { DraggableComponent, DraggableHandleComponent } from './src/draggable.component';
 import { DroppableComponent } from './src/droppable.component';
-import { SortableContainer, SortableComponent } from './src/sortable.component';
+import { SortableContainer, SortableComponent, SortableHandleComponent } from './src/sortable.component';
 export * from './src/abstract.component';
@@ -33,4 +33,4 @@ export * from './src/dnd.config';
         { type: NgModule, args: [{
-                    declarations: [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent],
-                    exports: [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent],
+                    declarations: [DraggableComponent, DraggableHandleComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent],
+                    exports: [DraggableComponent, DraggableHandleComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent],
                 },] },
@@ -37,0 +37,0 @@ ];

index.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"providers":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropServiceFactory"}},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropSortableService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropSortableServiceFactory"},"deps":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"}]}],"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"}],"exports":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DndModule"},"providers":{"__symbolic":"reference","name":"providers"}}}}}},"exports":[{"from":"./src/abstract.component"},{"from":"./src/dnd.config"},{"from":"./src/dnd.service"},{"from":"./src/draggable.component"},{"from":"./src/droppable.component"},{"from":"./src/sortable.component"}]},{"__symbolic":"module","version":1,"metadata":{"providers":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropServiceFactory"}},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropSortableService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropSortableServiceFactory"},"deps":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"}]}],"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"}],"exports":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DndModule"},"providers":{"__symbolic":"reference","name":"providers"}}}}}},"exports":[{"from":"./src/abstract.component"},{"from":"./src/dnd.config"},{"from":"./src/dnd.service"},{"from":"./src/draggable.component"},{"from":"./src/droppable.component"},{"from":"./src/sortable.component"}]}]
+[{"__symbolic":"module","version":3,"metadata":{"providers":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropServiceFactory"}},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropSortableService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropSortableServiceFactory"},"deps":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"}]}],"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableHandleComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableHandleComponent"}],"exports":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableHandleComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableHandleComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DndModule"},"providers":{"__symbolic":"reference","name":"providers"}}}}}},"exports":[{"from":"./src/abstract.component"},{"from":"./src/dnd.config"},{"from":"./src/dnd.service"},{"from":"./src/draggable.component"},{"from":"./src/droppable.component"},{"from":"./src/sortable.component"}]},{"__symbolic":"module","version":1,"metadata":{"providers":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropServiceFactory"}},{"provide":{"__symbolic":"reference","module":"./src/dnd.service","name":"DragDropSortableService"},"useFactory":{"__symbolic":"reference","module":"./src/dnd.service","name":"dragDropSortableServiceFactory"},"deps":[{"__symbolic":"reference","module":"./src/dnd.config","name":"DragDropConfig"}]}],"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableHandleComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableHandleComponent"}],"exports":[{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableComponent"},{"__symbolic":"reference","module":"./src/draggable.component","name":"DraggableHandleComponent"},{"__symbolic":"reference","module":"./src/droppable.component","name":"DroppableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableContainer"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableComponent"},{"__symbolic":"reference","module":"./src/sortable.component","name":"SortableHandleComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"DndModule"},"providers":{"__symbolic":"reference","name":"providers"}}}}}},"exports":[{"from":"./src/abstract.component"},{"from":"./src/dnd.config"},{"from":"./src/dnd.service"},{"from":"./src/draggable.component"},{"from":"./src/droppable.component"},{"from":"./src/sortable.component"}]}]

package.json

 {
   "name": "ng2-dnd",
   "description": "Angular 2 Drag-and-Drop without dependencies",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "scripts": {
@@ -6,0 +6,0 @@ "test": "karma start",

README.md

@@ -115,3 +115,44 @@ # Angular 2 Drag-and-Drop [![npm version](https://badge.fury.io/js/ng2-dnd.svg)](https://badge.fury.io/js/ng2-dnd) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-dnd.svg?style=flat-square)](https://www.npmjs.com/package/ng2-dnd)
 
-#### 4. Restriction Drag-and-Drop operations with drop zones
+#### 4. Add handle to restrict draggable zone of component
+
+```js
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'simple-dnd-handle',
+    template: `
+<h4>Simple Drag-and-Drop with handle</h4>
+<div class="row">
+    <div class="col-sm-3">
+        <div class="panel panel-success">
+            <div class="panel-heading">Available to drag</div>
+            <div class="panel-body">
+                <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
+                    <div class="panel-body">
+                        <div>
+                            <span dnd-draggable-handle>=</span>&nbsp;
+                            Drag Handle
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-3">
+        <div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">
+            <div class="panel-heading">Place to drop</div>
+            <div class="panel-body">
+                <div *ngIf="simpleDrop">Item was dropped here</div>
+            </div>
+        </div>
+    </div>
+</div>`
+})
+export class SimpleDndHandleComponent {
+    simpleDrop: any = null;
+}simpleDrop: any = null;
+}
+```
+
+#### 5. Restriction Drag-and-Drop operations with drop zones
 You can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element:
@@ -176,3 +217,3 @@
 
-#### 5. Transfer custom data via Drag-and-Drop
+#### 6. Transfer custom data via Drag-and-Drop
 You can transfer data from draggable to droppable component via *dragData* property of Draggable component:
@@ -221,3 +262,3 @@
 
-#### 6. Use a custom function to determine where dropping is allowed
+#### 7. Use a custom function to determine where dropping is allowed
 For use-cases when a static set of `dropZone`s is not possible, a custom function can be used to dynamically determine whether an item can be dropped or not. To achieve that, set the `allowDrop` property to this boolean function.
@@ -306,3 +347,3 @@
 
-#### 7. Shopping basket with Drag-and-Drop
+#### 8. Shopping basket with Drag-and-Drop
 Here is an example of shopping backet with products adding via drag and drop operation:
@@ -393,3 +434,3 @@
 
-#### 8. Simple sortable with Drag-and-Drop
+#### 9. Simple sortable with Drag-and-Drop
 Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation:
@@ -432,3 +473,45 @@
 
-#### 9. Simple sortable With Drop into recycle bin
+
+#### 10. Simple sortable with Drag-and-Drop handle
+Add handle to restict grip zone of sortable component.
+
+```js
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'simple-sortable-handle',
+    template: `
+<h4>Simple sortable handle</h4>
+<div class="row">
+    <div class="col-sm-3">
+        <div class="panel panel-success">
+            <div class="panel-heading">
+                Favorite drinks
+            </div>
+            <div class="panel-body">
+                <ul class="list-group" dnd-sortable-container [sortableData]="listOne">
+                    <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">
+                      <span dnd-sortable-handle>=</span>&nbsp;
+                      {{item}}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-6">
+        <div class="panel panel-default">
+            <div class="panel-body">
+                My prefences:<br/>
+                <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>
+            </div>
+        </div>
+    </div>
+</div>`
+})
+export class SimpleSortableHandleComponent {
+    listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];
+}
+```
+
+#### 11. Simple sortable With Drop into recycle bin
 Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:
@@ -475,3 +558,3 @@
 
-#### 10. Simple sortable With Drop into something, without delete it
+#### 12. Simple sortable With Drop into something, without delete it
 Here is an example of simple sortable list of items copying in target container:
@@ -533,3 +616,3 @@
 
-#### 11. Multi list sortable between containers
+#### 13. Multi list sortable between containers
 Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:
@@ -609,4 +692,5 @@
 - [Francesco Cina](https://github.com/ufoscout)
+- [Valerii Kuznetsov](https://github.com/solival)
 
 # License
  [MIT](/LICENSE)

src/abstract.component.d.ts

@@ -10,5 +10,10 @@ import { ChangeDetectorRef } from '@angular/core';
     _elem: HTMLElement;
+    _dragHandle: HTMLElement;
     _dragHelper: HTMLElement;
     _defaultCursor: string;
     /**
+     * Last element that was mousedown'ed
+     */
+    _target: EventTarget;
+    /**
      * Whether the object is draggable. Default is true.
@@ -73,2 +78,3 @@ */
     constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _cdr: ChangeDetectorRef);
+    setDragHandle(elem: HTMLElement): void;
     /******* Change detection ******/
@@ -90,1 +96,9 @@ detectChanges(): void;
 }
+export declare class AbstractHandleComponent {
+    _dragDropService: DragDropService;
+    _config: DragDropConfig;
+    private _Component;
+    private _cdr;
+    _elem: HTMLElement;
+    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _Component: AbstractComponent, _cdr: ChangeDetectorRef);
+}

src/abstract.component.js

@@ -49,4 +49,12 @@ // Copyright (C) 2016 Sergey Akopkokhyants
         //
+        this._elem.onmousedown = function (event) {
+            _this._target = event.target;
+        };
         this._elem.ondragstart = function (event) {
-            // console.log('ondragstart', event.target);
+            if (_this._dragHandle) {
+                if (!_this._dragHandle.contains(_this._target)) {
+                    event.preventDefault();
+                    return;
+                }
+            }
             _this._onDragStart(event);
@@ -85,7 +93,8 @@ //
                 // Change drag cursor
+                var cursorelem = (_this._dragHandle) ? _this._dragHandle : _this._elem;
                 if (_this._dragEnabled) {
-                    _this._elem.style.cursor = _this.effectCursor ? _this.effectCursor : _this._config.dragCursor;
+                    cursorelem.style.cursor = _this.effectCursor ? _this.effectCursor : _this._config.dragCursor;
                 }
                 else {
-                    _this._elem.style.cursor = _this._defaultCursor;
+                    cursorelem.style.cursor = _this._defaultCursor;
                 }
@@ -101,3 +110,4 @@ }
             // Restore style of dragged element
-            _this._elem.style.cursor = _this._defaultCursor;
+            var cursorelem = (_this._dragHandle) ? _this._dragHandle : _this._elem;
+            cursorelem.style.cursor = _this._defaultCursor;
         };
@@ -116,2 +126,5 @@ }
     });
+    AbstractComponent.prototype.setDragHandle = function (elem) {
+        this._dragHandle = elem;
+    };
     /******* Change detection ******/
@@ -192,3 +205,3 @@ AbstractComponent.prototype.detectChanges = function () {
     AbstractComponent.prototype._onDragStart = function (event) {
-        // console.log('ondragstart.dragEnabled', this._dragEnabled);
+        //console.log('ondragstart.dragEnabled', this._dragEnabled);
         if (this._dragEnabled) {
@@ -225,1 +238,12 @@ this._dragDropService.allowedDropZones = this.dropZones;
 }());
+export var AbstractHandleComponent = (function () {
+    function AbstractHandleComponent(elemRef, _dragDropService, _config, _Component, _cdr) {
+        this._dragDropService = _dragDropService;
+        this._config = _config;
+        this._Component = _Component;
+        this._cdr = _cdr;
+        this._elem = elemRef.nativeElement;
+        this._Component.setDragHandle(this._elem);
+    }
+    return AbstractHandleComponent;
+}());

src/abstract.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"AbstractComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"detectChanges":[{"__symbolic":"method"}],"_onDragEnter":[{"__symbolic":"method"}],"_onDragOver":[{"__symbolic":"method"}],"_onDragLeave":[{"__symbolic":"method"}],"_onDrop":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragLeaveCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AbstractComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"detectChanges":[{"__symbolic":"method"}],"_onDragEnter":[{"__symbolic":"method"}],"_onDragOver":[{"__symbolic":"method"}],"_onDragLeave":[{"__symbolic":"method"}],"_onDrop":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragLeaveCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"AbstractComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"setDragHandle":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}],"_onDragEnter":[{"__symbolic":"method"}],"_onDragOver":[{"__symbolic":"method"}],"_onDragLeave":[{"__symbolic":"method"}],"_onDrop":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragLeaveCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}},"AbstractHandleComponent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"AbstractComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"AbstractComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"setDragHandle":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}],"_onDragEnter":[{"__symbolic":"method"}],"_onDragOver":[{"__symbolic":"method"}],"_onDragLeave":[{"__symbolic":"method"}],"_onDrop":[{"__symbolic":"method"}],"_onDragStart":[{"__symbolic":"method"}],"_onDragEnd":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragLeaveCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}},"AbstractHandleComponent":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"AbstractComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}}]

src/draggable.component.d.ts

 import { ChangeDetectorRef } from '@angular/core';
 import { EventEmitter, ElementRef } from '@angular/core';
-import { AbstractComponent } from './abstract.component';
+import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
 import { DragDropConfig, DragImage } from './dnd.config';
@@ -60,1 +60,4 @@ import { DragDropService, DragDropData } from './dnd.service';
 }
+export declare class DraggableHandleComponent extends AbstractHandleComponent {
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, _Component: DraggableComponent, cdr: ChangeDetectorRef);
+}

src/draggable.component.js

@@ -11,3 +11,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import { Directive, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { AbstractComponent } from './abstract.component';
+import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
 import { DragDropConfig } from './dnd.config';
@@ -106,1 +106,19 @@ import { DragDropService } from './dnd.service';
 }(AbstractComponent));
+export var DraggableHandleComponent = (function (_super) {
+    __extends(DraggableHandleComponent, _super);
+    function DraggableHandleComponent(elemRef, dragDropService, config, _Component, cdr) {
+        _super.call(this, elemRef, dragDropService, config, _Component, cdr);
+    }
+    DraggableHandleComponent.decorators = [
+        { type: Directive, args: [{ selector: '[dnd-draggable-handle]' },] },
+    ];
+    /** @nocollapse */
+    DraggableHandleComponent.ctorParameters = function () { return [
+        { type: ElementRef, },
+        { type: DragDropService, },
+        { type: DragDropConfig, },
+        { type: DraggableComponent, },
+        { type: ChangeDetectorRef, },
+    ]; };
+    return DraggableHandleComponent;
+}(AbstractHandleComponent));

src/draggable.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DraggableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"dragImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cloneItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DraggableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"dragImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cloneItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DraggableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"dragImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cloneItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}},"DraggableHandleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractHandleComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable-handle]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"DraggableComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DraggableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"onDragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onDragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"dragImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cloneItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}]}},"DraggableHandleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractHandleComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-draggable-handle]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"DraggableComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}}]

src/sortable.component.d.ts

 import { ChangeDetectorRef } from '@angular/core';
 import { EventEmitter, ElementRef } from '@angular/core';
-import { AbstractComponent } from './abstract.component';
+import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
 import { DragDropConfig } from './dnd.config';
@@ -49,1 +49,4 @@ import { DragDropService, DragDropSortableService } from './dnd.service';
 }
+export declare class SortableHandleComponent extends AbstractHandleComponent {
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, _Component: SortableComponent, cdr: ChangeDetectorRef);
+}

src/sortable.component.js

@@ -11,3 +11,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 import { Directive, Input, Output, EventEmitter, ElementRef } from '@angular/core';
-import { AbstractComponent } from './abstract.component';
+import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
 import { DragDropConfig } from './dnd.config';
@@ -239,1 +239,19 @@ import { DragDropService, DragDropSortableService } from './dnd.service';
 }(AbstractComponent));
+export var SortableHandleComponent = (function (_super) {
+    __extends(SortableHandleComponent, _super);
+    function SortableHandleComponent(elemRef, dragDropService, config, _Component, cdr) {
+        _super.call(this, elemRef, dragDropService, config, _Component, cdr);
+    }
+    SortableHandleComponent.decorators = [
+        { type: Directive, args: [{ selector: '[dnd-sortable-handle]' },] },
+    ];
+    /** @nocollapse */
+    SortableHandleComponent.ctorParameters = function () { return [
+        { type: ElementRef, },
+        { type: DragDropService, },
+        { type: DragDropConfig, },
+        { type: SortableComponent, },
+        { type: ChangeDetectorRef, },
+    ]; };
+    return SortableHandleComponent;
+}(AbstractHandleComponent));

src/sortable.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SortableContainer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-container]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"sortableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"}]}],"_onDragEnterCallback":[{"__symbolic":"method"}]}},"SortableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortableIndex"]}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropEnabled"]}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"onDragStartCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragStart"]}]}],"onDragOverCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragOver"]}]}],"onDragEndCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragEnd"]}]}],"onDropSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDropSuccess"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableContainer"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SortableContainer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-container]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"sortableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"}]}],"_onDragEnterCallback":[{"__symbolic":"method"}]}},"SortableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortableIndex"]}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropEnabled"]}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"onDragStartCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragStart"]}]}],"onDragOverCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragOver"]}]}],"onDragEndCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragEnd"]}]}],"onDropSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDropSuccess"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableContainer"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SortableContainer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-container]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"sortableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"}]}],"_onDragEnterCallback":[{"__symbolic":"method"}]}},"SortableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortableIndex"]}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropEnabled"]}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"onDragStartCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragStart"]}]}],"onDragOverCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragOver"]}]}],"onDragEndCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragEnd"]}]}],"onDropSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDropSuccess"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableContainer"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}]}},"SortableHandleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractHandleComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-handle]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"SortableContainer":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-container]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"sortableData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropzones":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropZones"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"}]}],"_onDragEnterCallback":[{"__symbolic":"method"}]}},"SortableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["sortableIndex"]}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dragEnabled"]}]}],"droppable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["dropEnabled"]}]}],"dragData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"effectallowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectAllowed"]}]}],"effectcursor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["effectCursor"]}]}],"onDragSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragSuccess"]}]}],"onDragStartCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragStart"]}]}],"onDragOverCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragOver"]}]}],"onDragEndCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDragEnd"]}]}],"onDropSuccessCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["onDropSuccess"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableContainer"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropSortableService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"_onDragStartCallback":[{"__symbolic":"method"}],"_onDragOverCallback":[{"__symbolic":"method"}],"_onDragEndCallback":[{"__symbolic":"method"}],"_onDragEnterCallback":[{"__symbolic":"method"}],"_onDropCallback":[{"__symbolic":"method"}]}},"SortableHandleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./abstract.component","name":"AbstractHandleComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dnd-sortable-handle]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dnd.service","name":"DragDropService"},{"__symbolic":"reference","module":"./dnd.config","name":"DragDropConfig"},{"__symbolic":"reference","name":"SortableComponent"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}]}}}}]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

278407

increased by8.14%

Lines of code

2854

increased by5.2%

Number of lines in readme file

688

increased by13.91%

No dependency changes