angular-popper
Version:
Popover component for Angular 2+ based on Popper.js library.
183 lines • 13.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, NgZone } from '@angular/core';
import Popper from 'popper.js';
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 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: 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: ViewEncapsulation.None,
changeDetection: 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: ElementRef },
{ type: NgZone }
]; };
PopperComponent.propDecorators = {
show: [{ type: Input }],
closeButton: [{ type: Input }],
placement: [{ type: Input }],
positionFixed: [{ type: Input }],
eventsEnabled: [{ type: Input }],
modifiers: [{ type: Input }],
target: [{ type: Input }],
close: [{ type: Output }]
};
return PopperComponent;
}());
export { PopperComponent };
if (false) {
/** @type {?} */
PopperComponent.prototype.show;
/** @type {?} */
PopperComponent.prototype.closeButton;
/** @type {?} */
PopperComponent.prototype.placement;
/** @type {?} */
PopperComponent.prototype.positionFixed;
/** @type {?} */
PopperComponent.prototype.eventsEnabled;
/** @type {?} */
PopperComponent.prototype.modifiers;
/** @type {?} */
PopperComponent.prototype.target;
/** @type {?} */
PopperComponent.prototype.close;
/**
* @type {?}
* @private
*/
PopperComponent.prototype.popper;
/**
* @type {?}
* @private
*/
PopperComponent.prototype.el;
/**
* @type {?}
* @private
*/
PopperComponent.prototype.zone;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1wb3BwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYW5ndWxhci1wb3BwZXIvIiwic291cmNlcyI6WyJsaWIvYW5ndWxhci1wb3BwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUlaLFVBQVUsRUFFVixpQkFBaUIsRUFDakIsdUJBQXVCLEVBQ3ZCLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLE1BQU0sTUFBTSxXQUFXLENBQUM7QUFFL0I7SUFvQkUseUJBQW9CLEVBQWMsRUFBVSxJQUFZO1FBQXBDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxTQUFJLEdBQUosSUFBSSxDQUFRO1FBWi9DLFNBQUksR0FBRyxJQUFJLENBQUM7UUFDWixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixjQUFTLEdBQXFCLFFBQVEsQ0FBQztRQUN2QyxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUlwQixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQUlnQixDQUFDOzs7O0lBRTVELHlDQUFlOzs7SUFBZjtRQUNFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUNoQixDQUFDOzs7OztJQUVELHFDQUFXOzs7O0lBQVgsVUFBWSxPQUFzQjtRQUNoQyxJQUNFLE9BQU8sQ0FBQyxNQUFNLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLFdBQVc7WUFDN0MsT0FBTyxDQUFDLFNBQVMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsV0FBVztZQUNuRCxPQUFPLENBQUMsYUFBYSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXO1lBQzNELE9BQU8sQ0FBQyxhQUFhLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFDM0Q7WUFDQSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDZixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7U0FDZjtJQUNILENBQUM7Ozs7SUFFRCxxQ0FBVzs7O0lBQVg7UUFDRSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQzs7OztJQUVELGlDQUFPOzs7SUFBUDtRQUNFLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQzs7OztJQUVELGdDQUFNOzs7SUFBTjtRQUFBLGlCQWVDO1FBZEMsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUI7OztRQUFDO1lBQ3BCLElBQUEsVUFBNkQsRUFBM0Qsd0JBQVMsRUFBRSxnQ0FBYSxFQUFFLGdDQUFhLEVBQUUsd0JBQWtCO1lBRW5FLEtBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxNQUFNLENBQ3RCLEtBQUksQ0FBQyxhQUFhLEVBQUUsRUFDcEIsS0FBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLGlCQUFpQixDQUFDLEVBQ3REO2dCQUNFLFNBQVMsV0FBQTtnQkFDVCxhQUFhLGVBQUE7Z0JBQ2IsYUFBYSxlQUFBO2dCQUNiLFNBQVMsV0FBQTthQUNWLENBQ0YsQ0FBQztRQUNKLENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7OztJQUVELGlDQUFPOzs7SUFBUDtRQUFBLGlCQVFDO1FBUEMsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2YsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUI7OztZQUFDO2dCQUMxQixLQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ3hCLENBQUMsRUFBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7U0FDcEI7SUFDSCxDQUFDOzs7OztJQUVPLHVDQUFhOzs7O0lBQXJCO1FBQ0UsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2YsSUFBSSxPQUFPLElBQUksQ0FBQyxNQUFNLEtBQUssUUFBUSxFQUFFO2dCQUNuQyxPQUFPLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQzVDO2lCQUFNO2dCQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQzthQUNwQjtTQUNGO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQzs7Z0JBcEZGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixxY0FBOEM7b0JBRTlDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7aUJBQ2hEOzs7O2dCQWRDLFVBQVU7Z0JBSVYsTUFBTTs7O3VCQVlMLEtBQUs7OEJBQ0wsS0FBSzs0QkFDTCxLQUFLO2dDQUNMLEtBQUs7Z0NBQ0wsS0FBSzs0QkFDTCxLQUFLO3lCQUNMLEtBQUs7d0JBRUwsTUFBTTs7SUFxRVQsc0JBQUM7Q0FBQSxBQXJGRCxJQXFGQztTQTlFWSxlQUFlOzs7SUFDMUIsK0JBQXFCOztJQUNyQixzQ0FBNkI7O0lBQzdCLG9DQUFnRDs7SUFDaEQsd0NBQStCOztJQUMvQix3Q0FBOEI7O0lBQzlCLG9DQUFxQzs7SUFDckMsaUNBQWtDOztJQUVsQyxnQ0FBMkM7Ozs7O0lBRTNDLGlDQUF1Qjs7Ozs7SUFFWCw2QkFBc0I7Ozs7O0lBQUUsK0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIEFmdGVyVmlld0luaXQsXG4gIE9uRGVzdHJveSxcbiAgT25DaGFuZ2VzLFxuICBFbGVtZW50UmVmLFxuICBTaW1wbGVDaGFuZ2VzLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIE5nWm9uZVxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCBQb3BwZXIgZnJvbSAncG9wcGVyLmpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYW5ndWxhci1wb3BwZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYW5ndWxhci1wb3BwZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hbmd1bGFyLXBvcHBlci5jc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgUG9wcGVyQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBzaG93ID0gdHJ1ZTtcbiAgQElucHV0KCkgY2xvc2VCdXR0b24gPSBmYWxzZTtcbiAgQElucHV0KCkgcGxhY2VtZW50OiBQb3BwZXIuUGxhY2VtZW50ID0gJ2JvdHRvbSc7XG4gIEBJbnB1dCgpIHBvc2l0aW9uRml4ZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgZXZlbnRzRW5hYmxlZCA9IHRydWU7XG4gIEBJbnB1dCgpIG1vZGlmaWVyczogUG9wcGVyLk1vZGlmaWVycztcbiAgQElucHV0KCkgdGFyZ2V0OiBzdHJpbmcgfCBFbGVtZW50O1xuXG4gIEBPdXRwdXQoKSBjbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBwcml2YXRlIHBvcHBlcjogUG9wcGVyO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgem9uZTogTmdab25lKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLmNyZWF0ZSgpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChcbiAgICAgIGNoYW5nZXMudGFyZ2V0ICYmICFjaGFuZ2VzLnRhcmdldC5maXJzdENoYW5nZSB8fFxuICAgICAgY2hhbmdlcy5wbGFjZW1lbnQgJiYgIWNoYW5nZXMucGxhY2VtZW50LmZpcnN0Q2hhbmdlIHx8XG4gICAgICBjaGFuZ2VzLnBvc2l0aW9uRml4ZWQgJiYgIWNoYW5nZXMucG9zaXRpb25GaXhlZC5maXJzdENoYW5nZSB8fFxuICAgICAgY2hhbmdlcy5ldmVudHNFbmFibGVkICYmICFjaGFuZ2VzLmV2ZW50c0VuYWJsZWQuZmlyc3RDaGFuZ2VcbiAgICApIHtcbiAgICAgIHRoaXMuZGVzdHJveSgpO1xuICAgICAgdGhpcy5jcmVhdGUoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3koKTtcbiAgfVxuXG4gIG9uQ2xvc2UoKSB7XG4gICAgdGhpcy5zaG93ID0gZmFsc2U7XG4gICAgdGhpcy5jbG9zZS5lbWl0KCk7XG4gIH1cblxuICBjcmVhdGUoKSB7XG4gICAgdGhpcy56b25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIGNvbnN0IHsgcGxhY2VtZW50LCBwb3NpdGlvbkZpeGVkLCBldmVudHNFbmFibGVkLCBtb2RpZmllcnMgfSA9IHRoaXM7XG5cbiAgICAgIHRoaXMucG9wcGVyID0gbmV3IFBvcHBlcihcbiAgICAgICAgdGhpcy5nZXRUYXJnZXROb2RlKCksXG4gICAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCcuYW5ndWxhci1wb3BwZXInKSxcbiAgICAgICAge1xuICAgICAgICAgIHBsYWNlbWVudCxcbiAgICAgICAgICBwb3NpdGlvbkZpeGVkLFxuICAgICAgICAgIGV2ZW50c0VuYWJsZWQsXG4gICAgICAgICAgbW9kaWZpZXJzXG4gICAgICAgIH1cbiAgICAgICk7XG4gICAgfSk7XG4gIH1cblxuICBkZXN0cm95KCkge1xuICAgIGlmICh0aGlzLnBvcHBlcikge1xuICAgICAgdGhpcy56b25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgICAgdGhpcy5wb3BwZXIuZGVzdHJveSgpO1xuICAgICAgfSk7XG5cbiAgICAgIHRoaXMucG9wcGVyID0gbnVsbDtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGdldFRhcmdldE5vZGUoKTogRWxlbWVudCB7XG4gICAgaWYgKHRoaXMudGFyZ2V0KSB7XG4gICAgICBpZiAodHlwZW9mIHRoaXMudGFyZ2V0ID09PSAnc3RyaW5nJykge1xuICAgICAgICByZXR1cm4gZG9jdW1lbnQucXVlcnlTZWxlY3Rvcih0aGlzLnRhcmdldCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICByZXR1cm4gdGhpcy50YXJnZXQ7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XG4gICAgfVxuICB9XG59XG4iXX0=