@taiga-ui/kit/fesm5/taiga-ui-kit-directives-present.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { ElementRef, Inject, Output, HostListener, Directive, NgModule } from '@angular/core';
import { USER_AGENT } from '@ng-web-apis/common';
import { isFirefox, isCurrentTarget, TuiDirectiveStylesService } from '@taiga-ui/cdk';
import { Subject } from 'rxjs';
import { startWith, distinctUntilChanged, skip } from 'rxjs/operators';

var STYLE = "\n@keyframes tuiPresent {\n    from {\n        content: '1';\n    }\n\n    to {\n        content: '2';\n    }\n}\n\n.tui-present {\n    animation: tuiPresent 1000s infinite;\n}";
var TuiPresentDirective = /** @class */ (function () {
    function TuiPresentDirective(_a, directiveStyles, userAgent) {
        var _this = this;
        var nativeElement = _a.nativeElement;
        this.visibility$ = new Subject();
        directiveStyles.addStyle(STYLE, 'TuiPresentDirective');
        this.tuiPresentChange = this.visibility$.pipe(startWith(false), distinctUntilChanged(), skip(1));
        if (isFirefox(userAgent)) {
            return;
        }
        this.observer = new MutationObserver(function () {
            if (!nativeElement.offsetParent &&
                nativeElement.offsetWidth === 0 &&
                nativeElement.offsetHeight === 0) {
                _this.visibility$.next(false);
            }
        });
        this.observer.observe(nativeElement, {
            attributes: true,
            attributeFilter: ['style', 'class'],
        });
    }
    /**
     * Someday animationcancel would work and mutation observer would not be needed:
     * https://drafts.csswg.org/css-animations/#eventdef-animationevent-animationcancel
     * It would also trigger on CSS like display: none on parent nodes which is awesome
     * but currently only works in Firefox
     */
    TuiPresentDirective.prototype.onAnimation = function (event, visibility) {
        if (isCurrentTarget(event)) {
            this.visibility$.next(visibility);
        }
    };
    TuiPresentDirective.prototype.ngOnDestroy = function () {
        this.visibility$.next(false);
    };
    TuiPresentDirective.ctorParameters = function () { return [
        { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
        { type: TuiDirectiveStylesService, decorators: [{ type: Inject, args: [TuiDirectiveStylesService,] }] },
        { type: String, decorators: [{ type: Inject, args: [USER_AGENT,] }] }
    ]; };
    __decorate([
        Output()
    ], TuiPresentDirective.prototype, "tuiPresentChange", void 0);
    __decorate([
        HostListener('animationcancel', ['$event', 'false']),
        HostListener('animationstart', ['$event', 'true'])
    ], TuiPresentDirective.prototype, "onAnimation", null);
    TuiPresentDirective = __decorate([
        Directive({
            selector: '[tuiPresentChange]',
            host: {
                class: 'tui-present',
            },
        }),
        __param(0, Inject(ElementRef)),
        __param(1, Inject(TuiDirectiveStylesService)),
        __param(2, Inject(USER_AGENT))
    ], TuiPresentDirective);
    return TuiPresentDirective;
}());

var TuiPresentModule = /** @class */ (function () {
    function TuiPresentModule() {
    }
    TuiPresentModule = __decorate([
        NgModule({
            declarations: [TuiPresentDirective],
            exports: [TuiPresentDirective],
        })
    ], TuiPresentModule);
    return TuiPresentModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { TuiPresentDirective, TuiPresentModule };
//# sourceMappingURL=taiga-ui-kit-directives-present.js.map