ngx-sortable-2/dist/index.umd.min.js

An angular 4 and above component for sorting list supporting drag and drop sort.

/**
 * ngx-sortable-2 - An angular 4 and above component for sorting list supporting drag and drop sort.
 * @version v1.0.1
 * @author Manish Kumar
 * @link https://github.com/LuizAsFight/ngx-sortable#readme
 * @license MIT
 */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common")):e.ticktock=t(e.ng.core,e.ng.common)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a},r=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),a=function(){function e(){this.listStyle={height:"250px",width:"300px",dropZoneHeight:"50px"},this.listSorted=new i.EventEmitter,this.draggedIndex=-1,this.onDragOverIndex=-1,console.log("Intializing...")}return e.prototype.selectItem=function(e){this.selectedItem=e},e.prototype.moveUp=function(){var e=this.items.indexOf(this.selectedItem);0!==e&&(this.swapElements(e,e-1),this.listSorted.emit(this.items))},e.prototype.moveDown=function(){var e=this.items.indexOf(this.selectedItem);e!==this.items.length-1&&(this.swapElements(e,e+1),this.listSorted.emit(this.items))},e.prototype.onDrop=function(e,t){this.handleDrop(t)},e.prototype.allowDrop=function(e,t){this.onDragOverIndex=t,e.preventDefault()},e.prototype.onDragStart=function(e,t){this.draggedIndex=t},e.prototype.handleDrop=function(e){var t=(this.draggedIndex,this.items[this.draggedIndex]);this.items.splice(this.draggedIndex,1),this.items.splice(e,0,t),this.draggedIndex=-1,this.onDragOverIndex=-1,this.listSorted.emit({items:this.items,droppedIndex:e})},e.prototype.swapElements=function(e,t){var n=this.items[e];this.items[e]=this.items[t],this.items[t]=n},o([i.Input(),r("design:type",Array)],e.prototype,"items",void 0),o([i.Input(),r("design:type",String)],e.prototype,"name",void 0),o([i.Input(),r("design:type",Object)],e.prototype,"listStyle",void 0),o([i.Output(),r("design:type",i.EventEmitter)],e.prototype,"listSorted",void 0),o([i.ContentChild(i.TemplateRef),r("design:type",i.TemplateRef)],e.prototype,"itemTemplate",void 0),e=o([i.Component({selector:"ngx-sortable",template:n(5),styles:[n(6)]}),r("design:paramtypes",[])],e)}();t.NgxSortableComponent=a},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3);t.NgxSortableComponent=o.NgxSortableComponent;var r=n(9);t.NgxSortableModule=r.NgxSortableModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(0);t.NgxSortableComponent=o.NgxSortableComponent},function(e,t){e.exports='<div class="sortable-container" [style.width]=\'listStyle.width\'>\n  <div class="sortable-header">\n    <label class="sortable-name">{{name}}</label>\n    <div class="sortable-buttons">\n      <button (click)="moveUp()" [disabled]="!selectedItem" title="Move Up">&#8679;</button>\n      <button (click)="moveDown()" [disabled]="!selectedItem" title="Move Down">&#8681;</button>\n    </div>\n  </div>\n  <ul class="sortable-list" [style.height]=\'listStyle.height\'>\n    <li draggable="true" (click)="selectItem(item)" *ngFor="let item of items; let i = index;" [ngClass]="{\'active\': item == selectedItem}"\n      (drop)="onDrop($event, i)" (dragover)="allowDrop($event,i)" (dragstart)="onDragStart($event, i)">\n      <div class="drop-zone" [style.height]="listStyle.dropZoneHeight" *ngIf="onDragOverIndex == i">\n      </div>\n      <ng-template ngFor [ngForOf]="[item]" [ngForTemplate]="itemTemplate">\n      </ng-template>\n    </li>\n  </ul>\n</div>'},function(e,t,n){var o=n(7);e.exports="string"==typeof o?o:o.toString()},function(e,t,n){t=e.exports=n(8)(!1),t.push([e.i,".sortable-container {\n  width: 100%;\n  border: 1px solid #d9d9d9;\n  border-radius: 3px; }\n  .sortable-container .sortable-header {\n    width: auto;\n    padding: 5px;\n    background: lightgray;\n    border-bottom: 1px solid #d9d9d9;\n    height: 30px;\n    background-image: linear-gradient(#f6f7f9 0%, #ebedf0 100%);\n    box-sizing: content-box;\n    color: black; }\n    .sortable-container .sortable-header .sortable-name {\n      vertical-align: middle;\n      font-size: 25px; }\n    .sortable-container .sortable-header .sortable-buttons {\n      float: right;\n      height: 100%;\n      box-sizing: border-box; }\n      .sortable-container .sortable-header .sortable-buttons button {\n        height: 30px;\n        width: 30px;\n        vertical-align: middle;\n        display: inline-block;\n        box-sizing: border-box;\n        margin-left: 5px;\n        border: 1px solid #2399e5;\n        color: #FFFFFF;\n        background: #2399e5;\n        -webkit-transition: background-color .2s;\n        -moz-transition: background-color .2s;\n        transition: background-color .2s;\n        border-radius: 5px;\n        outline: none; }\n        .sortable-container .sortable-header .sortable-buttons button:disabled {\n          cursor: not-allowed; }\n        .sortable-container .sortable-header .sortable-buttons button:active, .sortable-container .sortable-header .sortable-buttons button:hover {\n          border: 1px solid #156090;\n          background: #186ba0;\n          color: #ffffff; }\n          .sortable-container .sortable-header .sortable-buttons button:active:enabled, .sortable-container .sortable-header .sortable-buttons button:hover:enabled {\n            cursor: pointer; }\n  .sortable-container .sortable-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0px;\n    overflow: auto; }\n    .sortable-container .sortable-list .drop-zone {\n      height: 30px;\n      background: rgba(225, 219, 250, 0.5);\n      opacity: 0.5px;\n      border: 2px dotted #e1dbfa; }\n    .sortable-container .sortable-list .active {\n      background: #3f94e9 !important;\n      color: white; }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var i=o(r);return[n].concat(r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function o(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o=n(t,e);return t[2]?"@media "+t[2]+"{"+o+"}":o}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;r<this.length;r++){var i=this[r][0];"number"==typeof i&&(o[i]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&o[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(e,t,n){"use strict";var o=this&&this.__decorate||function(e,t,n,o){var r,i=arguments.length,a=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(i<3?r(a):i>3?r(t,n,a):r(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),i=n(1),a=n(10),s=function(){function e(){}return e=o([i.NgModule({declarations:[r.NgxSortableComponent],imports:[a.CommonModule],exports:[r.NgxSortableComponent],providers:[],bootstrap:[]})],e)}();t.NgxSortableModule=s},function(e,n){e.exports=t}])});
//# sourceMappingURL=index.umd.min.js.map