@taiga-ui/kit/fesm2015/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';

const STYLE = `
@keyframes tuiPresent {
    from {
        content: '1';
    }

    to {
        content: '2';
    }
}

.tui-present {
    animation: tuiPresent 1000s infinite;
}`;
let TuiPresentDirective = class TuiPresentDirective {
    constructor({ nativeElement }, directiveStyles, userAgent) {
        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(() => {
            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
     */
    onAnimation(event, visibility) {
        if (isCurrentTarget(event)) {
            this.visibility$.next(visibility);
        }
    }
    ngOnDestroy() {
        this.visibility$.next(false);
    }
};
TuiPresentDirective.ctorParameters = () => [
    { 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);

let TuiPresentModule = class TuiPresentModule {
};
TuiPresentModule = __decorate([
    NgModule({
        declarations: [TuiPresentDirective],
        exports: [TuiPresentDirective],
    })
], TuiPresentModule);

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

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