@taiga-ui/kit/fesm2022/taiga-ui-kit-components-toast.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, computed, inject, ElementRef, Directive, Input, ViewChild, Injectable } from '@angular/core';
import { TUI_PLATFORM, TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { tuiWithStyles, tuiDirectiveBinding, tuiCreateTokenFromFactory } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components';
import * as i1 from '@taiga-ui/core/directives/icons';
import { TuiWithIcons } from '@taiga-ui/core/directives/icons';
import { TUI_ICON_END, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
import * as i2 from '@taiga-ui/kit/components/shrink-wrap';
import { TuiShrinkWrapDirective, TuiShrinkWrap } from '@taiga-ui/kit/components/shrink-wrap';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TuiPopoverDirective } from '@taiga-ui/cdk/directives/popover';
import { TuiPopoverService, tuiAsPopover } from '@taiga-ui/cdk/services';
import { TUI_ALERTS } from '@taiga-ui/core/components/alert';
import { of, switchMap, timer, EMPTY, takeUntil, fromEvent, repeat, BehaviorSubject, pairwise } from 'rxjs';
import { NgIf } from '@angular/common';
import * as i1$1 from '@taiga-ui/cdk/directives/animated';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { TuiSwipe } from '@taiga-ui/cdk/directives/swipe';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiButton } from '@taiga-ui/core/components/button';
import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';

/* eslint-disable @typescript-eslint/member-ordering */
class TuiToastStyles {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiToastStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-toast" }, ngImport: i0, template: '', isInline: true, styles: ["[tuiToast]{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;grid-row:1 / span 2;box-sizing:border-box;gap:.75rem;color:var(--tui-text-primary);background:var(--tui-background-elevation-3);min-block-size:3.5rem;border-radius:1rem;padding:.75rem 1rem;box-shadow:var(--tui-shadow-medium);align-items:center;justify-content:center;inline-size:-webkit-max-content;inline-size:max-content;font:var(--tui-font-text-ui-s);max-inline-size:min(calc(100vw - 2rem),25rem);border:inherit;text-decoration:none;white-space:pre-line;text-align:start;overflow:hidden}[tuiToast]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]>*:not(tui-shrink-wrap),[tuiToast]:after,[tuiToast]:before{max-inline-size:50%;margin:0 -.25rem}[tuiToast]:after{font-size:1rem;color:var(--tui-text-tertiary)}[tuiToast] tui-avatar{margin-inline-end:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastStyles, decorators: [{
            type: Component,
            args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'tui-toast',
                    }, styles: ["[tuiToast]{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:flex;grid-row:1 / span 2;box-sizing:border-box;gap:.75rem;color:var(--tui-text-primary);background:var(--tui-background-elevation-3);min-block-size:3.5rem;border-radius:1rem;padding:.75rem 1rem;box-shadow:var(--tui-shadow-medium);align-items:center;justify-content:center;inline-size:-webkit-max-content;inline-size:max-content;font:var(--tui-font-text-ui-s);max-inline-size:min(calc(100vw - 2rem),25rem);border:inherit;text-decoration:none;white-space:pre-line;text-align:start;overflow:hidden}[tuiToast]:matches(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]:is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]>*:not(tui-shrink-wrap),[tuiToast]:after,[tuiToast]:before{max-inline-size:50%;margin:0 -.25rem}[tuiToast]:after{font-size:1rem;color:var(--tui-text-tertiary)}[tuiToast] tui-avatar{margin-inline-end:0}\n"] }]
        }] });
