css-animator/angular/animates.directive.js

Animate elements using CSS classes with support for Angular 2+

import { Directive, Inject, ElementRef } from '@angular/core';
import { AnimationService } from './animation.service';
import * as i0 from "@angular/core";
import * as i1 from "./animation.service";
var AnimatesDirective = /** @class */ (function () {
    function AnimatesDirective(_elementRef, animationService) {
        this._elementRef = _elementRef;
        this._animationBuilder = animationService.builder();
    }
    Object.defineProperty(AnimatesDirective.prototype, "animates", {
        set: function (options) {
            this._defaultOptions = options;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(AnimatesDirective.prototype, "animatesOnInit", {
        set: function (options) {
            this._initOptions = options;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(AnimatesDirective.prototype, "animatesInitMode", {
        set: function (mode) {
            if (typeof mode === 'string') {
                this._initMode = mode.toLowerCase();
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(AnimatesDirective.prototype, "animationBuilder", {
        get: function () {
            return this._animationBuilder;
        },
        enumerable: false,
        configurable: true
    });
    AnimatesDirective.prototype.ngOnInit = function () {
        if (!this._initOptions) {
            return;
        }
        var promise;
        var builder = this._animationBuilder
            .setOptions(this._initOptions);
        switch (this._initMode) {
            case 'show':
                promise = builder.show(this._elementRef.nativeElement);
                break;
            case 'hide':
                promise = builder.hide(this._elementRef.nativeElement);
                break;
            default:
                promise = builder.animate(this._elementRef.nativeElement);
        }
        promise.then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.start = function (options) {
        this._started = true;
        this.setOptions(options);
        return this._animationBuilder
            .animate(this._elementRef.nativeElement)
            .then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.hide = function (options) {
        this.setOptions(options);
        return this._animationBuilder
            .setOptions(options)
            .hide(this._elementRef.nativeElement)
            .then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.show = function (options) {
        this.setOptions(options);
        return this._animationBuilder
            .show(this._elementRef.nativeElement)
            .then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.animate = function (options) {
        this.setOptions(options);
        return this._animationBuilder
            .setOptions(this._defaultOptions)
            .animate(this._elementRef.nativeElement)
            .then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.pause = function () {
        if (!this._started)
            return;
        this._animationBuilder
            .setPlayState('paused')
            .applyPlayState(this._elementRef.nativeElement);
    };
    AnimatesDirective.prototype.resume = function () {
        if (!this._started)
            return;
        this._animationBuilder
            .setPlayState('running')
            .applyPlayState(this._elementRef.nativeElement);
    };
    AnimatesDirective.prototype.toggle = function () {
        if (!this._started)
            return;
        this._animationBuilder
            .setPlayState(this._animationBuilder.playState === 'running' ? 'paused' : 'running')
            .applyPlayState(this._elementRef.nativeElement);
    };
    AnimatesDirective.prototype.stop = function () {
        this._started = false;
        this._animationBuilder
            .stop(this._elementRef.nativeElement)
            .then(function (element) { return element; }, function (error) {
            // Animation interrupted
        });
    };
    AnimatesDirective.prototype.startOrStop = function (options) {
        if (!this._started) {
            this.start(options);
            return;
        }
        this.stop();
    };
    AnimatesDirective.prototype.setOptions = function (options) {
        if (options) {
            this._animationBuilder.setOptions(options);
            return;
        }
        this._animationBuilder.setOptions(this._defaultOptions);
    };
    AnimatesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.1", ngImport: i0, type: AnimatesDirective, deps: [{ token: ElementRef }, { token: AnimationService }], target: i0.ɵɵFactoryTarget.Directive });
    AnimatesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.1", type: AnimatesDirective, selector: "[animates]", inputs: { animates: "animates", animatesOnInit: "animatesOnInit", animatesInitMode: "animatesInitMode" }, exportAs: ["animates"], ngImport: i0 });
    return AnimatesDirective;
}());
export { AnimatesDirective };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.1", ngImport: i0, type: AnimatesDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[animates]',
                    exportAs: 'animates',
                    inputs: [
                        'animates',
                        'animatesOnInit',
                        'animatesInitMode'
                    ]
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef, decorators: [{
                    type: Inject,
                    args: [ElementRef]
                }] }, { type: i1.AnimationService, decorators: [{
                    type: Inject,
                    args: [AnimationService]
                }] }]; } });
//# sourceMappingURL=animates.directive.js.map