@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
151 lines (143 loc) • 14 kB
JavaScript
import * as i1$1 from '@angular/common';
import { NgIf, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, inject, Component, ChangeDetectionStrategy, Injectable, Directive, INJECTOR, Injector, ViewEncapsulation } from '@angular/core';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1 from '@taiga-ui/cdk/directives/animated';
import { TuiAnimated, TuiAnimatedParent } from '@taiga-ui/cdk/directives/animated';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TUI_NOTIFICATION_OPTIONS, TuiNotification } from '@taiga-ui/core/components/notification';
import { TuiTitle } from '@taiga-ui/core/directives/title';
import { TUI_COMMON_ICONS, TUI_CLOSE_WORD } from '@taiga-ui/core/tokens';
import { injectContext, PolymorpheusOutlet, POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus';
import { BehaviorSubject, combineLatest, of, map, switchMap, timer, EMPTY, takeUntil, fromEvent, repeat, identity } from 'rxjs';
import { TUI_IS_MOBILE } from '@taiga-ui/cdk/tokens';
import { TuiPopoverDirective } from '@taiga-ui/cdk/directives/popover';
import { TuiPopoverService, tuiAsPopover } from '@taiga-ui/cdk/services';
import { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
const TUI_ALERT_DEFAULT_OPTIONS = {
autoClose: 3000,
label: '',
closeable: true,
data: undefined,
};
const TUI_ALERT_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_ALERT_OPTIONS' : '', {
factory: () => ({
...TUI_ALERT_DEFAULT_OPTIONS,
...inject(TUI_NOTIFICATION_OPTIONS),
}),
});
const TUI_ALERT_POSITION = new InjectionToken(ngDevMode ? 'TUI_ALERT_POSITION' : '', {
factory: () => (inject(TUI_IS_MOBILE) ? '1rem 1rem 0 auto' : '2rem 3rem 0 auto'),
});
const TUI_ALERTS = new InjectionToken(ngDevMode ? 'TUI_ALERTS' : '', {
factory: () => new BehaviorSubject([]),
});
/**
* Grouping alerts by their component
*/
const TUI_ALERTS_GROUPED = new InjectionToken(ngDevMode ? 'TUI_ALERTS_GROUPED' : '', {
factory: () => combineLatest([
of(new Map()),
inject(TUI_ALERTS),
]).pipe(map(([map, alerts]) => {
map.forEach((_, key) => map.set(key, []));
alerts.forEach((alert) => {
const key = alert.component.component;
const value = map.get(key) || [];
map.set(key, [...value, alert]);
});
return Array.from(map.values());
})),
});
function tuiAlertOptionsProvider(options) {
return {
provide: TUI_ALERT_OPTIONS,
useFactory: () => ({
...TUI_ALERT_DEFAULT_OPTIONS,
...(inject(TUI_ALERT_OPTIONS, { optional: true, skipSelf: true }) ||
inject(TUI_NOTIFICATION_OPTIONS)),
...options,
}),
};
}
class TuiAlertComponent {
constructor() {
this.el = tuiInjectElement();
this.icons = inject(TUI_COMMON_ICONS);
this.close = toSignal(inject(TUI_CLOSE_WORD));
this.position = inject(TUI_ALERT_POSITION);
this.item = injectContext();
this.sub = of(typeof this.item.autoClose === 'function'
? this.item.autoClose(this.item.appearance)
: this.item.autoClose)
.pipe(switchMap((autoClose) => (autoClose ? timer(autoClose) : EMPTY)), takeUntil(fromEvent(this.el, 'mouseenter')), repeat({ delay: () => fromEvent(this.el, 'mouseleave') }), takeUntilDestroyed())
.subscribe(() => this.item.$implicit.complete());
}
get from() {
return this.position.endsWith('auto') ? 'translateX(100%)' : 'translateX(-100%)';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAlertComponent, isStandalone: true, selector: "tui-alert", host: { attributes: { "role": "alert" }, properties: { "style.margin": "position", "style.--tui-from": "from" } }, hostDirectives: [{ directive: i1.TuiAnimated }], ngImport: i0, template: "<div class=\"t-wrapper\">\n <tui-notification\n size=\"m\"\n [appearance]=\"item.appearance\"\n [class.t-closeable]=\"item.closeable\"\n [icon]=\"item.icon\"\n >\n <span tuiTitle>\n <ng-container *polymorpheusOutlet=\"item.label as text; context: item\">\n {{ text }}\n </ng-container>\n <span tuiSubtitle>\n <span\n *polymorpheusOutlet=\"item.content as text; context: item\"\n [innerHTML]=\"text\"\n ></span>\n </span>\n </span>\n <button\n *ngIf=\"item.closeable\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"icons.close\"\n (click)=\"item.$implicit.complete()\"\n >\n {{ close() }}\n </button>\n </tui-notification>\n</div>\n", styles: [":host{display:grid;inline-size:18rem;flex-shrink:0;word-break:break-word}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide,tuiCollapse}:host:not(:first-child){margin-block-start:0!important}:host:not(:last-child){margin-block-end:0!important}.t-wrapper{transition-property:margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;grid-row:1 / span 2;overflow:hidden;margin-block-end:.75rem;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:var(--tui-shadow-medium)}:host.tui-leave .t-wrapper{margin:0}.t-closeable{padding-inline-end:2.5rem}\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: "directive", type: TuiNotification, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: ["appearance", "icon", "size"] }, { kind: "directive", type: TuiTitle, selector: "[tuiTitle]", inputs: ["tuiTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlertComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-alert', imports: [NgIf, PolymorpheusOutlet, TuiButton, TuiNotification, TuiTitle], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiAnimated], host: {
role: 'alert',
'[style.margin]': 'position',
'[style.--tui-from]': 'from',
}, template: "<div class=\"t-wrapper\">\n <tui-notification\n size=\"m\"\n [appearance]=\"item.appearance\"\n [class.t-closeable]=\"item.closeable\"\n [icon]=\"item.icon\"\n >\n <span tuiTitle>\n <ng-container *polymorpheusOutlet=\"item.label as text; context: item\">\n {{ text }}\n </ng-container>\n <span tuiSubtitle>\n <span\n *polymorpheusOutlet=\"item.content as text; context: item\"\n [innerHTML]=\"text\"\n ></span>\n </span>\n </span>\n <button\n *ngIf=\"item.closeable\"\n tuiIconButton\n type=\"button\"\n [iconStart]=\"icons.close\"\n (click)=\"item.$implicit.complete()\"\n >\n {{ close() }}\n </button>\n </tui-notification>\n</div>\n", styles: [":host{display:grid;inline-size:18rem;flex-shrink:0;word-break:break-word}:host.tui-enter,:host.tui-leave{animation-name:tuiFade,tuiSlide,tuiCollapse}:host:not(:first-child){margin-block-start:0!important}:host:not(:last-child){margin-block-end:0!important}.t-wrapper{transition-property:margin;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;grid-row:1 / span 2;overflow:hidden;margin-block-end:.75rem;background:var(--tui-background-base);border-radius:var(--tui-radius-m);box-shadow:var(--tui-shadow-medium)}:host.tui-leave .t-wrapper{margin:0}.t-closeable{padding-inline-end:2.5rem}\n"] }]
}] });
class TuiAlertService extends TuiPopoverService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlertService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlertService, providedIn: 'root', useFactory: () => new TuiAlertService(TUI_ALERTS, TuiAlertComponent, inject(TUI_ALERT_OPTIONS)) }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlertService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
useFactory: () => new TuiAlertService(TUI_ALERTS, TuiAlertComponent, inject(TUI_ALERT_OPTIONS)),
}]
}] });
class TuiAlert extends TuiPopoverDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlert, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiAlert, isStandalone: true, selector: "ng-template[tuiAlert]", inputs: { options: ["tuiAlertOptions", "options"], open: ["tuiAlert", "open"] }, outputs: { openChange: "tuiAlertChange" }, providers: [tuiAsPopover(TuiAlertService)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlert, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'ng-template[tuiAlert]',
inputs: ['options: tuiAlertOptions', 'open: tuiAlert'],
outputs: ['openChange: tuiAlertChange'],
providers: [tuiAsPopover(TuiAlertService)],
}]
}] });
class TuiAlerts {
constructor() {
this.injector = inject(INJECTOR);
this.alerts$ = inject(TUI_ALERTS_GROUPED);
this.trackBy = identity;
this.mapper = (useValue) => Injector.create({
providers: [
{
provide: POLYMORPHEUS_CONTEXT,
useValue,
},
],
parent: this.injector,
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlerts, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiAlerts, isStandalone: true, selector: "tui-alerts", ngImport: i0, template: "<div\n *ngFor=\"let group of alerts$ | async; trackBy: trackBy\"\n tuiAnimatedParent\n class=\"t-wrapper\"\n>\n <ng-container\n *ngFor=\"let item of group\"\n [ngComponentOutlet]=\"item.component.component\"\n [ngComponentOutletInjector]=\"item | tuiMapper: mapper\"\n />\n</div>\n", styles: ["tui-alerts>.t-wrapper{position:fixed;top:0;left:0;inline-size:100%;display:flex;flex-direction:column;pointer-events:none;box-sizing:border-box;block-size:100%;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}tui-alerts>.t-wrapper>*{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "directive", type: TuiAnimatedParent, selector: "[tuiAnimatedParent]" }, { kind: "pipe", type: TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiAlerts, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-alerts', imports: [CommonModule, TuiAnimatedParent, TuiMapperPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<div\n *ngFor=\"let group of alerts$ | async; trackBy: trackBy\"\n tuiAnimatedParent\n class=\"t-wrapper\"\n>\n <ng-container\n *ngFor=\"let item of group\"\n [ngComponentOutlet]=\"item.component.component\"\n [ngComponentOutletInjector]=\"item | tuiMapper: mapper\"\n />\n</div>\n", styles: ["tui-alerts>.t-wrapper{position:fixed;top:0;left:0;inline-size:100%;display:flex;flex-direction:column;pointer-events:none;box-sizing:border-box;block-size:100%;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}tui-alerts>.t-wrapper>*{pointer-events:auto}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_ALERTS, TUI_ALERTS_GROUPED, TUI_ALERT_DEFAULT_OPTIONS, TUI_ALERT_OPTIONS, TUI_ALERT_POSITION, TuiAlert, TuiAlertComponent, TuiAlertService, TuiAlerts, tuiAlertOptionsProvider };
//# sourceMappingURL=taiga-ui-core-components-alert.mjs.map