@taiga-ui/kit
Version:
Taiga UI Angular main components kit
100 lines (94 loc) • 9.32 kB
JavaScript
import * as i0 from '@angular/core';
import { isSignal, ChangeDetectionStrategy, Component, Injectable, input, Directive } from '@angular/core';
import * as i2 from '@ng-web-apis/resize-observer';
import { WaResizeObserver } from '@ng-web-apis/resize-observer';
import * as i1 from '@taiga-ui/cdk/directives/animated';
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 { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import * as i1$1 from '@taiga-ui/cdk/portals';
import { tuiAsPortal, TuiPortalDirective } from '@taiga-ui/cdk/portals';
import { TuiModalService } from '@taiga-ui/core/portals/modal';
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: "19.2.21", ngImport: i0, type: TuiNotificationMiddleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", 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\")" }, classAttribute: "tui-backdrop-hidden" }, providers: [tuiLoaderOptionsProvider({ size: 'l' })], 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-typography-body-m);--tui-scale: .5}:host:before{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset:50% auto auto 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>[tuiAvatar],: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", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddleComponent, decorators: [{
type: Component,
args: [{ 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' })], hostDirectives: [
TuiAnimated,
{ directive: WaResizeObserver, outputs: ['waResizeObserver'] },
], host: {
class: 'tui-backdrop-hidden',
'(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-typography-body-m);--tui-scale: .5}:host:before{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;transition-property:width;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset:50% auto auto 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>[tuiAvatar],: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"] }]
}] });
class TuiNotificationMiddleService extends TuiModalService {
constructor() {
super(...arguments);
this.options = { closable: false };
this.content = TuiNotificationMiddleComponent;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddleService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddleService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
class TuiNotificationMiddle {
constructor() {
this.tuiNotificationMiddleOptions = input({});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiNotificationMiddle, isStandalone: true, selector: "ng-template[tuiNotificationMiddle]", inputs: { tuiNotificationMiddleOptions: { classPropertyName: "tuiNotificationMiddleOptions", publicName: "tuiNotificationMiddleOptions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tuiAsPortal(TuiNotificationMiddleService)], hostDirectives: [{ directive: i1$1.TuiPortalDirective, inputs: ["options", "tuiNotificationMiddleOptions", "open", "tuiNotificationMiddle"], outputs: ["openChange", "tuiNotificationMiddleChange"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiNotificationMiddle, decorators: [{
type: Directive,
args: [{
selector: 'ng-template[tuiNotificationMiddle]',
providers: [tuiAsPortal(TuiNotificationMiddleService)],
hostDirectives: [
{
directive: TuiPortalDirective,
inputs: [
'options: tuiNotificationMiddleOptions',
'open: tuiNotificationMiddle',
],
outputs: ['openChange: tuiNotificationMiddleChange'],
},
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiNotificationMiddle, TuiNotificationMiddleComponent, TuiNotificationMiddleService };
//# sourceMappingURL=taiga-ui-kit-components-notification-middle.mjs.map