diff --git a/projects/core/components/notification/notification.component.ts b/projects/core/components/notification/notification.component.ts
index 5eac40ebbbfd..b23a0d447ef2 100644
--- a/projects/core/components/notification/notification.component.ts
+++ b/projects/core/components/notification/notification.component.ts
@@ -19,7 +19,7 @@ import {TuiNotificationT} from '@taiga-ui/core/types';
import {Observable} from 'rxjs';
@Component({
- selector: 'tui-notification',
+ selector: 'tui-notification,a[tuiNotification],button[tuiNotification]',
templateUrl: './notification.template.html',
styleUrls: ['./notification.style.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/core/components/notification/notification.style.less b/projects/core/components/notification/notification.style.less
index e79b6855795b..b0c6baf0a061 100644
--- a/projects/core/components/notification/notification.style.less
+++ b/projects/core/components/notification/notification.style.less
@@ -11,6 +11,22 @@
box-sizing: border-box;
overflow: hidden;
+ .t-more {
+ display: none;
+ }
+
+ &button,
+ &a {
+ border: none;
+ cursor: pointer;
+
+ .t-more {
+ display: inline-flex;
+ color: var(--tui-text-01);
+ opacity: 0.5;
+ }
+ }
+
&[data-size='s'] {
padding: 0.375rem 0.625rem;
@@ -23,6 +39,10 @@
.t-close {
margin: -0.125rem -0.375rem -0.125rem 0.75rem;
}
+
+ .t-more {
+ margin: -0.125rem -0.375rem -0.125rem 0;
+ }
}
&[data-size='m'] {
@@ -37,6 +57,10 @@
.t-close {
margin: -0.125rem -0.125rem -0.125rem 1rem;
}
+
+ .t-more {
+ margin: -0.125rem -0.375rem -0.125rem 0;
+ }
}
&[data-size='l'] {
@@ -49,6 +73,10 @@
height: 1.5rem;
margin-right: 0.5rem;
}
+
+ .t-more {
+ margin-right: -0.5rem;
+ }
}
&[data-status='info'] {
@@ -81,4 +109,6 @@
flex: 1;
word-break: break-word;
color: var(--tui-text-01);
+ text-align: left;
+ align-self: center;
}
diff --git a/projects/core/components/notification/notification.template.html b/projects/core/components/notification/notification.template.html
index de5b9015fdde..16c9a48f15d6 100644
--- a/projects/core/components/notification/notification.template.html
+++ b/projects/core/components/notification/notification.template.html
@@ -6,7 +6,6 @@
[src]="iconName"
>
-
@@ -22,3 +21,8 @@
[title]="closeWord$ | async"
(click)="close.emit()"
>
+
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.html b/projects/demo/src/modules/components/notification/examples/1/index.html
index be82e0bc68b8..2432e3c72d57 100644
--- a/projects/demo/src/modules/components/notification/examples/1/index.html
+++ b/projects/demo/src/modules/components/notification/examples/1/index.html
@@ -1,26 +1,40 @@
-
- A short simple
- informative
- message
-
-
- A short simple
- informative
- message
-
-
- A short simple
- informative
- message
-
-
- A short simple
- informative
- message
-
+
+
+ {{ status | titlecase }} label ({{ size | uppercase }})
+
+
+
+
+
+ {{ status | titlecase }} label ({{ size | uppercase }})
+
+ Hello world
+
+
+
+
+
+
+
+
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.less b/projects/demo/src/modules/components/notification/examples/1/index.less
new file mode 100644
index 000000000000..96969167f55e
--- /dev/null
+++ b/projects/demo/src/modules/components/notification/examples/1/index.less
@@ -0,0 +1,16 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+tui-svg:last-child {
+ display: flex;
+ align-self: center;
+ width: 1rem;
+ height: 1rem;
+ margin: 0 0 0 0.75rem;
+ color: var(--tui-text-01);
+ opacity: 0.5;
+ float: right;
+}
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.ts b/projects/demo/src/modules/components/notification/examples/1/index.ts
index 43168567369c..d2ab9728e088 100644
--- a/projects/demo/src/modules/components/notification/examples/1/index.ts
+++ b/projects/demo/src/modules/components/notification/examples/1/index.ts
@@ -5,7 +5,11 @@ import {encapsulation} from '@demo/emulate/encapsulation';
@Component({
selector: 'tui-notification-example-1',
templateUrl: './index.html',
+ styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
-export class TuiNotificationExample1 {}
+export class TuiNotificationExample1 {
+ readonly statuses = ['neutral', 'info', 'success', 'warning', 'error'] as const;
+ readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/components/notification/notification.module.ts b/projects/demo/src/modules/components/notification/notification.module.ts
index 9a72f53d8e97..279b1047f946 100644
--- a/projects/demo/src/modules/components/notification/notification.module.ts
+++ b/projects/demo/src/modules/components/notification/notification.module.ts
@@ -4,11 +4,13 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
import {
- TuiButtonModule,
+ TuiHintModule,
TuiLinkModule,
TuiModeModule,
TuiNotificationModule,
+ TuiSvgModule,
} from '@taiga-ui/core';
+import {TuiButtonModule} from '@taiga-ui/experimental';
import {TuiNotificationExample1} from './examples/1';
import {TuiNotificationExample2} from './examples/2';
@@ -26,6 +28,8 @@ import {ExampleTuiNotificationComponent} from './notification.component';
ReactiveFormsModule,
TuiAddonDocModule,
RouterModule.forChild(tuiGenerateRoutes(ExampleTuiNotificationComponent)),
+ TuiHintModule,
+ TuiSvgModule,
],
declarations: [
ExampleTuiNotificationComponent,