/* eslint-disable @angular-eslint/no-input-rename */
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { detectChanges } from '@angular-ru/cdk/utils';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AbstractModalViewLayerDirective } from '../../directives/abstract-modal-view-layer.directive';
import { MINIMAL_TIMEOUT } from '../../table-builder.properties';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
const SIZE = 300;
const MAX_HEIGHT = 400;
export class NgxContextMenuComponent extends AbstractModalViewLayerDirective {
    constructor() {
        super(...arguments);
        this.destroy$ = new Subject();
        this.width = SIZE;
        this.height = SIZE;
        this.maxHeight = MAX_HEIGHT;
    }
    get state() {
        return this.contextMenu.state;
    }
    ngOnInit() {
        this.contextMenu.events$.pipe(takeUntil(this.destroy$)).subscribe(() => this.update());
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.destroy$.next();
        this.destroy$.complete();
    }
    close(event) {
        this.isShowed = false;
        detectChanges(this.cd);
        this.ngZone.runOutsideAngular(() => {
            // eslint-disable-next-line no-restricted-properties
            window.setTimeout(() => {
                this.contextMenu.close();
                event.preventDefault();
            }, MINIMAL_TIMEOUT);
        });
    }
}
/** @nocollapse */ NgxContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxContextMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ NgxContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: NgxContextMenuComponent, selector: "ngx-context-menu", inputs: { width: "width", height: "height", maxHeight: ["max-height", "maxHeight"] }, usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"state?.opened\"\n    class=\"table-grid__background-flat\"\n    (click)=\"close($event)\"\n    (contextmenu)=\"close($event)\"\n></div>\n\n<div\n    *ngIf=\"state?.opened\"\n    class=\"table-grid__context-menu\"\n>\n    <div\n        #menu\n        class=\"context-menu\"\n        [ngStyle]=\"{\n            'width.px': width,\n            opacity: isShowed ? 1 : 0,\n            'max-height.px': isRendered ? maxHeight : 0,\n            'min-height.px': isRendered ? minHeight : 0,\n            'top.px': state?.position?.top! - overflowY,\n            'left.px': state?.position?.left! - overflowX,\n            visibility: isRendered && (menu?.offsetHeight || 0 > 10) ? 'visible' : 'hidden'\n        }\"\n        (contextmenu)=\"close($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["@keyframes delayedShow{to{visibility:visible}}.table-grid__context-menu .context-menu{display:flex;position:fixed;z-index:100;border:1px solid #dcdcdc;flex-direction:column;visibility:hidden;transition:opacity .3s;min-height:0;max-height:0;overflow:visible;overflow:initial;background:white;box-shadow:rgba(60,64,67,.3) 0 1px 2px,rgba(60,64,67,.15) 0 1px 3px 1px;box-sizing:border-box;border-radius:4px;opacity:0;font-family:Lucida Grande,sans-serif}.table-grid__context-menu .context-menu__item{margin-top:0;height:48px;line-height:16px;font-size:14px;font-weight:500;display:flex;flex-flow:row;box-sizing:border-box;padding:0 16px 0 23px;align-items:center;justify-content:space-between}.table-grid__context-menu .context-menu__item .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.table-grid__context-menu .context-menu__item .content.align-center{display:flex;justify-content:center;align-content:center}.table-grid__context-menu .context-menu__item:not(.context-menu__title):hover{cursor:pointer;background:#ecf1f7}.table-grid__context-menu .context-menu__item:not(.context-menu__title):hover>ngx-menu-content{color:#1771e6}.table-grid__context-menu .context-menu__item ngx-menu-content:not(.icon-place){overflow:hidden;min-width:35px;text-align:center}.table-grid__context-menu .context-menu__item ngx-menu-content:not(.icon-place):not(.content-phrase){margin:auto auto auto 10px}.table-grid__context-menu .context-menu__item--disable{opacity:.5;pointer-events:none}.table-grid__context-menu .context-menu__item:hover>.context-menu__sub-menu-place>.sub-menu__tree{visibility:visible;transition-delay:.3s;opacity:1}.table-grid__context-menu .context-menu .sub-menu__tree--content{max-height:350px;overflow:auto}.table-grid__context-menu .context-menu__sub-menu-place{margin-left:auto;line-height:15px}.table-grid__context-menu .context-menu__sub-menu-place .sub-menu__tree{opacity:0;visibility:hidden;position:fixed;background:#fff;z-index:100000;border:1px solid #dcdcdc;box-shadow:rgba(60,64,67,.3) 0 1px 2px,rgba(60,64,67,.15) 0 1px 3px 1px;transition:visibility .1s linear,opacity .1s linear}.table-grid__context-menu .context-menu__sub-menu-place .sub-menu__arrow-icon{height:25px;width:25px;margin-right:15px}.table-grid__context-menu .context-menu .context-menu__sub-hidden{display:none}.table-grid__context-menu .context-menu__icon-place{width:25px;margin-right:5px}.table-grid__context-menu .context-menu__icon-place img{max-width:25px;max-height:25px}.table-grid__context-menu .context-menu__title{color:rgba(0,0,0,.54)}.table-grid__context-menu .context-menu__divider{display:block;margin:0;border-top-width:1px;border-top-style:solid;border-top-color:rgba(0,0,0,.12)}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: NgxContextMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"state?.opened\"\n    class=\"table-grid__background-flat\"\n    (click)=\"close($event)\"\n    (contextmenu)=\"close($event)\"\n></div>\n\n<div\n    *ngIf=\"state?.opened\"\n    class=\"table-grid__context-menu\"\n>\n    <div\n        #menu\n        class=\"context-menu\"\n        [ngStyle]=\"{\n            'width.px': width,\n            opacity: isShowed ? 1 : 0,\n            'max-height.px': isRendered ? maxHeight : 0,\n            'min-height.px': isRendered ? minHeight : 0,\n            'top.px': state?.position?.top! - overflowY,\n            'left.px': state?.position?.left! - overflowX,\n            visibility: isRendered && (menu?.offsetHeight || 0 > 10) ? 'visible' : 'hidden'\n        }\"\n        (contextmenu)=\"close($event)\"\n    >\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: ["@keyframes delayedShow{to{visibility:visible}}.table-grid__context-menu .context-menu{display:flex;position:fixed;z-index:100;border:1px solid #dcdcdc;flex-direction:column;visibility:hidden;transition:opacity .3s;min-height:0;max-height:0;overflow:visible;overflow:initial;background:white;box-shadow:rgba(60,64,67,.3) 0 1px 2px,rgba(60,64,67,.15) 0 1px 3px 1px;box-sizing:border-box;border-radius:4px;opacity:0;font-family:Lucida Grande,sans-serif}.table-grid__context-menu .context-menu__item{margin-top:0;height:48px;line-height:16px;font-size:14px;font-weight:500;display:flex;flex-flow:row;box-sizing:border-box;padding:0 16px 0 23px;align-items:center;justify-content:space-between}.table-grid__context-menu .context-menu__item .content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.table-grid__context-menu .context-menu__item .content.align-center{display:flex;justify-content:center;align-content:center}.table-grid__context-menu .context-menu__item:not(.context-menu__title):hover{cursor:pointer;background:#ecf1f7}.table-grid__context-menu .context-menu__item:not(.context-menu__title):hover>ngx-menu-content{color:#1771e6}.table-grid__context-menu .context-menu__item ngx-menu-content:not(.icon-place){overflow:hidden;min-width:35px;text-align:center}.table-grid__context-menu .context-menu__item ngx-menu-content:not(.icon-place):not(.content-phrase){margin:auto auto auto 10px}.table-grid__context-menu .context-menu__item--disable{opacity:.5;pointer-events:none}.table-grid__context-menu .context-menu__item:hover>.context-menu__sub-menu-place>.sub-menu__tree{visibility:visible;transition-delay:.3s;opacity:1}.table-grid__context-menu .context-menu .sub-menu__tree--content{max-height:350px;overflow:auto}.table-grid__context-menu .context-menu__sub-menu-place{margin-left:auto;line-height:15px}.table-grid__context-menu .context-menu__sub-menu-place .sub-menu__tree{opacity:0;visibility:hidden;position:fixed;background:#fff;z-index:100000;border:1px solid #dcdcdc;box-shadow:rgba(60,64,67,.3) 0 1px 2px,rgba(60,64,67,.15) 0 1px 3px 1px;transition:visibility .1s linear,opacity .1s linear}.table-grid__context-menu .context-menu__sub-menu-place .sub-menu__arrow-icon{height:25px;width:25px;margin-right:15px}.table-grid__context-menu .context-menu .context-menu__sub-hidden{display:none}.table-grid__context-menu .context-menu__icon-place{width:25px;margin-right:5px}.table-grid__context-menu .context-menu__icon-place img{max-width:25px;max-height:25px}.table-grid__context-menu .context-menu__title{color:rgba(0,0,0,.54)}.table-grid__context-menu .context-menu__divider{display:block;margin:0;border-top-width:1px;border-top-style:solid;border-top-color:rgba(0,0,0,.12)}\n"] }]
        }], propDecorators: { width: [{
                type: Input
            }], height: [{
                type: Input
            }], maxHeight: [{
                type: Input,
                args: ['max-height']
            }] } });
//# sourceMappingURL=data:application/json;base64, 