UNPKG

angular-popper

Version:

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

1 lines 5.14 kB
{"__symbolic":"module","version":4,"metadata":{"PopperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"angular-popper","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":20,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":21,"character":19},"member":"OnPush"},"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","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}"]}]}],"members":{"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"placement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"positionFixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"eventsEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"modifiers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":36,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":36,"character":52}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"create":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}],"getTargetNode":[{"__symbolic":"method"}]}},"NgxPopper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"PopperComponent"}],"exports":[{"__symbolic":"reference","name":"PopperComponent"}]}]}],"members":{}}},"origins":{"PopperComponent":"./lib/angular-popper.component","NgxPopper":"./lib/angular-popper.module"},"importAs":"angular-popper"}