ngx-drag-to-select - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

bundles/ngx-drag-to-select.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("rxjs/operators"),require("rxjs")):"function"==typeof define&&define.amd?define("ngx-drag-to-select",["exports","@angular/core","@angular/common","rxjs/operators","rxjs"],t):t(e["ngx-drag-to-select"]={},e.ng.core,e.ng.common,e.rxjs.operators,e.rxjs)}(this,function(e,s,y,v,I){"use strict";function S(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,s=n.call(e),i=[];try{for(;(void 0===t||0<t--)&&!(o=s.next()).done;)i.push(o.value)}catch(c){r={error:c}}finally{try{o&&!o.done&&(n=s["return"])&&n.call(s)}finally{if(r)throw r.error}}return i}function i(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}var n=new s.InjectionToken("DRAG_TO_SELECT_CONFIG"),o=new s.InjectionToken("USER_CONFIG"),r="dts-no-select",c=function(e){return e&&"object"==typeof e&&!Array.isArray(e)&&null!==e};function l(o,r){return c(o)&&c(r)&&Object.keys(r).forEach(function(e){var t,n;c(r[e])?(o[e]||Object.assign(o,((t={})[e]={},t)),l(o[e],r[e])):Object.assign(o,((n={})[e]=r[e],n))}),o}var t,_=function(e,t,n){return void 0===t&&(t=5),void 0===n&&(n=5),e.width>t||e.height>n},u=function(e,t){return t.left<=e.x&&e.x<=t.left+t.width&&t.top<=e.y&&e.y<=t.top+t.height},a=function(e,t){return e.left<=t.left+t.width&&e.left+e.width>=t.left&&e.top<=t.top+t.height&&e.top+e.height>=t.top},d=function(e){return e.getBoundingClientRect()},p=function(e){return{x:e.clientX,y:e.clientY}},b=function(e,t){var n=p(e),o=n.x,r=n.y,s=document&&document.documentElement?{x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}:{x:0,y:0},i=(t.boundingClientRect.width-t.clientWidth)/2,c=t.boundingClientRect.left+s.x,l=t.boundingClientRect.top+s.y;return{x:o-i-(c-window.pageXOffset)+t.scrollLeft,y:r-i-(l-window.pageYOffset)+t.scrollTop}},h=function(){function e(e,t,n,o){this.config=e,this.platformId=t,this.host=n,this.renderer=o,this.selected=!1}return Object.defineProperty(e.prototype,"value",{get:function(){return this.dtsSelectItem?this.dtsSelectItem:this},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){y.isPlatformBrowser(this.platformId)&&this.calculateBoundingClientRect()},e.prototype.ngDoCheck=function(){this.applySelectedClass()},e.prototype.getBoundingClientRect=function(){return this._boundingClientRect},e.prototype.calculateBoundingClientRect=function(){this._boundingClientRect=d(this.host.nativeElement)},e.prototype._select=function(){this.selected=!0},e.prototype._deselect=function(){this.selected=!1},e.prototype.applySelectedClass=function(){this.selected?this.renderer.addClass(this.host.nativeElement,this.config.selectedClass):this.renderer.removeClass(this.host.nativeElement,this.config.selectedClass)},e.decorators=[{type:s.Directive,args:[{selector:"[dtsSelectItem]",exportAs:"dtsSelectItem",host:{"class":"dts-select-item"}}]}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[n]}]},{type:undefined,decorators:[{type:s.Inject,args:[s.PLATFORM_ID]}]},{type:s.ElementRef},{type:s.Renderer2}]},e.propDecorators={dtsSelectItem:[{type:s.Input}]},e}(),m={alt:!0,shift:!0,meta:!0,ctrl:!0},f="meta",g=((t={})[f]=["ctrl","meta"],t),x={disableSelection:!0,toggleSingleItem:!0,addToSelection:!0,removeFromSelection:!0},C=function(){function e(e){this.config=e,this._shortcuts={},this._shortcuts=this.createShortcutsFromConfig(e.shortcuts)}return e.prototype.disableSelection=function(e){return this.isShortcutPressed("disableSelection",e)},e.prototype.toggleSingleItem=function(e){return this.isShortcutPressed("toggleSingleItem",e)},e.prototype.addToSelection=function(e){return this.isShortcutPressed("addToSelection",e)},e.prototype.removeFromSelection=function(e){return this.isShortcutPressed("removeFromSelection",e)},e.prototype.extendedSelectionShortcut=function(e){return this.addToSelection(e)||this.removeFromSelection(e)},e.prototype.createShortcutsFromConfig=function(e){var t,n,r=this,s={},o=function(o,e){if(!i.isSupportedShortcut(o))throw new Error(i.getErrorMessage("Shortcut "+o+" not supported"));e.replace(/ /g,"").split(",").forEach(function(n){s[o]||(s[o]=[]);var e=n.split("+");r.substituteKey(n,e,f).forEach(function(e){var t=r.isSupportedCombo(e);if(t)throw new Error(r.getErrorMessage("Key '"+t+"' in shortcut "+n+" not supported"));s[o].push(e.map(function(e){return e+"Key"}))})})},i=this;try{for(var c=function a(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}(Object.entries(e)),l=c.next();!l.done;l=c.next()){var u=S(l.value,2);o(u[0],u[1])}}catch(d){t={error:d}}finally{try{l&&!l.done&&(n=c["return"])&&n.call(c)}finally{if(t)throw t.error}}return s},e.prototype.substituteKey=function(e,t,n){var o=e.includes(n),r=[];if(o){var s=t.filter(function(e){return e!==f});g.meta.forEach(function(e){r.push(i(s,[e]))})}else r.push(t);return r},e.prototype.getErrorMessage=function(e){return"[ShortcutService] "+e},e.prototype.isShortcutPressed=function(e,t){return this._shortcuts[e].some(function(e){return e.every(function(e){return t[e]})})},e.prototype.isSupportedCombo=function(e){var t=null;return e.forEach(function(e){m[e]||(t=e)}),t},e.prototype.isSupportedShortcut=function(e){return x[e]},e.decorators=[{type:s.Injectable}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[n]}]}]},e}(),w=function(){return function(e){return e.pipe(v.distinctUntilChanged(function(e,t){return e.keyCode===t.keyCode}))}},E={Add:0,Remove:1};E[E.Add]="Add",E[E.Remove]="Remove";var R={Add:0,Delete:1,None:2};R[R.Add]="Add",R[R.Delete]="Delete",R[R.None]="None";var M=function(){function e(e,t,n,o,r){this.platformId=e,this.shortcuts=t,this.hostElementRef=n,this.renderer=o,this.ngZone=r,this.selectOnDrag=!0,this.disabled=!1,this.disableDrag=!1,this.selectMode=!1,this.selectWithShortcut=!1,this.custom=!1,this.selectedItemsChange=new s.EventEmitter,this.select=new s.EventEmitter,this.itemSelected=new s.EventEmitter,this.itemDeselected=new s.EventEmitter,this._tmpItems=new Map,this._selectedItems$=new I.BehaviorSubject([]),this.updateItems$=new I.Subject,this.destroy$=new I.Subject}return e.prototype.ngAfterViewInit=function(){var t,a,r=this;if(y.isPlatformBrowser(this.platformId)){this.host=this.hostElementRef.nativeElement,this._initSelectedItemsChange(),this._calculateBoundingClientRect(),this._observeBoundingRectChanges(),this._observeSelectableItems();var e=I.fromEvent(window,"keydown").pipe(w(),v.share()),n=I.fromEvent(window,"keyup").pipe(w(),v.share()),o=I.fromEvent(window,"mouseup").pipe(v.filter(function(){return!r.disabled}),v.tap(function(){return r._onMouseUp()}),v.share()),s=I.fromEvent(window,"mousemove").pipe(v.filter(function(){return!r.disabled}),v.share()),i=I.fromEvent(this.host,"mousedown").pipe(v.filter(function(e){return 0===e.button}),v.filter(function(){return!r.disabled}),v.tap(function(e){return r._onMouseDown(e)}),v.share()),c=i.pipe(v.filter(function(e){return!r.shortcuts.disableSelection(e)}),v.filter(function(){return!r.selectMode}),v.filter(function(){return!r.disableDrag}),v.switchMap(function(){return s.pipe(v.takeUntil(o))}),v.share()),l=i.pipe(v.map(function(e){return b(e,r.host)})),u=c.pipe(v.mapTo(1)),d=o.pipe(v.mapTo(0)),p=I.merge(u,d).pipe(v.distinctUntilChanged()),h=I.combineLatest(c,p,l).pipe((a=this.host,function(e){return e.pipe(v.map(function(e){var t=S(e,3),n=t[0],o=t[1],r=t[2],s=r.x,i=r.y,c=b(n,a),l=0<o?c.x-s:0,u=0<o?c.y-i:0;return{top:u<0?c.y:i,left:l<0?c.x:s,width:Math.abs(l),height:Math.abs(u),opacity:o}}))}),v.share());this.selectBoxClasses$=I.merge(c,o,e,n).pipe(v.auditTime(16),v.withLatestFrom(h),v.map(function(e){var t=S(e,2),n=t[0],o=t[1];return{"dts-adding":_(o,0,0)&&!r.shortcuts.removeFromSelection(n),"dts-removing":r.shortcuts.removeFromSelection(n)}}),v.distinctUntilChanged(function(e,t){return JSON.stringify(e)===JSON.stringify(t)}));var m=o.pipe(v.filter(function(){return!r.selectOnDrag}),v.filter(function(){return!r.selectMode}),v.filter(function(e){return r._cursorWithinHost(e)}),v.filter(function(e){return!r.shortcuts.disableSelection(e)&&!r.shortcuts.toggleSingleItem(e)||r.shortcuts.removeFromSelection(e)})),f=h.pipe(v.auditTime(16),v.withLatestFrom(s,function(e,t){return{selectBox:e,event:t}}),v.filter(function(){return r.selectOnDrag}),v.filter(function(e){var t=e.selectBox;return _(t)}),v.map(function(e){return e.event})),g=I.merge(e,n).pipe(v.auditTime(16),(t=h,function(e){return e.pipe(v.withLatestFrom(t),v.filter(function(e){var t=S(e,2)[1];return _(t,0,0)}),v.map(function(e){var t=S(e,2),n=t[0];return t[1],n}))}),v.tap(function(e){r._isExtendedSelection(e)?r._tmpItems.clear():r._flushItems()}));I.merge(m,f,g).pipe(v.takeUntil(this.destroy$)).subscribe(function(e){return r._selectItems(e)}),this.selectBoxStyles$=h.pipe(v.map(function(e){return{top:e.top+"px",left:e.left+"px",width:e.width+"px",height:e.height+"px",opacity:e.opacity}}))}},e.prototype.selectAll=function(){var t=this;this.$selectableItems.forEach(function(e){t._selectItem(e)})},e.prototype.toggleItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._toggleItem(e)})},e.prototype.selectItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._selectItem(e)})},e.prototype.deselectItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._deselectItem(e)})},e.prototype.clearSelection=function(){var t=this;this.$selectableItems.forEach(function(e){t._deselectItem(e)})},e.prototype.update=function(){this._calculateBoundingClientRect(),this.$selectableItems.forEach(function(e){return e.calculateBoundingClientRect()})},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype._filterSelectableItems=function(t){return I.from(this.$selectableItems.toArray()).pipe(v.filter(function(e){return t(e.value)}))},e.prototype._initSelectedItemsChange=function(){var t=this;this._selectedItems$.pipe(v.auditTime(16),v.takeUntil(this.destroy$)).subscribe({next:function(e){t.selectedItemsChange.emit(e),t.select.emit(e)},complete:function(){t.selectedItemsChange.emit([])}})},e.prototype._observeSelectableItems=function(){var i=this;this.updateItems$.pipe(v.withLatestFrom(this._selectedItems$),v.takeUntil(this.destroy$)).subscribe(function(e){var t=S(e,2),n=t[0],o=t[1],r=n.item;switch(n.type){case E.Add:i._addItem(r,o)&&r._select();break;case E.Remove:i._removeItem(r,o)&&r._deselect()}}),this.$selectableItems.changes.pipe(v.withLatestFrom(this._selectedItems$),v.observeOn(I.asyncScheduler),v.takeUntil(this.destroy$)).subscribe(function(e){var t=S(e,2),n=t[0],o=t[1],r=n.toArray(),s=o.filter(function(e){return!r.includes(e.value)});s.length&&s.forEach(function(e){return i._removeItem(e,o)}),i.update()})},e.prototype._observeBoundingRectChanges=function(){var o=this;this.ngZone.runOutsideAngular(function(){var e=I.fromEvent(window,"resize"),t=I.fromEvent(window,"scroll"),n=I.fromEvent(o.host,"scroll");I.merge(e,t,n).pipe(v.startWith("INITIAL_UPDATE"),v.auditTime(16),v.takeUntil(o.destroy$)).subscribe(function(){o.update()})})},e.prototype._calculateBoundingClientRect=function(){this.host.boundingClientRect=d(this.host)},e.prototype._cursorWithinHost=function(e){return t=e,n=this.host,o=p(t),u(o,d(n));var t,n,o},e.prototype._onMouseUp=function(){this._flushItems(),this.renderer.removeClass(document.body,r)},e.prototype._onMouseDown=function(i){var c=this;if(!this.shortcuts.disableSelection(i)&&!this.disabled){var e,t;e=window,(t=e.getSelection()).removeAllRanges?t.removeAllRanges():t.empty&&t.empty(),this.disableDrag||this.renderer.addClass(document.body,r);var l=p(i);this.$selectableItems.forEach(function(e,t){var n=e.getBoundingClientRect(),o=u(l,n);if(!c.shortcuts.extendedSelectionShortcut(i)){var r=o&&!c.shortcuts.toggleSingleItem(i)&&!c.selectMode&&!c.selectWithShortcut||o&&c.shortcuts.toggleSingleItem(i)&&!e.selected||!o&&c.shortcuts.toggleSingleItem(i)&&e.selected||o&&!e.selected&&c.selectMode||!o&&e.selected&&c.selectMode,s=!o&&!c.shortcuts.toggleSingleItem(i)&&!c.selectMode&&!c.selectWithShortcut||!o&&c.shortcuts.toggleSingleItem(i)&&!e.selected||o&&c.shortcuts.toggleSingleItem(i)&&e.selected||!o&&!e.selected&&c.selectMode||o&&e.selected&&c.selectMode;r?c._selectItem(e):s&&c._deselectItem(e)}})}},e.prototype._selectItems=function(t){var n=this,o=d(this.$selectBox.nativeElement);this.$selectableItems.forEach(function(e){n._isExtendedSelection(t)?n._extendedSelectionMode(o,e,t):n._normalSelectionMode(o,e,t)})},e.prototype._isExtendedSelection=function(e){return this.shortcuts.extendedSelectionShortcut(e)&&this.selectOnDrag},e.prototype._normalSelectionMode=function(e,t,n){var o=a(e,t.getBoundingClientRect()),r=o&&!t.selected&&!this.shortcuts.removeFromSelection(n),s=!o&&t.selected&&!this.shortcuts.addToSelection(n)||o&&t.selected&&this.shortcuts.removeFromSelection(n);r?this._selectItem(t):s&&this._deselectItem(t)},e.prototype._extendedSelectionMode=function(e,t,n){var o=a(e,t.getBoundingClientRect()),r=o&&!t.selected&&!this.shortcuts.removeFromSelection(n)&&!this._tmpItems.has(t)||o&&t.selected&&this.shortcuts.removeFromSelection(n)&&!this._tmpItems.has(t),s=!o&&t.selected&&this.shortcuts.addToSelection(n)&&this._tmpItems.has(t)||!o&&!t.selected&&this.shortcuts.removeFromSelection(n)&&this._tmpItems.has(t);if(r){t.selected?t._deselect():t._select();var i=this.shortcuts.removeFromSelection(n)?R.Delete:this.shortcuts.addToSelection(n)?R.Add:R.None;this._tmpItems.set(t,i)}else s&&(this.shortcuts.removeFromSelection(n)?t._select():t._deselect(),this._tmpItems["delete"](t))},e.prototype._flushItems=function(){var n=this;this._tmpItems.forEach(function(e,t){e===R.Add&&n._selectItem(t),e===R.Delete&&n._deselectItem(t)}),this._tmpItems.clear()},e.prototype._addItem=function(e,t){var n=!1;return this._hasItem(e,t)||(n=!0,t.push(e.value),this._selectedItems$.next(t),this.itemSelected.emit(e.value)),n},e.prototype._removeItem=function(e,t){var n=!1,o=e instanceof h?e.value:e,r=t.indexOf(o);return-1<r&&(n=!0,t.splice(r,1),this._selectedItems$.next(t),this.itemDeselected.emit(e.value)),n},e.prototype._toggleItem=function(e){e.selected?this._deselectItem(e):this._selectItem(e)},e.prototype._selectItem=function(e){this.updateItems$.next({type:E.Add,item:e})},e.prototype._deselectItem=function(e){this.updateItems$.next({type:E.Remove,item:e})},e.prototype._hasItem=function(e,t){return t.includes(e.value)},e.decorators=[{type:s.Component,args:[{selector:"dts-select-container",exportAs:"dts-select-container",host:{"class":"dts-select-container"},template:'\n    <ng-content></ng-content>\n    <div class="dts-select-box"\n      #selectBox\n      [ngClass]="selectBoxClasses$ | async"\n      [ngStyle]="selectBoxStyles$ | async">\n    </div>\n  ',styles:[":host{display:block;position:relative}"]}]}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[s.PLATFORM_ID]}]},{type:C},{type:s.ElementRef},{type:s.Renderer2},{type:s.NgZone}]},e.propDecorators={$selectBox:[{type:s.ViewChild,args:["selectBox"]}],$selectableItems:[{type:s.ContentChildren,args:[h,{descendants:!0}]}],selectedItems:[{type:s.Input}],selectOnDrag:[{type:s.Input}],disabled:[{type:s.Input}],disableDrag:[{type:s.Input}],selectMode:[{type:s.Input}],selectWithShortcut:[{type:s.Input}],custom:[{type:s.Input},{type:s.HostBinding,args:["class.dts-custom"]}],selectedItemsChange:[{type:s.Output}],select:[{type:s.Output}],itemSelected:[{type:s.Output}],itemDeselected:[{type:s.Output}]},e}(),$={selectedClass:"selected",shortcuts:{disableSelection:"alt",toggleSingleItem:"meta",addToSelection:"shift",removeFromSelection:"shift+meta"}},O=[M,h];function D(e){return l($,e)}var F=function(){function t(){}return t.forRoot=function(e){return void 0===e&&(e={}),{ngModule:t,providers:[C,{provide:o,useValue:e},{provide:n,useFactory:D,deps:[o]}]}},t.decorators=[{type:s.NgModule,args:[{imports:[y.CommonModule],declarations:i(O),exports:i(O)}]}],t}();e.CONFIG_FACTORY=D,e.DragToSelectModule=F,e.SelectContainerComponent=M,e.SelectItemDirective=h,e.ɵb=$,e.ɵf=C,e.ɵc=n,e.ɵd=o,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("rxjs/operators"),require("rxjs")):"function"==typeof define&&define.amd?define("ngx-drag-to-select",["exports","@angular/core","@angular/common","rxjs/operators","rxjs"],t):t(e["ngx-drag-to-select"]={},e.ng.core,e.ng.common,e.rxjs.operators,e.rxjs)}(this,function(e,s,g,v,I){"use strict";function S(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,s=n.call(e),i=[];try{for(;(void 0===t||0<t--)&&!(o=s.next()).done;)i.push(o.value)}catch(c){r={error:c}}finally{try{o&&!o.done&&(n=s["return"])&&n.call(s)}finally{if(r)throw r.error}}return i}function i(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}var n=new s.InjectionToken("DRAG_TO_SELECT_CONFIG"),o=new s.InjectionToken("USER_CONFIG"),r="dts-no-select",c=function(e){return e&&"object"==typeof e&&!Array.isArray(e)&&null!==e};function l(o,r){return c(o)&&c(r)&&Object.keys(r).forEach(function(e){var t,n;c(r[e])?(o[e]||Object.assign(o,((t={})[e]={},t)),l(o[e],r[e])):Object.assign(o,((n={})[e]=r[e],n))}),o}var t,_=function(e,t,n){return void 0===t&&(t=5),void 0===n&&(n=5),e.width>t||e.height>n},u=function(e,t){return t.left<=e.x&&e.x<=t.left+t.width&&t.top<=e.y&&e.y<=t.top+t.height},a=function(e,t){return e.left<=t.left+t.width&&e.left+e.width>=t.left&&e.top<=t.top+t.height&&e.top+e.height>=t.top},d=function(e){return e.getBoundingClientRect()},p=function(e){return{x:e.clientX,y:e.clientY}},b=function(e,t){var n=p(e),o=n.x,r=n.y,s=document&&document.documentElement?{x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}:{x:0,y:0},i=(t.boundingClientRect.width-t.clientWidth)/2,c=t.boundingClientRect.left+s.x,l=t.boundingClientRect.top+s.y;return{x:o-i-(c-window.pageXOffset)+t.scrollLeft,y:r-i-(l-window.pageYOffset)+t.scrollTop}},h=function(){function e(e,t,n,o){this.config=e,this.platformId=t,this.host=n,this.renderer=o,this.selected=!1}return Object.defineProperty(e.prototype,"value",{get:function(){return this.dtsSelectItem?this.dtsSelectItem:this},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){g.isPlatformBrowser(this.platformId)&&this.calculateBoundingClientRect()},e.prototype.ngDoCheck=function(){this.applySelectedClass()},e.prototype.getBoundingClientRect=function(){return this._boundingClientRect},e.prototype.calculateBoundingClientRect=function(){this._boundingClientRect=d(this.host.nativeElement)},e.prototype._select=function(){this.selected=!0},e.prototype._deselect=function(){this.selected=!1},e.prototype.applySelectedClass=function(){this.selected?this.renderer.addClass(this.host.nativeElement,this.config.selectedClass):this.renderer.removeClass(this.host.nativeElement,this.config.selectedClass)},e.decorators=[{type:s.Directive,args:[{selector:"[dtsSelectItem]",exportAs:"dtsSelectItem",host:{"class":"dts-select-item"}}]}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[n]}]},{type:undefined,decorators:[{type:s.Inject,args:[s.PLATFORM_ID]}]},{type:s.ElementRef},{type:s.Renderer2}]},e.propDecorators={dtsSelectItem:[{type:s.Input}]},e}(),m={alt:!0,shift:!0,meta:!0,ctrl:!0},f="meta",y=((t={})[f]=["ctrl","meta"],t),w={disableSelection:!0,toggleSingleItem:!0,addToSelection:!0,removeFromSelection:!0},x=function(){function e(e){this.config=e,this._shortcuts={},this._shortcuts=this.createShortcutsFromConfig(e.shortcuts)}return e.prototype.disableSelection=function(e){return this.isShortcutPressed("disableSelection",e)},e.prototype.toggleSingleItem=function(e){return this.isShortcutPressed("toggleSingleItem",e)},e.prototype.addToSelection=function(e){return this.isShortcutPressed("addToSelection",e)},e.prototype.removeFromSelection=function(e){return this.isShortcutPressed("removeFromSelection",e)},e.prototype.extendedSelectionShortcut=function(e){return this.addToSelection(e)||this.removeFromSelection(e)},e.prototype.createShortcutsFromConfig=function(e){var t,n,r=this,s={},o=function(o,e){if(!i.isSupportedShortcut(o))throw new Error(i.getErrorMessage("Shortcut "+o+" not supported"));e.replace(/ /g,"").split(",").forEach(function(n){s[o]||(s[o]=[]);var e=n.split("+");r.substituteKey(n,e,f).forEach(function(e){var t=r.isSupportedCombo(e);if(t)throw new Error(r.getErrorMessage("Key '"+t+"' in shortcut "+n+" not supported"));s[o].push(e.map(function(e){return e+"Key"}))})})},i=this;try{for(var c=function a(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}(Object.entries(e)),l=c.next();!l.done;l=c.next()){var u=S(l.value,2);o(u[0],u[1])}}catch(d){t={error:d}}finally{try{l&&!l.done&&(n=c["return"])&&n.call(c)}finally{if(t)throw t.error}}return s},e.prototype.substituteKey=function(e,t,n){var o=e.includes(n),r=[];if(o){var s=t.filter(function(e){return e!==f});y.meta.forEach(function(e){r.push(i(s,[e]))})}else r.push(t);return r},e.prototype.getErrorMessage=function(e){return"[ShortcutService] "+e},e.prototype.isShortcutPressed=function(e,t){return this._shortcuts[e].some(function(e){return e.every(function(e){return t[e]})})},e.prototype.isSupportedCombo=function(e){var t=null;return e.forEach(function(e){m[e]||(t=e)}),t},e.prototype.isSupportedShortcut=function(e){return w[e]},e.decorators=[{type:s.Injectable}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[n]}]}]},e}(),C=function(){return function(e){return e.pipe(v.distinctUntilChanged(function(e,t){return e.keyCode===t.keyCode}))}},E={Add:0,Remove:1};E[E.Add]="Add",E[E.Remove]="Remove";var R={Add:0,Delete:1,None:2};R[R.Add]="Add",R[R.Delete]="Delete",R[R.None]="None";var O=function(){function e(e,t,n,o,r){this.platformId=e,this.shortcuts=t,this.hostElementRef=n,this.renderer=o,this.ngZone=r,this.selectOnDrag=!0,this.disabled=!1,this.disableDrag=!1,this.selectMode=!1,this.selectWithShortcut=!1,this.custom=!1,this.selectedItemsChange=new s.EventEmitter,this.select=new s.EventEmitter,this.itemSelected=new s.EventEmitter,this.itemDeselected=new s.EventEmitter,this.selectionStarted=new s.EventEmitter,this.selectionEnded=new s.EventEmitter,this._tmpItems=new Map,this._selectedItems$=new I.BehaviorSubject([]),this.updateItems$=new I.Subject,this.destroy$=new I.Subject}return e.prototype.ngAfterViewInit=function(){var t,a,r=this;if(g.isPlatformBrowser(this.platformId)){this.host=this.hostElementRef.nativeElement,this._initSelectedItemsChange(),this._calculateBoundingClientRect(),this._observeBoundingRectChanges(),this._observeSelectableItems();var e=I.fromEvent(window,"keydown").pipe(C(),v.share()),n=I.fromEvent(window,"keyup").pipe(C(),v.share()),o=I.fromEvent(window,"mouseup").pipe(v.filter(function(){return!r.disabled}),v.tap(function(){return r._onMouseUp()}),v.share()),s=I.fromEvent(window,"mousemove").pipe(v.filter(function(){return!r.disabled}),v.share()),i=I.fromEvent(this.host,"mousedown").pipe(v.filter(function(e){return 0===e.button}),v.filter(function(){return!r.disabled}),v.tap(function(e){return r._onMouseDown(e)}),v.share()),c=i.pipe(v.filter(function(e){return!r.shortcuts.disableSelection(e)}),v.filter(function(){return!r.selectMode}),v.filter(function(){return!r.disableDrag}),v.switchMap(function(){return s.pipe(v.takeUntil(o))}),v.share()),l=i.pipe(v.map(function(e){return b(e,r.host)})),u=c.pipe(v.mapTo(1)),d=o.pipe(v.mapTo(0)),p=I.merge(u,d).pipe(v.distinctUntilChanged()),h=I.combineLatest(c,p,l).pipe((a=this.host,function(e){return e.pipe(v.map(function(e){var t=S(e,3),n=t[0],o=t[1],r=t[2],s=r.x,i=r.y,c=b(n,a),l=0<o?c.x-s:0,u=0<o?c.y-i:0;return{top:u<0?c.y:i,left:l<0?c.x:s,width:Math.abs(l),height:Math.abs(u),opacity:o}}))}),v.share());this.selectBoxClasses$=I.merge(c,o,e,n).pipe(v.auditTime(16),v.withLatestFrom(h),v.map(function(e){var t=S(e,2),n=t[0],o=t[1];return{"dts-adding":_(o,0,0)&&!r.shortcuts.removeFromSelection(n),"dts-removing":r.shortcuts.removeFromSelection(n)}}),v.distinctUntilChanged(function(e,t){return JSON.stringify(e)===JSON.stringify(t)}));var m=o.pipe(v.filter(function(){return!r.selectOnDrag}),v.filter(function(){return!r.selectMode}),v.filter(function(e){return r._cursorWithinHost(e)}),v.filter(function(e){return!r.shortcuts.disableSelection(e)&&!r.shortcuts.toggleSingleItem(e)||r.shortcuts.removeFromSelection(e)})),f=h.pipe(v.auditTime(16),v.withLatestFrom(s,function(e,t){return{selectBox:e,event:t}}),v.filter(function(){return r.selectOnDrag}),v.filter(function(e){var t=e.selectBox;return _(t)}),v.map(function(e){return e.event})),y=I.merge(e,n).pipe(v.auditTime(16),(t=h,function(e){return e.pipe(v.withLatestFrom(t),v.filter(function(e){var t=S(e,2)[1];return _(t,0,0)}),v.map(function(e){var t=S(e,2),n=t[0];return t[1],n}))}),v.tap(function(e){r._isExtendedSelection(e)?r._tmpItems.clear():r._flushItems()}));I.merge(m,f,y).pipe(v.takeUntil(this.destroy$)).subscribe(function(e){return r._selectItems(e)}),this.selectBoxStyles$=h.pipe(v.map(function(e){return{top:e.top+"px",left:e.left+"px",width:e.width+"px",height:e.height+"px",opacity:e.opacity}})),this._initSelectionOutputs(i,o)}},e.prototype.selectAll=function(){var t=this;this.$selectableItems.forEach(function(e){t._selectItem(e)})},e.prototype.toggleItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._toggleItem(e)})},e.prototype.selectItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._selectItem(e)})},e.prototype.deselectItems=function(e){var t=this;this._filterSelectableItems(e).subscribe(function(e){return t._deselectItem(e)})},e.prototype.clearSelection=function(){var t=this;this.$selectableItems.forEach(function(e){t._deselectItem(e)})},e.prototype.update=function(){this._calculateBoundingClientRect(),this.$selectableItems.forEach(function(e){return e.calculateBoundingClientRect()})},e.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},e.prototype._filterSelectableItems=function(t){return I.from(this.$selectableItems.toArray()).pipe(v.filter(function(e){return t(e.value)}))},e.prototype._initSelectedItemsChange=function(){var t=this;this._selectedItems$.pipe(v.auditTime(16),v.takeUntil(this.destroy$)).subscribe({next:function(e){t.selectedItemsChange.emit(e),t.select.emit(e)},complete:function(){t.selectedItemsChange.emit([])}})},e.prototype._observeSelectableItems=function(){var i=this;this.updateItems$.pipe(v.withLatestFrom(this._selectedItems$),v.takeUntil(this.destroy$)).subscribe(function(e){var t=S(e,2),n=t[0],o=t[1],r=n.item;switch(n.type){case E.Add:i._addItem(r,o)&&r._select();break;case E.Remove:i._removeItem(r,o)&&r._deselect()}}),this.$selectableItems.changes.pipe(v.withLatestFrom(this._selectedItems$),v.observeOn(I.asyncScheduler),v.takeUntil(this.destroy$)).subscribe(function(e){var t=S(e,2),n=t[0],o=t[1],r=n.toArray(),s=o.filter(function(e){return!r.includes(e.value)});s.length&&s.forEach(function(e){return i._removeItem(e,o)}),i.update()})},e.prototype._observeBoundingRectChanges=function(){var o=this;this.ngZone.runOutsideAngular(function(){var e=I.fromEvent(window,"resize"),t=I.fromEvent(window,"scroll"),n=I.fromEvent(o.host,"scroll");I.merge(e,t,n).pipe(v.startWith("INITIAL_UPDATE"),v.auditTime(16),v.takeUntil(o.destroy$)).subscribe(function(){o.update()})})},e.prototype._initSelectionOutputs=function(e,t){var n=this;e.pipe(v.filter(function(e){return n._cursorWithinHost(e)}),v.tap(function(){return n.selectionStarted.emit()}),v.concatMapTo(t.pipe(v.first())),v.withLatestFrom(this._selectedItems$),v.map(function(e){return S(e,2)[1]}),v.takeUntil(this.destroy$)).subscribe(function(e){n.selectionEnded.emit(e)})},e.prototype._calculateBoundingClientRect=function(){this.host.boundingClientRect=d(this.host)},e.prototype._cursorWithinHost=function(e){return t=e,n=this.host,o=p(t),u(o,d(n));var t,n,o},e.prototype._onMouseUp=function(){this._flushItems(),this.renderer.removeClass(document.body,r)},e.prototype._onMouseDown=function(i){var c=this;if(!this.shortcuts.disableSelection(i)&&!this.disabled){var e,t;e=window,(t=e.getSelection()).removeAllRanges?t.removeAllRanges():t.empty&&t.empty(),this.disableDrag||this.renderer.addClass(document.body,r);var l=p(i);this.$selectableItems.forEach(function(e,t){var n=e.getBoundingClientRect(),o=u(l,n);if(!c.shortcuts.extendedSelectionShortcut(i)){var r=o&&!c.shortcuts.toggleSingleItem(i)&&!c.selectMode&&!c.selectWithShortcut||o&&c.shortcuts.toggleSingleItem(i)&&!e.selected||!o&&c.shortcuts.toggleSingleItem(i)&&e.selected||o&&!e.selected&&c.selectMode||!o&&e.selected&&c.selectMode,s=!o&&!c.shortcuts.toggleSingleItem(i)&&!c.selectMode&&!c.selectWithShortcut||!o&&c.shortcuts.toggleSingleItem(i)&&!e.selected||o&&c.shortcuts.toggleSingleItem(i)&&e.selected||!o&&!e.selected&&c.selectMode||o&&e.selected&&c.selectMode;r?c._selectItem(e):s&&c._deselectItem(e)}})}},e.prototype._selectItems=function(t){var n=this,o=d(this.$selectBox.nativeElement);this.$selectableItems.forEach(function(e){n._isExtendedSelection(t)?n._extendedSelectionMode(o,e,t):n._normalSelectionMode(o,e,t)})},e.prototype._isExtendedSelection=function(e){return this.shortcuts.extendedSelectionShortcut(e)&&this.selectOnDrag},e.prototype._normalSelectionMode=function(e,t,n){var o=a(e,t.getBoundingClientRect()),r=o&&!t.selected&&!this.shortcuts.removeFromSelection(n),s=!o&&t.selected&&!this.shortcuts.addToSelection(n)||o&&t.selected&&this.shortcuts.removeFromSelection(n);r?this._selectItem(t):s&&this._deselectItem(t)},e.prototype._extendedSelectionMode=function(e,t,n){var o=a(e,t.getBoundingClientRect()),r=o&&!t.selected&&!this.shortcuts.removeFromSelection(n)&&!this._tmpItems.has(t)||o&&t.selected&&this.shortcuts.removeFromSelection(n)&&!this._tmpItems.has(t),s=!o&&t.selected&&this.shortcuts.addToSelection(n)&&this._tmpItems.has(t)||!o&&!t.selected&&this.shortcuts.removeFromSelection(n)&&this._tmpItems.has(t);if(r){t.selected?t._deselect():t._select();var i=this.shortcuts.removeFromSelection(n)?R.Delete:this.shortcuts.addToSelection(n)?R.Add:R.None;this._tmpItems.set(t,i)}else s&&(this.shortcuts.removeFromSelection(n)?t._select():t._deselect(),this._tmpItems["delete"](t))},e.prototype._flushItems=function(){var n=this;this._tmpItems.forEach(function(e,t){e===R.Add&&n._selectItem(t),e===R.Delete&&n._deselectItem(t)}),this._tmpItems.clear()},e.prototype._addItem=function(e,t){var n=!1;return this._hasItem(e,t)||(n=!0,t.push(e.value),this._selectedItems$.next(t),this.itemSelected.emit(e.value)),n},e.prototype._removeItem=function(e,t){var n=!1,o=e instanceof h?e.value:e,r=t.indexOf(o);return-1<r&&(n=!0,t.splice(r,1),this._selectedItems$.next(t),this.itemDeselected.emit(e.value)),n},e.prototype._toggleItem=function(e){e.selected?this._deselectItem(e):this._selectItem(e)},e.prototype._selectItem=function(e){this.updateItems$.next({type:E.Add,item:e})},e.prototype._deselectItem=function(e){this.updateItems$.next({type:E.Remove,item:e})},e.prototype._hasItem=function(e,t){return t.includes(e.value)},e.decorators=[{type:s.Component,args:[{selector:"dts-select-container",exportAs:"dts-select-container",host:{"class":"dts-select-container"},template:'\n    <ng-content></ng-content>\n    <div\n      class="dts-select-box"\n      #selectBox\n      [ngClass]="selectBoxClasses$ | async"\n      [ngStyle]="selectBoxStyles$ | async"\n    ></div>\n  ',styles:[":host{display:block;position:relative}"]}]}],e.ctorParameters=function(){return[{type:undefined,decorators:[{type:s.Inject,args:[s.PLATFORM_ID]}]},{type:x},{type:s.ElementRef},{type:s.Renderer2},{type:s.NgZone}]},e.propDecorators={$selectBox:[{type:s.ViewChild,args:["selectBox"]}],$selectableItems:[{type:s.ContentChildren,args:[h,{descendants:!0}]}],selectedItems:[{type:s.Input}],selectOnDrag:[{type:s.Input}],disabled:[{type:s.Input}],disableDrag:[{type:s.Input}],selectMode:[{type:s.Input}],selectWithShortcut:[{type:s.Input}],custom:[{type:s.Input},{type:s.HostBinding,args:["class.dts-custom"]}],selectedItemsChange:[{type:s.Output}],select:[{type:s.Output}],itemSelected:[{type:s.Output}],itemDeselected:[{type:s.Output}],selectionStarted:[{type:s.Output}],selectionEnded:[{type:s.Output}]},e}(),$={selectedClass:"selected",shortcuts:{disableSelection:"alt",toggleSingleItem:"meta",addToSelection:"shift",removeFromSelection:"shift+meta"}},M=[O,h];function D(e){return l($,e)}var F=function(){function t(){}return t.forRoot=function(e){return void 0===e&&(e={}),{ngModule:t,providers:[x,{provide:o,useValue:e},{provide:n,useFactory:D,deps:[o]}]}},t.decorators=[{type:s.NgModule,args:[{imports:[g.CommonModule],declarations:i(M),exports:i(M)}]}],t}();e.CONFIG_FACTORY=D,e.DragToSelectModule=F,e.SelectContainerComponent=O,e.SelectItemDirective=h,e.ɵb=$,e.ɵf=x,e.ɵc=n,e.ɵd=o,e.ɵa=l,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-drag-to-select.umd.min.js.map

