ngx-animations/esm2015/lib/directives/if-animation.directive.js

An adaptation of Animate.css using @angular/animations

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';
import { AnimationsService } from '../services/animations.service';
import { timer } from 'rxjs';
export class AnimIfDirective {
    constructor(templateRef, viewContainer, _animationsService) {
        this.templateRef = templateRef;
        this.viewContainer = viewContainer;
        this._animationsService = _animationsService;
        this.shownBefore = false;
    }
    set animIf(show) {
        this.show = show;
        this._animIfDirty = true;
    }
    /**
     * Applies the changes when needed.
     */
    ngDoCheck() {
        if (this._animIfDirty) {
            this._animIfDirty = false;
            if (this.subscription) {
                this.subscription.unsubscribe();
            }
            if (this.show && !this.shownBefore) {
                this.viewContainer.clear();
                this.viewContainer.createEmbeddedView(this.templateRef);
                const player = this.createPlayer(this.animIfInfo.startAnim, this.animIfInfo.time);
                player.play();
                this.shownBefore = true;
            }
            if (!this.show && this.shownBefore) {
                const player = this.createPlayer(this.animIfInfo.endAnim, this.animIfInfo.time);
                player.play();
                this.clearAfterTime(this.viewContainer, this.animIfInfo.time);
                this.shownBefore = false;
            }
        }
    }
    createPlayer(animation, time) {
        return this._animationsService.create(this._animationsService.animations[animation](time), this.viewContainer.get(0).rootNodes[0]);
    }
    clearAfterTime(viewContainer, time) {
        this.subscription = timer(time).subscribe(() => {
            viewContainer.clear();
        });
    }
}
AnimIfDirective.decorators = [
    { type: Directive, args: [{
                selector: '[animIf]'
            },] }
];
AnimIfDirective.ctorParameters = () => [
    { type: TemplateRef },
    { type: ViewContainerRef },
    { type: AnimationsService }
];
AnimIfDirective.propDecorators = {
    animIfInfo: [{ type: Input }],
    animIf: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWYtYW5pbWF0aW9uLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi9saWJzL25neC1hbmltYXRpb25zL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9kaXJlY3RpdmVzL2lmLWFuaW1hdGlvbi5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsV0FBVyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUMxRyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBSzdCLE1BQU0sT0FBTyxlQUFlO0lBTzFCLFlBQ1UsV0FBNkIsRUFDN0IsYUFBK0IsRUFDL0Isa0JBQXFDO1FBRnJDLGdCQUFXLEdBQVgsV0FBVyxDQUFrQjtRQUM3QixrQkFBYSxHQUFiLGFBQWEsQ0FBa0I7UUFDL0IsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQVIvQyxnQkFBVyxHQUFHLEtBQUssQ0FBQztJQVNqQixDQUFDO0lBRUosSUFDSSxNQUFNLENBQUMsSUFBYTtRQUN0QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQ7O09BRUc7SUFDSCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ3JCLElBQUksQ0FBQyxZQUFZLEdBQUcsS0FBSyxDQUFDO1lBQzFCLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtnQkFDckIsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQzthQUNqQztZQUNELElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7Z0JBQ2xDLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7Z0JBQzNCLElBQUksQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUN4RCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2xGLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztnQkFDZCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQzthQUN6QjtZQUNELElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7Z0JBQ2xDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDaEYsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO2dCQUNkLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUM5RCxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQzthQUMxQjtTQUNGO0lBQ0gsQ0FBQztJQUVPLFlBQVksQ0FBQyxTQUFpQixFQUFFLElBQVk7UUFDbEQsT0FBTyxJQUFJLENBQUMsa0JBQWtCLENBQUMsTUFBTSxDQUNuQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUNsRCxJQUFJLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQTBCLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUNqRSxDQUFDO0lBQ0osQ0FBQztJQUVPLGNBQWMsQ0FBQyxhQUErQixFQUFFLElBQVk7UUFDbEUsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUM3QyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDeEIsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzs7WUExREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxVQUFVO2FBQ3JCOzs7WUFONEMsV0FBVztZQUE3QixnQkFBZ0I7WUFDbEMsaUJBQWlCOzs7eUJBT3ZCLEtBQUs7cUJBWUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIFZpZXdDb250YWluZXJSZWYsIFRlbXBsYXRlUmVmLCBFbWJlZGRlZFZpZXdSZWYsIERvQ2hlY2sgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQW5pbWF0aW9uc1NlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9hbmltYXRpb25zLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyB0aW1lciB9IGZyb20gJ3J4anMnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbYW5pbUlmXSdcclxufSlcclxuZXhwb3J0IGNsYXNzIEFuaW1JZkRpcmVjdGl2ZSBpbXBsZW1lbnRzIERvQ2hlY2sge1xyXG4gIEBJbnB1dCgpIGFuaW1JZkluZm86IHsgc3RhcnRBbmltOiBzdHJpbmc7IGVuZEFuaW06IHN0cmluZzsgdGltZTogbnVtYmVyIH07XHJcbiAgc2hvd25CZWZvcmUgPSBmYWxzZTtcclxuICBzdWJzY3JpcHRpb247XHJcbiAgc2hvdztcclxuICBfYW5pbUlmRGlydHk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSB0ZW1wbGF0ZVJlZjogVGVtcGxhdGVSZWY8YW55PixcclxuICAgIHByaXZhdGUgdmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZixcclxuICAgIHByaXZhdGUgX2FuaW1hdGlvbnNTZXJ2aWNlOiBBbmltYXRpb25zU2VydmljZVxyXG4gICkge31cclxuXHJcbiAgQElucHV0KClcclxuICBzZXQgYW5pbUlmKHNob3c6IGJvb2xlYW4pIHtcclxuICAgIHRoaXMuc2hvdyA9IHNob3c7XHJcbiAgICB0aGlzLl9hbmltSWZEaXJ0eSA9IHRydWU7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBBcHBsaWVzIHRoZSBjaGFuZ2VzIHdoZW4gbmVlZGVkLlxyXG4gICAqL1xyXG4gIG5nRG9DaGVjaygpIHtcclxuICAgIGlmICh0aGlzLl9hbmltSWZEaXJ0eSkge1xyXG4gICAgICB0aGlzLl9hbmltSWZEaXJ0eSA9IGZhbHNlO1xyXG4gICAgICBpZiAodGhpcy5zdWJzY3JpcHRpb24pIHtcclxuICAgICAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xyXG4gICAgICB9XHJcbiAgICAgIGlmICh0aGlzLnNob3cgJiYgIXRoaXMuc2hvd25CZWZvcmUpIHtcclxuICAgICAgICB0aGlzLnZpZXdDb250YWluZXIuY2xlYXIoKTtcclxuICAgICAgICB0aGlzLnZpZXdDb250YWluZXIuY3JlYXRlRW1iZWRkZWRWaWV3KHRoaXMudGVtcGxhdGVSZWYpO1xyXG4gICAgICAgIGNvbnN0IHBsYXllciA9IHRoaXMuY3JlYXRlUGxheWVyKHRoaXMuYW5pbUlmSW5mby5zdGFydEFuaW0sIHRoaXMuYW5pbUlmSW5mby50aW1lKTtcclxuICAgICAgICBwbGF5ZXIucGxheSgpO1xyXG4gICAgICAgIHRoaXMuc2hvd25CZWZvcmUgPSB0cnVlO1xyXG4gICAgICB9XHJcbiAgICAgIGlmICghdGhpcy5zaG93ICYmIHRoaXMuc2hvd25CZWZvcmUpIHtcclxuICAgICAgICBjb25zdCBwbGF5ZXIgPSB0aGlzLmNyZWF0ZVBsYXllcih0aGlzLmFuaW1JZkluZm8uZW5kQW5pbSwgdGhpcy5hbmltSWZJbmZvLnRpbWUpO1xyXG4gICAgICAgIHBsYXllci5wbGF5KCk7XHJcbiAgICAgICAgdGhpcy5jbGVhckFmdGVyVGltZSh0aGlzLnZpZXdDb250YWluZXIsIHRoaXMuYW5pbUlmSW5mby50aW1lKTtcclxuICAgICAgICB0aGlzLnNob3duQmVmb3JlID0gZmFsc2U7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgY3JlYXRlUGxheWVyKGFuaW1hdGlvbjogc3RyaW5nLCB0aW1lOiBudW1iZXIpIHtcclxuICAgIHJldHVybiB0aGlzLl9hbmltYXRpb25zU2VydmljZS5jcmVhdGUoXHJcbiAgICAgIHRoaXMuX2FuaW1hdGlvbnNTZXJ2aWNlLmFuaW1hdGlvbnNbYW5pbWF0aW9uXSh0aW1lKSxcclxuICAgICAgKHRoaXMudmlld0NvbnRhaW5lci5nZXQoMCkgYXMgRW1iZWRkZWRWaWV3UmVmPGFueT4pLnJvb3ROb2Rlc1swXVxyXG4gICAgKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY2xlYXJBZnRlclRpbWUodmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZiwgdGltZTogbnVtYmVyKSB7XHJcbiAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRpbWVyKHRpbWUpLnN1YnNjcmliZSgoKSA9PiB7XHJcbiAgICAgIHZpZXdDb250YWluZXIuY2xlYXIoKTtcclxuICAgIH0pO1xyXG4gIH1cclxufVxyXG4iXX0=