@igo2/common/fesm2022/igo2-common-context-menu.mjs

IGO Library

import * as i1 from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import * as i0 from '@angular/core';
import { EventEmitter, HostListener, Output, Input, Directive, NgModule } from '@angular/core';
import { fromEvent } from 'rxjs';
import { filter, take } from 'rxjs/operators';

class ContextMenuDirective {
    overlay;
    viewContainerRef;
    elementRef;
    overlayRef;
    sub;
    menuContext;
    menuPosition = new EventEmitter();
    constructor(overlay, viewContainerRef, elementRef) {
        this.overlay = overlay;
        this.viewContainerRef = viewContainerRef;
        this.elementRef = elementRef;
    }
    onContextMenu(e) {
        let x;
        let y;
        if (e instanceof MouseEvent) {
            x = e.x;
            y = e.y;
        }
        else if (e instanceof TouchEvent) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
        }
        if (!x || !y) {
            return;
        }
        this.close();
        e.preventDefault();
        this.menuPosition.emit({ x, y });
        this.overlayRef = null;
        const positionStrategy = this.overlay
            .position()
            .flexibleConnectedTo({ x, y })
            .withPositions([
            {
                originX: 'end',
                originY: 'bottom',
                overlayX: 'start',
                overlayY: 'top'
            }
        ]);
        this.overlayRef = this.overlay.create({
            positionStrategy,
            scrollStrategy: this.overlay.scrollStrategies.close()
        });
        this.overlayRef.attach(new TemplatePortal(this.menuContext, this.viewContainerRef, {
            $implicit: undefined
        }));
        this.sub = fromEvent(document, 'click')
            .pipe(filter((event) => {
            const clickTarget = event.target;
            this.close();
            return (!!this.overlayRef &&
                !this.overlayRef.overlayElement.contains(clickTarget));
        }), take(1))
            .subscribe(() => this.close());
        this.sub = fromEvent(document, 'contextmenu')
            .pipe(filter((event) => {
            const clickTarget = event.target;
            if (clickTarget &&
                !this.elementRef.nativeElement.contains(clickTarget) &&
                !this.overlayRef.overlayElement.contains(clickTarget)) {
                return true;
            }
            else {
                event.preventDefault();
            }
        }), take(1))
            .subscribe(() => this.close());
    }
    close() {
        if (this.overlayRef) {
            this.overlayRef.dispose();
            this.overlayRef = null;
        }
        if (this.sub) {
            this.sub.unsubscribe();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContextMenuDirective, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ContextMenuDirective, isStandalone: true, selector: "[igoContextMenu]", inputs: { menuContext: ["igoContextMenu", "menuContext"] }, outputs: { menuPosition: "menuPosition" }, host: { listeners: { "longpress": "onContextMenu($event)", "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContextMenuDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[igoContextMenu]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }], propDecorators: { menuContext: [{
                type: Input,
                args: ['igoContextMenu']
            }], menuPosition: [{
                type: Output
            }], onContextMenu: [{
                type: HostListener,
                args: ['longpress', ['$event']]
            }, {
                type: HostListener,
                args: ['contextmenu', ['$event']]
            }] } });

/**
 * IgoLongPress trigger longpress event after a define duration.
 * This directive exist to patch the unavailable contextmenu event on iOS.
 * @param touchDuration touch duration in ms, default value is 400ms
 * @param iOSOnly define if longpress is triggered only for iOS, default value = true
 */
class LongPressDirective {
    touchTimeout;
    touchDuration = 400;
    onlyIOS = true;
    longpress = new EventEmitter();
    touchstart(e) {
        if (e.touches.length > 1) {
            this.touchEnd();
            return;
        }
        this.touchTimeout = setTimeout(() => {
            this.longpress.emit(e);
        }, this.touchDuration);
    }
    touchend() {
        this.touchEnd();
    }
    touchEnd() {
        clearTimeout(this.touchTimeout);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LongPressDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: LongPressDirective, isStandalone: true, selector: "[igoLongPress]", inputs: { touchDuration: "touchDuration", onlyIOS: "onlyIOS" }, outputs: { longpress: "longpress" }, host: { listeners: { "touchstart": "touchstart($event)", "touchmove": "touchend()", "touchcancel": "touchend()", "touchend": "touchend()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LongPressDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[igoLongPress]',
                    standalone: true
                }]
        }], propDecorators: { touchDuration: [{
                type: Input
            }], onlyIOS: [{
                type: Input
            }], longpress: [{
                type: Output
            }], touchstart: [{
                type: HostListener,
                args: ['touchstart', ['$event']]
            }], touchend: [{
                type: HostListener,
                args: ['touchmove']
            }, {
                type: HostListener,
                args: ['touchcancel']
            }, {
                type: HostListener,
                args: ['touchend']
            }] } });

/**
 * @deprecated import the components/directives directly or CONTEXT_MENU_DIRECTIVES for the set
 */
class IgoContextMenuModule {
    static forRoot() {
        return {
            ngModule: IgoContextMenuModule,
            providers: []
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoContextMenuModule, imports: [ContextMenuDirective, LongPressDirective], exports: [ContextMenuDirective, LongPressDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoContextMenuModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoContextMenuModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ContextMenuDirective, LongPressDirective],
                    exports: [ContextMenuDirective, LongPressDirective]
                }]
        }] });

const CONTEXT_MENU_DIRECTIVES = [
    ContextMenuDirective,
    LongPressDirective
];

/**
 * Generated bundle index. Do not edit.
 */

export { CONTEXT_MENU_DIRECTIVES, ContextMenuDirective, IgoContextMenuModule, LongPressDirective };
//# sourceMappingURL=igo2-common-context-menu.mjs.map