import { ChangeDetectionStrategy, Component, isSignal } from '@angular/core';
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiLoader, tuiLoaderOptionsProvider } from '@taiga-ui/core/components/loader';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/cdk/directives/animated";
import * as i2 from "@ng-web-apis/resize-observer";
class TuiNotificationMiddleComponent {
    constructor() {
        this.el = tuiInjectElement();
        this.context = injectContext();
    }
    onClick(target) {
        if (this.closable && !this.el.contains(target)) {
            this.context.$implicit.complete();
        }
    }
    get closable() {
        return isSignal(this.context.closable)
            ? this.context.closable()
            : this.context.closable;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiNotificationMiddleComponent, isStandalone: true, selector: "tui-notification-middle", host: { listeners: { "document:click.capture": "onClick($event.target)", "document:keydown.esc": "onClick($event.currentTarget)", "waResizeObserver": "el.style.setProperty(\"--t-width\", el.clientWidth + \"px\")" } }, providers: [
            tuiLoaderOptionsProvider({ size: 'l' }),
            tuiAvatarOptionsProvider({ size: 'm' }),
        ], hostDirectives: [{ directive: i1.TuiAnimated }, { directive: i2.WaResizeObserver, outputs: ["waResizeObserver", "waResizeObserver"] }], ngImport: i0, template: `
        <tui-loader class="t-loader" />
        <ng-container *polymorpheusOutlet="context.content as text">
            {{ text }}
        </ng-container>
    `, isInline: true, styles: [":host{position:relative;display:grid;max-inline-size:18.75rem;min-inline-size:7rem;min-block-size:7rem;justify-items:center;gap:1rem;margin:auto;padding:2.25rem 2.25rem 1.75rem;border-radius:1.25rem;box-sizing:border-box;font:var(--tui-font-text-m);--tui-scale: .5}:host:before{inline-size:100%;block-size:100%;transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";z-index:-1;inline-size:var(--t-width);background:var(--tui-background-elevation-3);box-shadow:var(--tui-shadow-popup);border-radius:inherit;contain:strict}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiScale}:host.tui-enter ::ng-deep>.tui-enter,:host.tui-leave ::ng-deep>.tui-enter{animation-duration:0s;animation-delay:0s}:host .t-loader:not(:last-child){display:none}:host ::ng-deep>*{grid-area:2 / 1}:host ::ng-deep>*.tui-enter,:host ::ng-deep>*.tui-leave{animation-delay:var(--tui-duration);animation-name:tuiFade}:host ::ng-deep>*.tui-leave{animation-delay:0s}:host ::ng-deep>*.tui-leave~.tui-enter{opacity:0}:host ::ng-deep>tui-loader,:host ::ng-deep>tui-avatar,:host ::ng-deep>tui-icon,:host ::ng-deep>img{block-size:2.5rem;inline-size:2.5rem;min-inline-size:2.5rem;font-size:2.5rem;grid-area:1 / 1}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: TuiLoader, selector: "tui-loader", inputs: ["size", "inheritColor", "overlay", "textContent", "showLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiNotificationMiddleComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddleComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-notification-middle', imports: [PolymorpheusOutlet, TuiLoader], template: `
        <tui-loader class="t-loader" />
        <ng-container *polymorpheusOutlet="context.content as text">
            {{ text }}
        </ng-container>
    `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        tuiLoaderOptionsProvider({ size: 'l' }),
                        tuiAvatarOptionsProvider({ size: 'm' }),
                    ], hostDirectives: [
                        TuiAnimated,
                        { directive: WaResizeObserver, outputs: ['waResizeObserver'] },
                    ], host: {
                        '(document:click.capture)': 'onClick($event.target)',
                        '(document:keydown.esc)': 'onClick($event.currentTarget)',
                        '(waResizeObserver)': 'el.style.setProperty("--t-width", el.clientWidth + "px")',
                    }, styles: [":host{position:relative;display:grid;max-inline-size:18.75rem;min-inline-size:7rem;min-block-size:7rem;justify-items:center;gap:1rem;margin:auto;padding:2.25rem 2.25rem 1.75rem;border-radius:1.25rem;box-sizing:border-box;font:var(--tui-font-text-m);--tui-scale: .5}:host:before{inline-size:100%;block-size:100%;transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:\"\";z-index:-1;inline-size:var(--t-width);background:var(--tui-background-elevation-3);box-shadow:var(--tui-shadow-popup);border-radius:inherit;contain:strict}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiScale}:host.tui-enter ::ng-deep>.tui-enter,:host.tui-leave ::ng-deep>.tui-enter{animation-duration:0s;animation-delay:0s}:host .t-loader:not(:last-child){display:none}:host ::ng-deep>*{grid-area:2 / 1}:host ::ng-deep>*.tui-enter,:host ::ng-deep>*.tui-leave{animation-delay:var(--tui-duration);animation-name:tuiFade}:host ::ng-deep>*.tui-leave{animation-delay:0s}:host ::ng-deep>*.tui-leave~.tui-enter{opacity:0}:host ::ng-deep>tui-loader,:host ::ng-deep>tui-avatar,:host ::ng-deep>tui-icon,:host ::ng-deep>img{block-size:2.5rem;inline-size:2.5rem;min-inline-size:2.5rem;font-size:2.5rem;grid-area:1 / 1}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 