@taiga-ui/kit
Version:
Taiga UI Angular main components kit
98 lines (92 loc) • 9.12 kB
JavaScript
import * as i0 from '@angular/core';
import { isSignal, Component, ChangeDetectionStrategy, Injectable, 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 { tuiLoaderOptionsProvider, TuiLoader } from '@taiga-ui/core/components/loader';
import { tuiAvatarOptionsProvider } from '@taiga-ui/kit/components/avatar';
import { injectContext, PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TuiPopoverDirective } from '@taiga-ui/cdk/directives/popover';
import { TuiPopoverService, tuiAsPopover } from '@taiga-ui/cdk/services';
import { TUI_DIALOGS } from '@taiga-ui/core/components/dialog';
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 }); }
}
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"] }]
}] });
class TuiNotificationMiddleService extends TuiPopoverService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddleService, providedIn: 'root', useFactory: () => new TuiNotificationMiddleService(TUI_DIALOGS, TuiNotificationMiddleComponent, {
closable: false,
}) }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddleService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
useFactory: () => new TuiNotificationMiddleService(TUI_DIALOGS, TuiNotificationMiddleComponent, {
closable: false,
}),
}]
}] });
class TuiNotificationMiddle extends TuiPopoverDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddle, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiNotificationMiddle, isStandalone: true, selector: "ng-template[tuiNotificationMiddle]", inputs: { options: ["tuiNotificationMiddleOptions", "options"], open: ["tuiNotificationMiddle", "open"] }, outputs: { openChange: "tuiNotificationMiddleChange" }, providers: [tuiAsPopover(TuiNotificationMiddleService)], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationMiddle, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'ng-template[tuiNotificationMiddle]',
inputs: ['options: tuiNotificationMiddleOptions', 'open: tuiNotificationMiddle'],
outputs: ['openChange: tuiNotificationMiddleChange'],
providers: [tuiAsPopover(TuiNotificationMiddleService)],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiNotificationMiddle, TuiNotificationMiddleComponent, TuiNotificationMiddleService };
//# sourceMappingURL=taiga-ui-kit-components-notification-middle.mjs.map