import { __values } from 'tslib'; import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2, ElementRef, Directive, ViewContainerRef, Input, Output, TemplateRef, HostBinding, HostListener, NgModule } from '@angular/core'; import { filter } from 'rxjs/operators'; import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; import { isBs3 } from 'ngx-bootstrap/utils'; import { style, animate, AnimationBuilder } from '@angular/animations'; import { PositioningService } from 'ngx-bootstrap/positioning'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Default dropdown configuration */ var BsDropdownConfig = /** @class */ (function () { function BsDropdownConfig() { /** * default dropdown auto closing behavior */ this.autoClose = true; /** * default dropdown auto closing behavior */ this.insideClick = false; /** * turn on/off animation */ this.isAnimated = false; } BsDropdownConfig.decorators = [ { type: Injectable } ]; return BsDropdownConfig; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var BsDropdownState = /** @class */ (function () { function BsDropdownState() { var _this = this; this.direction = 'down'; this.isOpenChange = new EventEmitter(); this.isDisabledChange = new EventEmitter(); this.toggleClick = new EventEmitter(); this.dropdownMenu = new Promise((/** * @param {?} resolve * @return {?} */ function (resolve) { _this.resolveDropdownMenu = resolve; })); } BsDropdownState.decorators = [ { type: Injectable } ]; /** @nocollapse */ BsDropdownState.ctorParameters = function () { return []; }; return BsDropdownState; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var DROPDOWN_ANIMATION_TIMING = '220ms cubic-bezier(0, 0, 0.2, 1)'; /** @type {?} */ var dropdownAnimation = [ style({ height: 0, overflow: 'hidden' }), animate(DROPDOWN_ANIMATION_TIMING, style({ height: '*', overflow: 'hidden' })) ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var BsDropdownContainerComponent = /** @class */ (function () { function BsDropdownContainerComponent(_state, cd, _renderer, _element, _builder) { var _this = this; this._state = _state; this.cd = cd; this._renderer = _renderer; this._element = _element; this.isOpen = false; this._factoryDropDownAnimation = _builder.build(dropdownAnimation); this._subscription = _state.isOpenChange.subscribe((/** * @param {?} value * @return {?} */ function (value) { _this.isOpen = value; /** @type {?} */ var dropdown = _this._element.nativeElement.querySelector('.dropdown-menu'); _this._renderer.addClass(_this._element.nativeElement.querySelector('div'), 'open'); if (dropdown && !isBs3()) { _this._renderer.addClass(dropdown, 'show'); if (dropdown.classList.contains('dropdown-menu-right')) { _this._renderer.setStyle(dropdown, 'left', 'auto'); _this._renderer.setStyle(dropdown, 'right', '0'); } if (_this.direction === 'up') { _this._renderer.setStyle(dropdown, 'top', 'auto'); _this._renderer.setStyle(dropdown, 'transform', 'translateY(-101%)'); } } if (dropdown && _this._state.isAnimated) { _this._factoryDropDownAnimation.create(dropdown) .play(); } _this.cd.markForCheck(); _this.cd.detectChanges(); })); } Object.defineProperty(BsDropdownContainerComponent.prototype, "direction", { get: /** * @return {?} */ function () { return this._state.direction; }, enumerable: true, configurable: true }); /** @internal */ /** * \@internal * @param {?} el * @return {?} */ BsDropdownContainerComponent.prototype._contains = /** * \@internal * @param {?} el * @return {?} */ function (el) { return this._element.nativeElement.contains(el); }; /** * @return {?} */ BsDropdownContainerComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this._subscription.unsubscribe(); }; BsDropdownContainerComponent.decorators = [ { type: Component, args: [{ selector: 'bs-dropdown-container', changeDetection: ChangeDetectionStrategy.OnPush, host: { style: 'display:block;position: absolute;' }, template: "\n
true allows toggling, with parameter false
* only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
*/
/**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover. With parameter true allows toggling, with parameter false
* only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
* @param {?=} value
* @return {?}
*/
BsDropdownDirective.prototype.toggle = /**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover. With parameter true allows toggling, with parameter false
* only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
* @param {?=} value
* @return {?}
*/
function (value) {
if (this.isOpen || !value) {
return this.hide();
}
return this.show();
};
/** @internal */
/**
* \@internal
* @param {?} event
* @return {?}
*/
BsDropdownDirective.prototype._contains = /**
* \@internal
* @param {?} event
* @return {?}
*/
function (event) {
return this._elementRef.nativeElement.contains(event.target) ||
(this._dropdown.instance && this._dropdown.instance._contains(event.target));
};
/**
* @return {?}
*/
BsDropdownDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var e_1, _a;
try {
// clean up subscriptions and destroy dropdown
for (var _b = __values(this._subscriptions), _c = _b.next(); !_c.done; _c = _b.next()) {
var sub = _c.value;
sub.unsubscribe();
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
this._dropdown.dispose();
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.addBs4Polyfills = /**
* @private
* @return {?}
*/
function () {
if (!isBs3()) {
this.addShowClass();
this.checkRightAlignment();
this.addDropupStyles();
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.playAnimation = /**
* @private
* @return {?}
*/
function () {
if (this._state.isAnimated && this._inlinedMenu) {
this._factoryDropDownAnimation.create(this._inlinedMenu.rootNodes[0])
.play();
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.addShowClass = /**
* @private
* @return {?}
*/
function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.addClass(this._inlinedMenu.rootNodes[0], 'show');
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.removeShowClass = /**
* @private
* @return {?}
*/
function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.removeClass(this._inlinedMenu.rootNodes[0], 'show');
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.checkRightAlignment = /**
* @private
* @return {?}
*/
function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
/** @type {?} */
var isRightAligned = this._inlinedMenu.rootNodes[0].classList.contains('dropdown-menu-right');
this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'left', isRightAligned ? 'auto' : '0');
this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'right', isRightAligned ? '0' : 'auto');
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.addDropupStyles = /**
* @private
* @return {?}
*/
function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
// a little hack to not break support of bootstrap 4 beta
this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'top', this.dropup ? 'auto' : '100%');
this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'transform', this.dropup ? 'translateY(-101%)' : 'translateY(0)');
this._renderer.setStyle(this._inlinedMenu.rootNodes[0], 'bottom', 'auto');
}
};
/**
* @private
* @return {?}
*/
BsDropdownDirective.prototype.removeDropupStyles = /**
* @private
* @return {?}
*/
function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'top');
this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'transform');
this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'bottom');
}
};
BsDropdownDirective.decorators = [
{ type: Directive, args: [{
selector: '[bsDropdown],[dropdown]',
exportAs: 'bs-dropdown',
providers: [BsDropdownState],
host: {
'[class.dropup]': 'dropup',
'[class.open]': 'isOpen',
'[class.show]': 'isOpen && isBs4'
}
},] }
];
/** @nocollapse */
BsDropdownDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ViewContainerRef },
{ type: ComponentLoaderFactory },
{ type: BsDropdownState },
{ type: BsDropdownConfig },
{ type: AnimationBuilder }
]; };
BsDropdownDirective.propDecorators = {
placement: [{ type: Input }],
triggers: [{ type: Input }],
container: [{ type: Input }],
dropup: [{ type: Input }],
autoClose: [{ type: Input }],
isAnimated: [{ type: Input }],
insideClick: [{ type: Input }],
isDisabled: [{ type: Input }],
isOpen: [{ type: Input }],
isOpenChange: [{ type: Output }],
onShown: [{ type: Output }],
onHidden: [{ type: Output }]
};
return BsDropdownDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BsDropdownMenuDirective = /** @class */ (function () {
// tslint:disable:no-any
function BsDropdownMenuDirective(_state, _viewContainer, _templateRef) {
_state.resolveDropdownMenu({
templateRef: _templateRef,
viewContainer: _viewContainer
});
}
BsDropdownMenuDirective.decorators = [
{ type: Directive, args: [{
selector: '[bsDropdownMenu],[dropdownMenu]',
exportAs: 'bs-dropdown-menu'
},] }
];
/** @nocollapse */
BsDropdownMenuDirective.ctorParameters = function () { return [
{ type: BsDropdownState },
{ type: ViewContainerRef },
{ type: TemplateRef }
]; };
return BsDropdownMenuDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BsDropdownToggleDirective = /** @class */ (function () {
function BsDropdownToggleDirective(_changeDetectorRef, _dropdown, _element, _renderer, _state) {
var _this = this;
this._changeDetectorRef = _changeDetectorRef;
this._dropdown = _dropdown;
this._element = _element;
this._renderer = _renderer;
this._state = _state;
this.isDisabled = null;
this._subscriptions = [];
// sync is open value with state
this._subscriptions.push(this._state.isOpenChange.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
_this.isOpen = value;
if (value) {
_this._documentClickListener = _this._renderer.listen('document', 'click', (/**
* @param {?} event
* @return {?}
*/
function (event) {
if (_this._state.autoClose && event.button !== 2 &&
!_this._element.nativeElement.contains(event.target) &&
!(_this._state.insideClick && _this._dropdown._contains(event))) {
_this._state.toggleClick.emit(false);
_this._changeDetectorRef.detectChanges();
}
}));
_this._escKeyUpListener = _this._renderer.listen(_this._element.nativeElement, 'keyup.esc', (/**
* @return {?}
*/
function () {
if (_this._state.autoClose) {
_this._state.toggleClick.emit(false);
_this._changeDetectorRef.detectChanges();
}
}));
}
else {
_this._documentClickListener();
_this._escKeyUpListener();
}
})));
// populate disabled state
this._subscriptions.push(this._state.isDisabledChange.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) { return (_this.isDisabled = value || null); })));
}
/**
* @return {?}
*/
BsDropdownToggleDirective.prototype.onClick = /**
* @return {?}
*/
function () {
if (this.isDisabled) {
return;
}
this._state.toggleClick.emit(true);
};
/**
* @return {?}
*/
BsDropdownToggleDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var e_1, _a;
if (this._documentClickListener) {
this._documentClickListener();
}
if (this._escKeyUpListener) {
this._escKeyUpListener();
}
try {
for (var _b = __values(this._subscriptions), _c = _b.next(); !_c.done; _c = _b.next()) {
var sub = _c.value;
sub.unsubscribe();
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
};
BsDropdownToggleDirective.decorators = [
{ type: Directive, args: [{
selector: '[bsDropdownToggle],[dropdownToggle]',
exportAs: 'bs-dropdown-toggle',
host: {
'[attr.aria-haspopup]': 'true'
}
},] }
];
/** @nocollapse */
BsDropdownToggleDirective.ctorParameters = function () { return [
{ type: ChangeDetectorRef },
{ type: BsDropdownDirective },
{ type: ElementRef },
{ type: Renderer2 },
{ type: BsDropdownState }
]; };
BsDropdownToggleDirective.propDecorators = {
isDisabled: [{ type: HostBinding, args: ['attr.disabled',] }],
isOpen: [{ type: HostBinding, args: ['attr.aria-expanded',] }],
onClick: [{ type: HostListener, args: ['click', [],] }]
};
return BsDropdownToggleDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BsDropdownModule = /** @class */ (function () {
function BsDropdownModule() {
}
// tslint:disable-next-line:no-any
// tslint:disable-next-line:no-any
/**
* @param {?=} config
* @return {?}
*/
BsDropdownModule.forRoot =
// tslint:disable-next-line:no-any
/**
* @param {?=} config
* @return {?}
*/
function (config) {
return {
ngModule: BsDropdownModule,
providers: [
ComponentLoaderFactory,
PositioningService,
BsDropdownState,
{
provide: BsDropdownConfig,
useValue: config ? config : { autoClose: true, insideClick: false }
}
]
};
};
BsDropdownModule.decorators = [
{ type: NgModule, args: [{
declarations: [
BsDropdownMenuDirective,
BsDropdownToggleDirective,
BsDropdownContainerComponent,
BsDropdownDirective
],
exports: [
BsDropdownMenuDirective,
BsDropdownToggleDirective,
BsDropdownDirective
],
entryComponents: [BsDropdownContainerComponent]
},] }
];
return BsDropdownModule;
}());
export { BsDropdownConfig, BsDropdownContainerComponent, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownState, BsDropdownToggleDirective };
//# sourceMappingURL=ngx-bootstrap-dropdown.js.map