ng-swipe-to-delete
Version:
Material Swipe to delete list for Angular Projects.
2 lines • 9.76 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/material"),require("@angular/animations"),require("@angular/platform-browser"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-swipe-to-delete",["exports","@angular/core","@angular/material","@angular/animations","@angular/platform-browser","@angular/common"],t):t(e["ng-swipe-to-delete"]={},e.ng.core,e.ng.material,e.ng.animations,e.ng.platformBrowser,e.ng.common)}(this,function(e,t,n,i,s,o){"use strict";var l=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.MatIconModule,n.MatListModule,n.MatRippleModule],declarations:[],exports:[n.MatIconModule,n.MatListModule,n.MatRippleModule]}]}],e}(),a="singleline",r="multiline",d="listwithicon",c="listwithimage",g="CONFIG_NOT_LOADED",p="ZERO_SLIDE_THRESHOLD_NOT_ALLOWED",h="SLIDE_THRESHOLD_NOT_FOUND",m="MAX_SLIDE_THRESHOLD_NOT_ALLOWED",u="INVALID_SLIDE_THRESHOLD_NOT_ALLOWED",f={CONFIG_NOT_LOADED:"You have not provided the configuration values, default will be loaded.",ADDING_DEFAULT_SLIDE_THRESHOLD:"Will keep it default i.e.",SLIDE_THRESHOLD_NOT_FOUND:"You have not provided the slideThreshold.",ZERO_SLIDE_THRESHOLD_NOT_ALLOWED:"slideThreshold value can not be 0 or less than 0.",MAX_SLIDE_THRESHOLD_NOT_ALLOWED:"slideThreshold value should be less than 50.",INVALID_SLIDE_THRESHOLD_NOT_ALLOWED:"slideThreshold value is invalid, Expecting number between 0 to 50.",MAX_SLIDE_THRESHOLD:50,MIN_SLIDE_THRESHOLD:0,DEFAULT_SLIDE_THRESHOLD:12,NUMBER_OF_DELETE_ICONS:2,DEFAULT_CLASS_NAME:"ngstd-main-canvas"},L=function(){function e(){this.configuration=null,this.deletedItem=new t.EventEmitter,this.ngstdIndexNumber=null,this.disableWarnings=!1,this.listType=null,this.numberOfDeleteIcon=null,this.classname=null,this.isInvalidConfig=null,this.elementLeftSign=!0}return e.prototype.ngOnInit=function(){this.initializeSWipeList()},e.prototype.initializeSWipeList=function(){this.detectInvalidConfig(),this.setDisableWarnings(),this.setslideThreshold(),this.setNumberOfDeleteIcon(),this.setlistType()},e.prototype.detectInvalidConfig=function(){null===this.configuration||this.configuration===undefined||""===this.configuration?(this.isInvalidConfig=!0,this.logWarnings(g)):this.isInvalidConfig=!1},e.prototype.setNumberOfDeleteIcon=function(){var e=this.configuration;this.isInvalidConfig||2===e.numberOfDeleteIcon?this.numberOfDeleteIcon=f.NUMBER_OF_DELETE_ICONS:this.numberOfDeleteIcon=null},e.prototype.setslideThreshold=function(){if(this.isInvalidConfig)return this.slideThreshold=f.DEFAULT_SLIDE_THRESHOLD,void this.logWarnings(h,f.ADDING_DEFAULT_SLIDE_THRESHOLD+" "+f.DEFAULT_SLIDE_THRESHOLD+"%.");var e=this.configuration;null===e.slideThreshold||e.slideThreshold===undefined||"number"!=typeof e.slideThreshold?("number"!=typeof e.slideThreshold?this.logWarnings(u,f.ADDING_DEFAULT_SLIDE_THRESHOLD+" "+f.DEFAULT_SLIDE_THRESHOLD+"%."):this.logWarnings(h,f.ADDING_DEFAULT_SLIDE_THRESHOLD+" "+f.DEFAULT_SLIDE_THRESHOLD+"%."),this.slideThreshold=f.DEFAULT_SLIDE_THRESHOLD):e.slideThreshold<f.MIN_SLIDE_THRESHOLD||e.slideThreshold===f.MIN_SLIDE_THRESHOLD||e.slideThreshold>f.MAX_SLIDE_THRESHOLD?(e.slideThreshold>f.MAX_SLIDE_THRESHOLD&&this.logWarnings(m,f.ADDING_DEFAULT_SLIDE_THRESHOLD+" "+f.DEFAULT_SLIDE_THRESHOLD+"%."),(e.slideThreshold<f.MIN_SLIDE_THRESHOLD||e.slideThreshold===f.MIN_SLIDE_THRESHOLD)&&this.logWarnings(p,f.ADDING_DEFAULT_SLIDE_THRESHOLD+" "+f.DEFAULT_SLIDE_THRESHOLD+"%."),this.slideThreshold=f.DEFAULT_SLIDE_THRESHOLD):this.slideThreshold=e.slideThreshold},e.prototype.setlistType=function(){var e=this.configuration;if(this.isInvalidConfig||""===e.listType||e.listType===undefined||null===e.listType)this.listType=a;else{var t=e.listType.trim();switch(t){case a:case r:case d:case c:this.listType=t;break;default:this.listType=a}}},e.prototype.setDisableWarnings=function(){if(this.isInvalidConfig)this.disableWarnings=!1;else{var e=this.configuration;this.disableWarnings=!(!e.disableWarnings||e.disableWarnings===undefined||null===e.disableWarnings)}},e.prototype.getClassName=function(){return this.isInvalidConfig?""+f.DEFAULT_CLASS_NAME:""!==this.configuration.classname&&null!==this.configuration.classname&&this.configuration.classname!==undefined?f.DEFAULT_CLASS_NAME+" "+this.configuration.classname:""+f.DEFAULT_CLASS_NAME},e.prototype.panend=function(e,t,n){var i=this.getLeftPosition(n);i>this.slideThreshold||i<-this.slideThreshold&&this.numberOfDeleteIcon===f.NUMBER_OF_DELETE_ICONS?this.removeElement(t):this.ngstdIndexNumber=t},e.prototype.panmove=function(e,t){t.style.left=e.deltaX+"px",0<t.offsetLeft?this.elementLeftSign=!0:this.elementLeftSign=!1},e.prototype.alignComplete=function(e){e.element.style.left="0px",0<e.element.offsetLeft?this.elementLeftSign=!0:this.elementLeftSign=!1,this.ngstdIndexNumber=null},e.prototype.getLeftSign=function(){return!!this.elementLeftSign},e.prototype.removeElement=function(e){var t=this.items[e];this.items.splice(e,1),this.deletedItem.emit(t)},e.prototype.getLeftPosition=function(e){var t=e.style.left.slice(0,-2);return null!==t?100*parseInt(t,10)/window.innerWidth:0},e.prototype.logWarnings=function(e,t){if(void 0===t&&(t=null),!this.disableWarnings)switch(e){case g:case h:case p:case m:case u:null===t?console.warn(this.getConstValue(e)):console.warn(this.getConstValue(e),t)}},e.prototype.getConstValue=function(e){return f[e]},e.decorators=[{type:t.Component,args:[{selector:"ng-swipe-to-delete",template:'<div [ngClass]="getClassName()">\n <mat-list [@listAnimation]="items.length">\n <mat-list-item class="ngstd-list-item" *ngFor="let item of items;let i = index">\n \n <div class="ngstd-delete-indicator">\n <i class="material-icons ngstd-delete-icon" *ngIf="getLeftSign()">delete_sweep</i>\n <span> </span>\n <i class="material-icons ngstd-delete-icon" *ngIf="numberOfDeleteIcon === 2 && !getLeftSign()">delete_sweep</i>\n </div>\n\n <div #elementRefrence class="ngstd-item-container "\n (panend)="panend($event, i, elementRefrence)" \n (panmove)="panmove($event,elementRefrence)" \n [@slideLeft]="ngstdIndexNumber === i"\n (@slideLeft.done)=alignComplete($event)\n >\n <ng-container *ngIf="listType === \'listwithimage\'">\n <img matListAvatar src="{{item.img}}" alt="{{item.title}}">\n <div class="mat-list-text ngstd-details">\n <h3 matLine> {{item.title}}</h3>\n <p matLine>\n <span> {{item.description}} </span>\n </p>\n </div>\n </ng-container>\n <ng-container *ngIf="listType === \'listwithicon\'">\n <mat-icon class="ngstd-icon" mat-list-icon>{{item.icon}}</mat-icon>\n <div class="mat-list-text ngstd-details">\n <h4 mat-line>{{item.title}}</h4>\n <p mat-line> {{item.description}} </p>\n </div>\n </ng-container>\n <ng-container *ngIf="listType === \'singleline\'">\n <mat-list-item> {{item.title}} </mat-list-item>\n </ng-container>\n <ng-container *ngIf="listType === \'multiline\'">\n <div class="mat-list-text ngstd-details">\n <h3 matLine> {{item.title}} </h3>\n <p matLine>\n <span> {{item.description}} </span>\n <span class="demo-2"> -- {{item.description}} </span>\n </p>\n </div>\n </ng-container>\n </div>\n <mat-divider></mat-divider>\n </mat-list-item>\n </mat-list>\n</div>\n\n',styles:[".ngstd-main-canvas /deep/ mat-list-item .mat-list-item-content{padding:0!important}.ngstd-main-canvas .ngstd-delete-indicator{height:97%;width:98%;background-color:red;display:flex;justify-content:space-between;position:absolute;align-items:center;flex-shrink:0;margin-left:.5%}.ngstd-main-canvas .ngstd-delete-indicator .ngstd-delete-icon{margin-left:16px;margin-right:16px;width:24px;height:24px;font-size:24px;color:#fff}.ngstd-main-canvas .ngstd-item-container{padding:0 16px!important;background-color:#fff;width:100%;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit}.ngstd-main-canvas .ngstd-item-container .ngstd-details{padding-left:16px!important}.ngstd-main-canvas .ngstd-item-container .ngstd-icon{color:rgba(0,0,0,.54)}"],animations:[i.trigger("listAnimation",[i.transition("* => *",[i.query(":leave",[i.stagger(100,[i.animate("0s",i.style({opacity:"0"})),i.animate("0.2s",i.style({height:"0px",opacity:"0",display:"none"}))])],{optional:!0})])]),i.trigger("slideLeft",[i.transition("* => *",i.animate(100,i.keyframes([i.style({left:"*",offset:0}),i.style({left:"0",offset:1})])))])]}]}],e.ctorParameters=function(){return[]},e.propDecorators={items:[{type:t.Input}],configuration:[{type:t.Input}],deletedItem:[{type:t.Output}]},e}(),D=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])};var _=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.overrides={pan:{touchAction:"auto",direction:6},pinch:{enable:!1},rotate:{enable:!1},swipe:{enable:!1}},e}return function(e,t){function n(){this.constructor=e}D(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(e,t),e}(s.HammerGestureConfig),E=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,l],declarations:[L],exports:[L],providers:[{provide:s.HAMMER_GESTURE_CONFIG,useClass:_}]}]}],e}();e.NgSwipeToDeleteModule=E,e.ɵc=_,e.ɵa=l,e.ɵb=L,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-swipe-to-delete.umd.min.js.map