lib/select-container.component.d.ts

@@ -29,2 +29,4 @@ import { ElementRef, EventEmitter, OnDestroy, Renderer2, NgZone, AfterViewInit } from '@angular/core';
     itemDeselected: EventEmitter<any>;
+    selectionStarted: EventEmitter<void>;
+    selectionEnded: EventEmitter<any[]>;
     private _tmpItems;
@@ -47,2 +49,3 @@ private _selectedItems$;
     private _observeBoundingRectChanges;
+    private _initSelectionOutputs;
     private _calculateBoundingClientRect;
@@ -49,0 +52,0 @@ private _cursorWithinHost;

ngx-drag-to-select.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"CONFIG_FACTORY":{"__symbolic":"function","parameters":["config"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ɵa"},"arguments":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"config"}]}},"DragToSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":12}],"declarations":[{"__symbolic":"reference","name":"SelectContainerComponent"},{"__symbolic":"reference","name":"SelectItemDirective"}],"exports":[{"__symbolic":"reference","name":"SelectContainerComponent"},{"__symbolic":"reference","name":"SelectItemDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"DragToSelectModule"},"providers":[{"__symbolic":"reference","name":"ɵf"},{"provide":{"__symbolic":"reference","name":"ɵd"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"ɵc"},"useFactory":{"__symbolic":"reference","name":"CONFIG_FACTORY"},"deps":[{"__symbolic":"reference","name":"ɵd"}]}]}}}},"SelectContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":65,"character":1},"arguments":[{"selector":"dts-select-container","exportAs":"dts-select-container","host":{"class":"dts-select-container"},"template":"\n    <ng-content></ng-content>\n    <div class=\"dts-select-box\"\n      #selectBox\n      [ngClass]=\"selectBoxClasses$ | async\"\n      [ngStyle]=\"selectBoxStyles$ | async\">\n    </div>\n  ","styles":[":host{display:block;position:relative}"]}]}],"members":{"$selectBox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":86,"character":3},"arguments":["selectBox"]}]}],"$selectableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":89,"character":3},"arguments":[{"__symbolic":"reference","name":"SelectItemDirective"},{"descendants":true}]}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3}}]}],"selectOnDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"disableDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"selectMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"selectWithShortcut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"custom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":111,"character":3},"arguments":["class.dts-custom"]}]}],"selectedItemsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":114,"character":3}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":3}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":120,"character":3}}]}],"itemDeselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":133,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":133,"character":12}]}],null,null,null,null],"parameters":[null,{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":135,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":136,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":137,"character":20}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"toggleItems":[{"__symbolic":"method"}],"selectItems":[{"__symbolic":"method"}],"deselectItems":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_filterSelectableItems":[{"__symbolic":"method"}],"_initSelectedItemsChange":[{"__symbolic":"method"}],"_observeSelectableItems":[{"__symbolic":"method"}],"_observeBoundingRectChanges":[{"__symbolic":"method"}],"_calculateBoundingClientRect":[{"__symbolic":"method"}],"_cursorWithinHost":[{"__symbolic":"method"}],"_onMouseUp":[{"__symbolic":"method"}],"_onMouseDown":[{"__symbolic":"method"}],"_selectItems":[{"__symbolic":"method"}],"_isExtendedSelection":[{"__symbolic":"method"}],"_normalSelectionMode":[{"__symbolic":"method"}],"_extendedSelectionMode":[{"__symbolic":"method"}],"_flushItems":[{"__symbolic":"method"}],"_addItem":[{"__symbolic":"method"}],"_removeItem":[{"__symbolic":"method"}],"_toggleItem":[{"__symbolic":"method"}],"_selectItem":[{"__symbolic":"method"}],"_deselectItem":[{"__symbolic":"method"}],"_hasItem":[{"__symbolic":"method"}]}},"SelectItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":19,"character":1},"arguments":[{"selector":"[dtsSelectItem]","exportAs":"dtsSelectItem","host":{"class":"dts-select-item"}}]}],"members":{"dtsSelectItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":39,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":40,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":40,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"ɵe"},null,{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":41,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":42,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getBoundingClientRect":[{"__symbolic":"method"}],"calculateBoundingClientRect":[{"__symbolic":"method"}],"_select":[{"__symbolic":"method"}],"_deselect":[{"__symbolic":"method"}],"applySelectedClass":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"function"},"ɵb":{"selectedClass":"selected","shortcuts":{"disableSelection":"alt","toggleSingleItem":"meta","addToSelection":"shift","removeFromSelection":"shift+meta"}},"ɵc":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":26},"arguments":["DRAG_TO_SELECT_CONFIG"]},"ɵd":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":31},"arguments":["USER_CONFIG"]},"ɵe":{"__symbolic":"interface"},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":26,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":15},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}]],"parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"disableSelection":[{"__symbolic":"method"}],"toggleSingleItem":[{"__symbolic":"method"}],"addToSelection":[{"__symbolic":"method"}],"removeFromSelection":[{"__symbolic":"method"}],"extendedSelectionShortcut":[{"__symbolic":"method"}],"createShortcutsFromConfig":[{"__symbolic":"method"}],"substituteKey":[{"__symbolic":"method"}],"getErrorMessage":[{"__symbolic":"method"}],"isShortcutPressed":[{"__symbolic":"method"}],"isSupportedCombo":[{"__symbolic":"method"}],"isSupportedShortcut":[{"__symbolic":"method"}]}}},"origins":{"CONFIG_FACTORY":"./lib/drag-to-select.module","DragToSelectModule":"./lib/drag-to-select.module","SelectContainerComponent":"./lib/select-container.component","SelectItemDirective":"./lib/select-item.directive","ɵa":"./lib/utils","ɵb":"./lib/config","ɵc":"./lib/tokens","ɵd":"./lib/tokens","ɵe":"./lib/models","ɵf":"./lib/shortcut.service"},"importAs":"ngx-drag-to-select"}
+{"__symbolic":"module","version":4,"metadata":{"CONFIG_FACTORY":{"__symbolic":"function","parameters":["config"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"ɵa"},"arguments":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"config"}]}},"DragToSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":12}],"declarations":[{"__symbolic":"reference","name":"SelectContainerComponent"},{"__symbolic":"reference","name":"SelectItemDirective"}],"exports":[{"__symbolic":"reference","name":"SelectContainerComponent"},{"__symbolic":"reference","name":"SelectItemDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"DragToSelectModule"},"providers":[{"__symbolic":"reference","name":"ɵf"},{"provide":{"__symbolic":"reference","name":"ɵd"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"ɵc"},"useFactory":{"__symbolic":"reference","name":"CONFIG_FACTORY"},"deps":[{"__symbolic":"reference","name":"ɵd"}]}]}}}},"SelectContainerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":67,"character":1},"arguments":[{"selector":"dts-select-container","exportAs":"dts-select-container","host":{"class":"dts-select-container"},"template":"\n    <ng-content></ng-content>\n    <div\n      class=\"dts-select-box\"\n      #selectBox\n      [ngClass]=\"selectBoxClasses$ | async\"\n      [ngStyle]=\"selectBoxStyles$ | async\"\n    ></div>\n  ","styles":[":host{display:block;position:relative}"]}]}],"members":{"$selectBox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":3},"arguments":["selectBox"]}]}],"$selectableItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":92,"character":3},"arguments":[{"__symbolic":"reference","name":"SelectItemDirective"},{"descendants":true}]}]}],"selectedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"selectOnDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"disableDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"selectMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"selectWithShortcut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":3}}]}],"custom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":114,"character":3},"arguments":["class.dts-custom"]}]}],"selectedItemsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":117,"character":3}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":120,"character":3}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":3}}]}],"itemDeselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":126,"character":3}}]}],"selectionStarted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3}}]}],"selectionEnded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":132,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":142,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":142,"character":12}]}],null,null,null,null],"parameters":[null,{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":144,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":145,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":146,"character":20}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"toggleItems":[{"__symbolic":"method"}],"selectItems":[{"__symbolic":"method"}],"deselectItems":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_filterSelectableItems":[{"__symbolic":"method"}],"_initSelectedItemsChange":[{"__symbolic":"method"}],"_observeSelectableItems":[{"__symbolic":"method"}],"_observeBoundingRectChanges":[{"__symbolic":"method"}],"_initSelectionOutputs":[{"__symbolic":"method"}],"_calculateBoundingClientRect":[{"__symbolic":"method"}],"_cursorWithinHost":[{"__symbolic":"method"}],"_onMouseUp":[{"__symbolic":"method"}],"_onMouseDown":[{"__symbolic":"method"}],"_selectItems":[{"__symbolic":"method"}],"_isExtendedSelection":[{"__symbolic":"method"}],"_normalSelectionMode":[{"__symbolic":"method"}],"_extendedSelectionMode":[{"__symbolic":"method"}],"_flushItems":[{"__symbolic":"method"}],"_addItem":[{"__symbolic":"method"}],"_removeItem":[{"__symbolic":"method"}],"_toggleItem":[{"__symbolic":"method"}],"_selectItem":[{"__symbolic":"method"}],"_deselectItem":[{"__symbolic":"method"}],"_hasItem":[{"__symbolic":"method"}]}},"SelectItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":19,"character":1},"arguments":[{"selector":"[dtsSelectItem]","exportAs":"dtsSelectItem","host":{"class":"dts-select-item"}}]}],"members":{"dtsSelectItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":39,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":40,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":40,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"ɵe"},null,{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":41,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":42,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getBoundingClientRect":[{"__symbolic":"method"}],"calculateBoundingClientRect":[{"__symbolic":"method"}],"_select":[{"__symbolic":"method"}],"_deselect":[{"__symbolic":"method"}],"applySelectedClass":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"function"},"ɵb":{"selectedClass":"selected","shortcuts":{"disableSelection":"alt","toggleSingleItem":"meta","addToSelection":"shift","removeFromSelection":"shift+meta"}},"ɵc":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":26},"arguments":["DRAG_TO_SELECT_CONFIG"]},"ɵd":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":31},"arguments":["USER_CONFIG"]},"ɵe":{"__symbolic":"interface"},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":26,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":15},"arguments":[{"__symbolic":"reference","name":"ɵc"}]}]],"parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"disableSelection":[{"__symbolic":"method"}],"toggleSingleItem":[{"__symbolic":"method"}],"addToSelection":[{"__symbolic":"method"}],"removeFromSelection":[{"__symbolic":"method"}],"extendedSelectionShortcut":[{"__symbolic":"method"}],"createShortcutsFromConfig":[{"__symbolic":"method"}],"substituteKey":[{"__symbolic":"method"}],"getErrorMessage":[{"__symbolic":"method"}],"isShortcutPressed":[{"__symbolic":"method"}],"isSupportedCombo":[{"__symbolic":"method"}],"isSupportedShortcut":[{"__symbolic":"method"}]}}},"origins":{"CONFIG_FACTORY":"./lib/drag-to-select.module","DragToSelectModule":"./lib/drag-to-select.module","SelectContainerComponent":"./lib/select-container.component","SelectItemDirective":"./lib/select-item.directive","ɵa":"./lib/utils","ɵb":"./lib/config","ɵc":"./lib/tokens","ɵd":"./lib/tokens","ɵe":"./lib/models","ɵf":"./lib/shortcut.service"},"importAs":"ngx-drag-to-select"}

