@duoduo-oba/ng-devui/fesm2015/ng-devui-dropdown.js

DevUI components based on Angular

import { Injectable, EventEmitter, Directive, ElementRef, Optional, SkipSelf, ContentChildren, HostBinding, Input, Output, Host, HostListener, Renderer2, Component, ViewEncapsulation, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
import { Subject, merge, fromEvent } from 'rxjs';
import { debounceTime, mapTo, filter, tap } from 'rxjs/operators';
import { style, animate, AnimationBuilder } from '@angular/animations';
import { WindowRef } from '@duoduo-oba/ng-devui/window-ref';
import { AppendToBodyDirectionsConfig, fadeInOut } from '@duoduo-oba/ng-devui/utils';

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown.service.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownService {
    constructor() {
        this.closeDropdownBind = this.closeDropdown.bind(this);
    }
    /**
     * @param {?} dropdownScope
     * @return {?}
     */
    open(dropdownScope) {
        if (!this.openScope) {
            // 延时绑定document事件，防止事件冒泡导致立即触发
            setTimeout((/**
             * @return {?}
             */
            () => {
                window.document.addEventListener('click', this.closeDropdownBind);
            }));
        }
        this.openScope = dropdownScope;
    }
    /**
     * @param {?} dropdownScope
     * @return {?}
     */
    close(dropdownScope) {
        if (this.openScope !== dropdownScope) {
            return;
        }
        this.openScope = null;
        window.document.removeEventListener('click', this.closeDropdownBind);
    }
    /**
     * @private
     * @param {?} event
     * @return {?}
     */
    closeDropdown(event) {
        if (!this.openScope) {
            return;
        }
        /** @type {?} */
        const menuEl = this.openScope.menuEl.nativeElement;
        if (event && this.openScope.menuEl &&
            ((/input|textarea/i.test(((/** @type {?} */ (event.target))).tagName) && menuEl.contains(event.target))
                || this.openScope.closeScope === 'none'
                || (menuEl.contains(event.target) && this.openScope.closeScope === 'blank')
                || (this.openScope.dropdownChildren.some((/**
                 * @param {?} children
                 * @return {?}
                 */
                children => children.toggleEl.nativeElement.contains(event.target)))))) {
            return;
        }
        this.openScope.isOpen = false;
    }
}
DropDownService.decorators = [
    { type: Injectable }
];
if (false) {
    /**
     * @type {?}
     * @private
     */
    DropDownService.prototype.openScope;
    /**
     * @type {?}
     * @private
     */
    DropDownService.prototype.closeDropdownBind;
}

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownDirective {
    /**
     * @param {?} dropdownService
     * @param {?} el
     * @param {?} parentDropdown
     */
    constructor(dropdownService, el, parentDropdown) {
        this.dropdownService = dropdownService;
        this.el = el;
        this.parentDropdown = parentDropdown;
        this.addClass = true;
        this.disabled = false;
        /**
         * dropdown触发方式
         */
        this.trigger = 'click';
        /**
         * 关闭区域，默认点击菜单链接也会关闭，blank点击其他空白区域才关闭
         */
        this.closeScope = 'all';
        this.closeOnMouseLeaveMenu = false;
        this.toggleEvent = new EventEmitter();
        this.visibleSubject = new Subject();
        this._isOpen = false;
    }
    /**
     * 控制是否打开dropdown，绑定一个devui-dropdown-open class
     * @return {?}
     */
    get isOpen() {
        return this._isOpen;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set isOpen(value) {
        this._isOpen = !!value;
        if (this.disabled) {
            return;
        }
        if (this.isOpen) {
            this.visibleSubject.next(true);
            this.focusToggleElement();
            this.dropdownService.open(this);
        }
        else {
            this.visibleSubject.next(false);
            this.dropdownService.close(this);
        }
        this.toggleEvent.emit(this.isOpen);
    }
    /**
     * @param {?} bool
     * @return {?}
     */
    set appendToBody(bool) {
        this._appendToBody = (bool === true);
        this.updateCdkConnectedOverlayOrigin();
    }
    /**
     * @return {?}
     */
    get appendToBody() {
        return this._appendToBody;
    }
    /**
     * @param {?} dropdownMenu
     * @return {?}
     */
    set dropDownMenu(dropdownMenu) {
        // init drop down menu
        this.menuEl = dropdownMenu.el;
    }
    /**
     * @param {?} dropdownToggle
     * @return {?}
     */
    set dropDownToggle(dropdownToggle) {
        // init toggle element
        this.toggleEl = dropdownToggle.el;
        this.updateCdkConnectedOverlayOrigin();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes.hasOwnProperty('trigger')) {
            this.handleHoverSubscriptionIfTriggerIsHover();
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.dropdownService.close(this);
        this.unsubscribeHoverAction();
    }
    /**
     * @return {?}
     */
    ngAfterContentInit() {
        this.handleHoverSubscriptionIfTriggerIsHover();
    }
    /**
     * @return {?}
     */
    toggle() {
        return this.isOpen = !this.isOpen;
    }
    /**
     * @return {?}
     */
    focusToggleElement() {
        if (this.toggleEl) {
            this.toggleEl.nativeElement.focus();
        }
    }
    /**
     * @return {?}
     */
    updateCdkConnectedOverlayOrigin() {
        if (this.toggleEl && this.appendToBody === true) {
            this.cdkConnectedOverlayOrigin = new CdkOverlayOrigin(this.toggleEl);
        }
        else {
            this.cdkConnectedOverlayOrigin = undefined;
        }
    }
    /**
     * @param {?} observable
     * @return {?}
     */
    subscribeHoverAction(observable) {
        if (!!!this.hoverSubscription) {
            this.hoverSubscription = observable.pipe(debounceTime(50)).subscribe((/**
             * @param {?} isOpen
             * @return {?}
             */
            isOpen => {
                if (!this.disabled && this.isOpen !== isOpen) {
                    this.isOpen = isOpen;
                }
            }));
        }
    }
    /**
     * @private
     * @return {?}
     */
    unsubscribeHoverAction() {
        if (this.hoverSubscription) {
            this.hoverSubscription.unsubscribe();
            this.hoverSubscription = null;
        }
    }
    /**
     * @return {?}
     */
    handleHoverSubscriptionIfTriggerIsHover() {
        if (this.trigger === 'hover') {
            /** @type {?} */
            const states = merge(fromEvent(this.el.nativeElement, 'mouseenter').pipe(mapTo(true)), fromEvent(this.el.nativeElement, 'mouseleave').pipe(filter((/**
             * @param {?} event
             * @return {?}
             */
            (event) => {
                if (this.isOpen && this.appendToBody === true) {
                    // 冒泡模拟的relatedTarget， 和作用于dropdown本身event.relatedTarget
                    // menu（子） -> toggle（父） 冒泡模拟的用于离开菜单的时候判断不判断overlay的div层，即只判断menuEl.nativeElement
                    // toggle（父） -> menu（子） 离开元素本身的需要判断是否落入了overlay的div层，即只判断menuEl.nativeElement.parentElement
                    /** @type {?} */
                    const relatedTarget = event.relatedTarget || (event['originEvent'] && event['originEvent'].relatedTarget);
                    return !(this.menuEl.nativeElement && relatedTarget &&
                        (this.menuEl.nativeElement.parentElement.contains(event.relatedTarget)
                            || this.menuEl.nativeElement.parentElement.parentElement.contains(event.relatedTarget) // 套了两层div增加判断
                            || this.menuEl.nativeElement.contains(relatedTarget)
                            || this.dropdownChildren.some((/**
                             * @param {?} children
                             * @return {?}
                             */
                            children => children !== this
                                // appendToBody的时候可能会没有实例化不在document上需要做判断有没有parentElement
                                && (children.menuEl.nativeElement.parentElement
                                    && children.menuEl.nativeElement.parentElement.contains(event.relatedTarget)
                                    || children.menuEl.nativeElement.contains(relatedTarget))))));
                }
                else {
                    return true;
                }
            })), tap((/**
             * @param {?} event
             * @return {?}
             */
            event => {
                if (this.parentDropdown) {
                    this.simulateEventDispatch(event, this.parentDropdown.el.nativeElement);
                }
            })), mapTo(false)));
            this.subscribeHoverAction(states);
        }
        else {
            this.unsubscribeHoverAction();
        }
    }
    /**
     * @param {?} $event
     * @param {?=} target
     * @return {?}
     */
    simulateEventDispatch($event, target) {
        /** @type {?} */
        const event = document.createEvent('MouseEvents');
        event.initEvent($event.type, true, true);
        event['originEvent'] = $event['originEvent'] || $event;
        if (!target) {
            target = this.el.nativeElement;
        }
        target.dispatchEvent(event);
    }
}
DropDownDirective.decorators = [
    { type: Directive, args: [{
                selector: '[dDropDown]',
                exportAs: 'd-dropdown',
                providers: [DropDownService]
            },] }
];
/** @nocollapse */
DropDownDirective.ctorParameters = () => [
    { type: DropDownService },
    { type: ElementRef },
    { type: DropDownDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
];
DropDownDirective.propDecorators = {
    dropdownChildren: [{ type: ContentChildren, args: [DropDownDirective, { descendants: true },] }],
    isOpen: [{ type: HostBinding, args: ['class.devui-dropdown-open',] }, { type: Input }],
    addClass: [{ type: HostBinding, args: ['class.devui-dropdown',] }],
    disabled: [{ type: Input }],
    trigger: [{ type: Input }],
    closeScope: [{ type: Input }],
    closeOnMouseLeaveMenu: [{ type: Input }],
    toggleEvent: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    DropDownDirective.prototype.dropdownChildren;
    /**
     * @type {?}
     * @private
     */
    DropDownDirective.prototype.hoverSubscription;
    /** @type {?} */
    DropDownDirective.prototype.addClass;
    /** @type {?} */
    DropDownDirective.prototype.disabled;
    /**
     * dropdown触发方式
     * @type {?}
     */
    DropDownDirective.prototype.trigger;
    /**
     * 关闭区域，默认点击菜单链接也会关闭，blank点击其他空白区域才关闭
     * @type {?}
     */
    DropDownDirective.prototype.closeScope;
    /** @type {?} */
    DropDownDirective.prototype.closeOnMouseLeaveMenu;
    /** @type {?} */
    DropDownDirective.prototype.toggleEvent;
    /** @type {?} */
    DropDownDirective.prototype.visibleSubject;
    /**
     * @type {?}
     * @private
     */
    DropDownDirective.prototype._isOpen;
    /** @type {?} */
    DropDownDirective.prototype.menuEl;
    /** @type {?} */
    DropDownDirective.prototype.toggleEl;
    /** @type {?} */
    DropDownDirective.prototype.cdkConnectedOverlayOrigin;
    /**
     * @type {?}
     * @private
     */
    DropDownDirective.prototype._appendToBody;
    /**
     * @type {?}
     * @private
     */
    DropDownDirective.prototype.dropdownService;
    /** @type {?} */
    DropDownDirective.prototype.el;
    /** @type {?} */
    DropDownDirective.prototype.parentDropdown;
}

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown-toggle.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownToggleDirective {
    /**
     * @param {?} dropdown
     * @param {?} el
     */
    constructor(dropdown, el) {
        this.dropdown = dropdown;
        this.el = el;
        this.addClass = true;
        this.toggleOnFocus = false;
        this.autoFocus = false;
        this.isMouseEvent = false;
    }
    /**
     * @return {?}
     */
    get tabIndex() {
        return this.disabled ? null : 0;
    }
    /**
     * @return {?}
     */
    get attrDisabled() {
        return this.disabled ? 'disabled' : null;
    }
    /**
     * @return {?}
     */
    get disabled() {
        return this.dropdown && this.dropdown.disabled;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.dropdown.dropDownToggle = this;
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        if (this.autoFocus) {
            setTimeout((/**
             * @return {?}
             */
            () => {
                this.el.nativeElement.focus();
            }), 0);
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    toggleDropdown(event) {
        if (!this.disabled) {
            this.dropdown.toggle();
        }
        return false;
    }
    // mousedown mouseup解决focus与click冲突问题
    /**
     * @param {?} event
     * @return {?}
     */
    setMouseEventTrue(event) {
        this.isMouseEvent = true;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    setMouseEventFalse(event) {
        this.isMouseEvent = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    toggleOnFocusFn(event) {
        if (this.toggleOnFocus && !this.disabled && !this.dropdown.isOpen && !this.isMouseEvent) {
            this.dropdown.toggle();
        }
    }
    /**
     * @return {?}
     */
    toggle() {
        this.dropdown.toggle();
    }
}
DropDownToggleDirective.decorators = [
    { type: Directive, args: [{
                selector: '[dDropDownToggle]',
                exportAs: 'd-dropdown-toggle',
            },] }
];
/** @nocollapse */
DropDownToggleDirective.ctorParameters = () => [
    { type: DropDownDirective, decorators: [{ type: Host }] },
    { type: ElementRef }
];
DropDownToggleDirective.propDecorators = {
    tabIndex: [{ type: HostBinding, args: ['attr.tabIndex',] }],
    attrDisabled: [{ type: HostBinding, args: ['attr.disabled',] }],
    addClass: [{ type: HostBinding, args: ['class.devui-dropdown-toggle',] }],
    toggleOnFocus: [{ type: Input }],
    autoFocus: [{ type: Input }],
    toggleDropdown: [{ type: HostListener, args: ['click', ['$event'],] }],
    setMouseEventTrue: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
    setMouseEventFalse: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
    toggleOnFocusFn: [{ type: HostListener, args: ['focus', ['$event'],] }],
    toggle: [{ type: HostListener, args: ['keydown.enter',] }]
};
if (false) {
    /** @type {?} */
    DropDownToggleDirective.prototype.addClass;
    /** @type {?} */
    DropDownToggleDirective.prototype.toggleOnFocus;
    /** @type {?} */
    DropDownToggleDirective.prototype.autoFocus;
    /** @type {?} */
    DropDownToggleDirective.prototype.isMouseEvent;
    /**
     * @type {?}
     * @private
     */
    DropDownToggleDirective.prototype.dropdown;
    /**
     * @type {?}
     * @private
     */
    DropDownToggleDirective.prototype.el;
}

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown-menu.directive.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownMenuDirective {
    /**
     * @param {?} dropdown
     * @param {?} el
     * @param {?} render
     * @param {?} windowRef
     * @param {?} builder
     */
    constructor(dropdown, el, render, windowRef, builder) {
        this.dropdown = dropdown;
        this.el = el;
        this.render = render;
        this.windowRef = windowRef;
        this.builder = builder;
        this.diplay = 'none';
        this.tabIndex = -1;
        this.addClass = true;
        this.keydownEscapeEvent$ = fromEvent(document.body, 'keydown').pipe(
        // tslint:disable-next-line: deprecation // ie11不支持code
        filter((/**
         * @param {?} event
         * @return {?}
         */
        event => ((/** @type {?} */ (event))).keyCode === 27)));
        this.hide = (/**
         * @param {?} event
         * @return {?}
         */
        (event) => {
            this.dropdown.toggle();
        });
        this.dropdown.visibleSubject.subscribe((/**
         * @param {?} value
         * @return {?}
         */
        value => {
            if (value !== this.currentValue) {
                this.currentValue = value;
                if (this.keydownEscapeSub) {
                    this.keydownEscapeSub.unsubscribe();
                }
                if (value) {
                    this.keydownEscapeSub = this.keydownEscapeEvent$.subscribe((/**
                     * @param {?} event
                     * @return {?}
                     */
                    event => {
                        this.hide(event);
                    }));
                }
                if (this.dropdown.appendToBody) {
                    this.render.setStyle(this.el.nativeElement, 'display', 'block');
                    return;
                }
                if (this.player) { // 此处保留一个防止点击过快
                    this.player.destroy();
                    this.player = undefined;
                }
                if (value) {
                    this.render.setStyle(this.el.nativeElement, 'display', 'block');
                }
                /** @type {?} */
                const direction = this.calcPopDirection(value);
                /** @type {?} */
                const metadata = value ? this.fadeIn(direction) : this.fadeOut(direction);
                /** @type {?} */
                const factory = this.builder.build(metadata);
                this.player = factory.create(this.el.nativeElement);
                this.player.play();
                this.player.onDone((/**
                 * @return {?}
                 */
                () => {
                    if (!value) {
                        this.render.setStyle(this.el.nativeElement, 'display', 'none');
                    }
                    this.player.destroy();
                    this.player = undefined;
                }));
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.dropdown.dropDownMenu = this;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    calcPopDirection(value) {
        /** @type {?} */
        const dropdownMenuElement = this.el.nativeElement;
        /** @type {?} */
        const elementHeight = dropdownMenuElement.offsetHeight;
        /** @type {?} */
        const bottomDistance = this.windowRef.innerHeight - this.dropdown.el.nativeElement.getBoundingClientRect().bottom;
        /** @type {?} */
        const isBottomEnough = bottomDistance >= elementHeight;
        if (!value) {
            return this.popDirectionCache;
        }
        else {
            if (!isBottomEnough) {
                this.render.setStyle(dropdownMenuElement, 'bottom', '100%');
                this.render.setStyle(dropdownMenuElement, 'top', 'auto');
                this.popDirectionCache = 'top';
                return 'top';
            }
            else {
                this.render.removeStyle(dropdownMenuElement, 'bottom');
                this.render.removeStyle(dropdownMenuElement, 'top');
                this.popDirectionCache = 'bottom';
                return 'bottom';
            }
        }
    }
    /**
     * @param {?} event
     * @return {?}
     */
    mouseLeave(event) {
        event.stopPropagation();
        if ((this.dropdown.appendToBody && this.dropdown.trigger === 'hover')
            || (this.dropdown.trigger === 'click' && this.dropdown.closeOnMouseLeaveMenu)) {
            if (this.dropdown.toggleEl.nativeElement.contains(event.relatedTarget)
                || this.dropdown.dropdownChildren.some((/**
                 * @param {?} children
                 * @return {?}
                 */
                children => children.menuEl !== this.el
                    && children.menuEl.nativeElement.parentElement
                    && children.menuEl.nativeElement.parentElement.contains(event.relatedTarget)))) {
                return;
            }
            else {
                if (this.dropdown.trigger === 'hover') {
                    this.dropdown.simulateEventDispatch(event);
                }
                else {
                    /** @type {?} */
                    const relatedTarget = event['originEvent'] && event['originEvent'].relatedTarget;
                    if (relatedTarget && (this.dropdown.toggleEl.nativeElement.contains(relatedTarget)
                        || this.dropdown.dropdownChildren.some((/**
                         * @param {?} children
                         * @return {?}
                         */
                        children => children.menuEl.nativeElement.contains(relatedTarget))))) {
                        return;
                    }
                    this.dropdown.isOpen = false;
                }
            }
        }
        return false;
    }
    /**
     * @private
     * @param {?} direction
     * @return {?}
     */
    fadeIn(direction) {
        switch (direction) {
            case 'top':
                return [
                    style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 100%' }),
                    animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 100%' })),
                ];
            case 'bottom':
            default:
                return [
                    style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 0%' }),
                    animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 0%' })),
                ];
        }
    }
    /**
     * @private
     * @param {?} direction
     * @return {?}
     */
    fadeOut(direction) {
        switch (direction) {
            case 'top':
                return [
                    style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 100%' }),
                    animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 100%' }))
                ];
            case 'bottom':
            default:
                return [
                    style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 0%' }),
                    animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 0%' }))
                ];
        }
    }
}
DropDownMenuDirective.decorators = [
    { type: Directive, args: [{
                selector: '[dDropDownMenu]',
                exportAs: 'd-dropdown-menu',
            },] }
];
/** @nocollapse */
DropDownMenuDirective.ctorParameters = () => [
    { type: DropDownDirective, decorators: [{ type: Host }] },
    { type: ElementRef },
    { type: Renderer2 },
    { type: WindowRef },
    { type: AnimationBuilder }
];
DropDownMenuDirective.propDecorators = {
    diplay: [{ type: HostBinding, args: ['style.display',] }],
    tabIndex: [{ type: HostBinding, args: ['attr.tabIndex',] }],
    addClass: [{ type: HostBinding, args: ['class.devui-dropdown-menu',] }],
    mouseLeave: [{ type: HostListener, args: ['mouseleave', ['$event'],] }]
};
if (false) {
    /** @type {?} */
    DropDownMenuDirective.prototype.player;
    /** @type {?} */
    DropDownMenuDirective.prototype.diplay;
    /** @type {?} */
    DropDownMenuDirective.prototype.tabIndex;
    /** @type {?} */
    DropDownMenuDirective.prototype.addClass;
    /** @type {?} */
    DropDownMenuDirective.prototype.keydownEscapeEvent$;
    /** @type {?} */
    DropDownMenuDirective.prototype.keydownEscapeSub;
    /** @type {?} */
    DropDownMenuDirective.prototype.popDirectionCache;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.currentValue;
    /** @type {?} */
    DropDownMenuDirective.prototype.hide;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.dropdown;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.el;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.render;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.windowRef;
    /**
     * @type {?}
     * @private
     */
    DropDownMenuDirective.prototype.builder;
}

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownAppendToBodyComponent {
    /**
     * @param {?} dropDown
     */
    constructor(dropDown) {
        this.dropDown = dropDown;
        this.menuPosition = 'bottom';
        this.appendToBodyDirections = [
            'rightDown', 'leftDown', 'rightUp', 'leftUp'
        ];
        this.dropDown.appendToBody = true;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.setPositions();
        this.setOrigin();
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    ngOnChanges(changes) {
        if (changes['appendToBodyDirections']) {
            this.setPositions();
        }
        if (changes['alignOrigin']) {
            this.setOrigin();
        }
    }
    /**
     * @return {?}
     */
    setOrigin() {
        if (this.alignOrigin) {
            this.origin = new CdkOverlayOrigin(this.alignOrigin);
        }
        else {
            this.origin = undefined;
        }
    }
    /**
     * @return {?}
     */
    setPositions() {
        if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
            this.positions = this.appendToBodyDirections.map((/**
             * @param {?} position
             * @return {?}
             */
            position => {
                if (typeof position === 'string') {
                    return AppendToBodyDirectionsConfig[position];
                }
                else {
                    return position;
                }
            })).filter((/**
             * @param {?} position
             * @return {?}
             */
            position => position !== undefined));
        }
        else {
            this.positions = undefined;
        }
    }
    /**
     * @param {?} position
     * @return {?}
     */
    onPositionChange(position) {
        switch (position.connectionPair.overlayY) {
            case 'top':
            case 'center':
                this.menuPosition = 'bottom';
                break;
            case 'bottom':
                this.menuPosition = 'top';
        }
    }
}
DropDownAppendToBodyComponent.decorators = [
    { type: Component, args: [{
                selector: '[dDropDown][appendToBody]',
                template: `
    <ng-content></ng-content>
    <ng-template cdk-connected-overlay
      [cdkConnectedOverlayOrigin]="origin || dropDown.cdkConnectedOverlayOrigin"
      [cdkConnectedOverlayOpen]="dropDown.isOpen"
      [cdkConnectedOverlayPositions]="positions"
      (backdropClick)="dropDown.isOpen=false"
      (positionChange)="onPositionChange($event)">
      <div [@fadeInOut]="(dropDown.isOpen ? menuPosition : 'void')">
        <ng-content select="[dDropDownMenu]"></ng-content>
      </div>
    </ng-template>
  `,
                encapsulation: ViewEncapsulation.None,
                animations: [
                    fadeInOut
                ],
                styles: [".cdk-overlay-pane .devui-dropdown-menu{position:relative;top:0;left:0;border:none}.devui-dropdown span.icon-chevron-down{display:inline-block;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-dropdown.open span.icon-chevron-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}"]
            }] }
];
/** @nocollapse */
DropDownAppendToBodyComponent.ctorParameters = () => [
    { type: DropDownDirective, decorators: [{ type: Host }] }
];
DropDownAppendToBodyComponent.propDecorators = {
    alignOrigin: [{ type: Input }],
    appendToBodyDirections: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.menuPosition;
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.positions;
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.origin;
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.alignOrigin;
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.appendToBodyDirections;
    /** @type {?} */
    DropDownAppendToBodyComponent.prototype.dropDown;
}

/**
 * @fileoverview added by tsickle
 * Generated from: dropdown.moudule.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropDownModule {
}
DropDownModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    OverlayModule
                ],
                exports: [
                    DropDownDirective,
                    DropDownMenuDirective,
                    DropDownToggleDirective,
                    DropDownAppendToBodyComponent
                ],
                declarations: [
                    DropDownDirective,
                    DropDownMenuDirective,
                    DropDownToggleDirective,
                    DropDownAppendToBodyComponent
                ],
                entryComponents: []
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: ng-devui-dropdown.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { DropDownAppendToBodyComponent, DropDownDirective, DropDownMenuDirective, DropDownModule, DropDownService, DropDownToggleDirective };
//# sourceMappingURL=ng-devui-dropdown.js.map