{"_id":"@alpharages/dnd","_rev":"8-5190951836d7913dc3bba7fe88deb891","name":"@alpharages/dnd","dist-tags":{"latest":"12.1.0"},"versions":{"11.0.0":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"11.0.0","repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^10.0.0 || ^11.0.9","@angular/core":"^10.0.0 || ^11.0.9"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"main":"bundles/alpharages-dnd.umd.js","module":"fesm2015/alpharages-dnd.js","es2015":"fesm2015/alpharages-dnd.js","esm2015":"esm2015/alpharages-dnd.js","fesm2015":"fesm2015/alpharages-dnd.js","typings":"alpharages-dnd.d.ts","metadata":"alpharages-dnd.metadata.json","sideEffects":false,"_id":"@alpharages/dnd@11.0.0","_nodeVersion":"15.6.0","_npmVersion":"7.4.0","dist":{"integrity":"sha512-zV7xb1KWacK19IM+0bUqv/I5UTlS38ILpujjUERbVJAPUbjwBz+v0K9lxIKrOXP9c8zeCIqJMiANddnr3WfYpw==","shasum":"2ddef9efc145a7711e914b2466977e1b42bff2f6","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-11.0.0.tgz","fileCount":30,"unpackedSize":564434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCtI9CRA9TVsSAnZWagAARKoP/0gO+kPdl8RpAuGc7UOd\nVWFuthA9R9htk+RJluejgaiiWNXqvzQhChv5OvIpAYFp13owAFaWfixq+gD+\nvJ8lpJKReUtlC3S2x/Xqvb+Yu1umujAV4osgxa8Z/JtheJr/jyCxw0nvudTj\nVB/4jNb+jeIQFHrKRI+AF+mHsdI11GSNUMc4NDjOcDPd/MBOKyfdwBjMogsp\nur7BtDYsRM3BYdILDKy0mkh13v1RbB3k1xQ486jxC9bFSR0rJZdCfTgVFe+m\neDPKAOACCQVpcMHzNCgqDSlI8mYf9D4B6xV7VknDKkrbp9r3Lw50B56B5I/h\ncSjHfTeW9R0zM37caLl4cqUHA8rNMkmS/Fi3ACUyYPYgfqhJ0tUNsZidD3gk\ncjZ6jMK7/uy4clXfSIlQESopz8gvkqvbO+VPE5FShQQ/gJzt7k2ojz0JMmhS\n0kOv2d3aifcqIJHStxMUaGxlDa28jQDAiJbEcgJRo3fX/OrgTEsrOxH8LRRs\nRXzoXfYFIYPyhroKd7NrQQu0oq6vpv3W11r5fTHMTrDtjAA5HHLNH17KXjP0\nKDaUv0WsTT6c/QNoMpUP3cm1weKsca6DdZ+P5TSewZ3xazf5QHNWtTBN7zZA\nTQdB50yK8qMuRO/xCY2RHU8wZFQ01QogtvmzdKplKj9N5l+sJRQ8QFj/LCPr\n9b85\r\n=ss++\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC62bDMAWE59V0TrSi+URPp2uEs8kGYesNYCH7u4358agIgJC6qU+lY5mYppeMmk64QNhz7IvHk/ZFD2p0JZ88jXBY="}]},"_npmUser":{"name":"alpharages","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharages","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_11.0.0_1611321916424_0.4212261060987308"},"_hasShrinkwrap":false},"11.0.1":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"11.0.1","repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^10.0.0 || ^11.0.9","@angular/core":"^10.0.0 || ^11.0.9"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"main":"bundles/alpharages-dnd.umd.js","module":"fesm2015/alpharages-dnd.js","es2015":"fesm2015/alpharages-dnd.js","esm2015":"esm2015/alpharages-dnd.js","fesm2015":"fesm2015/alpharages-dnd.js","typings":"alpharages-dnd.d.ts","metadata":"alpharages-dnd.metadata.json","sideEffects":false,"_id":"@alpharages/dnd@11.0.1","_nodeVersion":"15.6.0","_npmVersion":"7.4.0","dist":{"integrity":"sha512-durxDr5cPFgI7Iebg1aOsBUaHyET+oK6oEH5hmzHvamoLc0T6szugbcOhKtCTlZ3HKWWVQwG6Apibb1b52fZUg==","shasum":"ed46c90e0ebd3e90a1a64ce711e102dd30af335a","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-11.0.1.tgz","fileCount":30,"unpackedSize":564272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCtQhCRA9TVsSAnZWagAAF3MP/RF73Q/pagipSmKPvLKz\nXhP+lPxNQv/7wII3+QGKLck1MvBPVIPZnEdE8CARxUpdsn/FHV4nXqPxp0+z\noknNN23XLGciTUy+Ej717DzH6bxCP1OwyZ+vERhQE0eJiWEosmCTh1yHtcRF\ndJcdOfo6skH+JJ6TFypXTVVEfJhv5NPLaiqpejtkQpaj83CzcfCg2FHWEMQl\n/R3Blm2lYB0seSlHVhLwq9lTKtyqyAwlYS9BoGP6O3LK0jNBbidk+E5R8oBu\nw3iXSuhyMmaLqO3jsjnKVRRLWhe3ytdVQ0GZeRjxcolL4jOIzgxh7brOYVYj\nIGxixuRiZNpUudiIF6cGT0jj7txEB/tsjX8gEbRJk1xYd/uo10A8a4YZMcEt\nPCYkuuHnQ4N7Kc5tAu0PcsbNnJ6qPCytnJZZ7VVl/lKeK44gU2atCo9XXzyI\nOOZ6K9PHU6ILtcs3dYYuuiWjgxEykktHrLbP6PiCLUdzU/UrofnSeOEd5uQ+\n1/vKx5dd2lu5r5ItdDrGwFs1mAP3vPkAESXP7FNpeLUBPfUCLibQqUp289gw\nHu8prz9tjlM+iSMjtchYKvYYWZcmwEMpeoZlz/UJNlK5jvxulB5ROau+FdB5\nXEWmUN9W5hxOCWMvMYivZy3yzeWSDxf/lJZQ6yPwVM0vEDG3Htw2UXnV0ThM\nXJiw\r\n=YZFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDeikIrsBB33aHYQwiA42986SEIMGfWSLjWFnqG7ZNXgIhAImFnWCzfapMCWTbgh2v069qfj0yi0RjHUUeoCNY064w"}]},"_npmUser":{"name":"alpharages","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharages","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_11.0.1_1611322401199_0.8039066348245816"},"_hasShrinkwrap":false},"11.0.2":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"11.0.2","repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^10.0.0 || ^11.0.9","@angular/core":"^10.0.0 || ^11.0.9"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"main":"bundles/alpharages-dnd.umd.js","module":"fesm2015/alpharages-dnd.js","es2015":"fesm2015/alpharages-dnd.js","esm2015":"esm2015/alpharages-dnd.js","fesm2015":"fesm2015/alpharages-dnd.js","typings":"alpharages-dnd.d.ts","metadata":"alpharages-dnd.metadata.json","sideEffects":false,"_id":"@alpharages/dnd@11.0.2","_nodeVersion":"15.6.0","_npmVersion":"7.4.0","dist":{"integrity":"sha512-Atk38hCOWreYRAPn/oQAUNuREC76h5ko0lbEubG8iSLQtUbEZhkbP9fsEQ5N451RgQKR/+8LDQKlRBqaRn7Szg==","shasum":"04cd38ca1e795ab49eae02bfc88d801e72c4bf68","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-11.0.2.tgz","fileCount":31,"unpackedSize":564831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCtT7CRA9TVsSAnZWagAA7dgP/3Tg0zHlQamuZsXx/DRC\nhYn5IEvDBCjLnM4x6lMLEJc9g6xcsCG6zt5XxZccihR9ui2K53pimauC+ksZ\nspnLqjw3VAV/yHJgKFcQEka7UBnxp2dA6ibk8tcFHBrSTtw8Z+LVbv0IaTE6\nEye6MBOJ1A1kYWmF+TxF2qLBZ/eUiaXHvQUtzVOwVO3qZf0nyg+MNZEtigiN\ngRPxaCo312V6OiNlr2eWZRl8OvX+2LLBLPzmmt8qxgQz0Tz63bjAlKtxdTX+\n3Axc60+p+1BK9LM79EVvtQxM9W+4zodhHQ1Nd33Cp6jLsbYoqAsjnY6DmzqX\npVEzd9QvYO9YsnBcM028GkgqdDhjh90daEa7aP5z0A46odg8LKImhs4CxdVd\nhU6bfdeX8XIA1Q8DtHVVG6wOnpSAwRH8HktoBGfNPEi/loiNNabrxZm3GQpS\nuJfrLpKzlJ5XyGQf7B4f/CXNlOFBHsCWZO/RJxRDJBcfCn3etO5d9LvkIxov\neIfrr+KJF707n1AkK+mU4Bfr5nNndfvvFrc4T/XJKNHiUUJ06a6nuMHmJIOn\n7qXJqX4+o04Ip7mVq+8nyISk3c2aKhsT6WUh0w1Sdiw18UTYMToYb9jsNWtn\nih9Qva6Bqa4RngX4CpayA1gOrhv8S2AQnYoSsCk+I91TLNGo2+/MG03wq2qB\n1K4R\r\n=W+ZV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOPRa5UQEWSu5FSeW57e7+Eoz3JrZtIIi5feJm+1X63gIhANorDDTLhRd07SAYTVXc2X5p/rSmaDuWfWkg3W0cMY/v"}]},"_npmUser":{"name":"alpharages","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharages","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_11.0.2_1611322618961_0.7303223534410754"},"_hasShrinkwrap":false},"12.0.0":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"12.0.0","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^10.0.0 || ^11.0.9 || ^12.0.0","@angular/core":"^10.0.0 || ^11.0.9 || ^12.0.0"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"gitHead":"e95fda9c1f4cc1c35d1a7327e2e379e2252aa30b","_id":"@alpharages/dnd@12.0.0","_nodeVersion":"15.6.0","_npmVersion":"7.20.5","dist":{"integrity":"sha512-AZWYHm/+sQeetUN3Z4NfclfGsqiDTXqebWyhpgq9D/z2Nh3RtoYi85R8YxrH6Mkw8eA921XyEWg0toWf5Vb2vw==","shasum":"92e5e22c2d4e2acc8000257346446347242db62e","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-12.0.0.tgz","fileCount":22,"unpackedSize":66450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hMCRA9TVsSAnZWagAA1tAP/RY3LdIeMRjqkrEfcx+z\n7dZjwA1IszXPMVzUOPgq0y2T3VZpzAn3qsFTBSH4Y7dihGafeMpUu+jr/zfL\ny4kgLr+fTUTKDhQlPfTj+WN1lq79xdBu8hwlN71AxqvgMPG3A0KnGq6Sl54c\nqysiRW+BimAufDehWmHZ3ieVr0v9Bi/tQnpRHYSNl/QkLHbB/ELz4HWjkzZA\nl6BbHaO+dDnAz5ZfYLLRi8E0zLrTkqUQFKo2sS3HibxEvI9H7KH8Zs369pJd\nsnf3cFunG5z/dq5pCtjwvfTjVIqWUQt//OvQd+vM29r7rShKwfF4P4+ibD4W\niehN2NZXKBbsIB3UMOZGB9jcX+v/wOeLjRme91pmVmGse6U3+9gM98Ebn+47\nUKrEafGvYV3csmZ4IVeyz8qDquO3xXppCIWxjZw3txEW8UhCUEK8z+yA5LEK\n7MokDaC/8D84NE4kB+iuHTidRzvOmXiYbPYVJfk9ZuEj0aW5bDTD40XD0Fqr\n4zp6mao2fJk7moG591E/tmWzmwp1H8amtI6g+FAHFPk7JBlGzoYO18DkSMbi\nenNLwHHipBhtIao6/EeouzzlGcFkomGBtSE7RaX/8/w2HbFOnkhmtoM8nceU\n4PwykWlTuqrT/mAh5FsPfdyubPAYASUjbgfgv2QQXQbY5KIR6m3TlMK+Dsfh\n6Utl\r\n=94ya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpKWSjI0A/ISVi/FjuPIXbwDOoEYZqzG2hhZiGZfg8SAiA49ijh3Hwy5pHOUXnaWXyaUYAXU09OH+Z2CNdkCmpZ8Q=="}]},"_npmUser":{"name":"alpharagesadmin","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharagesadmin","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_12.0.0_1631287371942_0.18125390176156086"},"_hasShrinkwrap":false},"12.0.1":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"12.0.1","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/core":"^9.0.0"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"gitHead":"e95fda9c1f4cc1c35d1a7327e2e379e2252aa30b","_id":"@alpharages/dnd@12.0.1","_nodeVersion":"15.6.0","_npmVersion":"7.20.5","dist":{"integrity":"sha512-INMC0c486Tux2RaOmk8/uOwMDz5E+jLNRdzJedB0GFPqfuoO6F+SkoMBiPQFS77fEOwdjGZbNc3a0244Y/YMjw==","shasum":"0dbbc9ea12b6e6474f2658c6209b3c4beccf1a52","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-12.0.1.tgz","fileCount":22,"unpackedSize":66371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3q1CRA9TVsSAnZWagAAI0UP/jbmsYIyr1pMlVykuQ+U\nvzLO7l3HGG3zVkqacHfcDeaWCM/JdAO4PPzkF5MsvONZ5E25XE4j3mKQojXk\nwL/23xw7UOdHblSDjpeWaHLWyH0KIDrjn7ES5PxMZmlHQPzNx6Ts2cpWE+Ey\nQ5K/d4cxuWJ3MdihhS8IrcVttyRybRzc30II2v+me9GYQQGsK10bWFfn7Nyr\n8LhnjCCYrRIWpcS9VDyrztv5wKmm226DmjVOKngqBmRD0uFfLP7mZA5yDAA7\n9jH/C7jfz2OEbjOi+ZBZVzunuK2o5gmn3JHh7yxkTAC3ZWJfoFp9yln+UaHf\nSf5xpdgrZQNPTYvrv36i7CEwHuygcpORP7tTmoH8DlxuJ2904OPpnLrJChWg\ndwQl6GYBLG8CTRLrl8ktsyxib1cWSIcDiWnD0XSYBxW53mlGV+H/Yv40krFo\n5QniTThqbNBEWmjTKJrHQkhJWUtwOtjo+Jr2PdcQ1fyHM1NIYa7smSI+VjoA\n2Ha4r3hUsHv6Zr1pEU2mKCEC5aznnaLPqZ8zoJXKlOMu/4umj2XouZVijfZL\n/YxwlMRP+24FpP//WO8G+QhpX294BKDkYl5l6TQ6NKNEfuaAbo8GFvesLnZ4\nz2w1o0P3PlbtQ1y/Ivbhe6H2ZoB2gjz/WJLS6xRWdFM1D0YgekXpkwAvjIT3\nqiJ1\r\n=0QTk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1JWIPF1DG/KMBFBCKHx3f/QqKk9JgZyDiDalcqpcDUAiEAjBEuaf3BSrDLTU+iK4kwhB90l01WwUgMTW8PC9dhOT0="}]},"_npmUser":{"name":"alpharagesadmin","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharagesadmin","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_12.0.1_1631287989343_0.10512108262443953"},"_hasShrinkwrap":false},"12.0.2":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"12.0.2","scripts":{"ng":"ng","start":"ng serve","build":"ng build","test":"ng test","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^12.x","@angular/core":"^12.x"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"gitHead":"e95fda9c1f4cc1c35d1a7327e2e379e2252aa30b","_id":"@alpharages/dnd@12.0.2","_nodeVersion":"15.6.0","_npmVersion":"7.20.5","dist":{"integrity":"sha512-PaiDkrqVeafXN3f0O2BETXCxoYpT0KTv6myB4PNVENlG4RRi3dDLfZhboinskkhf1Z0qbQVze3MRONOtNSIdeg==","shasum":"2cc389c4b2861eff596b3320a15af743f8bda78d","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-12.0.2.tgz","fileCount":22,"unpackedSize":66402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3yOCRA9TVsSAnZWagAAulYQAIx5SeKl96coIAu6Teee\nob4oQqHhze53+oVWnQsQlaoPM/wnyug8pUi/iuafIRlplQMpD/0oqqX9Ghdd\nASHIDBQHc8T+mbDeQzudnFyaLUejToCFh0T9zU07MvJ8ujog2MOfBmJO+Cw7\nvveyygQov63F/TDl4MWi4yUo8HPIBuwc4o2qaMXTPeS8plisGZ1X9y73AQyY\nITPq3eiD6vsoLN2Fs+upbmLNcCtAw5ieB+oZzgbbwlwN5KsCT093lhHqVOxN\nD8i3gVmEGZS70IZlQLadCAG1qR1+0WbdTA/zbK+naGdzZ/YWs41iwTn1I1yZ\n4983Ga//riZHy2i7cZIghgBkKPciwmNAeJm5O1OTko5BcjH0jEKFk80HuFux\n8PbeG4PLvRMyV9n39BLmJPJLZ/TdrMtZGtK4QSv7/ppnqrunHW6WBJ6Rt77Z\n8gjPyq/BA+RKTbhkgcgjHI53XktnHKc6pQx/qmkNg+7QxfIyAwZ+fBe35BcU\nsC7esTGT1bkoBWh9lwd0asFo/WTVfX0p6YdgWAR8Y17fUuqeVtmBP8rJIqxY\nkYt5DzT2pdjU5OMtKRTDfX/0T2S29xtAnFUthbX7MUr2X3sOYsC5562SA2Um\ncy+eURvTr8nZu4CjP8eMNa0bR7KewacJFrg8ejhSMsRHyjP5+SN1ENMgA/ty\n6yKQ\r\n=qdcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn4RbdkROldVaDdnso9gHjSyljIkYIdEEnh1QWX4JWmgIhALpilL7Dkt8DMmJ7dKyDSGCGMud7Acleo4fbS4lFbpQr"}]},"_npmUser":{"name":"alpharagesadmin","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharagesadmin","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_12.0.2_1631288462336_0.4126259672998247"},"_hasShrinkwrap":false},"12.1.0":{"name":"@alpharages/dnd","description":"Angular Drag-and-Drop without dependencies","version":"12.1.0","repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"keywords":["angular","drag","drop","drag-and-drop"],"author":{"name":"Alpharages","email":"info@alpharages.com"},"license":"MIT","bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"homepage":"https://github.com/Alpharages/ng2-dnd#readme","peerDependencies":{"@angular/common":"^12.x","@angular/core":"^12.x"},"dependencies":{"tslib":"^2.0.0"},"engines":{"npm":">6.0.0"},"main":"bundles/alpharages-dnd.umd.js","module":"fesm2015/alpharages-dnd.js","es2015":"fesm2015/alpharages-dnd.js","esm2015":"esm2015/alpharages-dnd.js","fesm2015":"fesm2015/alpharages-dnd.js","typings":"alpharages-dnd.d.ts","sideEffects":false,"_id":"@alpharages/dnd@12.1.0","_nodeVersion":"15.6.0","_npmVersion":"7.20.5","dist":{"integrity":"sha512-NIAPLz0JovcV2VFYlM8frqI1QCVhfNRXaH8BmpNb3XtWn4BmB0fHhnMkp+v3xUDTkweTjwZ8Pcdz/nyjjOexKg==","shasum":"b27ab04c115e32676b16a839a44d1ff9cc55bb45","tarball":"https://registry.npmjs.org/@alpharages/dnd/-/dnd-12.1.0.tgz","fileCount":26,"unpackedSize":405789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP4dpCRA9TVsSAnZWagAA7ccP/RF/7OsRwt5QW4xnPeKL\n/ISot2kdnfUOLAfhCwFEyK60Wp1A0c7qCweprVFKx3NCAs6+AWFaBR3dba2t\nWgOoggr5fDPmNZffYGP6b/z6h8Ed8AXm1CpdnhkFjx3f4XHypWUacYGixKVs\n/qlYGvZE16LfQruIGZZAaEyk22fs2d8D86Ecf1KNBu92M8LDib2hNS74UCVG\nz6KKEDmTsaMtAl6YfLp1aH3q8aSEyAu2N/7OIlCwF4Ti5YJpUPpMtxuS7QnU\ntfwrZJoJsNrEhPp6/13+t/WYd45EbeM1GUujctafK/UhfaHMV4YMNMJnLuxm\nxb7NHWpuTsx9IN+Xb3wI12k4XnqK+5xaYV9LFxAsXZvt9V+ajMwFxvrmd2iY\na8Xs2HD4dIRHjJ62yKWy2l6tRbeuvTDomkuZyhB7cBKILYMuJK0WEr234cyM\n9nPz0xbcUUMgWjyZhOL7CPKSU2LQ2cm672yNJV4+3y1f5qjSPEfdXv6TZ9sW\nzVOKndgpsLRjPBpj31Mt7k3askt14fDmLg2j4St8YeLdu52hqs3+IkftiZEO\ndnfaPGhN2LM7LnNT8uZ/5QyZykbtfzYD3e53Oh5ity1LdgU74Awv+WkG6NyZ\n39MYD7e6rccscL1WS0VtViGQY/gfGnYEErC9Bd1xmOQWucwDTVSuvhPU+zrK\n6rXR\r\n=y2E6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZGm0GGBNYOcFXAn1W8n005dKWZcJa0IRRSVl/F9qzPAiEAka7XU4cxtBe+XQDG+UdaVO1Y/pkdWPjDjILpryChtkk="}]},"_npmUser":{"name":"alpharagesadmin","email":"info@alpharages.com"},"directories":{},"maintainers":[{"name":"alpharagesadmin","email":"info@alpharages.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dnd_12.1.0_1631553385373_0.3701945550721424"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-22T13:25:16.379Z","11.0.0":"2021-01-22T13:25:16.623Z","modified":"2022-04-04T13:38:23.899Z","11.0.1":"2021-01-22T13:33:21.554Z","11.0.2":"2021-01-22T13:36:59.136Z","12.0.0":"2021-09-10T15:22:52.108Z","12.0.1":"2021-09-10T15:33:09.526Z","12.0.2":"2021-09-10T15:41:02.495Z","12.1.0":"2021-09-13T17:16:25.542Z"},"maintainers":[{"name":"alpharagesadmin","email":"info@alpharages.com"}],"description":"Angular Drag-and-Drop without dependencies","homepage":"https://github.com/Alpharages/ng2-dnd#readme","keywords":["angular","drag","drop","drag-and-drop"],"repository":{"type":"git","url":"git+https://github.com/Alpharages/ng2-dnd.git"},"author":{"name":"Alpharages","email":"info@alpharages.com"},"bugs":{"url":"https://github.com/Alpharages/ng2-dnd/issues"},"license":"MIT","readme":"# Angular 2 Drag-and-Drop\nAngular 2 Drag-and-Drop without dependencies.\n\nSpecial Thanks to [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) who has created this awesome package\n\n_Some of these APIs and Components are not final and are subject to change!_\n\n## Transpilation to Angular Package Format\nThe library uses [ng-packagr](https://github.com/dherges/ng-packagr) to transpile into the Angular Package Format:\n- Bundles library in `FESM2015`, `FESM5`, and `UMD` formats\n- The npm package can be consumed by `Angular CLI`, `Webpack`, or `SystemJS`\n- Creates type definitions (`.d.ts`)\n- Generates Ahead-of-Time metadata (`.metadata.json`)\n- Auto-discovers and bundles secdary entry points such as `@my/foo`, `@my/foo/testing`, `@my/foo/bar`\n\n## Installation\n```bash\nnpm install @alpharages/dnd --save\n```\n\n## Usage\nIf you use SystemJS to load your files, you might have to update your config:\n\n```js\nSystem.config({\n    map: {\n        '@alpharages/dnd': 'node_modules/@alpharages/dnd/bundles/dnd.umd.js'\n    }\n});\n```\n\n#### 1. Add the default styles\n- Import the `style.css` into your web page from `node_modules/@alpharages/dnd/bundles/style.css`\n\n#### 2. Import the `DndModule`\nImport `DndModule.forRoot()` in the NgModule of your application.\nThe `forRoot` method is a convention for modules that provide a singleton service.\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from '@angular/core';\nimport {DndModule} from '@alpharages/dnd';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        DndModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),\ndon't forget that you can use it to export the `DndModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        DndModule\n    ],\n    exports: [BrowserModule, DndModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 3. Use Drag-and-Drop operations with no code\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'simple-dnd',\n    template: `\n<h4>Simple Drag-and-Drop</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragEnabled]=\"true\">\n                    <div class=\"panel-body\">\n                        <div>Drag Me</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-info\" (dropSuccess)=\"simpleDrop=$event\">\n            <div class=\"panel-heading\">Place to drop</div>\n            <div class=\"panel-body\">\n                <div *ngIf=\"simpleDrop\">Item was dropped here</div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleDndComponent {\n    simpleDrop: any = null;\n}\n```\n\n#### 4. Add handle to restrict draggable zone of component\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'simple-dnd-handle',\n    template: `\n<h4>Simple Drag-and-Drop with handle</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragEnabled]=\"true\">\n                    <div class=\"panel-body\">\n                        <div>\n                            <span libDndDraggable-handle>=</span>&nbsp;\n                            Drag Handle\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-info\" (dropSuccess)=\"simpleDrop=$event\">\n            <div class=\"panel-heading\">Place to drop</div>\n            <div class=\"panel-body\">\n                <div *ngIf=\"simpleDrop\">Item was dropped here</div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleDndHandleComponent {\n    simpleDrop: any = null;\n}\n```\n\n#### 5. Restriction Drag-and-Drop operations with drop zones\nYou can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'zone-dnd',\n    template: `\n<h4>Restricted Drag-and-Drop with zones</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-primary\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragEnabled]=\"true\" [dropZones]=\"['zone1']\">\n                    <div class=\"panel-body\">\n                        <div>Drag Me</div>\n                        <div>Zone 1 only</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragEnabled]=\"true\" [dropZones]=\"['zone1', 'zone2']\">\n                    <div class=\"panel-body\">\n                        <div>Drag Me</div>\n                        <div>Zone 1 & 2</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-info\" [dropZones]=\"['zone1']\" (dropSuccess)=\"restrictedDrop1=$event\">\n            <div class=\"panel-heading\">Zone 1</div>\n            <div class=\"panel-body\">\n                <div *ngIf=\"restrictedDrop1\">Item was dropped here</div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-warning\" [dropZones]=\"['zone2']\" (dropSuccess)=\"restrictedDrop2=$event\">\n            <div class=\"panel-heading\">Zone 2</div>\n            <div class=\"panel-body\">\n                <div *ngIf=\"restrictedDrop2\">Item was dropped here</div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class ZoneDndComponent {\n    restrictedDrop1: any = null;\n    restrictedDrop2: any = null;\n}\n```\n\n#### 6. Transfer custom data via Drag-and-Drop\nYou can transfer data from draggable to droppable component via *dragData* property of Draggable component:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'custom-data-dnd',\n    template: `\n<h4>Transfer custom data in Drag-and-Drop</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragEnabled]=\"true\" [dragData]=\"transferData\">\n                    <div class=\"panel-body\">\n                        <div>Drag Me</div>\n                        <div>{{transferData | json}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-info\" (dropSuccess)=\"transferDataSuccess($event)\">\n            <div class=\"panel-heading\">Place to drop (Items:{{receivedData.length}})</div>\n            <div class=\"panel-body\">\n                <div [hidden]=\"!receivedData.length > 0\" *ngFor=\"let data of receivedData\">{{data | json}}</div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class CustomDataDndComponent {\n    transferData: Object = {id: 1, msg: 'Hello'};\n    receivedData: Array<any> = [];\n\n    transferDataSuccess($event: any) {\n        this.receivedData.push($event);\n    }\n}\n```\n\n#### 7. Use a custom function to determine where dropping is allowed\nFor 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.\n\nIn the following example, we have two containers that only accept numbers that are multiples of a user-input base integer. `dropZone`s are not helpful here because they are static, whereas the user input is dynamic.\n\n```js\nimport { Component } from '@angular/core';\n\n@Component({\n    selector: 'custom-function-dnd',\n    template: `\n<h4>Use a custom function to determine where dropping is allowed</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available to drag</div>\n            <div class=\"panel-body\">\n                <div class=\"panel panel-default\" libDndDraggable [dragData]=\"6\">\n                    <div class=\"panel-body\">dragData = 6</div>\n                </div>\n                <div class=\"panel panel-default\" libDndDraggable [dragData]=\"10\">\n                    <div class=\"panel-body\">dragData = 10</div>\n                </div>\n                <div class=\"panel panel-default\" libDndDraggable [dragData]=\"30\">\n                    <div class=\"panel-body\">dragData = 30</div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <pre>allowDropFunction(baseInteger: any): any {{ '{' }}\n  return (dragData: any) => dragData % baseInteger === 0;\n{{ '}' }}</pre>\n        <div class=\"row\">\n            <div class=\"col-sm-6\">\n                <div libDndDroppable class=\"panel panel-info\" [allowDrop]=\"allowDropFunction(box1Integer)\" (dropSuccess)=\"addTobox1Items($event)\">\n                    <div class=\"panel-heading\">\n                        Multiples of\n                        <input type=\"number\" [(ngModel)]=\"box1Integer\" style=\"width: 4em\">\n                        only\n                    </div>\n                    <div class=\"panel-body\">\n                        <div *ngFor=\"let item of box1Items\">dragData = {{item}}</div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-sm-6\">\n                <div libDndDroppable class=\"panel panel-warning\" [allowDrop]=\"allowDropFunction(box2Integer)\" (dropSuccess)=\"addTobox2Items($event)\">\n                    <div class=\"panel-heading\">\n                        Multiples of\n                        <input type=\"number\" [(ngModel)]=\"box2Integer\" style=\"width: 4em\">\n                        only\n                    </div>\n                    <div class=\"panel-body\">\n                        <div *ngFor=\"let item of box2Items\">dragData = {{item}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n`\n})\nexport class CustomFunctidndComponent {\n    box1Integer: number = 3;\n    box2Integer: number = 10;\n\n    box1Items: string[] = [];\n    box2Items: string[] = [];\n\n    allowDropFunction(baseInteger: number): any {\n        return (dragData: any) => dragData % baseInteger === 0;\n    }\n\n    addTobox1Items($event: any) {\n        this.box1Items.push($event.dragData);\n    }\n\n    addTobox2Items($event: any) {\n        this.box2Items.push($event.dragData);\n    }\n}\n```\n\n#### 8. Shopping basket with Drag-and-Drop\nHere is an example of shopping backet with products adding via drag and drop operation:\n\n```js\nimport { Component } from '@angular/core';\n\n@Component({\n    selector: 'shoping-basket-dnd',\n    template: `\n<h4>Drag-and-Drop - Shopping basket</h4>\n<div class=\"row\">\n\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">Available products</div>\n            <div class=\"panel-body\">\n                <div *ngFor=\"let product of availableProducts\" class=\"panel panel-default\"\n                    libDndDraggable [dragEnabled]=\"product.quantity>0\" [dragData]=\"product\" (dragSuccess)=\"orderedProduct($event)\" [dropZones]=\"['demo1']\">\n                    <div class=\"panel-body\">\n                        <div [hidden]=\"product.quantity===0\">{{product.name}} - \\${{product.cost}}<br>(available: {{product.quantity}})</div>\n                        <div [hidden]=\"product.quantity>0\"><del>{{product.name}}</del><br>(NOT available)</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-3\">\n        <div libDndDroppable (dropSuccess)=\"addToBasket($event)\" [dropZones]=\"['demo1']\" class=\"panel panel-info\">\n            <div class=\"panel-heading\">Shopping Basket<br>(to pay: \\${{totalCost()}})</div>\n            <div class=\"panel-body\">\n                <div *ngFor=\"let product of shoppingBasket\" class=\"panel panel-default\">\n                    <div class=\"panel-body\">\n                    {{product.name}}<br>(ordered: {{product.quantity}}<br>cost: \\${{product.cost * product.quantity}})\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class ShoppingBasketDndComponent {\n    availableProducts: Array<Product> = [];\n    shoppingBasket: Array<Product> = [];\n\n    constructor() {\n        this.availableProducts.push(new Product('Blue Shoes', 3, 35));\n        this.availableProducts.push(new Product('Good Jacket', 1, 90));\n        this.availableProducts.push(new Product('Red Shirt', 5, 12));\n        this.availableProducts.push(new Product('Blue Jeans', 4, 60));\n    }\n\n    orderedProduct($event: any) {\n        let orderedProduct: Product = $event.dragData;\n        orderedProduct.quantity--;\n    }\n\n    addToBasket($event: any) {\n        let newProduct: Product = $event.dragData;\n        for (let indx in this.shoppingBasket) {\n            let product: Product = this.shoppingBasket[indx];\n            if (product.name === newProduct.name) {\n                product.quantity++;\n                return;\n            }\n        }\n        this.shoppingBasket.push(new Product(newProduct.name, 1, newProduct.cost));\n        this.shoppingBasket.sort((a: Product, b: Product) => {\n            return a.name.localeCompare(b.name);\n        });\n    }\n\n    totalCost(): number {\n        let cost: number = 0;\n        for (let indx in this.shoppingBasket) {\n            let product: Product = this.shoppingBasket[indx];\n            cost += (product.cost * product.quantity);\n        }\n        return cost;\n    }\n}\n\nclass Product {\n  constructor(public name: string, public quantity: number, public cost: number) {}\n}\n```\n\n#### 9. Simple sortable with Drag-and-Drop\nHere is an example of simple sortable of favorite drinks moving in container via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'simple-sortable',\n    template: `\n<h4>Simple sortable</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">\n                Favorite drinks\n            </div>\n            <div class=\"panel-body\">\n                <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"listOne\">\n                    <li *ngFor=\"let item of listOne; let i = index\" class=\"list-group-item\" dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-default\">\n            <div class=\"panel-body\">\n                My prefences:<br/>\n                <span *ngFor=\"let item of listOne; let i = index\">{{i + 1}}) {{item}}<br/></span>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleSortableComponent {\n    listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n}\n```\n\n\n#### 10. Simple sortable with Drag-and-Drop handle\nAdd handle to restict grip zone of sortable component.\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'simple-sortable-handle',\n    template: `\n<h4>Simple sortable handle</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">\n                Favorite drinks\n            </div>\n            <div class=\"panel-body\">\n                <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"listOne\">\n                    <li *ngFor=\"let item of listOne; let i = index\" class=\"list-group-item\" dnd-sortable [sortableIndex]=\"i\">\n                      <span dnd-sortable-handle>=</span>&nbsp;\n                      {{item}}\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-default\">\n            <div class=\"panel-body\">\n                My prefences:<br/>\n                <span *ngFor=\"let item of listOne; let i = index\">{{i + 1}}) {{item}}<br/></span>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleSortableHandleComponent {\n    listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n}\n```\n\n#### 11. Simple sortable With Drop into recycle bin\nHere is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'recycle-multi-sortable',\n    template: `\n<h4>Simple sortable With Drop into recycle bin</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">\n                Favorite drinks\n            </div>\n            <div class=\"panel-body\" dnd-sortable-container [sortableData]=\"listOne\" [dropZones]=\"['delete-dropZone']\">\n                <ul class=\"list-group\">\n                    <li *ngFor=\"let item of listOne; let i = index\" class=\"list-group-item\"\n                    dnd-sortable [sortableIndex]=\"i\">{{item}}</li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-default\">\n            <div class=\"panel-body\" dnd-sortable-container [dropZones]=\"['delete-dropZone']\" [sortableData]=\"listRecycled\">\n                Recycle bin: Drag into me to delete it<br/>\n            </div>\n        </div>\n        <div *ngIf=\"listRecycled.length\">\n        <b>Recycled:</b> <span>{{listRecycled.toString()}} </span>\n        </div>\n    </div>\n</div>`\n})\nexport class RecycleMultiSortableComponent {\n    listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n    listRecycled: Array<string> = [];\n}\n```\n\n#### 12. Simple sortable With Drop into something, without delete it\nHere is an example of simple sortable list of items copying in target container:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'simple-sortable-copy',\n    template: `\n<h4>Simple sortable With Drop into something, without delete it</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-warning\"\n            dnd-sortable-container [sortableData]=\"sourceList\" [dropZones]=\"['source-dropZone']\">\n            <div class=\"panel-heading\">Source List</div>\n            <div class=\"panel-body\">\n                <ul class=\"list-group\">\n                    <li *ngFor=\"let source of sourceList; let x = index\" class=\"list-group-item\"\n                        dnd-sortable [sortableIndex]=\"x\" [dragEnabled]=\"true\"\n                        [dragData]=\"source\">{{source.name}}</li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-info\">\n            <div class=\"panel-heading\">Target List</div>\n            <div class=\"panel-body\" libDndDroppable (dropSuccess)=\"addTo($event)\" [dropZones]=\"['source-dropZone']\">\n                <ul class=\"list-group\">\n                    <li *ngFor=\"let target of targetList\" class=\"list-group-item\">\n                        {{target.name}}\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleSortableCopyComponent {\n\n    sourceList: Widget[] = [\n        new Widget('1'), new Widget('2'),\n        new Widget('3'), new Widget('4'),\n        new Widget('5'), new Widget('6')\n    ];\n\n    targetList: Widget[] = [];\n    addTo($event: any) {\n        this.targetList.push($event.dragData);\n    }\n}\n\nclass Widget {\n  constructor(public name: string) {}\n}\n```\n\n#### 13. Multi list sortable between containers\nHere is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n    selector: 'embedded-sortable',\n    template: `\n<h4>Move items between multi list sortable containers</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        Drag Containers <input type=\"checkbox\" [(ngModel)]=\"dragOperation\"/>\n        <div dnd-sortable-container [sortableData]=\"containers\" [dropZones]=\"['container-dropZone']\">\n            <div class=\"col-sm3\"\n                    *ngFor=\"let container of containers; let i = index\"\n                    dnd-sortable [sortableIndex]=\"i\" [dragEnabled]=\"dragOperation\">\n                <div class=\"panel panel-warning\"\n                    dnd-sortable-container [sortableData]=\"container.widgets\" [dropZones]=\"['widget-dropZone']\">\n                    <div class=\"panel-heading\">\n                        {{container.id}} - {{container.name}}\n                    </div>\n                    <div class=\"panel-body\">\n                        <ul class=\"list-group\">\n                            <li *ngFor=\"let widget of container.widgets; let x = index\" class=\"list-group-item\"\n                                dnd-sortable [sortableIndex]=\"x\" [dragEnabled]=\"!dragOperation\"\n                                [dragData]=\"widget\">{{widget.name}}</li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-info\">\n            <div class=\"panel-heading\">Widgets</div>\n            <div class=\"panel-body\" libDndDroppable (dropSuccess)=\"addTo($event)\" [dropZones]=\"['widget-dropZone']\">\n                <div *ngFor=\"let widget of widgets\" class=\"panel panel-default\">\n                    <div class=\"panel-body\">\n                        {{widget.name}}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class EmbeddedSortableComponent {\n    dragOperation: boolean = false;\n\n    containers: Array<Container> = [\n        new Container(1, 'Container 1', [new Widget('1'), new Widget('2')]),\n        new Container(2, 'Container 2', [new Widget('3'), new Widget('4')]),\n        new Container(3, 'Container 3', [new Widget('5'), new Widget('6')])\n    ];\n\n    widgets: Array<Widget> = [];\n    addTo($event: any) {\n        if ($event) {\n            this.widgets.push($event.dragData);\n        }\n    }\n}\n\nclass Container {\n  constructor(public id: number, public name: string, public widgets: Array<Widget>) {}\n}\n\nclass Widget {\n  constructor(public name: string) {}\n}\n```\n\n#### 14. Simple FormArray sortable with Drag-and-Drop\nHere is an example of simple sortable of favorite drinks moving in container via drag and drop operation but using FormArray instead of Array:\n\n```js\nimport {Component} from '@angular/core';\nimport {FormArray, FormControl} from '@angular/forms';\n\n@Component({\n    selector: 'simple-formarray-sortable',\n    template: `\n<h4>Simple FormArray sortable</h4>\n<div class=\"row\">\n    <div class=\"col-sm-3\">\n        <div class=\"panel panel-success\">\n            <div class=\"panel-heading\">\n                Favorite drinks\n            </div>\n            <div class=\"panel-body\">\n                <ul class=\"list-group\" dnd-sortable-container [sortableData]=\"listOne\">\n                    <li *ngFor=\"let item of listOne.controls; let i = index\" class=\"list-group-item\" dnd-sortable [sortableIndex]=\"i\"><input type=\"text\" [formControl]=\"item\"></li>\n                </ul>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-sm-6\">\n        <div class=\"panel panel-default\">\n            <div class=\"panel-body\">\n                My prefences:<br/>\n                <span *ngFor=\"let item of listOne.controls; let i = index\">{{i + 1}}) {{item.value}}<br/></span>\n            </div>\n        </div>\n    </div>\n</div>`\n})\nexport class SimpleFormArraySortableComponent {\n    listOne: FormArray = new FormArray([\n      new FormControl('Coffee'),\n      new FormControl('Orange Juice'),\n      new FormControl('Red Wine'),\n      new FormControl('Unhealty drink!'),\n      new FormControl('Water')\n    ]);\n}\n```\n\n## How to pass multiple data in dragData while dragging ?\n\n1) As an array:\n\n``` html\n[dragData]=\"[aComponent,'component-in-bar']\"\n```\n\n``` javascript\nloadComponent($event){\n    console.log($event.dragData[0]); // aComponent \n    console.log($event.dragData[1]); // 'component-in-bar' OR 'component-in-designer' \n}\n```\n\n2) As an object:\n\n``` html\n[dragData]=\"{component: aComponent, location: 'component-in-bar'}\"\n```\n\n``` javascript\nloadComponent($event){\n    console.log($event.dragData.component); // aComponent \n    console.log($event.dragData.location); // 'component-in-bar' OR 'component-in-designer' \n}\n```\n\n# Retreiving files in a drop zone\n\nSince it is possible to drag and drop one or more files to a drop zone, you need to handle the incoming files.\n\n```js\nimport {Component} from '@angular/core';\nimport {Http, Headers} from '@angular/http';\nimport {DND_PROVIDERS, DND_DIRECTIVES} from '@alpharages/dnd/@alpharages/dnd';\nimport {bootstrap} from '@angular/platform-browser-dynamic';\n\nbootstrap(AppComponent, [\n    DND_PROVIDERS // It is required to have 1 unique instance of your service\n]);\n\n@Component({\n    selector: 'app',\n    directives: [DND_DIRECTIVES],\n    template: `\n<h4>Simple Drag-and-Drop</h4>\n<div class=\"row\">\n   \n    <div class=\"col-sm-3\">\n        <div libDndDroppable class=\"panel panel-info\"\n            (dropSuccess)=\"transferDataSuccess($event)\">>\n            <div class=\"panel-heading\">Place to drop</div>\n            <div class=\"panel-body\">\n            </div>\n        </div>\n    </div>\n</div>\n`\n})\nexport class AppComponent {\n\n  constructor(private _http: Http) { }\n\n   /**\n   * The $event is a structure:\n   * {\n   *   dragData: any,\n   *   mouseEvent: MouseEvent\n   * }\n   */\n  transferDataSuccess($event) {\n    // let attachmentUploadUrl = 'assets/data/offerspec/offerspec.json';\n    // loading the FileList from the dataTransfer\n    let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;\n    if (dataTransfer && dataTransfer.files) {\n      \n      // needed to support posting binaries and usual form values\n      let headers = new Headers();\n      headers.append('Content-Type', 'multipart/form-data');\n\n      let files: FileList = dataTransfer.files;\n  \n      // uploading the files one by one asynchrounusly\n      for (let i = 0; i < files.length; i++) {\n        let file: File = files[i];\n  \n        // just for debugging\n        console.log('Name: ' + file.name + '\\n Type: ' + file.type + '\\n Size: ' + file.size + '\\n Date: ' + file.lastModifiedDate);\n  \n        // collecting the data to post\n        var data = new FormData();\n        data.append('file', file);\n        data.append('fileName', file.name);\n        data.append('fileSize', file.size);\n        data.append('fileType', file.type);\n        data.append('fileLastMod', file.lastModifiedDate);\n  \n        // posting the data\n        this._http\n          .post(attachmentUploadUrl, data, {\n            headers: headers\n          })\n          .toPromise()\n          .catch(reason => {\n            console.log(JSON.stringify(reason));\n          });\n      }\n    }\n  }\n}\n\n# Credits\n- [Francesco Cina](https://github.com/ufoscout)\n- [Valerii Kuznetsov](https://github.com/solival)\n- [Shane Oborn](https://github.com/obosha)\n- [Juergen Gutsch](https://github.com/JuergenGutsch)\n- [Damjan Cilenšek](https://github.com/loudandwicked)\n\n# License\n [MIT](/LICENSE)\n","readmeFilename":"README.md"}