ngx-bootstrap
Version:
Native Angular Bootstrap Components
300 lines • 11.9 kB
JavaScript
import { Directive, ElementRef, EventEmitter, Input, Output, Renderer2, ViewContainerRef } from '@angular/core';
import { filter } from 'rxjs/operators';
import { ComponentLoaderFactory } from '../component-loader/index';
import { BsDropdownConfig } from './bs-dropdown.config';
import { BsDropdownContainerComponent } from './bs-dropdown-container.component';
import { BsDropdownState } from './bs-dropdown.state';
import { isBs3 } from '../utils/theme-provider';
var BsDropdownDirective = /** @class */ (function () {
function BsDropdownDirective(_elementRef, _renderer, _viewContainerRef, _cis, _config, _state) {
this._elementRef = _elementRef;
this._renderer = _renderer;
this._viewContainerRef = _viewContainerRef;
this._cis = _cis;
this._config = _config;
this._state = _state;
// todo: move to component loader
this._isInlineOpen = false;
this._subscriptions = [];
this._isInited = false;
// set initial dropdown state from config
this._state.autoClose = this._config.autoClose;
// create dropdown component loader
this._dropdown = this._cis
.createLoader(this._elementRef, this._viewContainerRef, this._renderer)
.provide({ provide: BsDropdownState, useValue: this._state });
this.onShown = this._dropdown.onShown;
this.onHidden = this._dropdown.onHidden;
this.isOpenChange = this._state.isOpenChange;
}
Object.defineProperty(BsDropdownDirective.prototype, "autoClose", {
get: function () {
return this._state.autoClose;
},
set: /**
* Indicates that dropdown will be closed on item or document click,
* and after pressing ESC
*/
function (value) {
this._state.autoClose = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDropdownDirective.prototype, "isDisabled", {
get: function () {
return this._isDisabled;
},
set: /**
* Disables dropdown toggle and hides dropdown menu if opened
*/
function (value) {
this._isDisabled = value;
this._state.isDisabledChange.emit(value);
if (value) {
this.hide();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDropdownDirective.prototype, "isOpen", {
get: /**
* Returns whether or not the popover is currently being shown
*/
function () {
if (this._showInline) {
return this._isInlineOpen;
}
return this._dropdown.isShown;
},
set: function (value) {
if (value) {
this.show();
}
else {
this.hide();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDropdownDirective.prototype, "isBs4", {
get: function () {
return !isBs3();
},
enumerable: true,
configurable: true
});
Object.defineProperty(BsDropdownDirective.prototype, "_showInline", {
get: function () {
return !this.container;
},
enumerable: true,
configurable: true
});
BsDropdownDirective.prototype.ngOnInit = function () {
var _this = this;
// fix: seems there are an issue with `routerLinkActive`
// which result in duplicated call ngOnInit without call to ngOnDestroy
// read more: https://github.com/valor-software/ngx-bootstrap/issues/1885
if (this._isInited) {
return;
}
this._isInited = true;
// attach DOM listeners
this._dropdown.listen({
// because of dropdown inline mode
outsideClick: false,
triggers: this.triggers,
show: function () { return _this.show(); }
});
// toggle visibility on toggle element click
this._subscriptions.push(this._state.toggleClick.subscribe(function (value) { return _this.toggle(value); }));
// hide dropdown if set disabled while opened
this._subscriptions.push(this._state.isDisabledChange
.pipe(filter(function (value) { return value; }))
.subscribe(function (value) { return _this.hide(); }));
};
/**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
/**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
BsDropdownDirective.prototype.show = /**
* Opens an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
function () {
var _this = this;
if (this.isOpen || this.isDisabled) {
return;
}
if (this._showInline) {
if (!this._inlinedMenu) {
this._state.dropdownMenu.then(function (dropdownMenu) {
_this._dropdown.attachInline(dropdownMenu.viewContainer, dropdownMenu.templateRef);
_this._inlinedMenu = _this._dropdown._inlineViewRef;
_this.addBs4Polyfills();
})
.catch();
}
this.addBs4Polyfills();
this._isInlineOpen = true;
this.onShown.emit(true);
this._state.isOpenChange.emit(true);
return;
}
this._state.dropdownMenu.then(function (dropdownMenu) {
// check direction in which dropdown should be opened
var _dropup = _this.dropup ||
(typeof _this.dropup !== 'undefined' && _this.dropup);
_this._state.direction = _dropup ? 'up' : 'down';
var _placement = _this.placement || (_dropup ? 'top left' : 'bottom left');
// show dropdown
// show dropdown
_this._dropdown
.attach(BsDropdownContainerComponent)
.to(_this.container)
.position({ attachment: _placement })
.show({
content: dropdownMenu.templateRef,
placement: _placement
});
_this._state.isOpenChange.emit(true);
})
.catch();
};
/**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
/**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
BsDropdownDirective.prototype.hide = /**
* Closes an element’s popover. This is considered a “manual” triggering of
* the popover.
*/
function () {
if (!this.isOpen) {
return;
}
if (this._showInline) {
this.removeShowClass();
this.removeDropupStyles();
this._isInlineOpen = false;
this.onHidden.emit(true);
}
else {
this._dropdown.hide();
}
this._state.isOpenChange.emit(false);
};
/**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover. With parameter <code>true</code> allows toggling, with parameter <code>false</code>
* 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 <code>true</code> allows toggling, with parameter <code>false</code>
* only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
*/
BsDropdownDirective.prototype.toggle = /**
* Toggles an element’s popover. This is considered a “manual” triggering of
* the popover. With parameter <code>true</code> allows toggling, with parameter <code>false</code>
* only hides opened dropdown. Parameter usage will be removed in ngx-bootstrap v3
*/
function (value) {
if (this.isOpen || !value) {
return this.hide();
}
return this.show();
};
BsDropdownDirective.prototype.ngOnDestroy = function () {
// clean up subscriptions and destroy dropdown
for (var _i = 0, _a = this._subscriptions; _i < _a.length; _i++) {
var sub = _a[_i];
sub.unsubscribe();
}
this._dropdown.dispose();
};
BsDropdownDirective.prototype.addBs4Polyfills = function () {
if (!isBs3()) {
this.addShowClass();
this.checkRightAlignment();
this.addDropupStyles();
}
};
BsDropdownDirective.prototype.addShowClass = function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.addClass(this._inlinedMenu.rootNodes[0], 'show');
}
};
BsDropdownDirective.prototype.removeShowClass = function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.removeClass(this._inlinedMenu.rootNodes[0], 'show');
}
};
BsDropdownDirective.prototype.checkRightAlignment = function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
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');
}
};
BsDropdownDirective.prototype.addDropupStyles = 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)');
}
};
BsDropdownDirective.prototype.removeDropupStyles = function () {
if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'top');
this._renderer.removeStyle(this._inlinedMenu.rootNodes[0], 'transform');
}
};
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: BsDropdownConfig, },
{ type: BsDropdownState, },
]; };
BsDropdownDirective.propDecorators = {
"placement": [{ type: Input },],
"triggers": [{ type: Input },],
"container": [{ type: Input },],
"dropup": [{ type: Input },],
"autoClose": [{ type: Input },],
"isDisabled": [{ type: Input },],
"isOpen": [{ type: Input },],
"isOpenChange": [{ type: Output },],
"onShown": [{ type: Output },],
"onHidden": [{ type: Output },],
};
return BsDropdownDirective;
}());
export { BsDropdownDirective };
//# sourceMappingURL=bs-dropdown.directive.js.map