angular-popper/fesm2015/angular-popper.js

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

import Popper from 'popper.js';
import { Component, Input, Output, EventEmitter, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, NgZone, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
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 }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class NgxPopper {
}
NgxPopper.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                declarations: [
                    PopperComponent
                ],
                exports: [
                    PopperComponent
                ]
            },] }
];

/**
 * @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
 */

export { PopperComponent, NgxPopper };

//# sourceMappingURL=angular-popper.js.map