angular-popper
Version:
Popover component for Angular 2+ based on Popper.js library.
160 lines • 12.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';
export class PopperComponent {
/**
* @param {?} el
* @param {?} zone
*/
constructor(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 {?}
*/
ngAfterViewInit() {
this.create();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(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 {?}
*/
ngOnDestroy() {
this.destroy();
}
/**
* @return {?}
*/
onClose() {
this.show = false;
this.close.emit();
}
/**
* @return {?}
*/
create() {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
const { placement, positionFixed, eventsEnabled, modifiers } = this;
this.popper = new Popper(this.getTargetNode(), this.el.nativeElement.querySelector('.angular-popper'), {
placement,
positionFixed,
eventsEnabled,
modifiers
});
}));
}
/**
* @return {?}
*/
destroy() {
if (this.popper) {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.popper.destroy();
}));
this.popper = null;
}
}
/**
* @private
* @return {?}
*/
getTargetNode() {
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 = () => [
{ 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 }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1wb3BwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYW5ndWxhci1wb3BwZXIvIiwic291cmNlcyI6WyJsaWIvYW5ndWxhci1wb3BwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUlaLFVBQVUsRUFFVixpQkFBaUIsRUFDakIsdUJBQXVCLEVBQ3ZCLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLE1BQU0sTUFBTSxXQUFXLENBQUM7QUFTL0IsTUFBTSxPQUFPLGVBQWU7Ozs7O0lBYTFCLFlBQW9CLEVBQWMsRUFBVSxJQUFZO1FBQXBDLE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxTQUFJLEdBQUosSUFBSSxDQUFRO1FBWi9DLFNBQUksR0FBRyxJQUFJLENBQUM7UUFDWixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixjQUFTLEdBQXFCLFFBQVEsQ0FBQztRQUN2QyxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUlwQixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztJQUlnQixDQUFDOzs7O0lBRTVELGVBQWU7UUFDYixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDaEIsQ0FBQzs7Ozs7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFDRSxPQUFPLENBQUMsTUFBTSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxXQUFXO1lBQzdDLE9BQU8sQ0FBQyxTQUFTLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFdBQVc7WUFDbkQsT0FBTyxDQUFDLGFBQWEsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsV0FBVztZQUMzRCxPQUFPLENBQUMsYUFBYSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQzNEO1lBQ0EsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ2Y7SUFDSCxDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDOzs7O0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQzs7OztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLGlCQUFpQjs7O1FBQUMsR0FBRyxFQUFFO2tCQUN6QixFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsYUFBYSxFQUFFLFNBQVMsRUFBRSxHQUFHLElBQUk7WUFFbkUsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLE1BQU0sQ0FDdEIsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUNwQixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsaUJBQWlCLENBQUMsRUFDdEQ7Z0JBQ0UsU0FBUztnQkFDVCxhQUFhO2dCQUNiLGFBQWE7Z0JBQ2IsU0FBUzthQUNWLENBQ0YsQ0FBQztRQUNKLENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7OztJQUVELE9BQU87UUFDTCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLGlCQUFpQjs7O1lBQUMsR0FBRyxFQUFFO2dCQUMvQixJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ3hCLENBQUMsRUFBQyxDQUFDO1lBRUgsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7U0FDcEI7SUFDSCxDQUFDOzs7OztJQUVPLGFBQWE7UUFDbkIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2YsSUFBSSxPQUFPLElBQUksQ0FBQyxNQUFNLEtBQUssUUFBUSxFQUFFO2dCQUNuQyxPQUFPLFFBQVEsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQzVDO2lCQUFNO2dCQUNMLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQzthQUNwQjtTQUNGO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDO1NBQzlCO0lBQ0gsQ0FBQzs7O1lBcEZGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO2dCQUMxQixxY0FBOEM7Z0JBRTlDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2dCQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDaEQ7Ozs7WUFkQyxVQUFVO1lBSVYsTUFBTTs7O21CQVlMLEtBQUs7MEJBQ0wsS0FBSzt3QkFDTCxLQUFLOzRCQUNMLEtBQUs7NEJBQ0wsS0FBSzt3QkFDTCxLQUFLO3FCQUNMLEtBQUs7b0JBRUwsTUFBTTs7OztJQVJQLCtCQUFxQjs7SUFDckIsc0NBQTZCOztJQUM3QixvQ0FBZ0Q7O0lBQ2hELHdDQUErQjs7SUFDL0Isd0NBQThCOztJQUM5QixvQ0FBcUM7O0lBQ3JDLGlDQUFrQzs7SUFFbEMsZ0NBQTJDOzs7OztJQUUzQyxpQ0FBdUI7Ozs7O0lBRVgsNkJBQXNCOzs7OztJQUFFLCtCQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBBZnRlclZpZXdJbml0LFxuICBPbkRlc3Ryb3ksXG4gIE9uQ2hhbmdlcyxcbiAgRWxlbWVudFJlZixcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBOZ1pvbmVcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgUG9wcGVyIGZyb20gJ3BvcHBlci5qcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FuZ3VsYXItcG9wcGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FuZ3VsYXItcG9wcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYW5ndWxhci1wb3BwZXIuY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFBvcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgQElucHV0KCkgc2hvdyA9IHRydWU7XG4gIEBJbnB1dCgpIGNsb3NlQnV0dG9uID0gZmFsc2U7XG4gIEBJbnB1dCgpIHBsYWNlbWVudDogUG9wcGVyLlBsYWNlbWVudCA9ICdib3R0b20nO1xuICBASW5wdXQoKSBwb3NpdGlvbkZpeGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGV2ZW50c0VuYWJsZWQgPSB0cnVlO1xuICBASW5wdXQoKSBtb2RpZmllcnM6IFBvcHBlci5Nb2RpZmllcnM7XG4gIEBJbnB1dCgpIHRhcmdldDogc3RyaW5nIHwgRWxlbWVudDtcblxuICBAT3V0cHV0KCkgY2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBwb3BwZXI6IFBvcHBlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHpvbmU6IE5nWm9uZSkge31cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5jcmVhdGUoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoXG4gICAgICBjaGFuZ2VzLnRhcmdldCAmJiAhY2hhbmdlcy50YXJnZXQuZmlyc3RDaGFuZ2UgfHxcbiAgICAgIGNoYW5nZXMucGxhY2VtZW50ICYmICFjaGFuZ2VzLnBsYWNlbWVudC5maXJzdENoYW5nZSB8fFxuICAgICAgY2hhbmdlcy5wb3NpdGlvbkZpeGVkICYmICFjaGFuZ2VzLnBvc2l0aW9uRml4ZWQuZmlyc3RDaGFuZ2UgfHxcbiAgICAgIGNoYW5nZXMuZXZlbnRzRW5hYmxlZCAmJiAhY2hhbmdlcy5ldmVudHNFbmFibGVkLmZpcnN0Q2hhbmdlXG4gICAgKSB7XG4gICAgICB0aGlzLmRlc3Ryb3koKTtcbiAgICAgIHRoaXMuY3JlYXRlKCk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5kZXN0cm95KCk7XG4gIH1cblxuICBvbkNsb3NlKCkge1xuICAgIHRoaXMuc2hvdyA9IGZhbHNlO1xuICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xuICB9XG5cbiAgY3JlYXRlKCkge1xuICAgIHRoaXMuem9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICBjb25zdCB7IHBsYWNlbWVudCwgcG9zaXRpb25GaXhlZCwgZXZlbnRzRW5hYmxlZCwgbW9kaWZpZXJzIH0gPSB0aGlzO1xuXG4gICAgICB0aGlzLnBvcHBlciA9IG5ldyBQb3BwZXIoXG4gICAgICAgIHRoaXMuZ2V0VGFyZ2V0Tm9kZSgpLFxuICAgICAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQucXVlcnlTZWxlY3RvcignLmFuZ3VsYXItcG9wcGVyJyksXG4gICAgICAgIHtcbiAgICAgICAgICBwbGFjZW1lbnQsXG4gICAgICAgICAgcG9zaXRpb25GaXhlZCxcbiAgICAgICAgICBldmVudHNFbmFibGVkLFxuICAgICAgICAgIG1vZGlmaWVyc1xuICAgICAgICB9XG4gICAgICApO1xuICAgIH0pO1xuICB9XG5cbiAgZGVzdHJveSgpIHtcbiAgICBpZiAodGhpcy5wb3BwZXIpIHtcbiAgICAgIHRoaXMuem9uZS5ydW5PdXRzaWRlQW5ndWxhcigoKSA9PiB7XG4gICAgICAgIHRoaXMucG9wcGVyLmRlc3Ryb3koKTtcbiAgICAgIH0pO1xuXG4gICAgICB0aGlzLnBvcHBlciA9IG51bGw7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBnZXRUYXJnZXROb2RlKCk6IEVsZW1lbnQge1xuICAgIGlmICh0aGlzLnRhcmdldCkge1xuICAgICAgaWYgKHR5cGVvZiB0aGlzLnRhcmdldCA9PT0gJ3N0cmluZycpIHtcbiAgICAgICAgcmV0dXJuIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IodGhpcy50YXJnZXQpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMudGFyZ2V0O1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xuICAgIH1cbiAgfVxufVxuIl19