class TuiToastDirective {
    constructor() {
        this.tuiShrinkWrap = 'min(calc(100vw - 2rem), 25rem)';
        this.nothing = tuiWithStyles(TuiToastStyles);
        this.width = tuiDirectiveBinding(TuiShrinkWrapDirective, 'tuiShrinkWrap', computed(() => this.tuiShrinkWrap));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiToastDirective, isStandalone: true, selector: "[tuiToast]:not(ng-template)", inputs: { tuiShrinkWrap: "tuiShrinkWrap" }, providers: [
            tuiBadgeOptionsProvider({ size: 'l' }),
            tuiAvatarOptionsProvider(() => ({
                size: inject(TUI_PLATFORM) === 'web' ? 's' : 'm',
            })),
            tuiButtonOptionsProvider(() => ({
                size: 's',
                appearance: inject(TUI_PLATFORM) === 'web' ? 'secondary-grayscale' : 'secondary',
            })),
            {
                provide: TUI_ICON_END,
                useFactory: () => inject(ElementRef).nativeElement?.matches('a, button')
                    ? inject(TUI_COMMON_ICONS).more
                    : '',
            },
        ], hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiShrinkWrapDirective, inputs: ["tuiShrinkWrap", "tuiShrinkWrap"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[tuiToast]:not(ng-template)',
                    providers: [
                        tuiBadgeOptionsProvider({ size: 'l' }),
                        tuiAvatarOptionsProvider(() => ({
                            size: inject(TUI_PLATFORM) === 'web' ? 's' : 'm',
                        })),
                        tuiButtonOptionsProvider(() => ({
                            size: 's',
                            appearance: inject(TUI_PLATFORM) === 'web' ? 'secondary-grayscale' : 'secondary',
                        })),
                        {
                            provide: TUI_ICON_END,
                            useFactory: () => inject(ElementRef).nativeElement?.matches('a, button')
                                ? inject(TUI_COMMON_ICONS).more
                                : '',
                        },
                    ],
                    hostDirectives: [
                        TuiWithIcons,
                        {
                            directive: TuiShrinkWrapDirective,
                            inputs: ['tuiShrinkWrap'],
                        },
                    ],
                }]
        }], propDecorators: { tuiShrinkWrap: [{
                type: Input
            }] } });

class TuiToastComponent {
    constructor() {
        this.el = tuiInjectElement();
        this.isMobile = inject(TUI_IS_MOBILE);
        this.context = injectContext();
        this.icons = inject(TUI_COMMON_ICONS);
        this.$ = of(this.context.autoClose)
            .pipe(switchMap((autoClose) => (autoClose ? timer(autoClose) : EMPTY)), takeUntil(fromEvent(this.el, 'mouseenter')), repeat({ delay: () => fromEvent(this.el, 'mouseleave') }), takeUntilDestroyed())
            .subscribe(() => this.context.$implicit.complete());
    }
    ngAfterViewInit() {
        if (this.button) {
            this.el.querySelector('[tuiToast]')?.appendChild(this.button.nativeElement);
        }
    }
    onSwipe() {
        if (this.context.closable) {
            this.context.$implicit.complete();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiToastComponent, isStandalone: true, selector: "tui-toast", host: { attributes: { "role": "status" }, properties: { "class._mobile": "isMobile", "attr.data-appearance": "context.appearance" } }, viewQueries: [{ propertyName: "button", first: true, predicate: TuiButton, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$1.TuiAnimated }], ngImport: i0, template: "<div\n    class=\"t-wrapper\"\n    (tuiSwipe)=\"onSwipe()\"\n>\n    <div\n        *polymorpheusOutlet=\"context.content as text; context: context\"\n        tuiToast\n        [iconStart]=\"context.data?.toString() || ''\"\n    >\n        <tui-shrink-wrap><span [innerHTML]=\"text\"></span></tui-shrink-wrap>\n    </div>\n    <button\n        *ngIf=\"context.closable && !isMobile\"\n        appearance=\"icon\"\n        size=\"xs\"\n        tuiIconButton\n        type=\"button\"\n        [iconStart]=\"icons.close\"\n        (click.stop.prevent)=\"context.$implicit.complete()\"\n    >\n        Close\n    </button>\n</div>\n", styles: ["::ng-deep *:has(>tui-toast){flex-direction:column-reverse!important;justify-content:flex-end}:host{transition-property:grid-template-rows;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:1.25rem;display:grid;margin:0 auto;touch-action:none;animation-fill-mode:both;--tui-from: translate3d(0, -2rem, 0)}:host.tui-enter{place-items:end;animation-name:tuiSlide,tuiCollapse}:host.tui-leave{animation-name:tuiFade,tuiCollapse}:host.tui-leave:first-child{animation-name:tuiFade}:host._mobile{top:env(safe-area-inset-top)}:host._mobile.tui-enter{animation-delay:var(--tui-duration)}:host._mobile.tui-leave{place-items:end;animation-name:tuiSlide,tuiCollapse}.t-wrapper{grid-row:1 / span 2}.t-wrapper:before{content:\"\";display:block;block-size:.75rem}:host._mobile .t-wrapper:before{block-size:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "component", type: i2.TuiShrinkWrapComponent, selector: "tui-shrink-wrap" }, { kind: "directive", type: TuiSwipe, selector: "[tuiSwipe]", outputs: ["tuiSwipe"] }, { kind: "directive", type: TuiToastDirective, selector: "[tuiToast]:not(ng-template)", inputs: ["tuiShrinkWrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-toast', imports: [
                        NgIf,
                        PolymorpheusOutlet,
                        TuiButton,
                        TuiShrinkWrap,
                        TuiSwipe,
                        TuiToastDirective,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated], host: {
                        role: 'status',
                        '[class._mobile]': 'isMobile',
                        '[attr.data-appearance]': 'context.appearance',
                    }, template: "<div\n    class=\"t-wrapper\"\n    (tuiSwipe)=\"onSwipe()\"\n>\n    <div\n        *polymorpheusOutlet=\"context.content as text; context: context\"\n        tuiToast\n        [iconStart]=\"context.data?.toString() || ''\"\n    >\n        <tui-shrink-wrap><span [innerHTML]=\"text\"></span></tui-shrink-wrap>\n    </div>\n    <button\n        *ngIf=\"context.closable && !isMobile\"\n        appearance=\"icon\"\n        size=\"xs\"\n        tuiIconButton\n        type=\"button\"\n        [iconStart]=\"icons.close\"\n        (click.stop.prevent)=\"context.$implicit.complete()\"\n    >\n        Close\n    </button>\n</div>\n", styles: ["::ng-deep *:has(>tui-toast){flex-direction:column-reverse!important;justify-content:flex-end}:host{transition-property:grid-template-rows;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:1.25rem;display:grid;margin:0 auto;touch-action:none;animation-fill-mode:both;--tui-from: translate3d(0, -2rem, 0)}:host.tui-enter{place-items:end;animation-name:tuiSlide,tuiCollapse}:host.tui-leave{animation-name:tuiFade,tuiCollapse}:host.tui-leave:first-child{animation-name:tuiFade}:host._mobile{top:env(safe-area-inset-top)}:host._mobile.tui-enter{animation-delay:var(--tui-duration)}:host._mobile.tui-leave{place-items:end;animation-name:tuiSlide,tuiCollapse}.t-wrapper{grid-row:1 / span 2}.t-wrapper:before{content:\"\";display:block;block-size:.75rem}:host._mobile .t-wrapper:before{block-size:.25rem}\n"] }]
        }], propDecorators: { button: [{
                type: ViewChild,
                args: [TuiButton, { read: ElementRef }]
            }] } });