package.json

 {
   "name": "ngx-drag-to-select",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "A lightweight, fast, configurable and reactive drag-to-select component for Angular 6 and beyond",
@@ -5,0 +5,0 @@ "sideEffects": false,

README.md

@@ -265,7 +265,9 @@ # ngx-drag-to-select
 
-| Input          | Payload Type | Description                                                                                                |
-| -------------- | ------------ | ---------------------------------------------------------------------------------------------------------- |
-| select         | Array<any>   | Event that is fired when the selection changes. The payload (`$event`) will be the list of selected items. |
-| itemSelected   | any          | Event that is fired when the item is selected. The payload (`$event`) will be the item's value             |
-| itemDeselected | any          | Event that is fired when the item is deselected. The payload (`$event`) will be the item's value           |
+| Input            | Payload Type | Description                                                                                                                                        |
+| ---------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| select           | Array<any>   | Event that is fired when the selection changes. The payload (`$event`) will be the list of selected items.                                         |
+| itemSelected     | any          | Event that is fired when the item is selected. The payload (`$event`) will be the item's value                                                     |
+| itemDeselected   | any          | Event that is fired when the item is deselected. The payload (`$event`) will be the item's value                                                   |
+| selectionStarted | None         | Event that is fired when the user starts selecting items.                                                                                          |
+| selectionEnded   | Array<any>   | Event that is fired when the user stops selecting items, typically by releasing the mouse button. The payload will be a list of all selected items |
 
@@ -510,7 +512,3 @@ Example:
   ...
-  <div class="scrollable">
-    <dts-select-container #container="dts-select-container">
-      ...
-    </dts-select-container>
-  </div>
+  <div class="scrollable"><dts-select-container #container="dts-select-container"> ... </dts-select-container></div>
 </body>
@@ -527,5 +525,3 @@ ```
   <div class="scrollable" (scroll)="container.update()">
-    <dts-select-container #container="dts-select-container">
-      ...
-    </dts-select-container>
+    <dts-select-container #container="dts-select-container"> ... </dts-select-container>
   </div>
@@ -532,0 +528,0 @@ </body>

No alert changes

Improved metrics

Total package byte prevSize

919100

increased by2.44%

Lines of code

6656

increased by1.96%

Worsened metrics

Number of lines in readme file

557

decreased by-0.71%

No dependency changes