@ciri/ngx-popup
Version:
An angular popup component that can customize animation.
184 lines • 12.5 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/overlay/overlay.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation, } from '@angular/core';
import { animate, style } from '@angular/animations';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AnimationService } from '../animation.service';
var OverlayComponent = /** @class */ (function () {
function OverlayComponent(animation, cdr) {
this.animation = animation;
this.cdr = cdr;
this.opacity = 0.5;
this.clickOverlay = new EventEmitter();
this.afterClose = new EventEmitter();
this._visible = false;
this.destroy$ = new Subject();
}
Object.defineProperty(OverlayComponent.prototype, "visible", {
get: /**
* @return {?}
*/
function () {
return this._visible;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
this.animationSub && this.animationSub.unsubscribe();
if (value) {
this._visible = true;
this.cdr.detectChanges();
this.animationSub = this.makeAnimation('enter')
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () { }));
}
else {
this.animationSub = this.makeAnimation('leave')
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
function () {
_this._visible = false;
_this.cdr.detectChanges();
_this.afterClose.emit();
}));
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(OverlayComponent.prototype, "styles", {
get: /**
* @return {?}
*/
function () {
return {
'z-index': this.zIndex,
'background': "rgba(0, 0, 0, " + this.opacity + ")",
};
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
OverlayComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
OverlayComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy$.next();
this.destroy$.complete();
};
/**
* @return {?}
*/
OverlayComponent.prototype.onClick = /**
* @return {?}
*/
function () {
this.clickOverlay.emit();
};
/**
* @param {?} state
* @return {?}
*/
OverlayComponent.prototype.makeAnimation = /**
* @param {?} state
* @return {?}
*/
function (state) {
/** @type {?} */
var isEnter = state === 'enter';
/** @type {?} */
var el = this.container.nativeElement;
/** @type {?} */
var animation = isEnter
? [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]
: [style({ opacity: 1 }), animate('.3s ease', style({ opacity: 0 }))];
return this.animation.makeAnimation(el, animation);
};
OverlayComponent.decorators = [
{ type: Component, args: [{
selector: 'popup-overlay',
template: "<div\n class=\"overlay\"\n #container\n [hidden]=\"!visible\"\n [ngStyle]=\"styles\"\n (click)=\"onClick()\"\n></div>\n",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".overlay{position:fixed;top:0;right:0;bottom:0;left:0}"]
}] }
];
/** @nocollapse */
OverlayComponent.ctorParameters = function () { return [
{ type: AnimationService },
{ type: ChangeDetectorRef }
]; };
OverlayComponent.propDecorators = {
zIndex: [{ type: Input }],
opacity: [{ type: Input }],
visible: [{ type: Input }],
clickOverlay: [{ type: Output }],
afterClose: [{ type: Output }],
container: [{ type: ViewChild, args: ['container', { static: false },] }]
};
return OverlayComponent;
}());
export { OverlayComponent };
if (false) {
/** @type {?} */
OverlayComponent.prototype.zIndex;
/** @type {?} */
OverlayComponent.prototype.opacity;
/** @type {?} */
OverlayComponent.prototype.clickOverlay;
/** @type {?} */
OverlayComponent.prototype.afterClose;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype.container;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype._visible;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype.destroy$;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype.animationSub;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype.animation;
/**
* @type {?}
* @private
*/
OverlayComponent.prototype.cdr;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AY2lyaS9uZ3gtcG9wdXAvIiwic291cmNlcyI6WyJsaWIvb3ZlcmxheS9vdmVybGF5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUdMLE1BQU0sRUFDTixTQUFTLEVBQ1QsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFBO0FBQ3RCLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDcEQsT0FBTyxFQUFjLE9BQU8sRUFBZ0IsTUFBTSxNQUFNLENBQUE7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFBO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBRXZEO0lBaURFLDBCQUFvQixTQUEyQixFQUFVLEdBQXNCO1FBQTNELGNBQVMsR0FBVCxTQUFTLENBQWtCO1FBQVUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUF4Q3RFLFlBQU8sR0FBVyxHQUFHLENBQUE7UUF3QnBCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtRQUN0QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtRQVd0QyxhQUFRLEdBQUcsS0FBSyxDQUFBO1FBQ2hCLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBTyxDQUFBO0lBRzZDLENBQUM7SUF2Q25GLHNCQUNJLHFDQUFPOzs7O1FBa0JYO1lBQ0UsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFBO1FBQ3RCLENBQUM7Ozs7O1FBckJELFVBQ1ksS0FBYztZQUQxQixpQkFrQkM7WUFoQkMsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFBO1lBQ3BELElBQUksS0FBSyxF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Q0FBa0M7Ozs7O0lBRXRCLHFDQUFtQzs7Ozs7SUFBRSwrQkFBOEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7IGFuaW1hdGUsIHN0eWxlIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucydcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YmplY3QsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnXG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycydcbmltcG9ydCB7IEFuaW1hdGlvblNlcnZpY2UgfSBmcm9tICcuLi9hbmltYXRpb24uc2VydmljZSdcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncG9wdXAtb3ZlcmxheScsXG4gIHRlbXBsYXRlVXJsOiAnLi9vdmVybGF5LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vb3ZlcmxheS5jb21wb25lbnQubGVzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgT3ZlcmxheUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgekluZGV4OiBudW1iZXJcbiAgQElucHV0KCkgb3BhY2l0eTogbnVtYmVyID0gMC41XG4gIEBJbnB1dCgpXG4gIHNldCB2aXNpYmxlKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5hbmltYXRpb25TdWIgJiYgdGhpcy5hbmltYXRpb25TdWIudW5zdWJzY3JpYmUoKVxuICAgIGlmICh2YWx1ZSkge1xuICAgICAgdGhpcy5fdmlzaWJsZSA9IHRydWVcbiAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKVxuICAgICAgdGhpcy5hbmltYXRpb25TdWIgPSB0aGlzLm1ha2VBbmltYXRpb24oJ2VudGVyJylcbiAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHt9KVxuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmFuaW1hdGlvblN1YiA9IHRoaXMubWFrZUFuaW1hdGlvbignbGVhdmUnKVxuICAgICAgICAucGlwZSh0YWtlVW50aWwodGhpcy5kZXN0cm95JCkpXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgIHRoaXMuX3Zpc2libGUgPSBmYWxzZVxuICAgICAgICAgIHRoaXMuY2RyLmRldGVjdENoYW5nZXMoKVxuICAgICAgICAgIHRoaXMuYWZ0ZXJDbG9zZS5lbWl0KClcbiAgICAgICAgfSlcbiAgICB9XG4gIH1cbiAgZ2V0IHZpc2libGUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3Zpc2libGVcbiAgfVxuXG4gIEBPdXRwdXQoKSBjbGlja092ZXJsYXkgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKVxuICBAT3V0cHV0KCkgYWZ0ZXJDbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpXG5cbiAgQFZpZXdDaGlsZCgnY29udGFpbmVyJywgeyBzdGF0aWM6IGZhbHNlIH0pIHByaXZhdGUgY29udGFpbmVyXG5cbiAgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJ3otaW5kZXgnOiB0aGlzLnpJbmRleCxcbiAgICAgICdiYWNrZ3JvdW5kJzogYHJnYmEoMCwgMCwgMCwgJHt0aGlzLm9wYWNpdHl9KWAsXG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfdmlzaWJsZSA9IGZhbHNlXG4gIHByaXZhdGUgZGVzdHJveSQgPSBuZXcgU3ViamVjdDxhbnk+KClcbiAgcHJpdmF0ZSBhbmltYXRpb25TdWI6IFN1YnNjcmlwdGlvblxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYW5pbWF0aW9uOiBBbmltYXRpb25TZXJ2aWNlLCBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuZGVzdHJveSQubmV4dCgpXG4gICAgdGhpcy5kZXN0cm95JC5jb21wbGV0ZSgpXG4gIH1cblxuICBvbkNsaWNrKCkge1xuICAgIHRoaXMuY2xpY2tPdmVybGF5LmVtaXQoKVxuICB9XG5cbiAgbWFrZUFuaW1hdGlvbihzdGF0ZSk6IE9ic2VydmFibGU8YW55PiB7XG4gICAgY29uc3QgaXNFbnRlciA9IHN0YXRlID09PSAnZW50ZXInXG4gICAgY29uc3QgZWwgPSB0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50XG4gICAgY29uc3QgYW5pbWF0aW9uID0gaXNFbnRlclxuICAgICAgPyBbc3R5bGUoeyBvcGFjaXR5OiAwIH0pLCBhbmltYXRlKCcuM3MgZWFzZScsIHN0eWxlKHsgb3BhY2l0eTogMSB9KSldXG4gICAgICA6IFtzdHlsZSh7IG9wYWNpdHk6IDEgfSksIGFuaW1hdGUoJy4zcyBlYXNlJywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pKV1cblxuICAgIHJldHVybiB0aGlzLmFuaW1hdGlvbi5tYWtlQW5pbWF0aW9uKGVsLCBhbmltYXRpb24pXG4gIH1cbn1cbiJdfQ==