const TUI_TOAST_DEFAULT_OPTIONS = {
    appearance: '',
    autoClose: 5000,
    closable: true,
};
const [TUI_TOAST_OPTIONS, tuiToastOptionsProvider] = tuiCreateOptions(TUI_TOAST_DEFAULT_OPTIONS);

const TOASTS = tuiCreateTokenFromFactory(() => new BehaviorSubject([]));
const TUI_TOASTS_CONCURRENCY = tuiCreateTokenFromFactory(() => inject(TUI_IS_MOBILE) ? 1 : 2);
class TuiToastService extends TuiPopoverService {
    constructor(items, component, options) {
        super(TOASTS, component, options);
        this.concurrency = inject(TUI_TOASTS_CONCURRENCY);
        this.sub = this.items$
            .pipe(pairwise(), takeUntilDestroyed())
            .subscribe(([prev, next]) => {
            const closed = prev.filter((item) => !next.includes(item));
            const alerts = this.alerts.value.filter((item) => !closed.includes(item));
            const toasts = new Set([...alerts, ...next.slice(0, this.concurrency)]);
            this.alerts.next(Array.from(toasts));
        });
        this.alerts = inject(items);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastService, providedIn: 'root', useFactory: () => new TuiToastService(TUI_ALERTS, TuiToastComponent, inject(TUI_TOAST_OPTIONS)) }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                    useFactory: () => new TuiToastService(TUI_ALERTS, TuiToastComponent, inject(TUI_TOAST_OPTIONS)),
                }]
        }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: undefined }]; } });
class TuiToastTemplate extends TuiPopoverDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastTemplate, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiToastTemplate, isStandalone: true, selector: "ng-template[tuiToast]", inputs: { options: ["tuiToastOptions", "options"], open: ["tuiToast", "open"] }, outputs: { openChange: "tuiToastChange" }, providers: [tuiAsPopover(TuiToastService)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiToastTemplate, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: 'ng-template[tuiToast]',
                    inputs: ['options: tuiToastOptions', 'open: tuiToast'],
                    outputs: ['openChange: tuiToastChange'],
                    providers: [tuiAsPopover(TuiToastService)],
                }]
        }] });

const TuiToast = [TuiToastDirective, TuiToastTemplate];

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

export { TUI_TOASTS_CONCURRENCY, TUI_TOAST_DEFAULT_OPTIONS, TUI_TOAST_OPTIONS, TuiToast, TuiToastComponent, TuiToastDirective, TuiToastService, TuiToastTemplate, tuiToastOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-toast.mjs.map