swipe-angular-list - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

bundles/swipe-angular-list.umd.min.js

@@ -84,3 +84,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("swipe-angular-list",["exports","@angular/core","@angular/common"],e):e((t=t||self)["swipe-angular-list"]={},t.ng.core,t.ng.common)}(this,(function(t,e,n){"use strict";
      * found in the LICENSE file at https://angular.io/license
-     */;var It=function(){function t(){}return t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=a([e.Injectable({providedIn:"root"})],t)}(),Mt=function(){function t(){}return t.prototype.ngOnInit=function(){},t=a([e.Component({selector:"sw-swipe-angular-list",template:"\n    <p>\n      swipe-angular-list works!\n    </p>\n  "})],t)}(),Ot=function(){function t(){this.swipeObserver=new e.EventEmitter}return t.prototype.closeAll=function(t){this.swipeObserver.emit(t)},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=a([e.Injectable({providedIn:"root"})],t)}(),Dt=function(){function t(t,n){var o=this;this.swService=n,this.alive=!0,this.selfElement=null,this.idElement=null,this.disabledMark=!1,this.showMark=!1,this.itemClass="",this.callback=new e.EventEmitter,this.swClick=new e.EventEmitter,this.random=function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)},this.getParent=function(t){return void 0===t&&(t=[]),new Promise((function(e,n){t.map((function(t){/list-swipe/.test(t.id)&&e(t.id)}))}))},this.swipeleft=function(t){o.swService.closeAll(o.selfElement.id),o.disabledMark||(o.result=t.deltaX<0)},this.clickItem=function(t){return o.swClick.emit(t)},this.action=function(t){void 0===t&&(t="");try{o.result=!1;var e=o.inside.id;"edit"===t?o.callback.emit({action:"edit",value:e}):"trash"===t&&o.callback.emit({action:"trash",value:e})}catch(t){console.log("Debes definir ID de edit, y trash")}},this.selfElement=t.nativeElement,this.idElement="list-swipe-"+this.random(),this.selfElement.setAttribute("data-id",this.idElement),this.selfElement.id=this.idElement,this.swService.swipeObserver.subscribe((function(t){t!==o.selfElement.id&&(o.result=!1)}))}return t.prototype.clickOut=function(t){this.selfElement.contains(t.target)||(this.result=!1)},t.prototype.ngAfterViewInit=function(){var t=this;if(this.showMark){if(this.inside.mark&&!this.markTemplate){var e=this.defaultMark.createEmbeddedView(null);this.viewContainerMark.insert(e)}else if(this.inside.mark&&this.markTemplate){e=this.markTemplate.createEmbeddedView(null);this.viewContainerMark.insert(e)}if(this.inside.mark||this.notMarkTemplate){if(!this.inside.mark&&this.notMarkTemplate){e=this.notMarkTemplate.createEmbeddedView(null);this.viewContainerMark.insert(e)}}else{var e=this.defaultNotMark.createEmbeddedView(null);this.viewContainerMark.insert(e)}}if(this.editTemplate){var n=this.editTemplate.createEmbeddedView(null);this.viewContainerEdit&&this.viewContainerEdit.insert(n)}else if(null!==this.editTemplate){n=this.defaultEdit.createEmbeddedView(null);this.viewContainerEdit.insert(n)}if(this.trashTemplate){var o=this.trashTemplate.createEmbeddedView(null);this.viewContainerTrash&&this.viewContainerTrash.insert(o)}else if(null!==this.trashTemplate){o=this.defaultTrash.createEmbeddedView(null);this.viewContainerTrash.insert(o)}setTimeout((function(){if(t.customTemplate){var e=i({},t.inside,{touch:t.selfElement.id});(n=t.customTemplate.createEmbeddedView({item:e,id:t.selfElement.id}))&&n.rootNodes&&n.rootNodes.map((function(e){e.id=t.selfElement.id,e.children[0].childNodes.forEach((function(e){e&&(e.id=t.selfElement.id,e.children.length&&(e.children[0].id=t.selfElement.id))}))})),n&&t.viewContainerCustom.insert(n)}else{var n=t.defaultCustom.createEmbeddedView(null);t.viewContainerCustom.insert(n)}}),50)},t.ctorParameters=function(){return[{type:e.ElementRef},{type:Ot}]},a([e.Input()],t.prototype,"inside",void 0),a([e.Input("disable-mark")],t.prototype,"disabledMark",void 0),a([e.Input("show-mark")],t.prototype,"showMark",void 0),a([e.Input("item-class")],t.prototype,"itemClass",void 0),a([e.ViewChild("defaultEdit")],t.prototype,"defaultEdit",void 0),a([e.ViewChild("defaultTrash")],t.prototype,"defaultTrash",void 0),a([e.ViewChild("defaultMark")],t.prototype,"defaultMark",void 0),a([e.ViewChild("defaultNotMark")],t.prototype,"defaultNotMark",void 0),a([e.ViewChild("defaultCustom")],t.prototype,"defaultCustom",void 0),a([e.Input("customTemplate")],t.prototype,"customTemplate",void 0),a([e.Input("editTemplate")],t.prototype,"editTemplate",void 0),a([e.Input("trashTemplate")],t.prototype,"trashTemplate",void 0),a([e.Input("markTemplate")],t.prototype,"markTemplate",void 0),a([e.Input("notMarkTemplate")],t.prototype,"notMarkTemplate",void 0),a([e.Output()],t.prototype,"callback",void 0),a([e.Output()],t.prototype,"swClick",void 0),a([e.ViewChild("viewContainerEdit",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerEdit",void 0),a([e.ViewChild("viewContainerTrash",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerTrash",void 0),a([e.ViewChild("viewContainerMark",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerMark",void 0),a([e.ViewChild("viewContainerCustom",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerCustom",void 0),a([e.HostListener("document:click",["$event"])],t.prototype,"clickOut",null),t=a([e.Component({selector:"sw-item-list",template:'<div class="{{itemClass}}" (swipeleft)="swipeleft($event)" (swipe)="swipeleft($event)" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class="yes-marker"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class="not-marker"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id="{{idElement}}" class="text truncate">{{inside?.title}}</div>\n    <div data-id="{{idElement}}" class="small truncate">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]="{\'active\':(result)}" data-id="{{idElement}}"\n       class=" options-btn swipe-d-flex justify-content-between">\n    <div (click)="action(\'edit\')" class="option-list" *ngIf="editTemplate !== null">\n      <ng-template let-show="show" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)="action(\'trash\')" class="option-list" *ngIf="trashTemplate !== null">\n      <ng-template let-show="show" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]="{\'left-swipe\':(result)}" data-id="{{idElement}}" class="list-swipe swipe-d-flex">\n\n    <div *ngIf="showMark" class="swipe-w-10">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)="clickItem($event)" [ngClass]="{\'swipe-w-90\':showMark, \'swipe-w-100\':!showMark}">\n      <div *ngIf="customTemplate" data-id="{{idElement}}">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf="!customTemplate">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class="mark"></div>\n  </div>\n</div>\n',styles:[":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]})],t)}(),Pt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.overrides={pinch:{enable:!1},rotate:{enable:!1}},e}return r(e,t),e}(rt),Lt=function(){function t(){}return t=a([e.NgModule({declarations:[Mt,Dt],imports:[n.CommonModule],providers:[{provide:nt,useClass:Pt}],exports:[Mt,Dt]})],t)}();t.HammerConfig=Pt,t.SwipeAngularListComponent=Mt,t.SwipeAngularListModule=Lt,t.SwipeAngularListService=It,t.ɵa=Dt,t.ɵb=Ot,Object.defineProperty(t,"__esModule",{value:!0})}));
+     */;var It=function(){function t(){}return t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=a([e.Injectable({providedIn:"root"})],t)}(),Mt=function(){function t(){}return t.prototype.ngOnInit=function(){},t=a([e.Component({selector:"sw-swipe-angular-list",template:"\n    <p>\n      swipe-angular-list works!\n    </p>\n  "})],t)}(),Ot=function(){function t(){this.swipeObserver=new e.EventEmitter}return t.prototype.closeAll=function(t){this.swipeObserver.emit(t)},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=a([e.Injectable({providedIn:"root"})],t)}(),Dt=function(){function t(t,n){var o=this;this.swService=n,this.alive=!0,this.selfElement=null,this.idElement=null,this.disabledMark=!1,this.showMark=!1,this.itemClass="",this.callback=new e.EventEmitter,this.swClick=new e.EventEmitter,this.random=function(){return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)},this.getParent=function(t){return void 0===t&&(t=[]),new Promise((function(e,n){t.map((function(t){/list-swipe/.test(t.id)&&e(t.id)}))}))},this.swipeleft=function(t){o.swService.closeAll(o.selfElement.id),o.disabledMark||(o.result=t.deltaX<0)},this.clickItem=function(t){return o.swClick.emit(t)},this.action=function(t){void 0===t&&(t="");try{o.result=!1;var e=o.inside.id;"edit"===t?o.callback.emit({action:"edit",value:e}):"trash"===t&&o.callback.emit({action:"trash",value:e})}catch(t){console.log("Debes definir ID de edit, y trash")}},this.selfElement=t.nativeElement,this.idElement="list-swipe-"+this.random(),this.selfElement.setAttribute("data-id",this.idElement),this.selfElement.id=this.idElement,this.swService.swipeObserver.subscribe((function(t){t!==o.selfElement.id&&(o.result=!1)}))}return t.prototype.clickOut=function(t){this.selfElement.contains(t.target)||(this.result=!1)},t.prototype.ngAfterViewInit=function(){var t=this;if(this.showMark){if(this.inside.mark&&!this.markTemplate){var e=this.defaultMark.createEmbeddedView(null);this.viewContainerMark.insert(e)}else if(this.inside.mark&&this.markTemplate){e=this.markTemplate.createEmbeddedView(null);this.viewContainerMark.insert(e)}if(this.inside.mark||this.notMarkTemplate){if(!this.inside.mark&&this.notMarkTemplate){e=this.notMarkTemplate.createEmbeddedView(null);this.viewContainerMark.insert(e)}}else{var e=this.defaultNotMark.createEmbeddedView(null);this.viewContainerMark.insert(e)}}if(this.editTemplate){var n=this.editTemplate.createEmbeddedView(null);this.viewContainerEdit&&this.viewContainerEdit.insert(n)}else if(null!==this.editTemplate){n=this.defaultEdit.createEmbeddedView(null);this.viewContainerEdit.insert(n)}if(this.trashTemplate){var o=this.trashTemplate.createEmbeddedView(null);this.viewContainerTrash&&this.viewContainerTrash.insert(o)}else if(null!==this.trashTemplate){o=this.defaultTrash.createEmbeddedView(null);this.viewContainerTrash.insert(o)}setTimeout((function(){if(t.customTemplate){var e=i({},t.inside,{touch:t.selfElement.id});(n=t.customTemplate.createEmbeddedView({item:e,id:t.selfElement.id}))&&n.rootNodes&&n.rootNodes.map((function(e){e.id=t.selfElement.id,e.children[0].childNodes.forEach((function(e){e&&(e.id=t.selfElement.id,e.children.length&&(e.children[0].id=t.selfElement.id))}))})),n&&t.viewContainerCustom.insert(n)}else{var n=t.defaultCustom.createEmbeddedView(null);t.viewContainerCustom.insert(n)}}),50)},t.ctorParameters=function(){return[{type:e.ElementRef},{type:Ot}]},a([e.Input()],t.prototype,"inside",void 0),a([e.Input("disable-mark")],t.prototype,"disabledMark",void 0),a([e.Input("show-mark")],t.prototype,"showMark",void 0),a([e.Input("item-class")],t.prototype,"itemClass",void 0),a([e.ViewChild("defaultEdit")],t.prototype,"defaultEdit",void 0),a([e.ViewChild("defaultTrash")],t.prototype,"defaultTrash",void 0),a([e.ViewChild("defaultMark")],t.prototype,"defaultMark",void 0),a([e.ViewChild("defaultNotMark")],t.prototype,"defaultNotMark",void 0),a([e.ViewChild("defaultCustom")],t.prototype,"defaultCustom",void 0),a([e.Input("customTemplate")],t.prototype,"customTemplate",void 0),a([e.Input("editTemplate")],t.prototype,"editTemplate",void 0),a([e.Input("trashTemplate")],t.prototype,"trashTemplate",void 0),a([e.Input("markTemplate")],t.prototype,"markTemplate",void 0),a([e.Input("notMarkTemplate")],t.prototype,"notMarkTemplate",void 0),a([e.Output()],t.prototype,"callback",void 0),a([e.Output()],t.prototype,"swClick",void 0),a([e.ViewChild("viewContainerEdit",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerEdit",void 0),a([e.ViewChild("viewContainerTrash",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerTrash",void 0),a([e.ViewChild("viewContainerMark",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerMark",void 0),a([e.ViewChild("viewContainerCustom",{static:!1,read:e.ViewContainerRef})],t.prototype,"viewContainerCustom",void 0),a([e.HostListener("document:click",["$event"])],t.prototype,"clickOut",null),t=a([e.Component({selector:"sw-item-list",template:'<div class="{{itemClass}}" (swipeleft)="swipeleft($event)" (swipe)="swipeleft($event)" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class="yes-marker"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class="not-marker"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id="{{idElement}}" class="text truncate">{{inside?.title}}</div>\n    <div data-id="{{idElement}}" class="small truncate">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]="{\'active\':(result)}" data-id="{{idElement}}"\n       class=" options-btn swipe-d-flex justify-content-between">\n    <div (click)="action(\'edit\')" class="option-list" *ngIf="editTemplate !== null">\n      <ng-template let-show="show" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)="action(\'trash\')" class="option-list" *ngIf="trashTemplate !== null">\n      <ng-template let-show="show" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]="{\'left-swipe\':(result)}" data-id="{{idElement}}" class="list-swipe swipe-d-flex">\n\n    <div *ngIf="showMark" class="swipe-w-10">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)="clickItem($event)" [ngClass]="{\'swipe-w-90\':showMark, \'swipe-w-100\':!showMark}">\n      <div *ngIf="customTemplate" data-id="{{idElement}}">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf="!customTemplate">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class="mark"></div>\n  </div>\n</div>\n',styles:[":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]})],t)}(),Pt=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.overrides={pinch:{enable:!1},rotate:{enable:!1}},e}return r(e,t),e}(rt),Lt=function(){function t(){}return t=a([e.NgModule({declarations:[Mt,Dt],imports:[n.CommonModule],providers:[{provide:nt,useClass:Pt}],exports:[Mt,Dt]})],t)}();t.HammerConfig=Pt,t.SwipeAngularListComponent=Mt,t.SwipeAngularListModule=Lt,t.SwipeAngularListService=It,t.ɵa=Dt,t.ɵb=Ot,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=swipe-angular-list.umd.min.js.map

esm2015/lib/item-list/item-list.component.js

@@ -223,3 +223,3 @@ import * as tslib_1 from "tslib";
         template: "<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n",
-        styles: [":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+        styles: [":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
     })
@@ -226,0 +226,0 @@ ], ItemListComponent);

esm5/lib/item-list/item-list.component.js

@@ -226,3 +226,3 @@ import * as tslib_1 from "tslib";
             template: "<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n",
-            styles: [":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+            styles: [":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
         })
@@ -229,0 +229,0 @@ ], ItemListComponent);

fesm2015/swipe-angular-list.js

@@ -266,3 +266,3 @@ import { __decorate } from 'tslib';
         template: "<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n",
-        styles: [":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+        styles: [":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
     })
@@ -269,0 +269,0 @@ ], ItemListComponent);

fesm5/swipe-angular-list.js

@@ -270,3 +270,3 @@ import { __decorate, __assign, __extends } from 'tslib';
             template: "<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n",
-            styles: [":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+            styles: [":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
         })
@@ -273,0 +273,0 @@ ], ItemListComponent);

package.json

 {
   "name": "swipe-angular-list",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^8.2.0",

swipe-angular-list.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"SwipeAngularListService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"SwipeAngularListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sw-swipe-angular-list","template":"\n    <p>\n      swipe-angular-list works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"HammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":6,"character":34},"members":{}},"SwipeAngularListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SwipeAngularListComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":20,"character":15},"useClass":{"__symbolic":"reference","name":"HammerConfig"}}],"exports":[{"__symbolic":"reference","name":"SwipeAngularListComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"sw-item-list","template":"<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n","styles":[":host{display:block;font-family:Arial,serif}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]}]}],"members":{"inside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"disabledMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3},"arguments":["disable-mark"]}]}],"showMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3},"arguments":["show-mark"]}]}],"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["item-class"]}]}],"defaultEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["defaultEdit"]}]}],"defaultTrash":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["defaultTrash"]}]}],"defaultMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["defaultMark"]}]}],"defaultNotMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["defaultNotMark"]}]}],"defaultCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":3},"arguments":["defaultCustom"]}]}],"customTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["customTemplate"]}]}],"editTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3},"arguments":["editTemplate"]}]}],"trashTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["trashTemplate"]}]}],"markTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["markTemplate"]}]}],"notMarkTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["notMarkTemplate"]}]}],"callback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"swClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"viewContainerEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["viewContainerEdit",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":66,"character":56}}]}]}],"viewContainerTrash":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":69,"character":3},"arguments":["viewContainerTrash",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":69,"character":57}}]}]}],"viewContainerMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":3},"arguments":["viewContainerMark",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":72,"character":56}}]}]}],"viewContainerCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":3},"arguments":["viewContainerCustom",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":75,"character":58}}]}]}],"clickOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":80,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":21},{"__symbolic":"reference","name":"ɵb"}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"closeAll":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}}},"origins":{"SwipeAngularListService":"./lib/swipe-angular-list.service","SwipeAngularListComponent":"./lib/swipe-angular-list.component","HammerConfig":"./lib/swipe-angular-list.module","SwipeAngularListModule":"./lib/swipe-angular-list.module","ɵa":"./lib/item-list/item-list.component","ɵb":"./lib/swipe-service.service"},"importAs":"swipe-angular-list"}
+{"__symbolic":"module","version":4,"metadata":{"SwipeAngularListService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"SwipeAngularListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"sw-swipe-angular-list","template":"\n    <p>\n      swipe-angular-list works!\n    </p>\n  ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"HammerConfig":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HammerGestureConfig","line":6,"character":34},"members":{}},"SwipeAngularListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SwipeAngularListComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/platform-browser","name":"HAMMER_GESTURE_CONFIG","line":20,"character":15},"useClass":{"__symbolic":"reference","name":"HammerConfig"}}],"exports":[{"__symbolic":"reference","name":"SwipeAngularListComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"sw-item-list","template":"<div class=\"{{itemClass}}\" (swipeleft)=\"swipeleft($event)\" (swipe)=\"swipeleft($event)\" >\n  <ng-template #defaultEdit>\n    edit\n  </ng-template>\n  <ng-template #defaultTrash>\n    trash\n  </ng-template>\n  <ng-template #defaultMark>\n    <div class=\"yes-marker\"></div>\n  </ng-template>\n  <ng-template #defaultNotMark>\n    <div class=\"not-marker\"></div>\n  </ng-template>\n\n  <ng-template #defaultCustom>\n    <div data-id=\"{{idElement}}\" class=\"text truncate\">{{inside?.title}}</div>\n    <div data-id=\"{{idElement}}\" class=\"small truncate\">{{inside?.subTitle}}</div>\n  </ng-template>\n\n\n  <div [ngClass]=\"{'active':(result)}\" data-id=\"{{idElement}}\"\n       class=\" options-btn swipe-d-flex justify-content-between\">\n    <div (click)=\"action('edit')\" class=\"option-list\" *ngIf=\"editTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerEdit></ng-template>\n    </div>\n    <div (click)=\"action('trash')\" class=\"option-list\" *ngIf=\"trashTemplate !== null\">\n      <ng-template let-show=\"show\" #viewContainerTrash></ng-template>\n    </div>\n  </div>\n  <div [ngClass]=\"{'left-swipe':(result)}\" data-id=\"{{idElement}}\" class=\"list-swipe swipe-d-flex\">\n\n    <div *ngIf=\"showMark\" class=\"swipe-w-10\">\n      <ng-container #viewContainerMark></ng-container>\n    </div>\n\n    <div (click)=\"clickItem($event)\" [ngClass]=\"{'swipe-w-90':showMark, 'swipe-w-100':!showMark}\">\n      <div *ngIf=\"customTemplate\" data-id=\"{{idElement}}\">\n        <ng-template #viewContainerCustom>\n        </ng-template>\n      </div>\n\n      <div *ngIf=\"!customTemplate\">\n        <ng-template #viewContainerCustom></ng-template>\n      </div>\n\n    </div>\n    <div class=\"mark\"></div>\n  </div>\n</div>\n","styles":[":host{display:block;font-family:Arial,serif;touch-action:pan-y!important}.not-marker{background:red;width:1rem;height:1rem;border-radius:3rem}.yes-marker{background:green;width:1rem;height:1rem;border-radius:3rem}.swipe-d-flex{display:flex}.swipe-w-10{width:10%}.swipe-w-100{width:100%}.swipe-w-90{width:90%}.options-btn.active{display:flex;transform:translate(66vw,0)}.list-swipe{box-shadow:0 5px 7px rgba(181,181,181,.18);border-radius:.25em;padding:.75em;font-weight:500;font-size:16px;line-height:19px;z-index:9;margin:.75rem 0;transition:.1s ease-out}.left-swipe{transform:translate(-29vw,0);transition:.1s ease-out;box-shadow:6px 0 7px rgba(181,181,181,.31)}.options-btn{position:absolute;display:none;transform:translate(100vw,0);padding:.5rem 0;width:28vw}.list-swipe .text{color:#313131}.list-swipe .small{font-weight:500;font-size:16px;line-height:19px;color:#9b9b9b;padding:1rem 0 0}.list-swipe .mark{background:#fff;height:2rem;margin-top:.75rem;margin-right:-.3rem;border-right:.175rem solid #f96060}.option-list{width:100%;min-height:3.75rem;line-height:3.75rem;border-right:1px solid rgba(0,0,0,.1);text-align:center}.option-list:last-child{border-right:0}.truncate{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]}]}],"members":{"inside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"disabledMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3},"arguments":["disable-mark"]}]}],"showMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3},"arguments":["show-mark"]}]}],"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["item-class"]}]}],"defaultEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":38,"character":3},"arguments":["defaultEdit"]}]}],"defaultTrash":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["defaultTrash"]}]}],"defaultMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["defaultMark"]}]}],"defaultNotMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["defaultNotMark"]}]}],"defaultCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":3},"arguments":["defaultCustom"]}]}],"customTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3},"arguments":["customTemplate"]}]}],"editTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3},"arguments":["editTemplate"]}]}],"trashTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["trashTemplate"]}]}],"markTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3},"arguments":["markTemplate"]}]}],"notMarkTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3},"arguments":["notMarkTemplate"]}]}],"callback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"swClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"viewContainerEdit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":66,"character":3},"arguments":["viewContainerEdit",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":66,"character":56}}]}]}],"viewContainerTrash":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":69,"character":3},"arguments":["viewContainerTrash",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":69,"character":57}}]}]}],"viewContainerMark":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":3},"arguments":["viewContainerMark",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":72,"character":56}}]}]}],"viewContainerCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":75,"character":3},"arguments":["viewContainerCustom",{"static":false,"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":75,"character":58}}]}]}],"clickOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":80,"character":3},"arguments":["document:click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":87,"character":21},{"__symbolic":"reference","name":"ɵb"}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"closeAll":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}}},"origins":{"SwipeAngularListService":"./lib/swipe-angular-list.service","SwipeAngularListComponent":"./lib/swipe-angular-list.component","HammerConfig":"./lib/swipe-angular-list.module","SwipeAngularListModule":"./lib/swipe-angular-list.module","ɵa":"./lib/item-list/item-list.component","ɵb":"./lib/swipe-service.service"},"importAs":"swipe-angular-list"}

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

975677

increased by24.68%

Number of package files

34

increased by3.03%

No dependency changes