UNPKG

angular-popper

Version:

Popover component for Angular 2+ based on Popper.js library.

2 lines 4.27 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("popper.js"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular-popper",["exports","popper.js","@angular/core","@angular/common"],e):e(t["angular-popper"]={},t.Popper,t.ng.core,t.ng.common)}(this,function(t,a,o,e){"use strict";a=a&&a.hasOwnProperty("default")?a["default"]:a;var r=function(){function t(t,e){this.el=t,this.zone=e,this.show=!0,this.closeButton=!1,this.placement="bottom",this.positionFixed=!1,this.eventsEnabled=!0,this.close=new o.EventEmitter}return t.prototype.ngAfterViewInit=function(){this.create()},t.prototype.ngOnChanges=function(t){(t.target&&!t.target.firstChange||t.placement&&!t.placement.firstChange||t.positionFixed&&!t.positionFixed.firstChange||t.eventsEnabled&&!t.eventsEnabled.firstChange)&&(this.destroy(),this.create())},t.prototype.ngOnDestroy=function(){this.destroy()},t.prototype.onClose=function(){this.show=!1,this.close.emit()},t.prototype.create=function(){var p=this;this.zone.runOutsideAngular(function(){var t=p,e=t.placement,o=t.positionFixed,r=t.eventsEnabled,n=t.modifiers;p.popper=new a(p.getTargetNode(),p.el.nativeElement.querySelector(".angular-popper"),{placement:e,positionFixed:o,eventsEnabled:r,modifiers:n})})},t.prototype.destroy=function(){var t=this;this.popper&&(this.zone.runOutsideAngular(function(){t.popper.destroy()}),this.popper=null)},t.prototype.getTargetNode=function(){return this.target?"string"==typeof this.target?document.querySelector(this.target):this.target:this.el.nativeElement},t.decorators=[{type:o.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:o.ViewEncapsulation.None,changeDetection:o.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}"]}]}],t.ctorParameters=function(){return[{type:o.ElementRef},{type:o.NgZone}]},t.propDecorators={show:[{type:o.Input}],closeButton:[{type:o.Input}],placement:[{type:o.Input}],positionFixed:[{type:o.Input}],eventsEnabled:[{type:o.Input}],modifiers:[{type:o.Input}],target:[{type:o.Input}],close:[{type:o.Output}]},t}(),n=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{imports:[e.CommonModule],declarations:[r],exports:[r]}]}],t}();t.PopperComponent=r,t.NgxPopper=n,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=angular-popper.umd.min.js.map