@taiga-ui/cdk/fesm2022/taiga-ui-cdk-directives-animated.mjs

Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance

import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, afterNextRender, PLATFORM_ID, Directive } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiInjectElement, tuiIsElement } from '@taiga-ui/cdk/utils/dom';

const TUI_ENTER = 'tui-enter';
const TUI_LEAVE = 'tui-leave';
const TUI_ANIMATED = 'tui-animated';
const TUI_LEAVE_KEY = `${TUI_LEAVE}_${TUI_VERSION.split('.')[0]}`;
class TuiAnimated {
    constructor() {
        // @ts-ignore https://github.com/angular/angular/blob/main/packages/core/src/render3/interfaces/view.ts#L56
        this.renderer = inject(ViewContainerRef)._hostLView?.[11];
        this.el = tuiInjectElement();
        afterNextRender(() => this.remove());
        if (this.renderer && isPlatformBrowser(inject(PLATFORM_ID))) {
            // delegate is used in Angular Animations renderer
            wrap(this.renderer.delegate || this.renderer);
        }
    }
    remove() {
        if (this.el.isConnected && !this.el.getAnimations?.().length) {
            this.el.classList.remove(TUI_ENTER);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiAnimated, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: TuiAnimated, isStandalone: true, selector: "[tuiAnimated]", host: { listeners: { "animationcancel.self": "remove()", "animationend.self": "remove()" }, classAttribute: "tui-enter tui-animated" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TuiAnimated, decorators: [{
            type: Directive,
            args: [{
                    selector: '[tuiAnimated]',
                    host: {
                        class: `${TUI_ENTER} ${TUI_ANIMATED}`,
                        '(animationcancel.self)': 'remove()',
                        '(animationend.self)': 'remove()',
                    },
                }]
        }], ctorParameters: () => [] });
function wrap(renderer) {
    if (renderer.data[TUI_LEAVE_KEY]) {
        return;
    }
    const { removeChild } = renderer;
    renderer.data[TUI_LEAVE_KEY] = true;
    renderer.removeChild = (parent, el, host) => {
        if (!tuiIsElement(el) || !el.classList.contains(TUI_ANIMATED)) {
            removeChild.call(renderer, parent, el, host);
            return;
        }
        el.classList.remove(TUI_ENTER);
        const { length } = el.getAnimations?.() || [];
        el.classList.add(TUI_LEAVE);
        const animations = el.getAnimations?.() ?? [];
        const last = animations[animations.length - 1];
        const finish = () => {
            if (!parent || parent.contains(el)) {
                removeChild.call(renderer, parent, el, host);
            }
        };
        if (animations.length > length && last) {
            last.onfinish = finish;
            last.oncancel = finish;
        }
        else {
            finish();
        }
    };
}

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

export { TUI_ANIMATED, TUI_ENTER, TUI_LEAVE, TuiAnimated };
//# sourceMappingURL=taiga-ui-cdk-directives-animated.mjs.map