@cisstech/nge/fesm2022/cisstech-nge-directives.mjs

NG Essentials is a collection of libraries for Angular developers.

import * as i0 from '@angular/core';
import { Directive, Input, NgModule, EventEmitter, Output, HostListener, booleanAttribute } from '@angular/core';
import * as i1 from '@cisstech/nge/services';

class DynamicComponentDirective {
    constructor(compilerService, viewContainerRef) {
        this.compilerService = compilerService;
        this.viewContainerRef = viewContainerRef;
    }
    async ngOnChanges() {
        this.viewContainerRef.clear();
        await this.compilerService.render({
            container: this.viewContainerRef,
            type: await this.type(),
            inputs: this.inputs,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i1.CompilerService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: DynamicComponentDirective, isStandalone: true, selector: "[dynamic-component]", inputs: { type: ["dynamic-component", "type"], inputs: ["dynamic-componentInputs", "inputs"] }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[dynamic-component]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i1.CompilerService }, { type: i0.ViewContainerRef }], propDecorators: { type: [{
                type: Input,
                args: ['dynamic-component']
            }], inputs: [{
                type: Input,
                args: ['dynamic-componentInputs']
            }] } });
/**
 * @deprecated in favor of standalone api, so please use direclty the directive as a standalone. Will be removed in/after v18
 */
class DynamicComponentDirectiveModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirectiveModule, imports: [DynamicComponentDirective], exports: [DynamicComponentDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirectiveModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DynamicComponentDirectiveModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [DynamicComponentDirective],
                    exports: [DynamicComponentDirective],
                }]
        }] });

class LongPressDetectorDirective {
    constructor() {
        this.longPressDuration = 400;
        this.longPress = new EventEmitter();
        this.longPressEnd = new EventEmitter();
        this.pressing = false;
    }
    onMouseDown(event) {
        event.preventDefault();
        this.pressing = false;
        this.timeout = setTimeout(() => {
            this.longPress.emit(event);
            this.pressing = true;
            event.preventDefault();
            event.stopPropagation();
        }, this.longPressDuration);
    }
    onMouseUp() {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        setTimeout(() => {
            this.longPressEnd.emit(this.pressing);
            this.pressing = false;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: LongPressDetectorDirective, isStandalone: true, selector: "[long-press-detector]", inputs: { longPressDuration: "longPressDuration" }, outputs: { longPress: "longPress", longPressEnd: "longPressEnd" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onMouseDown($event)", "mouseup": "onMouseUp()", "touchend": "onMouseUp()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirective, decorators: [{
            type: Directive,
            args: [{ selector: '[long-press-detector]', standalone: true }]
        }], propDecorators: { longPressDuration: [{
                type: Input
            }], longPress: [{
                type: Output
            }], longPressEnd: [{
                type: Output
            }], onMouseDown: [{
                type: HostListener,
                args: ['mousedown', ['$event']]
            }, {
                type: HostListener,
                args: ['touchstart', ['$event']]
            }], onMouseUp: [{
                type: HostListener,
                args: ['mouseup']
            }, {
                type: HostListener,
                args: ['touchend']
            }] } });
/**
 * @deprecated in favor of standalone api, so please use direclty the directive as a standalone. Will be removed in/after v18
 */
class LongPressDetectorDirectiveModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirectiveModule, imports: [LongPressDetectorDirective], exports: [LongPressDetectorDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirectiveModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: LongPressDetectorDirectiveModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [LongPressDetectorDirective],
                    exports: [LongPressDetectorDirective],
                }]
        }] });

class TouchDetectorDirective {
    get hover() {
        return this._hover;
    }
    constructor(el) {
        this.el = el;
        this._hover = false;
        this.onUpWhileHovering = new EventEmitter();
    }
    touchmove(event) {
        const mouseX = event.clientX || event.touches[0].clientX;
        const mouseY = event.clientY || event.touches[0].clientY;
        const rect = this.el.nativeElement.getBoundingClientRect();
        const { x, y, width, height } = rect;
        const h = mouseX >= x && mouseX <= x + width;
        const v = mouseY >= y && mouseY <= y + height;
        this._hover = h && v;
    }
    touchup() {
        if (this.hover) {
            this.onUpWhileHovering.emit();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: TouchDetectorDirective, isStandalone: true, selector: "[touch-detector]", outputs: { onUpWhileHovering: "onUpWhileHovering" }, host: { listeners: { "document:mousemove": "touchmove($event)", "document:touchmove": "touchmove($event)", "document:mouseup": "touchup()", "document:touchend": "touchup()" } }, exportAs: ["touch-detector"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[touch-detector]',
                    exportAs: 'touch-detector',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onUpWhileHovering: [{
                type: Output
            }], touchmove: [{
                type: HostListener,
                args: ['document:mousemove', ['$event']]
            }, {
                type: HostListener,
                args: ['document:touchmove', ['$event']]
            }], touchup: [{
                type: HostListener,
                args: ['document:mouseup', []]
            }, {
                type: HostListener,
                args: ['document:touchend', []]
            }] } });
/**
 * @deprecated in favor of standalone api, so please use direclty the directive as a standalone. Will be removed in/after v18
 */
class TouchDetectorDirectiveModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirectiveModule, imports: [TouchDetectorDirective], exports: [TouchDetectorDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirectiveModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: TouchDetectorDirectiveModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [TouchDetectorDirective],
                    exports: [TouchDetectorDirective],
                }]
        }] });

class ViewportIntersectionDirective {
    constructor(element) {
        this.element = element;
        this.debug = false;
        /**
         * This event is emitted whenever the observed element intersects with the viewport or the specified scrollContainer
         * according to the given threshold and rootMargin.
         */
        this.intersected = new EventEmitter();
    }
    ngAfterViewInit() {
        this.intersectionObserver = new IntersectionObserver((entries) => {
            const entry = entries[0];
            if (entry.isIntersecting) {
                this.intersected.emit();
                if (this.debug) {
                    this.element.nativeElement.style.border = '2px solid red';
                }
            }
            else {
                if (this.debug) {
                    this.element.nativeElement.style.border = '2px solid transparent';
                }
            }
        }, {
            root: this.scrollContainer ? this.scrollContainer : null,
            rootMargin: this.rootMargin,
            threshold: this.threshold,
        });
        this.intersectionObserver.observe(this.element.nativeElement);
    }
    ngOnDestroy() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ViewportIntersectionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.1", type: ViewportIntersectionDirective, isStandalone: true, selector: "[viewportIntersection]", inputs: { scrollContainer: "scrollContainer", threshold: "threshold", rootMargin: "rootMargin", debug: ["debug", "debug", booleanAttribute] }, outputs: { intersected: "intersected" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ViewportIntersectionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[viewportIntersection]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollContainer: [{
                type: Input
            }], threshold: [{
                type: Input
            }], rootMargin: [{
                type: Input
            }], debug: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], intersected: [{
                type: Output
            }] } });

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

export { DynamicComponentDirective, DynamicComponentDirectiveModule, LongPressDetectorDirective, LongPressDetectorDirectiveModule, TouchDetectorDirective, TouchDetectorDirectiveModule, ViewportIntersectionDirective };
//# sourceMappingURL=cisstech-nge-directives.mjs.map