@ciri/ngx-popup
Version:
An angular popup component that can customize animation.
164 lines • 11.4 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';
export class OverlayComponent {
/**
* @param {?} animation
* @param {?} cdr
*/
constructor(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();
}
/**
* @param {?} value
* @return {?}
*/
set visible(value) {
this.animationSub && this.animationSub.unsubscribe();
if (value) {
this._visible = true;
this.cdr.detectChanges();
this.animationSub = this.makeAnimation('enter')
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => { }));
}
else {
this.animationSub = this.makeAnimation('leave')
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @return {?}
*/
() => {
this._visible = false;
this.cdr.detectChanges();
this.afterClose.emit();
}));
}
}
/**
* @return {?}
*/
get visible() {
return this._visible;
}
/**
* @return {?}
*/
get styles() {
return {
'z-index': this.zIndex,
'background': `rgba(0, 0, 0, ${this.opacity})`,
};
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* @return {?}
*/
onClick() {
this.clickOverlay.emit();
}
/**
* @param {?} state
* @return {?}
*/
makeAnimation(state) {
/** @type {?} */
const isEnter = state === 'enter';
/** @type {?} */
const el = this.container.nativeElement;
/** @type {?} */
const 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 = () => [
{ 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 },] }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AY2lyaS9uZ3gtcG9wdXAvIiwic291cmNlcyI6WyJsaWIvb3ZlcmxheS9vdmVybGF5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUdMLE1BQU0sRUFDTixTQUFTLEVBQ1QsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFBO0FBQ3RCLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDcEQsT0FBTyxFQUFjLE9BQU8sRUFBZ0IsTUFBTSxNQUFNLENBQUE7QUFDeEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFBO0FBQzFDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBU3ZELE1BQU0sT0FBTyxnQkFBZ0I7Ozs7O0lBMEMzQixZQUFvQixTQUEyQixFQUFVLEdBQXNCO1FBQTNELGNBQVMsR0FBVCxTQUFTLENBQWtCO1FBQVUsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUF4Q3RFLFlBQU8sR0FBVyxHQUFHLENBQUE7UUF3QnBCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtRQUN0QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQTtRQVd0QyxhQUFRLEdBQUcsS0FBSyxDQUFBO1FBQ2hCLGFBQVEsR0FBRyxJQUFJLE9BQU8sRUFBTyxDQUFBO0lBRzZDLENBQUM7Ozs7O0lBdkNuRixJQUNJLE9BQU8sQ0FBQyxLQUFjO1FBQ3hCLElBQUksQ0FBQyxZQUFZLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQTtRQUNwRCxJQUFJLEtBQUssRUFBRTtZQUNULElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFBO1lBQ3BCLElBQUks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ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQgeyBhbmltYXRlLCBzdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnXG5pbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJqZWN0LCBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJ1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnXG5pbXBvcnQgeyBBbmltYXRpb25TZXJ2aWNlIH0gZnJvbSAnLi4vYW5pbWF0aW9uLnNlcnZpY2UnXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3BvcHVwLW92ZXJsYXknLFxuICB0ZW1wbGF0ZVVybDogJy4vb3ZlcmxheS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL292ZXJsYXkuY29tcG9uZW50Lmxlc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE92ZXJsYXlDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIHpJbmRleDogbnVtYmVyXG4gIEBJbnB1dCgpIG9wYWNpdHk6IG51bWJlciA9IDAuNVxuICBASW5wdXQoKVxuICBzZXQgdmlzaWJsZSh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuYW5pbWF0aW9uU3ViICYmIHRoaXMuYW5pbWF0aW9uU3ViLnVuc3Vic2NyaWJlKClcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMuX3Zpc2libGUgPSB0cnVlXG4gICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKClcbiAgICAgIHRoaXMuYW5pbWF0aW9uU3ViID0gdGhpcy5tYWtlQW5pbWF0aW9uKCdlbnRlcicpXG4gICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLmRlc3Ryb3kkKSlcbiAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB7fSlcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5hbmltYXRpb25TdWIgPSB0aGlzLm1ha2VBbmltYXRpb24oJ2xlYXZlJylcbiAgICAgICAgLnBpcGUodGFrZVVudGlsKHRoaXMuZGVzdHJveSQpKVxuICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICB0aGlzLl92aXNpYmxlID0gZmFsc2VcbiAgICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKClcbiAgICAgICAgICB0aGlzLmFmdGVyQ2xvc2UuZW1pdCgpXG4gICAgICAgIH0pXG4gICAgfVxuICB9XG4gIGdldCB2aXNpYmxlKCkge1xuICAgIHJldHVybiB0aGlzLl92aXNpYmxlXG4gIH1cblxuICBAT3V0cHV0KCkgY2xpY2tPdmVybGF5ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KClcbiAgQE91dHB1dCgpIGFmdGVyQ2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKVxuXG4gIEBWaWV3Q2hpbGQoJ2NvbnRhaW5lcicsIHsgc3RhdGljOiBmYWxzZSB9KSBwcml2YXRlIGNvbnRhaW5lclxuXG4gIGdldCBzdHlsZXMoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgICd6LWluZGV4JzogdGhpcy56SW5kZXgsXG4gICAgICAnYmFja2dyb3VuZCc6IGByZ2JhKDAsIDAsIDAsICR7dGhpcy5vcGFjaXR5fSlgLFxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgX3Zpc2libGUgPSBmYWxzZVxuICBwcml2YXRlIGRlc3Ryb3kkID0gbmV3IFN1YmplY3Q8YW55PigpXG4gIHByaXZhdGUgYW5pbWF0aW9uU3ViOiBTdWJzY3JpcHRpb25cblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGFuaW1hdGlvbjogQW5pbWF0aW9uU2VydmljZSwgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nT25Jbml0KCkge31cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmRlc3Ryb3kkLm5leHQoKVxuICAgIHRoaXMuZGVzdHJveSQuY29tcGxldGUoKVxuICB9XG5cbiAgb25DbGljaygpIHtcbiAgICB0aGlzLmNsaWNrT3ZlcmxheS5lbWl0KClcbiAgfVxuXG4gIG1ha2VBbmltYXRpb24oc3RhdGUpOiBPYnNlcnZhYmxlPGFueT4ge1xuICAgIGNvbnN0IGlzRW50ZXIgPSBzdGF0ZSA9PT0gJ2VudGVyJ1xuICAgIGNvbnN0IGVsID0gdGhpcy5jb250YWluZXIubmF0aXZlRWxlbWVudFxuICAgIGNvbnN0IGFuaW1hdGlvbiA9IGlzRW50ZXJcbiAgICAgID8gW3N0eWxlKHsgb3BhY2l0eTogMCB9KSwgYW5pbWF0ZSgnLjNzIGVhc2UnLCBzdHlsZSh7IG9wYWNpdHk6IDEgfSkpXVxuICAgICAgOiBbc3R5bGUoeyBvcGFjaXR5OiAxIH0pLCBhbmltYXRlKCcuM3MgZWFzZScsIHN0eWxlKHsgb3BhY2l0eTogMCB9KSldXG5cbiAgICByZXR1cm4gdGhpcy5hbmltYXRpb24ubWFrZUFuaW1hdGlvbihlbCwgYW5pbWF0aW9uKVxuICB9XG59XG4iXX0=