@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
110 lines (105 loc) • 14.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, Directive, Input } from '@angular/core';
import { tuiWithStyles, tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { tuiLinkOptionsProvider } from '@taiga-ui/core/components/link';
import * as i2 from '@taiga-ui/core/directives/appearance';
import { tuiAppearanceOptionsProvider, TuiWithAppearance } from '@taiga-ui/core/directives/appearance';
import * as i1 from '@taiga-ui/core/directives/icons';
import { TuiIcons, TuiWithIcons } from '@taiga-ui/core/directives/icons';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
const ICONS = {
info: '@tui.info',
positive: '@tui.circle-check',
negative: '@tui.circle-x',
warning: '@tui.circle-alert',
neutral: '@tui.info',
/* TODO @deprecated remove in v5 */
success: '@tui.circle-check',
/* TODO @deprecated remove in v5 */
error: '@tui.circle-x',
};
/** Default values for the notification options. */
const TUI_NOTIFICATION_DEFAULT_OPTIONS = {
appearance: 'info',
icon: (appearance) => ICONS[appearance] ?? '',
size: 'l',
};
/**
* Default parameters for notification alert component
*/
const [TUI_NOTIFICATION_OPTIONS, tuiNotificationOptionsProvider] = tuiCreateOptions(TUI_NOTIFICATION_DEFAULT_OPTIONS);
class TuiNotificationStyles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationStyles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiNotificationStyles, isStandalone: true, selector: "ng-component", host: { classAttribute: "tui-notification" }, ngImport: i0, template: '', isInline: true, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotificationStyles, decorators: [{
type: Component,
args: [{ standalone: true, template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
class: 'tui-notification',
}, styles: ["tui-notification,[tuiNotification]{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;position:relative;display:block;max-block-size:100%;color:var(--tui-text-primary);padding:1rem;font:var(--tui-font-text-m);line-height:1.5rem;border-radius:var(--tui-radius-l);box-sizing:border-box;text-align:start;text-decoration:none;border-inline-start:var(--t-start) solid transparent;border-inline-end:var(--t-end) solid transparent;--t-start: 0;--t-end: 0}tui-notification[style*=\"--t-icon-start:\"],[tuiNotification][style*=\"--t-icon-start:\"]{--t-start: 2rem}tui-notification[style*=\"--t-icon-end:\"],[tuiNotification][style*=\"--t-icon-end:\"]{--t-end: 1.5rem}tui-notification:before,[tuiNotification]:before{position:absolute;left:-1rem;inset-inline-start:-1rem}tui-notification:after,[tuiNotification]:after{position:absolute;top:50%;transform:translateY(-50%);right:-.5rem;font-size:1rem;margin:0;margin-inline-end:-.25rem;margin-inline-start:auto;color:var(--tui-text-tertiary)!important}@supports (inset-inline-end: 0){tui-notification:after,[tuiNotification]:after{right:unset;inset-inline-end:-.5rem}}tui-notification[data-size=s],[tuiNotification][data-size=s]{padding:.375rem .625rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=s][style*=\"--t-icon-start:\"],[tuiNotification][data-size=s][style*=\"--t-icon-start:\"]{--t-start: 1.5rem}tui-notification[data-size=s]:before,[tuiNotification][data-size=s]:before{top:.5rem;left:-.875rem;inset-inline-start:-.875rem;font-size:1rem}tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:-.875rem}@supports (inset-inline-end: 0){tui-notification[data-size=s]:after,[tuiNotification][data-size=s]:after{right:unset;inset-inline-end:-.875rem}}tui-notification[data-size=s] tui-icon,[tuiNotification][data-size=s] tui-icon{font-size:1rem}tui-notification[data-size=s] [tuiTitle],[tuiNotification][data-size=s] [tuiTitle]{font:var(--tui-font-text-s);font-weight:700}tui-notification[data-size=s] [tuiSubtitle],[tuiNotification][data-size=s] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=s] [tuiSubtitle]+*,[tuiNotification][data-size=s] [tuiSubtitle]+*{gap:1rem;margin:.375rem 0 .25rem}tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{top:0;right:0}@supports (inset-inline-end: 0){tui-notification[data-size=s]>[tuiIconButton],[tuiNotification][data-size=s]>[tuiIconButton]{right:unset;inset-inline-end:0}}tui-notification[data-size=m],[tuiNotification][data-size=m]{padding:.75rem;font:var(--tui-font-text-s);line-height:1.25rem;border-radius:var(--tui-radius-m)}tui-notification[data-size=m][style*=\"--t-icon-start:\"],[tuiNotification][data-size=m][style*=\"--t-icon-start:\"]{--t-start: 1.625rem}tui-notification[data-size=m]:before,[tuiNotification][data-size=m]:before{left:-.875rem;inset-inline-start:-.875rem;font-size:1.25rem}tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:-.75rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]:after,[tuiNotification][data-size=m]:after{right:unset;inset-inline-end:-.75rem}}tui-notification[data-size=m] tui-icon,[tuiNotification][data-size=m] tui-icon{font-size:1.25rem}tui-notification[data-size=m] [tuiTitle],[tuiNotification][data-size=m] [tuiTitle]{font:var(--tui-font-text-ui-m);font-weight:700}tui-notification[data-size=m] [tuiSubtitle],[tuiNotification][data-size=m] [tuiSubtitle]{font:var(--tui-font-text-s)}tui-notification[data-size=m] [tuiSubtitle]+*,[tuiNotification][data-size=m] [tuiSubtitle]+*{gap:1rem;margin:.625rem 0 .25rem}tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{top:.375rem;right:.5rem}@supports (inset-inline-end: 0){tui-notification[data-size=m]>[tuiIconButton],[tuiNotification][data-size=m]>[tuiIconButton]{right:unset;inset-inline-end:.5rem}}tui-notification [tuiTitle],[tuiNotification] [tuiTitle]{gap:.125rem;font:var(--tui-font-text-ui-l);font-weight:700}tui-notification [tuiSubtitle],[tuiNotification] [tuiSubtitle]{font:var(--tui-font-text-m)}tui-notification [tuiSubtitle]+*,[tuiNotification] [tuiSubtitle]+*{display:flex;align-items:center;gap:1.25rem;margin-block-start:.625rem;font:var(--tui-font-text-s)}tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{position:absolute;top:.75rem;right:.75rem;box-shadow:none!important;background:transparent!important}@supports (inset-inline-end: 0){tui-notification>[tuiIconButton],[tuiNotification]>[tuiIconButton]{right:unset;inset-inline-end:.75rem}}[tuiNotification]{cursor:pointer}\n"] }]
}] });
class TuiNotification {
constructor() {
this.options = inject(TUI_NOTIFICATION_OPTIONS);
this.nothing = tuiWithStyles(TuiNotificationStyles);
this.icons = inject(TuiIcons);
this.appearance = this.options.appearance;
this.icon = this.options.icon;
this.size = this.options.size;
}
ngOnInit() {
this.refresh();
}
ngOnChanges() {
this.refresh();
}
refresh() {
this.icons.iconStart.set(tuiIsString(this.icon) ? this.icon : this.icon(this.appearance));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiNotification, isStandalone: true, selector: "tui-notification,a[tuiNotification],button[tuiNotification]", inputs: { appearance: "appearance", icon: "icon", size: "size" }, host: { properties: { "attr.data-size": "size" } }, providers: [
tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),
tuiLinkOptionsProvider({
appearance: '',
pseudo: true,
}),
tuiButtonOptionsProvider({
appearance: 'outline-grayscale',
size: 's',
}),
], usesOnChanges: true, hostDirectives: [{ directive: i1.TuiWithIcons }, { directive: i2.TuiWithAppearance }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNotification, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'tui-notification,a[tuiNotification],button[tuiNotification]',
providers: [
tuiAppearanceOptionsProvider(TUI_NOTIFICATION_OPTIONS),
tuiLinkOptionsProvider({
appearance: '',
pseudo: true,
}),
tuiButtonOptionsProvider({
appearance: 'outline-grayscale',
size: 's',
}),
],
hostDirectives: [TuiWithIcons, TuiWithAppearance],
host: {
'[attr.data-size]': 'size',
},
}]
}], propDecorators: { appearance: [{
type: Input
}], icon: [{
type: Input
}], size: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_NOTIFICATION_DEFAULT_OPTIONS, TUI_NOTIFICATION_OPTIONS, TuiNotification, tuiNotificationOptionsProvider };
//# sourceMappingURL=taiga-ui-core-components-notification.mjs.map