{"_id":"@elemental-concept/drag-and-drop","_rev":"5-d87475b36cec1a93b1dd927a382e9303","name":"@elemental-concept/drag-and-drop","dist-tags":{"latest":"17.0.0"},"versions":{"1.0.0":{"name":"@elemental-concept/drag-and-drop","version":"1.0.0","description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"keywords":["drag and drop","file","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"homepage":"https://github.com/elementalconcept/drag-and-drop#readme","peerDependencies":{"@angular/common":"^15.0.0","@angular/core":"^15.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/elemental-concept-drag-and-drop.mjs","es2020":"fesm2020/elemental-concept-drag-and-drop.mjs","esm2020":"esm2020/elemental-concept-drag-and-drop.mjs","fesm2020":"fesm2020/elemental-concept-drag-and-drop.mjs","fesm2015":"fesm2015/elemental-concept-drag-and-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elemental-concept-drag-and-drop.mjs","es2020":"./fesm2020/elemental-concept-drag-and-drop.mjs","es2015":"./fesm2015/elemental-concept-drag-and-drop.mjs","node":"./fesm2015/elemental-concept-drag-and-drop.mjs","default":"./fesm2020/elemental-concept-drag-and-drop.mjs"}},"sideEffects":false,"_id":"@elemental-concept/drag-and-drop@1.0.0","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-ZWKMv6OYEmn5rmxLtj7RxQr6E8jeVabnAGdcWiGyVYwfMlOD5rnwIRDNUej+/myCqlQUOtzQSeJIT0/cC3cuTQ==","shasum":"5cf292e40d9746e1bf06510a79d45766e3f622b9","tarball":"https://registry.npmjs.org/@elemental-concept/drag-and-drop/-/drag-and-drop-1.0.0.tgz","fileCount":16,"unpackedSize":53747,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQjdj4Jj7qpnA9jXYPcoSByzEw3yvZUhNbSJ0C/RPv0QIhAPjINo07W4qmFMqlfxvzX+ngCaCjztmCjSXr/c/kPKFO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkA1oFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEOA//Q6OeAD+CoclDT+9AklEht8gacqA9pkLExdz/xYjJiR+ApQyx\r\nhTU6enBIXxMZZi1IOOgzgMHwUAwt37g+K+oTYuYs64uq4ejyvTVWYBcmiGDE\r\nzEfk1KuU9j1X+gBdh0VxYnkKA7NffJcm1ANTTPuzdTPU0i6GeDL/yo7DClZt\r\n+ldsbFlfzBttFLnej6VI8hKfIP8ZA/WxiaTbsRklku4csvhU556iAcsMgA6z\r\nAyGN+qsq0O7mBO1zReBTCmSfMdddjmnbh2QlBNj/zB6akHnyet/VVNJ0mZb6\r\n2Ackk5gilTnRcdt9Bp+OMoTuG3htggorWgsayVGgQkGBXZpZGnWX6pX2yAx9\r\nACP3bJOZGMrWfMpjOuV+y28/2sR/khnOaN7g3ZjkrV/lTd0DWkx9J/tFKxmf\r\nLxcVBlrPtpskuT+cEL3BcxnIlzjFOWJqlEGEhY9DLGe+ExhMYu1exU7g5XIK\r\n3hlQ4gE2wM76pFyj6kZkiMmdRY/aIQqCWd8LStd+/iDO4MCrXWAO5t+KM392\r\nxbvfpdxcI/ITUKDN7A0fSNnrk3Sy2y5Q8ZGyu5itWHly1qQP2hUxigfb1Eeh\r\n0568p2wFj79B/D85H9lTRhe8VXimsSaCmwF0b6ga+EaiZ49OVCIxhdW/S+zs\r\naVxCXEWa2TlITWh/O/4s8eRjCcmh7dAQqpQ=\r\n=wgFK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drag-and-drop_1.0.0_1677941252804_0.7576520148208166"},"_hasShrinkwrap":false},"1.1.0":{"name":"@elemental-concept/drag-and-drop","version":"1.1.0","description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"keywords":["drag and drop","file","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"homepage":"https://github.com/elementalconcept/drag-and-drop#readme","peerDependencies":{"@angular/common":">= 9 < 17","@angular/core":">= 9 < 17"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/elemental-concept-drag-and-drop.mjs","es2020":"fesm2020/elemental-concept-drag-and-drop.mjs","esm2020":"esm2020/elemental-concept-drag-and-drop.mjs","fesm2020":"fesm2020/elemental-concept-drag-and-drop.mjs","fesm2015":"fesm2015/elemental-concept-drag-and-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elemental-concept-drag-and-drop.mjs","es2020":"./fesm2020/elemental-concept-drag-and-drop.mjs","es2015":"./fesm2015/elemental-concept-drag-and-drop.mjs","node":"./fesm2015/elemental-concept-drag-and-drop.mjs","default":"./fesm2020/elemental-concept-drag-and-drop.mjs"}},"sideEffects":false,"_id":"@elemental-concept/drag-and-drop@1.1.0","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-iEvKNfUh2Xqp8eAyFUA4FASf/nQgeElJwndZutWo3/+MNmCpoP9vPlN6CleCfRpgp4T1ttybzpDvvhWA/LarTw==","shasum":"0a747e0c44919f9aa9217ba40a134367ba0c9f06","tarball":"https://registry.npmjs.org/@elemental-concept/drag-and-drop/-/drag-and-drop-1.1.0.tgz","fileCount":16,"unpackedSize":53751,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvLL2yq4j12n/F98bDxmLd6MawzJkjTKoig9U4f6u7SAiBqJLVjH/zyQ76EptYzrQC+rs8M5LteTAjFHyZx162Cug=="}]},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drag-and-drop_1.1.0_1684861167077_0.576306971414394"},"_hasShrinkwrap":false},"1.1.1":{"name":"@elemental-concept/drag-and-drop","version":"1.1.1","description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"keywords":["drag and drop","file","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"homepage":"https://github.com/elementalconcept/drag-and-drop#readme","peerDependencies":{"@angular/common":">= 13 < 16","@angular/core":">= 13 < 16"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/elemental-concept-drag-and-drop.mjs","es2020":"fesm2020/elemental-concept-drag-and-drop.mjs","esm2020":"esm2020/elemental-concept-drag-and-drop.mjs","fesm2020":"fesm2020/elemental-concept-drag-and-drop.mjs","fesm2015":"fesm2015/elemental-concept-drag-and-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elemental-concept-drag-and-drop.mjs","es2020":"./fesm2020/elemental-concept-drag-and-drop.mjs","es2015":"./fesm2015/elemental-concept-drag-and-drop.mjs","node":"./fesm2015/elemental-concept-drag-and-drop.mjs","default":"./fesm2020/elemental-concept-drag-and-drop.mjs"}},"sideEffects":false,"_id":"@elemental-concept/drag-and-drop@1.1.1","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-FK3gpVnOI9OpfmdWMDyBilgs+9OmwIhHR0tvulWq6gFL5v694qalW0Lg1pMvgIAqkc5RQMup+gEEy5E+8KRC6Q==","shasum":"c795bab0d7fb9ee554c85feb6447df7c92b40770","tarball":"https://registry.npmjs.org/@elemental-concept/drag-and-drop/-/drag-and-drop-1.1.1.tgz","fileCount":16,"unpackedSize":53753,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYUItY0/KjAqjELaoEILJKHAi3T2Tu05qqWycR6fG+3wIgAM6vTE1hxIQzbtEy19z9kkbUYA+nzD4qaw42zjLzx8A="}]},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drag-and-drop_1.1.1_1685612547118_0.01230665621803384"},"_hasShrinkwrap":false},"16.0.0":{"name":"@elemental-concept/drag-and-drop","version":"16.0.0","description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"keywords":["drag and drop","file","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"homepage":"https://github.com/elementalconcept/drag-and-drop#readme","peerDependencies":{"@angular/common":">= 13 < 17","@angular/core":">= 13 < 17"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2022/elemental-concept-drag-and-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/elemental-concept-drag-and-drop.mjs","esm":"./esm2022/elemental-concept-drag-and-drop.mjs","default":"./fesm2022/elemental-concept-drag-and-drop.mjs"}},"sideEffects":false,"gitHead":"573d1d170060ca006a900f6e4976b8d5c2aad284","_id":"@elemental-concept/drag-and-drop@16.0.0","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-b7n+O1evvTc+QtYhZqO080Rz3wyfMeNriF8n5P3OCyYJrmKf87gQDGI6MY4vyIgoXSdCZ5A+CW6hewIfKCEk5A==","shasum":"e162b307766211d8f2201538068071a9bffb0bbd","tarball":"https://registry.npmjs.org/@elemental-concept/drag-and-drop/-/drag-and-drop-16.0.0.tgz","fileCount":14,"unpackedSize":38542,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpqH18oaDMb4StKiCRLW7okMaplUyEBlCICh+VnSsG/AIhAIsrS/kJHEuWyOBGEy54z7yeabFAmtrwlgsaBYF/SSLi"}]},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drag-and-drop_16.0.0_1699270242327_0.17154830558018963"},"_hasShrinkwrap":false},"17.0.0":{"name":"@elemental-concept/drag-and-drop","version":"17.0.0","description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"keywords":["drag and drop","file","angular"],"author":{"name":"Elemental Concept"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"homepage":"https://github.com/elementalconcept/drag-and-drop#readme","peerDependencies":{"@angular/common":">= 13 < 18","@angular/core":">= 13 < 18"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2022/elemental-concept-drag-and-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/elemental-concept-drag-and-drop.mjs","esm":"./esm2022/elemental-concept-drag-and-drop.mjs","default":"./fesm2022/elemental-concept-drag-and-drop.mjs"}},"sideEffects":false,"_id":"@elemental-concept/drag-and-drop@17.0.0","gitHead":"13dbac5d84b912becdee4b3cebdc517936d00c8d","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-V5h/8LzRqpeFFXGBnodtOYDhoHbVrotTSE++flGzqovq/vt/BjvuGwbdrl9ijfC/rVlab0lnE4RWRqiZBQ1DVw==","shasum":"07931b83e60c7570002b2f87a4e71ef7ede10db6","tarball":"https://registry.npmjs.org/@elemental-concept/drag-and-drop/-/drag-and-drop-17.0.0.tgz","fileCount":14,"unpackedSize":38421,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDWjbjJxlRuRxUObnYe0i6KO1YaRZGXqS4GMSMhYvH2AiAEW79qZPJabKeYp/HHUkCtcdh1E+LYzt5NUewNdLRcjA=="}]},"_npmUser":{"name":"simke2090","email":"simke2090@yahoo.it"},"directories":{},"maintainers":[{"name":"aux","email":"aux@hexmode.org"},{"name":"simke2090","email":"simke2090@yahoo.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/drag-and-drop_17.0.0_1703847260009_0.8285474511854893"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-04T14:47:32.738Z","1.0.0":"2023-03-04T14:47:32.984Z","modified":"2024-05-16T11:57:44.197Z","1.1.0":"2023-05-23T16:59:27.213Z","1.1.1":"2023-06-01T09:42:27.342Z","16.0.0":"2023-11-06T11:30:42.511Z","17.0.0":"2023-12-29T10:54:20.209Z"},"maintainers":[{"email":"david@elementalconcept.com","name":"ecdavid"},{"email":"aux@hexmode.org","name":"aux"},{"email":"simke2090@yahoo.it","name":"simke2090"}],"description":"Use this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.","homepage":"https://github.com/elementalconcept/drag-and-drop#readme","keywords":["drag and drop","file","angular"],"repository":{"type":"git","url":"git+https://github.com/elementalconcept/drag-and-drop.git"},"author":{"name":"Elemental Concept"},"bugs":{"url":"https://github.com/elementalconcept/drag-and-drop/issues"},"license":"BSD-2-Clause","readme":"# Drag And Drop\n\nUse this library if you need a simple `drag and drop` solution. The library will return a list of files `File[]`.\n\n[![npm version](https://badge.fury.io/js/%40elemental-concept%2Fdrag-and-drop.svg)](https://badge.fury.io/js/%40elemental-concept%2Fdrag-and-drop)\n\n## 🛠 Installation\n\n- With **npm**: `npm i --save @elemental-concept/drag-and-drop`\n\nAdd `DragAndDropModule` to your `Module` imports section.\n\n```typescript\nimport { DragAndDropModule } from '@elemental-concept/drag-and-drop';\n\n@NgModule({\n  imports: [\n    DragAndDropModule\n  ]\n})\nexport class TestModule {\n}\n```\n\n## 📖 Usage\n\n- To use the drag and drop you need to add `<drag-and-drop>` into your template.\n- This component accepts `multiple` as flag (by default `true`) to allow multiple files upload or single file upload.\n- The file browser allow **only one** file at the time.\n\nWhen files are dropped into the `dropZone` the `@Output fileDropped` will send a `File[]` object as event.\n\n```html\n<drag-and-drop (fileDropped)=\"onFileUpload($event)\">\n  <mat-icon>cloud_upload</mat-icon>\n  <h4>\n    Drag and drop your files\n    <br>or<br>\n    Click to browse your files\n  </h4>\n</drag-and-drop>\n\n<div class=\"files-list\" *ngIf=\"files.length > 0\">\n  <h4>List of file names</h4>\n  <div class=\"file\" *ngFor=\"let fileName of files\">{{  fileName }}</div>\n</div>\n```\n\n```typescript\n@Component({\n  selector: 'app-drag-and-drop-page',\n  template: './drag-and-drop-page.component.html',\n  styleUrls: ['./drag-and-drop-page.component.scss']\n})\nexport class DragAndDropPageComponent {\n  files: string[] = [];\n\n  onFileUpload = (files: File[]) => {\n    this.files = files.map(file => file.name);\n  };\n}\n```\n\nThe component contain a hidden input and uses the `dropZone` directive in the main container.\nInside the main container there's a `<ng-content></ng-content>` to allow any kind of info presentation.\n\n## Style\n\nTo change the css style just use css variables into your main `style.scss` file.\nHere you can find the default values:\n\n```scss\n:root {\n  --drag-and-drop-height: auto;\n  --drag-and-drop-width: 400px;\n  --drag-and-drop-padding: 12px 16px;\n  --drag-and-drop-border: dashed 1px #6091dc;\n  --drag-and-drop-margin: 0 auto;\n  --drag-and-drop-background: #a0cee0;\n}\n```\n","readmeFilename":"README.md"}