ngx-selecto
Version:
An Angular Selecto Component that allows you to select elements in the drag area using the mouse or touch.
78 lines • 11 kB
JavaScript
import { Component, ViewChild, EventEmitter, } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import VanillaSelecto, { CLASS_NAME, OPTIONS, PROPERTIES, EVENTS, } from 'selecto';
import { ANGULAR_SELECTO_INPUTS, ANGULAR_SELECTO_OUTPUTS } from './consts';
import { NgxSelectoInterface } from './ngx-selecto.interface';
import * as i0 from "@angular/core";
export class NgxSelectoComponent extends NgxSelectoInterface {
constructor(ngZone) {
super();
this.ngZone = ngZone;
this.selectionClassName = CLASS_NAME;
this.destroy$ = new Subject();
EVENTS.forEach(name => {
this[name] = new EventEmitter();
});
}
ngAfterViewInit() {
const options = {};
OPTIONS.forEach(name => {
if (name in this) {
options[name] = this[name];
}
});
this.selecto = this.ngZone.runOutsideAngular(() => new VanillaSelecto({
...options,
portalContainer: this.elRef.nativeElement,
}));
const selecto = this.selecto;
EVENTS.forEach(name => {
fromEvent(selecto, name).pipe(takeUntil(this.destroy$)).subscribe(event => {
const emitter = this[name];
if (emitter && (emitter.observed || emitter.observers.length > 0)) {
this.ngZone.run(() => emitter.emit(event));
}
});
});
}
ngOnChanges(changes) {
const selecto = this.selecto;
if (!selecto) {
return;
}
for (const name in changes) {
if (PROPERTIES.indexOf(name) < -1) {
continue;
}
const { previousValue, currentValue } = changes[name];
if (previousValue === currentValue) {
continue;
}
selecto[name] = currentValue;
}
}
ngOnDestroy() {
this.destroy$.next();
this.selecto.destroy();
}
}
NgxSelectoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
NgxSelectoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxSelectoComponent, selector: "ngx-selecto", inputs: { dragContainer: "dragContainer", cspNonce: "cspNonce", preventClickEventOnDrag: "preventClickEventOnDrag", preventClickEventOnDragStart: "preventClickEventOnDragStart", preventRightClick: "preventRightClick", className: "className", boundContainer: "boundContainer", selectableTargets: "selectableTargets", selectByClick: "selectByClick", selectFromInside: "selectFromInside", continueSelect: "continueSelect", continueSelectWithoutDeselect: "continueSelectWithoutDeselect", toggleContinueSelect: "toggleContinueSelect", toggleContinueSelectWithoutDeselect: "toggleContinueSelectWithoutDeselect", keyContainer: "keyContainer", hitRate: "hitRate", scrollOptions: "scrollOptions", checkInput: "checkInput", preventDefault: "preventDefault", ratio: "ratio", getElementRect: "getElementRect", preventDragFromInside: "preventDragFromInside", rootContainer: "rootContainer", dragCondition: "dragCondition", clickBySelectEnd: "clickBySelectEnd", checkOverflow: "checkOverflow", innerScrollOptions: "innerScrollOptions" }, outputs: { dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", selectStart: "selectStart", select: "select", selectEnd: "selectEnd", keydown: "keydown", keyup: "keyup", scroll: "scroll", innerScroll: "innerScroll" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<div [class]="selectionClassName" #el></div>
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-selecto',
template: `
<div [class]="selectionClassName" #el></div>
`,
inputs: ANGULAR_SELECTO_INPUTS,
outputs: ANGULAR_SELECTO_OUTPUTS,
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elRef: [{
type: ViewChild,
args: ['el', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNlbGVjdG8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNlbGVjdG8vc3JjL2xpYi9uZ3gtc2VsZWN0by5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFNVCxTQUFTLEVBQ1QsWUFBWSxHQUViLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMzQyxPQUFPLGNBQWMsRUFBRSxFQUNyQixVQUFVLEVBQ1YsT0FBTyxFQUVQLFVBQVUsRUFDVixNQUFNLEdBQ1AsTUFBTSxTQUFTLENBQUM7QUFFakIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLHVCQUF1QixFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzNFLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOztBQVU5RCxNQUFNLE9BQU8sbUJBQ1gsU0FBUSxtQkFBbUI7SUFRM0IsWUFBb0IsTUFBYztRQUNoQyxLQUFLLEVBQUUsQ0FBQztRQURVLFdBQU0sR0FBTixNQUFNLENBQVE7UUFKM0IsdUJBQWtCLEdBQUcsVUFBVSxDQUFDO1FBRS9CLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBS3JDLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDbkIsSUFBWSxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDM0MsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsZUFBZTtRQUNiLE1BQU0sT0FBTyxHQUE0QixFQUFFLENBQUM7UUFFNUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNyQixJQUFJLElBQUksSUFBSSxJQUFJLEVBQUU7Z0JBQ2YsT0FBZSxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUNyQztRQUNILENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksY0FBYyxDQUFDO1lBQ3BFLEdBQUcsT0FBTztZQUNWLGVBQWUsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWE7U0FDMUMsQ0FBQyxDQUFDLENBQUM7UUFFSixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBRTdCLE1BQU0sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDcEIsU0FBUyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDeEUsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUMzQixJQUFJLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLEVBQUU7b0JBQ2pFLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBWSxDQUFDLENBQUMsQ0FBQztpQkFDbkQ7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBRTdCLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDWixPQUFPO1NBQ1I7UUFDRCxLQUFLLE1BQU0sSUFBSSxJQUFJLE9BQU8sRUFBRTtZQUMxQixJQUFJLFVBQVUsQ0FBQyxPQUFPLENBQUMsSUFBVyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUU7Z0JBQ3hDLFNBQVM7YUFDVjtZQUNELE1BQU0sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLEdBQUcsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBRXRELElBQUksYUFBYSxLQUFLLFlBQVksRUFBRTtnQkFDbEMsU0FBUzthQUNWO1lBQ0EsT0FBZSxDQUFDLElBQUksQ0FBQyxHQUFHLFlBQVksQ0FBQztTQUN2QztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNyQixJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ3pCLENBQUM7O2dIQWpFVSxtQkFBbUI7b0dBQW5CLG1CQUFtQix5NkNBTnBCOztHQUVUOzJGQUlVLG1CQUFtQjtrQkFSL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsUUFBUSxFQUFFOztHQUVUO29CQUNELE1BQU0sRUFBRSxzQkFBc0I7b0JBQzlCLE9BQU8sRUFBRSx1QkFBdUI7aUJBQ2pDOzZGQUlvQyxLQUFLO3NCQUF2QyxTQUFTO3VCQUFDLElBQUksRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEFmdGVyVmlld0luaXQsXG4gIE9uRGVzdHJveSxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3Q2hpbGQsXG4gIEV2ZW50RW1pdHRlcixcbiAgTmdab25lLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QsIGZyb21FdmVudCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IFZhbmlsbGFTZWxlY3RvLCB7XG4gIENMQVNTX05BTUUsXG4gIE9QVElPTlMsXG4gIFNlbGVjdG9PcHRpb25zLFxuICBQUk9QRVJUSUVTLFxuICBFVkVOVFMsXG59IGZyb20gJ3NlbGVjdG8nO1xuXG5pbXBvcnQgeyBBTkdVTEFSX1NFTEVDVE9fSU5QVVRTLCBBTkdVTEFSX1NFTEVDVE9fT1VUUFVUUyB9IGZyb20gJy4vY29uc3RzJztcbmltcG9ydCB7IE5neFNlbGVjdG9JbnRlcmZhY2UgfSBmcm9tICcuL25neC1zZWxlY3RvLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1zZWxlY3RvJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtjbGFzc109XCJzZWxlY3Rpb25DbGFzc05hbWVcIiAjZWw+PC9kaXY+XG4gIGAsXG4gIGlucHV0czogQU5HVUxBUl9TRUxFQ1RPX0lOUFVUUyxcbiAgb3V0cHV0czogQU5HVUxBUl9TRUxFQ1RPX09VVFBVVFMsXG59KVxuZXhwb3J0IGNsYXNzIE5neFNlbGVjdG9Db21wb25lbnRcbiAgZXh0ZW5kcyBOZ3hTZWxlY3RvSW50ZXJmYWNlXG4gIGltcGxlbWVudHMgT25EZXN0cm95LCBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuICBAVmlld0NoaWxkKCdlbCcsIHsgc3RhdGljOiB0cnVlIH0pIGVsUmVmITogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG5cbiAgcHVibGljIHNlbGVjdGlvbkNsYXNzTmFtZSA9IENMQVNTX05BTUU7XG5cbiAgcHJpdmF0ZSBkZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZSkge1xuICAgIHN1cGVyKCk7XG5cbiAgICBFVkVOVFMuZm9yRWFjaChuYW1lID0+IHtcbiAgICAgICh0aGlzIGFzIGFueSlbbmFtZV0gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gICAgfSk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgY29uc3Qgb3B0aW9uczogUGFydGlhbDxTZWxlY3RvT3B0aW9ucz4gPSB7fTtcblxuICAgIE9QVElPTlMuZm9yRWFjaChuYW1lID0+IHtcbiAgICAgIGlmIChuYW1lIGluIHRoaXMpIHtcbiAgICAgICAgKG9wdGlvbnMgYXMgYW55KVtuYW1lXSA9IHRoaXNbbmFtZV07XG4gICAgICB9XG4gICAgfSk7XG5cbiAgICB0aGlzLnNlbGVjdG8gPSB0aGlzLm5nWm9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiBuZXcgVmFuaWxsYVNlbGVjdG8oe1xuICAgICAgLi4ub3B0aW9ucyxcbiAgICAgIHBvcnRhbENvbnRhaW5lcjogdGhpcy5lbFJlZi5uYXRpdmVFbGVtZW50LFxuICAgIH0pKTtcblxuICAgIGNvbnN0IHNlbGVjdG8gPSB0aGlzLnNlbGVjdG87XG5cbiAgICBFVkVOVFMuZm9yRWFjaChuYW1lID0+IHtcbiAgICAgIGZyb21FdmVudChzZWxlY3RvLCBuYW1lKS5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSkuc3Vic2NyaWJlKGV2ZW50ID0+IHtcbiAgICAgICAgY29uc3QgZW1pdHRlciA9IHRoaXNbbmFtZV07XG4gICAgICAgIGlmIChlbWl0dGVyICYmIChlbWl0dGVyLm9ic2VydmVkIHx8IGVtaXR0ZXIub2JzZXJ2ZXJzLmxlbmd0aCA+IDApKSB7XG4gICAgICAgICAgdGhpcy5uZ1pvbmUucnVuKCgpID0+IGVtaXR0ZXIuZW1pdChldmVudCBhcyBhbnkpKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfSk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgY29uc3Qgc2VsZWN0byA9IHRoaXMuc2VsZWN0bztcblxuICAgIGlmICghc2VsZWN0bykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBmb3IgKGNvbnN0IG5hbWUgaW4gY2hhbmdlcykge1xuICAgICAgaWYgKFBST1BFUlRJRVMuaW5kZXhPZihuYW1lIGFzIGFueSkgPCAtMSkge1xuICAgICAgICBjb250aW51ZTtcbiAgICAgIH1cbiAgICAgIGNvbnN0IHsgcHJldmlvdXNWYWx1ZSwgY3VycmVudFZhbHVlIH0gPSBjaGFuZ2VzW25hbWVdO1xuXG4gICAgICBpZiAocHJldmlvdXNWYWx1ZSA9PT0gY3VycmVudFZhbHVlKSB7XG4gICAgICAgIGNvbnRpbnVlO1xuICAgICAgfVxuICAgICAgKHNlbGVjdG8gYXMgYW55KVtuYW1lXSA9IGN1cnJlbnRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKTtcbiAgICB0aGlzLnNlbGVjdG8uZGVzdHJveSgpO1xuICB9XG59XG4iXX0=