@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,108 lines (1,098 loc) • 43.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay'), require('rxjs'), require('rxjs/operators'), require('@angular/animations'), require('ng-devui/window-ref'), require('ng-devui/utils')) :
typeof define === 'function' && define.amd ? define('ng-devui/dropdown', ['exports', '@angular/core', '@angular/common', '@angular/cdk/overlay', 'rxjs', 'rxjs/operators', '@angular/animations', 'ng-devui/window-ref', 'ng-devui/utils'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].dropdown = {}), global.ng.core, global.ng.common, global.ng.cdk.overlay, global.rxjs, global.rxjs.operators, global.ng.animations, global['ng-devui']['window-ref'], global['ng-devui'].utils));
}(this, (function (exports, core, common, overlay, rxjs, operators, animations, windowRef, utils) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: dropdown.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DropDownService = /** @class */ (function () {
function DropDownService() {
this.closeDropdownBind = this.closeDropdown.bind(this);
}
/**
* @param {?} dropdownScope
* @return {?}
*/
DropDownService.prototype.open = /**
* @param {?} dropdownScope
* @return {?}
*/
function (dropdownScope) {
var _this = this;
if (!this.openScope) {
// 延时绑定document事件，防止事件冒泡导致立即触发
setTimeout((/**
* @return {?}
*/
function () {
window.document.addEventListener('click', _this.closeDropdownBind);
}));
}
this.openScope = dropdownScope;
};
/**
* @param {?} dropdownScope
* @return {?}
*/
DropDownService.prototype.close = /**
* @param {?} dropdownScope
* @return {?}
*/
function (dropdownScope) {
if (this.openScope !== dropdownScope) {
return;
}
this.openScope = null;
window.document.removeEventListener('click', this.closeDropdownBind);
};
/**
* @private
* @param {?} event
* @return {?}
*/
DropDownService.prototype.closeDropdown = /**
* @private
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.openScope) {
return;
}
/** @type {?} */
var 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 {?}
*/
function (children) { return children.toggleEl.nativeElement.contains(event.target); }))))) {
return;
}
this.openScope.isOpen = false;
};
DropDownService.decorators = [
{ type: core.Injectable }
];
return DropDownService;
}());
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
*/
var DropDownDirective = /** @class */ (function () {
function DropDownDirective(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 core.EventEmitter();
this.visibleSubject = new rxjs.Subject();
this._isOpen = false;
}
Object.defineProperty(DropDownDirective.prototype, "isOpen", {
/**
* 控制是否打开dropdown，绑定一个devui-dropdown-open class
*/
get: /**
* 控制是否打开dropdown，绑定一个devui-dropdown-open class
* @return {?}
*/
function () {
return this._isOpen;
},
set: /**
* @param {?} value
* @return {?}
*/
function (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);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DropDownDirective.prototype, "appendToBody", {
get: /**
* @return {?}
*/
function () {
return this._appendToBody;
},
set: /**
* @param {?} bool
* @return {?}
*/
function (bool) {
this._appendToBody = (bool === true);
this.updateCdkConnectedOverlayOrigin();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DropDownDirective.prototype, "dropDownMenu", {
set: /**
* @param {?} dropdownMenu
* @return {?}
*/
function (dropdownMenu) {
// init drop down menu
this.menuEl = dropdownMenu.el;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DropDownDirective.prototype, "dropDownToggle", {
set: /**
* @param {?} dropdownToggle
* @return {?}
*/
function (dropdownToggle) {
// init toggle element
this.toggleEl = dropdownToggle.el;
this.updateCdkConnectedOverlayOrigin();
},
enumerable: true,
configurable: true
});
/**
* @param {?} changes
* @return {?}
*/
DropDownDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.hasOwnProperty('trigger')) {
this.handleHoverSubscriptionIfTriggerIsHover();
}
};
/**
* @return {?}
*/
DropDownDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.dropdownService.close(this);
this.unsubscribeHoverAction();
};
/**
* @return {?}
*/
DropDownDirective.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
this.handleHoverSubscriptionIfTriggerIsHover();
};
/**
* @return {?}
*/
DropDownDirective.prototype.toggle = /**
* @return {?}
*/
function () {
return this.isOpen = !this.isOpen;
};
/**
* @return {?}
*/
DropDownDirective.prototype.focusToggleElement = /**
* @return {?}
*/
function () {
if (this.toggleEl) {
this.toggleEl.nativeElement.focus();
}
};
/**
* @return {?}
*/
DropDownDirective.prototype.updateCdkConnectedOverlayOrigin = /**
* @return {?}
*/
function () {
if (this.toggleEl && this.appendToBody === true) {
this.cdkConnectedOverlayOrigin = new overlay.CdkOverlayOrigin(this.toggleEl);
}
else {
this.cdkConnectedOverlayOrigin = undefined;
}
};
/**
* @param {?} observable
* @return {?}
*/
DropDownDirective.prototype.subscribeHoverAction = /**
* @param {?} observable
* @return {?}
*/
function (observable) {
var _this = this;
if (!!!this.hoverSubscription) {
this.hoverSubscription = observable.pipe(operators.debounceTime(50)).subscribe((/**
* @param {?} isOpen
* @return {?}
*/
function (isOpen) {
if (!_this.disabled && _this.isOpen !== isOpen) {
_this.isOpen = isOpen;
}
}));
}
};
/**
* @private
* @return {?}
*/
DropDownDirective.prototype.unsubscribeHoverAction = /**
* @private
* @return {?}
*/
function () {
if (this.hoverSubscription) {
this.hoverSubscription.unsubscribe();
this.hoverSubscription = null;
}
};
/**
* @return {?}
*/
DropDownDirective.prototype.handleHoverSubscriptionIfTriggerIsHover = /**
* @return {?}
*/
function () {
var _this = this;
if (this.trigger === 'hover') {
/** @type {?} */
var states = rxjs.merge(rxjs.fromEvent(this.el.nativeElement, 'mouseenter').pipe(operators.mapTo(true)), rxjs.fromEvent(this.el.nativeElement, 'mouseleave').pipe(operators.filter((/**
* @param {?} event
* @return {?}
*/
function (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 {?} */
var relatedTarget_1 = event.relatedTarget || (event['originEvent'] && event['originEvent'].relatedTarget);
return !(_this.menuEl.nativeElement && relatedTarget_1 &&
(_this.menuEl.nativeElement.parentElement.contains(event.relatedTarget)
|| _this.menuEl.nativeElement.parentElement.parentElement.contains(event.relatedTarget) // 套了两层div增加判断
|| _this.menuEl.nativeElement.contains(relatedTarget_1)
|| _this.dropdownChildren.some((/**
* @param {?} children
* @return {?}
*/
function (children) {
return children !== _this
// appendToBody的时候可能会没有实例化不在document上需要做判断有没有parentElement
&& (children.menuEl.nativeElement.parentElement
&& children.menuEl.nativeElement.parentElement.contains(event.relatedTarget)
|| children.menuEl.nativeElement.contains(relatedTarget_1));
}))));
}
else {
return true;
}
})), operators.tap((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (_this.parentDropdown) {
_this.simulateEventDispatch(event, _this.parentDropdown.el.nativeElement);
}
})), operators.mapTo(false)));
this.subscribeHoverAction(states);
}
else {
this.unsubscribeHoverAction();
}
};
/**
* @param {?} $event
* @param {?=} target
* @return {?}
*/
DropDownDirective.prototype.simulateEventDispatch = /**
* @param {?} $event
* @param {?=} target
* @return {?}
*/
function ($event, target) {
/** @type {?} */
var 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: core.Directive, args: [{
selector: '[dDropDown]',
exportAs: 'd-dropdown',
providers: [DropDownService]
},] }
];
/** @nocollapse */
DropDownDirective.ctorParameters = function () { return [
{ type: DropDownService },
{ type: core.ElementRef },
{ type: DropDownDirective, decorators: [{ type: core.Optional }, { type: core.SkipSelf }] }
]; };
DropDownDirective.propDecorators = {
dropdownChildren: [{ type: core.ContentChildren, args: [DropDownDirective, { descendants: true },] }],
isOpen: [{ type: core.HostBinding, args: ['class.devui-dropdown-open',] }, { type: core.Input }],
addClass: [{ type: core.HostBinding, args: ['class.devui-dropdown',] }],
disabled: [{ type: core.Input }],
trigger: [{ type: core.Input }],
closeScope: [{ type: core.Input }],
closeOnMouseLeaveMenu: [{ type: core.Input }],
toggleEvent: [{ type: core.Output }]
};
return DropDownDirective;
}());
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
*/
var DropDownToggleDirective = /** @class */ (function () {
function DropDownToggleDirective(dropdown, el) {
this.dropdown = dropdown;
this.el = el;
this.addClass = true;
this.toggleOnFocus = false;
this.autoFocus = false;
this.isMouseEvent = false;
}
Object.defineProperty(DropDownToggleDirective.prototype, "tabIndex", {
get: /**
* @return {?}
*/
function () {
return this.disabled ? null : 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DropDownToggleDirective.prototype, "attrDisabled", {
get: /**
* @return {?}
*/
function () {
return this.disabled ? 'disabled' : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DropDownToggleDirective.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this.dropdown && this.dropdown.disabled;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
DropDownToggleDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.dropdown.dropDownToggle = this;
};
/**
* @return {?}
*/
DropDownToggleDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.autoFocus) {
setTimeout((/**
* @return {?}
*/
function () {
_this.el.nativeElement.focus();
}), 0);
}
};
/**
* @param {?} event
* @return {?}
*/
DropDownToggleDirective.prototype.toggleDropdown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.disabled) {
this.dropdown.toggle();
}
return false;
};
// mousedown mouseup解决focus与click冲突问题
// mousedown mouseup解决focus与click冲突问题
/**
* @param {?} event
* @return {?}
*/
DropDownToggleDirective.prototype.setMouseEventTrue =
// mousedown mouseup解决focus与click冲突问题
/**
* @param {?} event
* @return {?}
*/
function (event) {
this.isMouseEvent = true;
};
/**
* @param {?} event
* @return {?}
*/
DropDownToggleDirective.prototype.setMouseEventFalse = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.isMouseEvent = false;
};
/**
* @param {?} event
* @return {?}
*/
DropDownToggleDirective.prototype.toggleOnFocusFn = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.toggleOnFocus && !this.disabled && !this.dropdown.isOpen && !this.isMouseEvent) {
this.dropdown.toggle();
}
};
/**
* @return {?}
*/
DropDownToggleDirective.prototype.toggle = /**
* @return {?}
*/
function () {
this.dropdown.toggle();
};
DropDownToggleDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dDropDownToggle]',
exportAs: 'd-dropdown-toggle',
},] }
];
/** @nocollapse */
DropDownToggleDirective.ctorParameters = function () { return [
{ type: DropDownDirective, decorators: [{ type: core.Host }] },
{ type: core.ElementRef }
]; };
DropDownToggleDirective.propDecorators = {
tabIndex: [{ type: core.HostBinding, args: ['attr.tabIndex',] }],
attrDisabled: [{ type: core.HostBinding, args: ['attr.disabled',] }],
addClass: [{ type: core.HostBinding, args: ['class.devui-dropdown-toggle',] }],
toggleOnFocus: [{ type: core.Input }],
autoFocus: [{ type: core.Input }],
toggleDropdown: [{ type: core.HostListener, args: ['click', ['$event'],] }],
setMouseEventTrue: [{ type: core.HostListener, args: ['mousedown', ['$event'],] }],
setMouseEventFalse: [{ type: core.HostListener, args: ['mouseup', ['$event'],] }],
toggleOnFocusFn: [{ type: core.HostListener, args: ['focus', ['$event'],] }],
toggle: [{ type: core.HostListener, args: ['keydown.enter',] }]
};
return DropDownToggleDirective;
}());
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
*/
var DropDownMenuDirective = /** @class */ (function () {
function DropDownMenuDirective(dropdown, el, render, windowRef, builder) {
var _this = this;
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$ = rxjs.fromEvent(document.body, 'keydown').pipe(
// tslint:disable-next-line: deprecation // ie11不支持code
operators.filter((/**
* @param {?} event
* @return {?}
*/
function (event) { return ((/** @type {?} */ (event))).keyCode === 27; })));
this.hide = (/**
* @param {?} event
* @return {?}
*/
function (event) {
_this.dropdown.toggle();
});
this.dropdown.visibleSubject.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
if (value !== _this.currentValue) {
_this.currentValue = value;
if (_this.keydownEscapeSub) {
_this.keydownEscapeSub.unsubscribe();
}
if (value) {
_this.keydownEscapeSub = _this.keydownEscapeEvent$.subscribe((/**
* @param {?} event
* @return {?}
*/
function (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 {?} */
var direction = _this.calcPopDirection(value);
/** @type {?} */
var metadata = value ? _this.fadeIn(direction) : _this.fadeOut(direction);
/** @type {?} */
var factory = _this.builder.build(metadata);
_this.player = factory.create(_this.el.nativeElement);
_this.player.play();
_this.player.onDone((/**
* @return {?}
*/
function () {
if (!value) {
_this.render.setStyle(_this.el.nativeElement, 'display', 'none');
}
_this.player.destroy();
_this.player = undefined;
}));
}
}));
}
/**
* @return {?}
*/
DropDownMenuDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.dropdown.dropDownMenu = this;
};
/**
* @param {?} value
* @return {?}
*/
DropDownMenuDirective.prototype.calcPopDirection = /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var dropdownMenuElement = this.el.nativeElement;
/** @type {?} */
var elementHeight = dropdownMenuElement.offsetHeight;
/** @type {?} */
var bottomDistance = this.windowRef.innerHeight - this.dropdown.el.nativeElement.getBoundingClientRect().bottom;
/** @type {?} */
var 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 {?}
*/
DropDownMenuDirective.prototype.mouseLeave = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
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 {?}
*/
function (children) {
return 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 {?} */
var relatedTarget_1 = event['originEvent'] && event['originEvent'].relatedTarget;
if (relatedTarget_1 && (this.dropdown.toggleEl.nativeElement.contains(relatedTarget_1)
|| this.dropdown.dropdownChildren.some((/**
* @param {?} children
* @return {?}
*/
function (children) { return children.menuEl.nativeElement.contains(relatedTarget_1); })))) {
return;
}
this.dropdown.isOpen = false;
}
}
}
return false;
};
/**
* @private
* @param {?} direction
* @return {?}
*/
DropDownMenuDirective.prototype.fadeIn = /**
* @private
* @param {?} direction
* @return {?}
*/
function (direction) {
switch (direction) {
case 'top':
return [
animations.style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 100%' }),
animations.animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', animations.style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 100%' })),
];
case 'bottom':
default:
return [
animations.style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 0%' }),
animations.animate('200ms cubic-bezier(0.23, 1, 0.32, 1)', animations.style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 0%' })),
];
}
};
/**
* @private
* @param {?} direction
* @return {?}
*/
DropDownMenuDirective.prototype.fadeOut = /**
* @private
* @param {?} direction
* @return {?}
*/
function (direction) {
switch (direction) {
case 'top':
return [
animations.style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 100%' }),
animations.animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', animations.style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 100%' }))
];
case 'bottom':
default:
return [
animations.style({ transform: 'translateZ(0) scaleY(1)', opacity: 1, transformOrigin: '0% 0%' }),
animations.animate('200ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', animations.style({ transform: 'translateZ(0) scaleY(0)', opacity: 0, transformOrigin: '0% 0%' }))
];
}
};
DropDownMenuDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dDropDownMenu]',
exportAs: 'd-dropdown-menu',
},] }
];
/** @nocollapse */
DropDownMenuDirective.ctorParameters = function () { return [
{ type: DropDownDirective, decorators: [{ type: core.Host }] },
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: windowRef.WindowRef },
{ type: animations.AnimationBuilder }
]; };
DropDownMenuDirective.propDecorators = {
diplay: [{ type: core.HostBinding, args: ['style.display',] }],
tabIndex: [{ type: core.HostBinding, args: ['attr.tabIndex',] }],
addClass: [{ type: core.HostBinding, args: ['class.devui-dropdown-menu',] }],
mouseLeave: [{ type: core.HostListener, args: ['mouseleave', ['$event'],] }]
};
return DropDownMenuDirective;
}());
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
*/
var DropDownAppendToBodyComponent = /** @class */ (function () {
function DropDownAppendToBodyComponent(dropDown) {
this.dropDown = dropDown;
this.menuPosition = 'bottom';
this.appendToBodyDirections = [
'rightDown', 'leftDown', 'rightUp', 'leftUp'
];
this.dropDown.appendToBody = true;
}
/**
* @return {?}
*/
DropDownAppendToBodyComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.setPositions();
this.setOrigin();
};
/**
* @param {?} changes
* @return {?}
*/
DropDownAppendToBodyComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes['appendToBodyDirections']) {
this.setPositions();
}
if (changes['alignOrigin']) {
this.setOrigin();
}
};
/**
* @return {?}
*/
DropDownAppendToBodyComponent.prototype.setOrigin = /**
* @return {?}
*/
function () {
if (this.alignOrigin) {
this.origin = new overlay.CdkOverlayOrigin(this.alignOrigin);
}
else {
this.origin = undefined;
}
};
/**
* @return {?}
*/
DropDownAppendToBodyComponent.prototype.setPositions = /**
* @return {?}
*/
function () {
if (this.appendToBodyDirections && this.appendToBodyDirections.length > 0) {
this.positions = this.appendToBodyDirections.map((/**
* @param {?} position
* @return {?}
*/
function (position) {
if (typeof position === 'string') {
return utils.AppendToBodyDirectionsConfig[position];
}
else {
return position;
}
})).filter((/**
* @param {?} position
* @return {?}
*/
function (position) { return position !== undefined; }));
}
else {
this.positions = undefined;
}
};
/**
* @param {?} position
* @return {?}
*/
DropDownAppendToBodyComponent.prototype.onPositionChange = /**
* @param {?} position
* @return {?}
*/
function (position) {
switch (position.connectionPair.overlayY) {
case 'top':
case 'center':
this.menuPosition = 'bottom';
break;
case 'bottom':
this.menuPosition = 'top';
}
};
DropDownAppendToBodyComponent.decorators = [
{ type: core.Component, args: [{
selector: '[dDropDown][appendToBody]',
template: "\n <ng-content></ng-content>\n <ng-template cdk-connected-overlay\n [cdkConnectedOverlayOrigin]=\"origin || dropDown.cdkConnectedOverlayOrigin\"\n [cdkConnectedOverlayOpen]=\"dropDown.isOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (backdropClick)=\"dropDown.isOpen=false\"\n (positionChange)=\"onPositionChange($event)\">\n <div [@fadeInOut]=\"(dropDown.isOpen ? menuPosition : 'void')\">\n <ng-content select=\"[dDropDownMenu]\"></ng-content>\n </div>\n </ng-template>\n ",
encapsulation: core.ViewEncapsulation.None,
animations: [
utils.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 = function () { return [
{ type: DropDownDirective, decorators: [{ type: core.Host }] }
]; };
DropDownAppendToBodyComponent.propDecorators = {
alignOrigin: [{ type: core.Input }],
appendToBodyDirections: [{ type: core.Input }]
};
return DropDownAppendToBodyComponent;
}());
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
*/
var DropDownModule = /** @class */ (function () {
function DropDownModule() {
}
DropDownModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
overlay.OverlayModule
],
exports: [
DropDownDirective,
DropDownMenuDirective,
DropDownToggleDirective,
DropDownAppendToBodyComponent
],
declarations: [
DropDownDirective,
DropDownMenuDirective,
DropDownToggleDirective,
DropDownAppendToBodyComponent
],
entryComponents: []
},] }
];
return DropDownModule;
}());
exports.DropDownAppendToBodyComponent = DropDownAppendToBodyComponent;
exports.DropDownDirective = DropDownDirective;
exports.DropDownMenuDirective = DropDownMenuDirective;
exports.DropDownModule = DropDownModule;
exports.DropDownService = DropDownService;
exports.DropDownToggleDirective = DropDownToggleDirective;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-dropdown.umd.js.map