ng2-dnd - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0

package.json

@@ -1,80 +0,1 @@
-{
-  "name": "ng2-dnd",
-  "description": "Angular 2 Drag-and-Drop without dependencies",
-  "version": "4.2.0",
-  "scripts": {
-    "test": "karma start",
-    "test-watch": "tsc --noUnusedParameters --noUnusedLocals && karma start --no-single-run --auto-watch",
-    "commit": "npm run prepublish && npm test && git-cz",
-    "prepublish": "ngc --noUnusedParameters --noUnusedLocals && npm run build",
-    "build": "webpack && cp style.css bundles/style.css",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/akserg/ng2-dnd.git"
-  },
-  "keywords": [
-    "angular",
-    "angular2",
-    "angular 2",
-    "drag",
-    "drop",
-    "drag-and-drop"
-  ],
-  "author": "Sergey Akopkokhyants <[e-mail]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/akserg/ng2-dnd/issues"
-  },
-  "main": "bundles/index.umd.js",
-  "module": "index.js",
-  "typings": "index.d.ts",
-  "homepage": "https://github.com/akserg/ng2-dnd#readme",
-  "peerDependencies": {
-    "@angular/core": "^2.4.4 || ^4.0.0"
-  },
-  "devDependencies": {
-    "@angular/common": "^2.4.4 || ^4.0.0",
-    "@angular/compiler": "^2.4.4 || ^4.0.0",
-    "@angular/compiler-cli": "^2.4.4 || ^4.0.0",
-    "@angular/core": "^2.4.4 || ^4.0.0",
-    "@angular/platform-browser": "^2.4.4 || ^4.0.0",
-    "@angular/platform-browser-dynamic": "^2.4.4 || ^4.0.0",
-    "@types/hammerjs": "^2.0.34",
-    "@types/jasmine": "^2.5.51",
-    "@types/node": "^7.0.29",
-    "awesome-typescript-loader": "^3.1.3",
-    "codelyzer": "^3.0.1",
-    "commitizen": "^2.9.6",
-    "core-js": "^2.4.1",
-    "cz-conventional-changelog": "^2.0.0",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "^2.6.2",
-    "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.1.1",
-    "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.0.1",
-    "karma-jasmine": "^1.1.0",
-    "karma-mocha-reporter": "^2.2.3",
-    "karma-remap-coverage": "~0.1.4",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.3",
-    "loader-utils": "^1.1.0",
-    "reflect-metadata": "^0.1.10",
-    "rxjs": "^5.4.0",
-    "semantic-release": "^6.3.6",
-    "source-map-loader": "^0.2.1",
-    "ts-helpers": "1.1.2",
-    "tslint": "^5.4.3",
-    "tslint-loader": "^3.5.3",
-    "typescript": "^2.3.4",
-    "webpack": "^2.6.1",
-    "zone.js": "^0.8.12"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
-}
+{"name":"ng2-dnd","description":"Angular 2 Drag-and-Drop without dependencies","version":"5.0.0","scripts":{"test":"karma start","clean":"rimraf dist","test-watch":"tsc --noUnusedParameters --noUnusedLocals && karma start --no-single-run --auto-watch","commit":"npm run prepublish && npm test && git-cz","build":"npm run clean && ngc && ng-packagr -p ng-package.json && cp style.css dist/bundles/style.css && rimraf dist/tests","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"repository":{"type":"git","url":"https://github.com/akserg/ng2-dnd.git"},"keywords":["angular","angular2","angular 2","drag","drop","drag-and-drop"],"author":"Sergey Akopkokhyants <[e-mail]>","license":"MIT","bugs":{"url":"https://github.com/akserg/ng2-dnd/issues"},"main":"bundles/ng2-dnd.umd.js","module":"ng2-dnd.es5.js","typings":"ng2-dnd.d.ts","homepage":"https://github.com/akserg/ng2-dnd#readme","peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0","@angular/forms":"^4.0.0 || ^5.0.0"},"devDependencies":{"@angular/common":"^5.0.0","@angular/compiler":"^5.0.0","@angular/compiler-cli":"^5.0.0","@angular/core":"^5.0.0","@angular/forms":"^5.0.0","@angular/platform-browser":"^5.0.0","@angular/platform-browser-dynamic":"^5.0.0","@angular/platform-server":"^5.0.0","@types/hammerjs":"^2.0.34","@types/jasmine":"^2.5.51","@types/node":"^8.0.53","awesome-typescript-loader":"^3.1.3","codelyzer":"^4.0.1","core-js":"^2.4.1","istanbul-instrumenter-loader":"^3.0.0","jasmine-core":"^2.6.2","karma":"^1.7.0","karma-chrome-launcher":"^2.1.1","karma-coverage":"^1.1.1","karma-firefox-launcher":"^1.0.1","karma-jasmine":"^1.1.0","karma-mocha-reporter":"^2.2.3","karma-remap-coverage":"~0.1.4","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.3","loader-utils":"^1.1.0","ng-packagr":"^2.0.0-rc.0","reflect-metadata":"^0.1.10","rxjs":"^5.4.0","source-map-loader":"^0.2.1","ts-helpers":"1.1.2","tslint":"^5.4.3","tslint-loader":"^3.5.3","typescript":"^2.3.4","webpack":"^3.6.0","zone.js":"^0.8.12"},"engines":{"npm":">4.0.0"},"es2015":"ng2-dnd.js","metadata":"ng2-dnd.metadata.json"}

README.md

@@ -7,4 +7,2 @@ # 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)
 [![Build Status](https://travis-ci.org/akserg/ng2-dnd.svg?branch=master)](https://travis-ci.org/akserg/ng2-dnd)
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 
 [![Dependency Status](https://david-dm.org/akserg/ng2-dnd.svg)](https://david-dm.org/akserg/ng2-dnd)
@@ -16,2 +14,10 @@ [![devDependency Status](https://david-dm.org/akserg/ng2-dnd/dev-status.svg)](https://david-dm.org/akserg/ng2-dnd#info=devDependencies)
 
+## Transpilation to Angular Package Format
+The library uses [ng-packagr](https://github.com/dherges/ng-packagr) to transpile into the Angular Package Format:
+- Bundles library in `FESM2015`, `FESM5`, and `UMD` formats
+- The npm package can be consumed by `Angular CLI`, `Webpack`, or `SystemJS`
+- Creates type definitions (`.d.ts`)
+- Generates Ahead-of-Time metadata (`.metadata.json`)
+- Auto-discovers and bundles secondary entry points such as `@my/foo`, `@my/foo/testing`, `@my/foo/bar`
+
 ## Installation
@@ -23,2 +29,4 @@ ```bash
 ## Demo
+_The Demo is under construction. Will be available shortly!_
+<!--
 Simple examples using ng2-dnd:
@@ -31,2 +39,3 @@ - with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
 Plunker demo available [here](http://embed.plnkr.co/JbG8Si)
+-->
 
@@ -39,3 +48,3 @@ ## Usage
     map: {
-        'ng2-dnd': 'node_modules/ng2-dnd/bundles/index.umd.js'
+        'ng2-dnd': 'node_modules/ng2-dnd/bundles/ng2-dnd.umd.js'
     }
@@ -686,5 +695,78 @@ });
 
+#### 14. Simple FormArray sortable with Drag-and-Drop
+Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation but using FormArray instead of Array:
+
+```js
+import {Component} from '@angular/core';
+import {FormArray, FormControl} from '@angular/forms';
+
+@Component({
+    selector: 'simple-formarray-sortable',
+    template: `
+<h4>Simple FormArray sortable</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.controls; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i"><input type="text" [formControl]="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.controls; let i = index">{{i + 1}}) {{item.value}}<br/></span>
+            </div>
+        </div>
+    </div>
+</div>`
+})
+export class SimpleFormArraySortableComponent {
+    listOne: FormArray = new FormArray([
+      new FormControl('Coffee'),
+      new FormControl('Orange Juice'),
+      new FormControl('Red Wine'),
+      new FormControl('Unhealty drink!'),
+      new FormControl('Water')
+    ]);
+}
+```
+
+## How to pass multiple data in dragData while dragging ?
+
+1) As an array: 
+
+``` html
+[dragData]="[aComponent,'component-in-bar']"
+```
+
+``` javascript
+loadComponent($event){
+    console.log($event.dragData[0]); // aComponent 
+    console.log($event.dragData[1]); // 'component-in-bar' OR 'component-in-designer' 
+}
+```
+
+2) As an object: 
+
+``` html
+[dragData]="{component: aComponent, location: 'component-in-bar'}"
+```
+
+``` javascript
+loadComponent($event){
+    console.log($event.dragData.component); // aComponent 
+    console.log($event.dragData.location); // 'component-in-bar' OR 'component-in-designer' 
+}
+```
+
 # Retreiving files in a drop zone
 
-Sinze it is possible to drag and drop one or more files to a drop zone, you need to handle the incomming files.
+Since it is possible to drag and drop one or more files to a drop zone, you need to handle the incoming files.
 
@@ -770,3 +852,2 @@ ```js
 }
-```
 
@@ -778,4 +859,5 @@ # Credits
 - [Juergen Gutsch](https://github.com/JuergenGutsch)
+- [Damjan Cilenšek](https://github.com/loudandwicked)
 
 # License
  [MIT](/LICENSE)

src/sortable.component.d.ts

 import { ChangeDetectorRef } from '@angular/core';
 import { EventEmitter, ElementRef } from '@angular/core';
+import { FormArray } from '@angular/forms';
 import { AbstractComponent, AbstractHandleComponent } from './abstract.component';
@@ -10,6 +11,11 @@ import { DragDropConfig } from './dnd.config';
     private _sortableData;
-    sortableData: Array<any>;
+    private sortableHandler;
+    sortableData: Array<any> | FormArray;
     dropzones: Array<string>;
     constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, cdr: ChangeDetectorRef, _sortableDataService: DragDropSortableService);
     _onDragEnterCallback(event: Event): void;
+    getItemAt(index: number): any;
+    indexOf(item: any): number;
+    removeItemAt(index: number): void;
+    insertItemAt(item: any, index: number): void;
 }
@@ -16,0 +22,0 @@ export declare class SortableComponent extends AbstractComponent {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

468486

increased by67.2%

Lines of code

3586

increased by23.87%

Number of lines in readme file

856

increased by10.59%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

23

decreased by-42.5%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes