ngx-selecto
Version:
An Angular Selecto Component that allows you to select elements in the drag area using the mouse or touch.
114 lines (106 loc) • 6.43 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import VanillaSelecto, { METHODS, CLASS_NAME, EVENTS, OPTIONS, PROPERTIES } from 'selecto';
import { __decorate } from 'tslib';
import { withMethods } from 'framework-utils';
// auto
// eslint-disable-next-line max-len
const ANGULAR_SELECTO_INPUTS = ["dragContainer", "cspNonce", "preventClickEventOnDrag", "preventClickEventOnDragStart", "preventRightClick", "className", "boundContainer", "selectableTargets", "selectByClick", "selectFromInside", "continueSelect", "continueSelectWithoutDeselect", "toggleContinueSelect", "toggleContinueSelectWithoutDeselect", "keyContainer", "hitRate", "scrollOptions", "checkInput", "preventDefault", "ratio", "getElementRect", "preventDragFromInside", "rootContainer", "dragCondition", "clickBySelectEnd", "checkOverflow", "innerScrollOptions"];
const ANGULAR_SELECTO_OUTPUTS = ["dragStart", "drag", "dragEnd", "selectStart", "select", "selectEnd", "keydown", "keyup", "scroll", "innerScroll"];
class NgxSelectoInterface {
}
__decorate([
withMethods(METHODS)
], NgxSelectoInterface.prototype, "selecto", void 0);
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 }]
}] } });
class NgxSelectoModule {
}
NgxSelectoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxSelectoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoModule, declarations: [NgxSelectoComponent], exports: [NgxSelectoComponent] });
NgxSelectoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxSelectoModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxSelectoComponent],
exports: [NgxSelectoComponent],
}]
}] });
/*
* Public API Surface of ngx-selecto
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSelectoComponent, NgxSelectoModule };
//# sourceMappingURL=ngx-selecto.mjs.map