import { Component, HostBinding, HostListener, ContentChildren, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { style, animate, state, transition, trigger } from '@angular/animations';
import { NzMenuComponent } from './nz-menu.component';
import { Subject } from 'rxjs/Subject';
import { debounceTime } from 'rxjs/operator/debounceTime';
var NzSubMenuComponent = (function () {
    function NzSubMenuComponent(nzMenuComponent, cd) {
        this.nzMenuComponent = nzMenuComponent;
        this.cd = cd;
        this.isInDropDown = false;
        this.level = 1;
        this._$mouseSubject = new Subject();
        this.nzOpen = false;
        this.nzOpenChange = new EventEmitter();
        this.nzMenuComponent.hasSubMenu = true;
        this.nzMenuComponent.subMenus.push(this);
    }
    NzSubMenuComponent.prototype.clickSubMenuTitle = function () {
        if ((this.nzMenuComponent.nzMode === 'inline') || (!this.isInDropDown)) {
            this.nzOpen = !this.nzOpen;
            this.nzOpenChange.emit(this.nzOpen);
        }
    };
    NzSubMenuComponent.prototype.clickSubMenuDropDown = function () {
        if (this.isInDropDown || (this.nzMenuComponent.nzMode === 'vertical') || (this.nzMenuComponent.nzMode === 'horizontal')) {
            this._$mouseSubject.next(false);
            this.nzOpen = false;
            this.nzOpenChange.emit(this.nzOpen);
        }
    };
    NzSubMenuComponent.prototype.onMouseEnterEvent = function (e) {
        if ((this.nzMenuComponent.nzMode === 'horizontal') || (this.nzMenuComponent.nzMode === 'vertical') || this.isInDropDown) {
            this._$mouseSubject.next(true);
        }
    };
    NzSubMenuComponent.prototype.onMouseLeaveEvent = function (e) {
        if ((this.nzMenuComponent.nzMode === 'horizontal') || (this.nzMenuComponent.nzMode === 'vertical') || this.isInDropDown) {
            this._$mouseSubject.next(false);
        }
    };
    Object.defineProperty(NzSubMenuComponent.prototype, "setDropDownSubmenuClass", {
        get: function () {
            return this.isInDropDown;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setMenuSubmenuOpenClass", {
        get: function () {
            return (!this.isInDropDown) && (this.nzOpen);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setDropDownVerticalClass", {
        get: function () {
            return this.isInDropDown && (this.nzMenuComponent.nzMode === 'vertical');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setDropDownHorizontalClass", {
        get: function () {
            return this.isInDropDown && (this.nzMenuComponent.nzMode === 'horizontal');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setMenuSubmenuClass", {
        get: function () {
            return !this.isInDropDown;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setMenuVerticalClass", {
        get: function () {
            return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'vertical');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setMenuHorizontalClass", {
        get: function () {
            return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'horizontal');
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzSubMenuComponent.prototype, "setMenuInlineClass", {
        get: function () {
            return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'inline');
        },
        enumerable: true,
        configurable: true
    });
    NzSubMenuComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this.isInDropDown = this.nzMenuComponent.isInDropDown;
        if (this.subMenus.length && (this.nzMenuComponent.nzMode === 'inline')) {
            this.subMenus.filter(function (x) { return x !== _this; }).forEach(function (menu) {
                setTimeout(function (_) {
                    menu.level = _this.level + 1;
                });
            });
        }
    };
    NzSubMenuComponent.prototype.ngOnInit = function () {
        var _this = this;
        debounceTime.call(this._$mouseSubject, 300).subscribe(function (data) {
            _this.nzOpen = data;
        });
    };
    NzSubMenuComponent.prototype.ngOnDestroy = function () {
        this._$mouseSubject.unsubscribe();
    };
    return NzSubMenuComponent;
}());
export { NzSubMenuComponent };
NzSubMenuComponent.decorators = [
    { type: Component, args: [{
                selector: '[nz-submenu]',
                animations: [
                    trigger('fadeAnimation', [
                        state('*', style({ opacity: 1 })),
                        transition('* => void', [
                            animate(150, style({ opacity: 0, display: 'none' }))
                        ]),
                        transition('void => *', [
                            style({ opacity: '0' }),
                            animate(150, style({ opacity: 1 }))
                        ])
                    ])
                ],
                template: "\n    <div\n      [class.ant-dropdown-menu-submenu-title]=\"isInDropDown\"\n      [class.ant-menu-submenu-title]=\"!isInDropDown\"\n      (mouseenter)=\"onMouseEnterEvent($event)\"\n      (mouseleave)=\"onMouseLeaveEvent($event)\"\n      (click)=\"clickSubMenuTitle()\"\n      [style.paddingLeft.px]=\"(nzMenuComponent.nzMode === 'inline')?(level*24):null\">\n      <ng-content select=\"[title]\"></ng-content>\n    </div>\n    <ul\n      [class.ant-dropdown-menu]=\"isInDropDown\"\n      [@fadeAnimation]\n      [class.ant-menu]=\"!isInDropDown\"\n      [class.ant-dropdown-menu-vertical]=\"isInDropDown\"\n      [class.ant-menu-vertical]=\"(!isInDropDown)&&(nzMenuComponent.nzMode!=='inline')\"\n      [class.ant-menu-inline]=\"(!isInDropDown)&&(nzMenuComponent.nzMode==='inline')\"\n      [class.ant-dropdown-menu-sub]=\"isInDropDown\"\n      [class.ant-menu-sub]=\"!isInDropDown\"\n      *ngIf=\"nzOpen\"\n      (click)=\"clickSubMenuDropDown()\"\n      (mouseleave)=\"onMouseLeaveEvent($event)\"\n      (mouseenter)=\"onMouseEnterEvent($event)\">\n      <ng-content></ng-content>\n    </ul>\n  ",
            },] },
];
/** @nocollapse */
NzSubMenuComponent.ctorParameters = function () { return [
    { type: NzMenuComponent, },
    { type: ChangeDetectorRef, },
]; };
NzSubMenuComponent.propDecorators = {
    'subMenus': [{ type: ContentChildren, args: [NzSubMenuComponent,] },],
    'nzOpen': [{ type: Input },],
    'nzOpenChange': [{ type: Output },],
    'onMouseEnterEvent': [{ type: HostListener, args: ['mouseenter', ['$event'],] },],
    'onMouseLeaveEvent': [{ type: HostListener, args: ['mouseleave', ['$event'],] },],
    'setDropDownSubmenuClass': [{ type: HostBinding, args: ['class.ant-dropdown-menu-submenu',] },],
    'setMenuSubmenuOpenClass': [{ type: HostBinding, args: ['class.ant-menu-submenu-open',] },],
    'setDropDownVerticalClass': [{ type: HostBinding, args: ['class.ant-dropdown-menu-submenu-vertical',] },],
    'setDropDownHorizontalClass': [{ type: HostBinding, args: ['class.ant-dropdown-menu-submenu-horizontal',] },],
    'setMenuSubmenuClass': [{ type: HostBinding, args: ['class.ant-menu-submenu',] },],
    'setMenuVerticalClass': [{ type: HostBinding, args: ['class.ant-menu-submenu-vertical',] },],
    'setMenuHorizontalClass': [{ type: HostBinding, args: ['class.ant-menu-submenu-horizontal',] },],
    'setMenuInlineClass': [{ type: HostBinding, args: ['class.ant-menu-submenu-inline',] },],
};
