@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
43 lines • 13.9 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
import { TuiAnimated } from '@taiga-ui/cdk/directives/animated';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TuiNotification } from '@taiga-ui/core/components/notification';
import { TuiTitle } from '@taiga-ui/core/directives/title';
import { TUI_CLOSE_WORD, TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { EMPTY, fromEvent, of, repeat, switchMap, takeUntil, timer } from 'rxjs';
import { TUI_ALERT_POSITION } from './alert.tokens';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/cdk/directives/animated";
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 }); }
}
export { TuiAlertComponent };
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"] }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9hbGVydC9hbGVydC50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxJQUFJLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLEVBQUMsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUMsa0JBQWtCLEVBQUUsUUFBUSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDeEUsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLG1DQUFtQyxDQUFDO0FBRTlELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sd0NBQXdDLENBQUM7QUFDdkUsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3pELE9BQU8sRUFBQyxjQUFjLEVBQUUsZ0JBQWdCLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUN2RSxPQUFPLEVBQUMsYUFBYSxFQUFFLGtCQUFrQixFQUFDLE1BQU0sd0JBQXdCLENBQUM7QUFDekUsT0FBTyxFQUFDLEtBQUssRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUcvRSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRWxELE1BY2EsaUJBQWlCO0lBZDlCO1FBZXFCLE9BQUUsR0FBRyxnQkFBZ0IsRUFBRSxDQUFDO1FBRXRCLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUNqQyxVQUFLLEdBQUcsUUFBUSxDQUFDLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDO1FBQ3pDLGFBQVEsR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUN0QyxTQUFJLEdBQUcsYUFBYSxFQUFxQyxDQUFDO1FBRTFELFFBQUcsR0FBRyxFQUFFLENBQ3ZCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEtBQUssVUFBVTtZQUNyQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7WUFDM0MsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUM1QjthQUNJLElBQUksQ0FDRCxTQUFTLENBQUMsQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2hFLFNBQVMsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRSxZQUFZLENBQUMsQ0FBQyxFQUMzQyxNQUFNLENBQUMsRUFBQyxLQUFLLEVBQUUsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUUsWUFBWSxDQUFDLEVBQUMsQ0FBQyxFQUN2RCxrQkFBa0IsRUFBRSxDQUN2QjthQUNBLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO0tBS3hEO0lBSEcsSUFBVyxJQUFJO1FBQ1gsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLG1CQUFtQixDQUFDO0lBQ3JGLENBQUM7K0dBdkJRLGlCQUFpQjttR0FBakIsaUJBQWlCLHlPQzlCOUIsczRCQTZCQSx5cUJEVmMsSUFBSSw2RkFBRSxrQkFBa0IsOEhBQUUsU0FBUyxvSUFBRSxlQUFlLGdKQUFFLFFBQVE7O1NBVy9ELGlCQUFpQjs0RkFBakIsaUJBQWlCO2tCQWQ3QixTQUFTO2lDQUNNLElBQUksWUFDTixXQUFXLFdBQ1osQ0FBQyxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxRQUFRLENBQUMsbUJBR3hELHVCQUF1QixDQUFDLE1BQU0sa0JBQy9CLENBQUMsV0FBVyxDQUFDLFFBQ3ZCO3dCQUNGLElBQUksRUFBRSxPQUFPO3dCQUNiLGdCQUFnQixFQUFFLFVBQVU7d0JBQzVCLG9CQUFvQixFQUFFLE1BQU07cUJBQy9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbmplY3R9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0YWtlVW50aWxEZXN0cm95ZWQsIHRvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge1R1aUFuaW1hdGVkfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2RpcmVjdGl2ZXMvYW5pbWF0ZWQnO1xuaW1wb3J0IHt0eXBlIFR1aVBvcG92ZXJ9IGZyb20gJ0B0YWlnYS11aS9jZGsvc2VydmljZXMnO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge1R1aUJ1dHRvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlOb3RpZmljYXRpb259IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvbm90aWZpY2F0aW9uJztcbmltcG9ydCB7VHVpVGl0bGV9IGZyb20gJ0B0YWlnYS11aS9jb3JlL2RpcmVjdGl2ZXMvdGl0bGUnO1xuaW1wb3J0IHtUVUlfQ0xPU0VfV09SRCwgVFVJX0NPTU1PTl9JQ09OU30gZnJvbSAnQHRhaWdhLXVpL2NvcmUvdG9rZW5zJztcbmltcG9ydCB7aW5qZWN0Q29udGV4dCwgUG9seW1vcnBoZXVzT3V0bGV0fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcbmltcG9ydCB7RU1QVFksIGZyb21FdmVudCwgb2YsIHJlcGVhdCwgc3dpdGNoTWFwLCB0YWtlVW50aWwsIHRpbWVyfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHt0eXBlIFR1aUFsZXJ0T3B0aW9uc30gZnJvbSAnLi9hbGVydC5pbnRlcmZhY2VzJztcbmltcG9ydCB7VFVJX0FMRVJUX1BPU0lUSU9OfSBmcm9tICcuL2FsZXJ0LnRva2Vucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktYWxlcnQnLFxuICAgIGltcG9ydHM6IFtOZ0lmLCBQb2x5bW9ycGhldXNPdXRsZXQsIFR1aUJ1dHRvbiwgVHVpTm90aWZpY2F0aW9uLCBUdWlUaXRsZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2FsZXJ0LnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2FsZXJ0LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aUFuaW1hdGVkXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHJvbGU6ICdhbGVydCcsXG4gICAgICAgICdbc3R5bGUubWFyZ2luXSc6ICdwb3NpdGlvbicsXG4gICAgICAgICdbc3R5bGUuLS10dWktZnJvbV0nOiAnZnJvbScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQWxlcnRDb21wb25lbnQ8TywgST4ge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50KCk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaWNvbnMgPSBpbmplY3QoVFVJX0NPTU1PTl9JQ09OUyk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNsb3NlID0gdG9TaWduYWwoaW5qZWN0KFRVSV9DTE9TRV9XT1JEKSk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHBvc2l0aW9uID0gaW5qZWN0KFRVSV9BTEVSVF9QT1NJVElPTik7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGl0ZW0gPSBpbmplY3RDb250ZXh0PFR1aVBvcG92ZXI8VHVpQWxlcnRPcHRpb25zPEk+LCBPPj4oKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBzdWIgPSBvZihcbiAgICAgICAgdHlwZW9mIHRoaXMuaXRlbS5hdXRvQ2xvc2UgPT09ICdmdW5jdGlvbidcbiAgICAgICAgICAgID8gdGhpcy5pdGVtLmF1dG9DbG9zZSh0aGlzLml0ZW0uYXBwZWFyYW5jZSlcbiAgICAgICAgICAgIDogdGhpcy5pdGVtLmF1dG9DbG9zZSxcbiAgICApXG4gICAgICAgIC5waXBlKFxuICAgICAgICAgICAgc3dpdGNoTWFwKChhdXRvQ2xvc2UpID0+IChhdXRvQ2xvc2UgPyB0aW1lcihhdXRvQ2xvc2UpIDogRU1QVFkpKSxcbiAgICAgICAgICAgIHRha2VVbnRpbChmcm9tRXZlbnQodGhpcy5lbCwgJ21vdXNlZW50ZXInKSksXG4gICAgICAgICAgICByZXBlYXQoe2RlbGF5OiAoKSA9PiBmcm9tRXZlbnQodGhpcy5lbCwgJ21vdXNlbGVhdmUnKX0pLFxuICAgICAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKCksXG4gICAgICAgIClcbiAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB0aGlzLml0ZW0uJGltcGxpY2l0LmNvbXBsZXRlKCkpO1xuXG4gICAgcHVibGljIGdldCBmcm9tKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLnBvc2l0aW9uLmVuZHNXaXRoKCdhdXRvJykgPyAndHJhbnNsYXRlWCgxMDAlKScgOiAndHJhbnNsYXRlWCgtMTAwJSknO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ0LXdyYXBwZXJcIj5cbiAgICA8dHVpLW5vdGlmaWNhdGlvblxuICAgICAgICBzaXplPVwibVwiXG4gICAgICAgIFthcHBlYXJhbmNlXT1cIml0ZW0uYXBwZWFyYW5jZVwiXG4gICAgICAgIFtjbGFzcy50LWNsb3NlYWJsZV09XCJpdGVtLmNsb3NlYWJsZVwiXG4gICAgICAgIFtpY29uXT1cIml0ZW0uaWNvblwiXG4gICAgPlxuICAgICAgICA8c3BhbiB0dWlUaXRsZT5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cIml0ZW0ubGFiZWwgYXMgdGV4dDsgY29udGV4dDogaXRlbVwiPlxuICAgICAgICAgICAgICAgIHt7IHRleHQgfX1cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPHNwYW4gdHVpU3VidGl0bGU+XG4gICAgICAgICAgICAgICAgPHNwYW5cbiAgICAgICAgICAgICAgICAgICAgKnBvbHltb3JwaGV1c091dGxldD1cIml0ZW0uY29udGVudCBhcyB0ZXh0OyBjb250ZXh0OiBpdGVtXCJcbiAgICAgICAgICAgICAgICAgICAgW2lubmVySFRNTF09XCJ0ZXh0XCJcbiAgICAgICAgICAgICAgICA+PC9zcGFuPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICpuZ0lmPVwiaXRlbS5jbG9zZWFibGVcIlxuICAgICAgICAgICAgdHVpSWNvbkJ1dHRvblxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICBbaWNvblN0YXJ0XT1cImljb25zLmNsb3NlXCJcbiAgICAgICAgICAgIChjbGljayk9XCJpdGVtLiRpbXBsaWNpdC5jb21wbGV0ZSgpXCJcbiAgICAgICAgPlxuICAgICAgICAgICAge3sgY2xvc2UoKSB9fVxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L3R1aS1ub3RpZmljYXRpb24+XG48L2Rpdj5cbiJdfQ==