refactor(core): Notification simplify to directive (#8168)

Co-authored-by: taiga-family-bot <[email protected]>

projects/addon-charts/components/axes/axes.style.less

@@ -112,6 +112,7 @@
 }
 
 .t-labels-x {
+    position: relative;
     display: flex;
     font: var(--tui-font-text-xs);
     border-right: 1px solid transparent;
@@ -141,16 +142,13 @@
         margin: 0;
     }
 
-    :host[new]:not(._centered) & {
+    :host:not(._centered) & {
         &:last-child:not(:first-child) {
-            flex: 0.5;
+            position: absolute;
+            right: 0;
             text-align: right;
             border-left: none;
         }
-
-        &:nth-last-child(2) {
-            flex: 0.5;
-        }
     }
 }
 

projects/addon-doc/components/code/index.less

@@ -3,7 +3,6 @@
 
 :host {
     display: block;
-    overflow: hidden;
 }
 
 .t-header {

projects/addon-doc/components/example/example.component.ts

@@ -140,7 +140,7 @@ export class TuiDocExample {
     protected copyExampleLink(target: EventTarget | null): void {
         this.clipboard.copy((target as HTMLAnchorElement | null)?.href ?? '');
         this.alerts
-            .open(this.texts[1], {label: this.texts[2], status: 'success'})
+            .open(this.texts[1], {label: this.texts[2], appearance: 'success'})
             .subscribe();
     }
 

projects/addon-doc/components/example/example.style.less

@@ -110,3 +110,7 @@
     visibility: visible;
     opacity: 1;
 }
+
+tui-doc-code {
+    overflow: hidden;
+}

projects/addon-doc/components/main/main.component.ts

@@ -8,7 +8,6 @@ import {
 import {RouterOutlet} from '@angular/router';
 import {TuiDocThemeDarkService} from '@taiga-ui/addon-doc/services';
 import {TUI_DOC_ICONS} from '@taiga-ui/addon-doc/tokens';
-import {TuiSwipeService} from '@taiga-ui/cdk/directives/swipe';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TuiRoot} from '@taiga-ui/core/components/root';
 
@@ -29,10 +28,9 @@ import {TuiDocNavigation} from '../navigation/navigation.component';
     templateUrl: './main.template.html',
     styleUrls: ['./main.style.less'],
     encapsulation: ViewEncapsulation.None,
-    // @note: This one was default on purpose so we can test demo in default mode.
+    // @note: This one was default on purpose, so we can test demo in default mode.
     // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
     changeDetection: ChangeDetectionStrategy.Default,
-    providers: [TuiSwipeService],
 })
 export class TuiDocMain {
     private readonly icons = inject(TUI_DOC_ICONS);

projects/addon-doc/components/main/main.style.less

@@ -61,6 +61,10 @@ code:not(pre code) {
         text-wrap: wrap;
 
         tui-notification & {
+            mix-blend-mode: color-burn;
+        }
+
+        [tuiTheme='dark'] tui-notification & {
             mix-blend-mode: luminosity;
         }
 

projects/cdk/schematics/ng-update/v4/steps/constants/identifiers-to-replace.ts

@@ -85,10 +85,6 @@ export const IDENTIFIERS_TO_REPLACE: ReplacementIdentifierMulti[] = [
         from: {name: 'TuiNotificationModule', moduleSpecifier: '@taiga-ui/core'},
         to: {name: 'TuiNotification', moduleSpecifier: '@taiga-ui/core'},
     },
-    {
-        from: {name: 'TuiNotificationT', moduleSpecifier: '@taiga-ui/core'},
-        to: {name: 'TuiNotificationStatus', moduleSpecifier: '@taiga-ui/core'},
-    },
     {
         from: {name: 'TuiFormatPhonePipe', moduleSpecifier: '@taiga-ui/core'},
         to: {name: 'TuiFormatPhonePipe', moduleSpecifier: '@taiga-ui/legacy'},

projects/cdk/schematics/ng-update/v4/steps/constants/types.ts

@@ -22,6 +22,12 @@ export const TYPES_TO_RENAME: readonly ReplacementType[] = [
         to: 'string',
         removeImport: true,
     },
+    {
+        from: 'TuiNotificationT',
+        moduleSpecifier: ['@taiga-ui/core'],
+        to: 'string',
+        removeImport: true,
+    },
     {
         from: 'TuiOperationIcon',
         moduleSpecifier: ['@taiga-ui/proprietary-banking'],

projects/core/components/alert/alert.component.ts

@@ -1,27 +1,28 @@
 import {NgIf} from '@angular/common';
-import type {OnInit} from '@angular/core';
-import {ChangeDetectionStrategy, Component, DestroyRef, inject} from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import type {TuiPopover} from '@taiga-ui/cdk/services';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiFadeIn, tuiHeightCollapse, tuiSlideIn} from '@taiga-ui/core/animations';
+import {TuiButton} from '@taiga-ui/core/components/button';
 import {TuiNotification} from '@taiga-ui/core/components/notification';
-import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
-import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
+import {TuiTitle} from '@taiga-ui/core/directives/title';
 import {
-    POLYMORPHEUS_CONTEXT,
-    PolymorpheusOutlet,
-    PolymorpheusTemplate,
-} from '@taiga-ui/polymorpheus';
-import {fromEvent, repeat, takeUntil, timer} from 'rxjs';
+    TUI_ANIMATIONS_SPEED,
+    TUI_CLOSE_WORD,
+    TUI_COMMON_ICONS,
+} from '@taiga-ui/core/tokens';
+import {tuiToAnimationOptions} from '@taiga-ui/core/utils';
+import {POLYMORPHEUS_CONTEXT, PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
+import {EMPTY, fromEvent, of, repeat, switchMap, takeUntil, timer} from 'rxjs';
 
 import type {TuiAlertOptions} from './alert.interfaces';
 import {TUI_ALERT_POSITION} from './alert.tokens';
 
 @Component({
     standalone: true,
     selector: 'tui-alert',
-    imports: [TuiNotification, NgIf, PolymorpheusOutlet, PolymorpheusTemplate],
+    imports: [NgIf, PolymorpheusOutlet, TuiNotification, TuiButton, TuiTitle],
     templateUrl: './alert.template.html',
     styleUrls: ['./alert.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -34,43 +35,30 @@ import {TUI_ALERT_POSITION} from './alert.tokens';
         '[@tuiHeightCollapse]': 'animation',
     },
 })
-export class TuiAlertComponent<O, I> implements OnInit {
+export class TuiAlertComponent<O, I> {
     private readonly el = tuiInjectElement();
-    private readonly destroyRef = inject(DestroyRef);
+
+    protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
+    protected readonly close = toSignal(inject(TUI_CLOSE_WORD));
     protected readonly position = inject(TUI_ALERT_POSITION);
     protected readonly item =
         inject<TuiPopover<TuiAlertOptions<I>, O>>(POLYMORPHEUS_CONTEXT);
 
-    protected readonly autoClose =
-        typeof this.item.autoClose === 'function'
-            ? this.item.autoClose(this.item.status)
-            : this.item.autoClose;
-
-    protected readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
-
     protected readonly animation = this.position.endsWith('auto')
         ? {...this.options, value: 'right'}
         : {...this.options, value: 'left'};
 
-    public ngOnInit(): void {
-        this.initAutoClose();
-    }
-
-    protected close(): void {
-        this.item.$implicit.complete();
-    }
-
-    private initAutoClose(): void {
-        if (!this.autoClose) {
-            return;
-        }
-
-        timer(this.autoClose)
-            .pipe(
-                takeUntil(fromEvent(this.el, 'mouseenter')),
-                repeat({delay: () => fromEvent(this.el, 'mouseleave')}),
-                takeUntilDestroyed(this.destroyRef),
-            )
-            .subscribe(() => this.close());
-    }
+    protected readonly sub = of(
+        typeof this.item.autoClose === 'function'
+            ? this.item.autoClose(this.item.appearance)
+            : this.item.autoClose,
+    )
+        .pipe(
+            switchMap((autoClose) => (autoClose ? timer(autoClose) : EMPTY)),
+            takeUntil(fromEvent(this.el, 'mouseenter')),
+            repeat({delay: () => fromEvent(this.el, 'mouseleave')}),
+            takeUntilDestroyed(),
+        )
+        .subscribe(() => this.item.$implicit.complete());
 }

projects/core/components/alert/alert.interfaces.ts

@@ -1,16 +1,11 @@
 import type {TuiPopoverContext} from '@taiga-ui/cdk/services';
 import type {TuiHandler} from '@taiga-ui/cdk/types';
-import type {
-    TuiNotificationOptions,
-    TuiNotificationStatus,
-} from '@taiga-ui/core/components/notification';
+import type {TuiNotificationOptions} from '@taiga-ui/core/components/notification';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 
-export type TuiAlertAutoClose = TuiHandler<TuiNotificationStatus, number> | number;
-
 export interface TuiAlertOptions<I = undefined>
     extends Omit<TuiNotificationOptions, 'size'> {
-    readonly autoClose: TuiAlertAutoClose;
+    readonly autoClose: TuiHandler<string, number> | number;
     readonly data: I;
     readonly closeable: boolean;
     readonly label: PolymorpheusContent<TuiAlertOptions<I>>;

projects/core/components/alert/alert.style.less

@@ -2,9 +2,11 @@
 
 :host {
     display: block;
-    box-shadow: var(--tui-shadow-medium);
-    border-radius: var(--tui-radius-l);
     width: 18rem;
+    flex-shrink: 0;
+    background: var(--tui-background-elevation-1);
+    border-radius: var(--tui-radius-m);
+    box-shadow: var(--tui-shadow-medium);
 
     &:not(:first-child) {
         margin-top: 0.75rem !important;
@@ -14,34 +16,3 @@
         margin-bottom: 0 !important;
     }
 }
-
-.t-heading {
-    margin: 0;
-
-    [data-size='s'] & {
-        font: var(--tui-font-text-s);
-        font-weight: bold;
-    }
-
-    [data-size='m'] & {
-        font: var(--tui-font-text-m);
-        line-height: 1.25rem;
-        font-weight: bold;
-    }
-
-    [data-size='l'] & {
-        font: var(--tui-font-text-l);
-        line-height: 1.5rem;
-        font-weight: bold;
-    }
-}
-
-.t-content {
-    color: var(--tui-text-primary);
-    word-wrap: break-word;
-    word-break: break-word;
-
-    &:empty {
-        display: none;
-    }
-}

projects/core/components/alert/alert.template.html

@@ -1,25 +1,25 @@
 <tui-notification
-    [hideClose]="!item.closeable"
+    size="m"
+    [appearance]="item.appearance"
     [icon]="item.icon"
-    [status]="item.status"
-    (close)="close()"
 >
-    <label
-        *ngIf="item.label"
-        automation-id="tui-notification-alert__heading"
-        class="t-heading"
-    >
+    <span tuiTitle>
         <ng-container *polymorpheusOutlet="item.label as text; context: item">
             {{ text }}
         </ng-container>
-    </label>
-    <div
-        automation-id="tui-notification-alert__content"
-        class="t-content"
+        <span tuiSubtitle>
+            <span
+                *polymorpheusOutlet="item.content as text; context: item"
+                [innerHTML]="text"
+            ></span>
+        </span>
+    </span>
+    <button
+        *ngIf="item.closeable"
+        tuiIconButton
+        [iconStart]="icons.close"
+        (click)="item.$implicit.complete()"
     >
-        <div
-            *polymorpheusOutlet="item.content as text; context: item"
-            [innerHTML]="text"
-        ></div>
-    </div>
+        {{ close() }}
+    </button>
 </tui-notification>

projects/core/components/alert/alert.tokens.ts

@@ -11,7 +11,7 @@ import {BehaviorSubject, combineLatest, map, of} from 'rxjs';
 
 import type {TuiAlertOptions} from './alert.interfaces';
 
-export const TUI_ALERT_DEFAULT_OPTIONS: Omit<TuiAlertOptions, 'icon' | 'status'> = {
+export const TUI_ALERT_DEFAULT_OPTIONS: Omit<TuiAlertOptions, 'appearance' | 'icon'> = {
     autoClose: 3000,
     label: '',
     closeable: true,

projects/core/components/notification/index.ts

@@ -1,2 +1,2 @@
-export * from './notification.component';
+export * from './notification.directive';
 export * from './notification.options';