@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 * as i0 from '@angular/core';
import { inject, ViewContainerRef, ApplicationRef, afterNextRender, Directive, Renderer2 } from '@angular/core';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import * as i2 from '@ng-web-apis/mutation-observer';
import { provideMutationObserverInit, WaMutationObserver } from '@ng-web-apis/mutation-observer';

const TUI_ENTER = 'tui-enter';
const TUI_LEAVE = 'tui-leave';
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();
        this.app = inject(ApplicationRef);
        afterNextRender(() => this.remove());
        if (!this.renderer) {
            return;
        }
        // delegate is used in Angular Animations renderer
        const renderer = this.renderer.delegate || this.renderer;
        const { removeChild, data } = renderer;
        if (data[TUI_LEAVE]) {
            data[TUI_LEAVE].push(this.el);
            return;
        }
        data[TUI_LEAVE] = [this.el];
        afterNextRender(() => {
            renderer.removeChild = (parent, el, host) => {
                const remove = () => removeChild.call(renderer, parent, el, host);
                const elements = data[TUI_LEAVE];
                const element = elements.find((leave) => el.contains(leave));
                if (!element) {
                    remove();
                    return;
                }
                element.classList.remove(TUI_ENTER);
                const { length } = element.getAnimations?.() || [];
                element.classList.add(TUI_LEAVE);
                const animations = element.getAnimations?.() ?? [];
                const last = animations[animations.length - 1];
                const finish = () => {
                    if (!parent || parent.contains(el)) {
                        remove();
                        this.app.tick();
                    }
                };
                if (animations.length > length && last) {
                    last.onfinish = finish;
                    last.oncancel = finish;
                }
                else {
                    remove();
                }
            };
        });
    }
    ngOnDestroy() {
        const data = this.renderer?.data || { [TUI_LEAVE]: [] };
        setTimeout(() => {
            data[TUI_LEAVE] = data[TUI_LEAVE].filter((e) => e !== this.el);
        });
    }
    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: "16.2.12", ngImport: i0, type: TuiAnimated, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAnimated, isStandalone: true, selector: "[tuiAnimated]", host: { listeners: { "animationend.self": "remove()", "animationcancel.self": "remove()" }, classAttribute: "tui-enter" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAnimated, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiAnimated]',
                    host: {
                        class: TUI_ENTER,
                        '(animationend.self)': 'remove()',
                        '(animationcancel.self)': 'remove()',
                    },
                }]
        }], ctorParameters: function () { return []; } });

class TuiAnimatedParent {
    constructor() {
        this.el = tuiInjectElement();
        this.renderer = inject(Renderer2);
    }
    handle() {
        this.el.classList.remove(TUI_ENTER);
        this.renderer.data[TUI_LEAVE] = Array.from(this.el.children);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAnimatedParent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAnimatedParent, isStandalone: true, selector: "[tuiAnimatedParent]", host: { listeners: { "waMutationObserver": "handle()" } }, providers: [provideMutationObserverInit({ childList: true })], hostDirectives: [{ directive: TuiAnimated }, { directive: i2.WaMutationObserver, outputs: ["waMutationObserver", "waMutationObserver"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAnimatedParent, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiAnimatedParent]',
                    providers: [provideMutationObserverInit({ childList: true })],
                    hostDirectives: [
                        TuiAnimated,
                        {
                            directive: WaMutationObserver,
                            outputs: ['waMutationObserver'],
                        },
                    ],
                    host: {
                        '(waMutationObserver)': 'handle()',
                    },
                }]
        }] });

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

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