angular-popper
Version:
Popover component for Angular 2+ based on Popper.js library.
196 lines (187 loc) • 8.69 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('popper.js'), require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('angular-popper', ['exports', 'popper.js', '@angular/core', '@angular/common'], factory) :
(factory((global['angular-popper'] = {}),global.Popper,global.ng.core,global.ng.common));
}(this, (function (exports,Popper,core,common) { 'use strict';
Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PopperComponent = /** @class */ (function () {
function PopperComponent(el, zone) {
this.el = el;
this.zone = zone;
this.show = true;
this.closeButton = false;
this.placement = 'bottom';
this.positionFixed = false;
this.eventsEnabled = true;
this.close = new core.EventEmitter();
}
/**
* @return {?}
*/
PopperComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.create();
};
/**
* @param {?} changes
* @return {?}
*/
PopperComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes.target && !changes.target.firstChange ||
changes.placement && !changes.placement.firstChange ||
changes.positionFixed && !changes.positionFixed.firstChange ||
changes.eventsEnabled && !changes.eventsEnabled.firstChange) {
this.destroy();
this.create();
}
};
/**
* @return {?}
*/
PopperComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
/**
* @return {?}
*/
PopperComponent.prototype.onClose = /**
* @return {?}
*/
function () {
this.show = false;
this.close.emit();
};
/**
* @return {?}
*/
PopperComponent.prototype.create = /**
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular(( /**
* @return {?}
*/function () {
var _a = _this, placement = _a.placement, positionFixed = _a.positionFixed, eventsEnabled = _a.eventsEnabled, modifiers = _a.modifiers;
_this.popper = new Popper(_this.getTargetNode(), _this.el.nativeElement.querySelector('.angular-popper'), {
placement: placement,
positionFixed: positionFixed,
eventsEnabled: eventsEnabled,
modifiers: modifiers
});
}));
};
/**
* @return {?}
*/
PopperComponent.prototype.destroy = /**
* @return {?}
*/
function () {
var _this = this;
if (this.popper) {
this.zone.runOutsideAngular(( /**
* @return {?}
*/function () {
_this.popper.destroy();
}));
this.popper = null;
}
};
/**
* @private
* @return {?}
*/
PopperComponent.prototype.getTargetNode = /**
* @private
* @return {?}
*/
function () {
if (this.target) {
if (typeof this.target === 'string') {
return document.querySelector(this.target);
}
else {
return this.target;
}
}
else {
return this.el.nativeElement;
}
};
PopperComponent.decorators = [
{ type: core.Component, args: [{
selector: 'angular-popper',
template: "<ng-content></ng-content>\n\n<div class=\"angular-popper\"\n [class.visible]=\"show\">\n <button type=\"button\"\n class=\"angular-popper__close\"\n *ngIf=\"closeButton\"\n (click)=\"onClose()\">\n <ng-content select=\".close-button, [close-button]\"></ng-content>\n </button>\n\n <ng-content select=\".content, [content]\"></ng-content>\n\n <div class=\"angular-popper__arrow\" x-arrow></div>\n</div>\n",
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [".angular-popper{position:absolute;background:#ffc107;color:#000;width:150px;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,.5);padding:10px;text-align:center}.angular-popper:not(.visible){display:none}.angular-popper .angular-popper__arrow{width:0;height:0;border-style:solid;border-color:#ffc107;position:absolute;margin:5px}.angular-popper[x-placement^=top]{margin-bottom:5px}.angular-popper[x-placement^=top] .angular-popper__arrow{border-width:5px 5px 0;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.angular-popper[x-placement^=bottom]{margin-top:5px}.angular-popper[x-placement^=bottom] .angular-popper__arrow{border-width:0 5px 5px;border-left-color:transparent;border-right-color:transparent;border-top-color:transparent;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.angular-popper[x-placement^=right]{margin-left:5px}.angular-popper[x-placement^=right] .angular-popper__arrow{border-width:5px 5px 5px 0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.angular-popper[x-placement^=left]{margin-right:5px}.angular-popper[x-placement^=left] .angular-popper__arrow{border-width:5px 0 5px 5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}"]
}] }
];
/** @nocollapse */
PopperComponent.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: core.NgZone }
];
};
PopperComponent.propDecorators = {
show: [{ type: core.Input }],
closeButton: [{ type: core.Input }],
placement: [{ type: core.Input }],
positionFixed: [{ type: core.Input }],
eventsEnabled: [{ type: core.Input }],
modifiers: [{ type: core.Input }],
target: [{ type: core.Input }],
close: [{ type: core.Output }]
};
return PopperComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxPopper = /** @class */ (function () {
function NgxPopper() {
}
NgxPopper.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
declarations: [
PopperComponent
],
exports: [
PopperComponent
]
},] }
];
return NgxPopper;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
exports.PopperComponent = PopperComponent;
exports.NgxPopper = NgxPopper;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=angular-popper.umd.js.map