@taiga-ui/kit
Version:
Taiga UI Angular main components kit
170 lines (162 loc) • 16.6 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Directive, viewChild, ElementRef, InjectionToken, Injectable } from '@angular/core';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { TUI_PLATFORM } from '@taiga-ui/cdk/tokens';
import { tuiDirectiveBinding, tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiWithStyles } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider, TuiButton } from '@taiga-ui/core/components/button';
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 * as i1$2 from '@taiga-ui/cdk/portals';
import { tuiAsPortal, TuiPortalDirective } from '@taiga-ui/cdk/portals';
import * as i2$1 from '@taiga-ui/core/portals/alert';
import { TuiAlertDirective, TuiAlertService } from '@taiga-ui/core/portals/alert';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WA_IS_MOBILE } from '@ng-web-apis/platform';
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 { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { of, switchMap, EMPTY, timer, takeUntil, fromEvent, repeat } from 'rxjs';
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-toast-5.7.0"], ngImport: i0, template: '', isInline: true, styles: ["[tuiToast]:where(*[data-tui-version=\"5.7.0\"]){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:max-content;font:var(--tui-typography-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]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]:where(*[data-tui-version=\"5.7.0\"])>*:not(tui-shrink-wrap),[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):after,[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):before{max-inline-size:50%;margin:0 -.25rem}[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):after{font-size:1rem;color:var(--tui-text-tertiary)}[tuiToast]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{margin-inline-end:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-toast-${TUI_VERSION}`, styles: ["[tuiToast]:where(*[data-tui-version=\"5.7.0\"]){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:max-content;font:var(--tui-typography-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]:where(*[data-tui-version=\"5.7.0\"]):is(a,button,select,textarea,input,label,.tui-interactive):not(:disabled){cursor:pointer}[tuiToast]:where(*[data-tui-version=\"5.7.0\"])>*:not(tui-shrink-wrap),[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):after,[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):before{max-inline-size:50%;margin:0 -.25rem}[tuiToast]:where(*[data-tui-version=\"5.7.0\"]):after{font-size:1rem;color:var(--tui-text-tertiary)}[tuiToast]:where(*[data-tui-version=\"5.7.0\"]) [tuiAvatar]{margin-inline-end:0}\n"] }]
}] });
class TuiToastDirective {
constructor() {
this.tuiShrinkWrap = input('min(calc(100vw - 4rem), 25rem)');
this.nothing = tuiWithStyles(Styles);
this.width = tuiDirectiveBinding(TuiShrinkWrapDirective, 'tuiShrinkWrap', this.tuiShrinkWrap);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiToastDirective, isStandalone: true, selector: "[tuiToast]:not(ng-template)", inputs: { tuiShrinkWrap: { classPropertyName: "tuiShrinkWrap", publicName: "tuiShrinkWrap", isSignal: true, isRequired: false, transformFunction: null } }, 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: () => tuiInjectElement().matches('a, button')
? inject(TUI_COMMON_ICONS).more
: '',
},
], hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiShrinkWrapDirective }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastDirective, decorators: [{
type: Directive,
args: [{
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: () => tuiInjectElement().matches('a, button')
? inject(TUI_COMMON_ICONS).more
: '',
},
],
hostDirectives: [TuiWithIcons, TuiShrinkWrapDirective],
}]
}] });
class TuiToastComponent {
constructor() {
this.close = viewChild(TuiButton, { read: ElementRef });
this.el = tuiInjectElement();
this.isMobile = inject(WA_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() {
const close = this.close();
if (close) {
this.el.querySelector('[tuiToast]')?.appendChild(close.nativeElement);
}
}
onSwipe() {
if (this.context.closable) {
this.context.$implicit.complete();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiToastComponent, isStandalone: true, selector: "tui-toast", host: { attributes: { "role": "status" }, properties: { "attr.data-appearance": "context.appearance", "class._mobile": "isMobile" } }, viewQueries: [{ propertyName: "close", first: true, predicate: TuiButton, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.TuiAnimated }, { directive: i2$1.TuiAlertDirective }], 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 @if (context.closable && !isMobile) {\n <button\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 }\n</div>\n", styles: [":host:host{inset:1.625rem 0;margin:0 auto;touch-action:none;animation-fill-mode:both}:host:host:nth-of-type(1){grid-row:5}:host:host:nth-of-type(2){grid-row:4}:host:host:nth-of-type(3){grid-row:3}:host:host:nth-of-type(4){grid-row:2}:host:host:nth-of-type(5){grid-row:1}:host:host[data-inline=center]{--tui-from: translateY(-2rem)}:host:host.tui-enter{place-items:end;animation-name:tuiSlide,tuiCollapse}:host:host.tui-leave{animation-name:tuiFade,tuiCollapse}:host:host.tui-leave:first-child{animation-name:tuiFade}:host:host[data-block=end]{inset:-1.625rem 0}:host:host[data-block=end][data-inline=center]{--tui-from: translateY(6rem)}:host:host._mobile{inset:0}:host:host._mobile.tui-enter{animation-delay:var(--tui-duration)}:host:host._mobile.tui-leave{place-items:end;animation-name:tuiSlide,tuiCollapse}\n"], dependencies: [{ 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: "19.2.21", ngImport: i0, type: TuiToastComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-toast', imports: [PolymorpheusOutlet, TuiButton, TuiShrinkWrap, TuiSwipe, TuiToastDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated, TuiAlertDirective], host: {
role: 'status',
'[attr.data-appearance]': 'context.appearance',
'[class._mobile]': 'isMobile',
}, 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 @if (context.closable && !isMobile) {\n <button\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 }\n</div>\n", styles: [":host:host{inset:1.625rem 0;margin:0 auto;touch-action:none;animation-fill-mode:both}:host:host:nth-of-type(1){grid-row:5}:host:host:nth-of-type(2){grid-row:4}:host:host:nth-of-type(3){grid-row:3}:host:host:nth-of-type(4){grid-row:2}:host:host:nth-of-type(5){grid-row:1}:host:host[data-inline=center]{--tui-from: translateY(-2rem)}:host:host.tui-enter{place-items:end;animation-name:tuiSlide,tuiCollapse}:host:host.tui-leave{animation-name:tuiFade,tuiCollapse}:host:host.tui-leave:first-child{animation-name:tuiFade}:host:host[data-block=end]{inset:-1.625rem 0}:host:host[data-block=end][data-inline=center]{--tui-from: translateY(6rem)}:host:host._mobile{inset:0}:host:host._mobile.tui-enter{animation-delay:var(--tui-duration)}:host:host._mobile.tui-leave{place-items:end;animation-name:tuiSlide,tuiCollapse}\n"] }]
}] });
const TUI_TOAST_CONCURRENCY = new InjectionToken(ngDevMode ? 'TUI_TOAST_CONCURRENCY' : '', { factory: () => (inject(WA_IS_MOBILE) ? 1 : 2) });
const [TUI_TOAST_OPTIONS, tuiToastOptionsProvider] = tuiCreateOptions({
appearance: '',
autoClose: 5000,
closable: true,
block: 'start',
inline: 'center',
});
class TuiToastService extends TuiAlertService {
constructor() {
super(inject(TUI_TOAST_CONCURRENCY));
this.options = inject(TUI_TOAST_OPTIONS);
this.component = TuiToastComponent;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
class TuiToastTemplate {
constructor() {
this.tuiToastOptions = input({});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiToastTemplate, isStandalone: true, selector: "ng-template[tuiToast]", inputs: { tuiToastOptions: { classPropertyName: "tuiToastOptions", publicName: "tuiToastOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiToastService)], hostDirectives: [{ directive: i1$2.TuiPortalDirective, inputs: ["options", "tuiToastOptions", "open", "tuiToast"], outputs: ["openChange", "tuiToastChange"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiToastTemplate, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[tuiToast]',
providers: [tuiAsPortal(TuiToastService)],
hostDirectives: [
{
directive: TuiPortalDirective,
inputs: ['options: tuiToastOptions', 'open: tuiToast'],
outputs: ['openChange: tuiToastChange'],
},
],
}]
}] });
const TuiToast = [TuiToastDirective, TuiToastTemplate];
/**
* Generated bundle index. Do not edit.
*/
export { TUI_TOAST_CONCURRENCY, TUI_TOAST_OPTIONS, TuiToast, TuiToastComponent, TuiToastDirective, TuiToastService, TuiToastTemplate, tuiToastOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-toast.mjs.map