@taiga-ui/kit
Version:
Taiga UI Angular main components kit
57 lines • 11.5 kB
JavaScript
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLW1pZGRsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9ub3RpZmljYXRpb24tbWlkZGxlL25vdGlmaWNhdGlvbi1taWRkbGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFjLE1BQU0sZUFBZSxDQUFDO0FBQ3hGLE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzlELE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxtQ0FBbUMsQ0FBQztBQUU5RCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsU0FBUyxFQUFFLHdCQUF3QixFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDckYsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0saUNBQWlDLENBQUM7QUFDekUsT0FBTyxFQUFDLGFBQWEsRUFBRSxrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7O0FBTXpFLE1BMEJhLDhCQUE4QjtJQTFCM0M7UUEyQnVCLE9BQUUsR0FBRyxnQkFBZ0IsRUFBRSxDQUFDO1FBQ3hCLFlBQU8sR0FDdEIsYUFBYSxFQUFrRCxDQUFDO0tBYXZFO0lBWGEsT0FBTyxDQUFDLE1BQW1CO1FBQ2pDLElBQUksSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQzVDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ3JDO0lBQ0wsQ0FBQztJQUVELElBQVksUUFBUTtRQUNoQixPQUFPLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztZQUNsQyxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUU7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO0lBQ2hDLENBQUM7K0dBZlEsOEJBQThCO21HQUE5Qiw4QkFBOEIsZ1NBZDVCO1lBQ1Asd0JBQXdCLENBQUMsRUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFDLENBQUM7WUFDckMsd0JBQXdCLENBQUMsRUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFDLENBQUM7U0FDeEMsa0tBWFM7Ozs7O0tBS1QsaTNDQU5TLGtCQUFrQiw4SEFBRSxTQUFTOztTQXVCOUIsOEJBQThCOzRGQUE5Qiw4QkFBOEI7a0JBMUIxQyxTQUFTO2lDQUNNLElBQUksWUFDTix5QkFBeUIsV0FDMUIsQ0FBQyxrQkFBa0IsRUFBRSxTQUFTLENBQUMsWUFDOUI7Ozs7O0tBS1QsbUJBRWdCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Asd0JBQXdCLENBQUMsRUFBQyxJQUFJLEVBQUUsR0FBRyxFQUFDLENBQUM7d0JBQ3JDLHdCQUF3QixDQUFDLEVBQUMsSUFBSSxFQUFFLEdBQUcsRUFBQyxDQUFDO3FCQUN4QyxrQkFDZTt3QkFDWixXQUFXO3dCQUNYLEVBQUMsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxDQUFDLGtCQUFrQixDQUFDLEVBQUM7cUJBQy9ELFFBQ0s7d0JBQ0YsMEJBQTBCLEVBQUUsd0JBQXdCO3dCQUNwRCx3QkFBd0IsRUFBRSwrQkFBK0I7d0JBQ3pELG9CQUFvQixFQUFFLDBEQUEwRDtxQkFDbkYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlzU2lnbmFsLCB0eXBlIFNpZ25hbH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1dhUmVzaXplT2JzZXJ2ZXJ9IGZyb20gJ0BuZy13ZWItYXBpcy9yZXNpemUtb2JzZXJ2ZXInO1xuaW1wb3J0IHtUdWlBbmltYXRlZH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9kaXJlY3RpdmVzL2FuaW1hdGVkJztcbmltcG9ydCB7dHlwZSBUdWlQb3BvdmVyfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3NlcnZpY2VzJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHtUdWlMb2FkZXIsIHR1aUxvYWRlck9wdGlvbnNQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9sb2FkZXInO1xuaW1wb3J0IHt0dWlBdmF0YXJPcHRpb25zUHJvdmlkZXJ9IGZyb20gJ0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9hdmF0YXInO1xuaW1wb3J0IHtpbmplY3RDb250ZXh0LCBQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFR1aU5vdGlmaWNhdGlvbk1pZGRsZU9wdGlvbnMge1xuICAgIGNsb3NhYmxlOiBTaWduYWw8Ym9vbGVhbj4gfCBib29sZWFuO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLW5vdGlmaWNhdGlvbi1taWRkbGUnLFxuICAgIGltcG9ydHM6IFtQb2x5bW9ycGhldXNPdXRsZXQsIFR1aUxvYWRlcl0sXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgPHR1aS1sb2FkZXIgY2xhc3M9XCJ0LWxvYWRlclwiIC8+XG4gICAgICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cImNvbnRleHQuY29udGVudCBhcyB0ZXh0XCI+XG4gICAgICAgICAgICB7eyB0ZXh0IH19XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIGAsXG4gICAgc3R5bGVVcmxzOiBbJy4vbm90aWZpY2F0aW9uLW1pZGRsZS5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHR1aUxvYWRlck9wdGlvbnNQcm92aWRlcih7c2l6ZTogJ2wnfSksXG4gICAgICAgIHR1aUF2YXRhck9wdGlvbnNQcm92aWRlcih7c2l6ZTogJ20nfSksXG4gICAgXSxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICBUdWlBbmltYXRlZCxcbiAgICAgICAge2RpcmVjdGl2ZTogV2FSZXNpemVPYnNlcnZlciwgb3V0cHV0czogWyd3YVJlc2l6ZU9ic2VydmVyJ119LFxuICAgIF0sXG4gICAgaG9zdDoge1xuICAgICAgICAnKGRvY3VtZW50OmNsaWNrLmNhcHR1cmUpJzogJ29uQ2xpY2soJGV2ZW50LnRhcmdldCknLFxuICAgICAgICAnKGRvY3VtZW50OmtleWRvd24uZXNjKSc6ICdvbkNsaWNrKCRldmVudC5jdXJyZW50VGFyZ2V0KScsXG4gICAgICAgICcod2FSZXNpemVPYnNlcnZlciknOiAnZWwuc3R5bGUuc2V0UHJvcGVydHkoXCItLXQtd2lkdGhcIiwgZWwuY2xpZW50V2lkdGggKyBcInB4XCIpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlOb3RpZmljYXRpb25NaWRkbGVDb21wb25lbnQge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgY29udGV4dCA9XG4gICAgICAgIGluamVjdENvbnRleHQ8VHVpUG9wb3ZlcjxUdWlOb3RpZmljYXRpb25NaWRkbGVPcHRpb25zLCB2b2lkPj4oKTtcblxuICAgIHByb3RlY3RlZCBvbkNsaWNrKHRhcmdldDogSFRNTEVsZW1lbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuY2xvc2FibGUgJiYgIXRoaXMuZWwuY29udGFpbnModGFyZ2V0KSkge1xuICAgICAgICAgICAgdGhpcy5jb250ZXh0LiRpbXBsaWNpdC5jb21wbGV0ZSgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXQgY2xvc2FibGUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiBpc1NpZ25hbCh0aGlzLmNvbnRleHQuY2xvc2FibGUpXG4gICAgICAgICAgICA/IHRoaXMuY29udGV4dC5jbG9zYWJsZSgpXG4gICAgICAgICAgICA6IHRoaXMuY29udGV4dC5jbG9zYWJsZTtcbiAgICB9XG59XG4iXX0=