diff --git a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.component.ts b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.component.ts index 5138d84fe469..b9b36640f862 100644 --- a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.component.ts +++ b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.component.ts @@ -1,5 +1,5 @@ import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; -import {TUI_IS_IOS, TuiDialog} from '@taiga-ui/cdk'; +import {TUI_IS_IOS, TuiPopover} from '@taiga-ui/cdk'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; import {TuiMobileDialogOptions} from './mobile-dialog.options'; @@ -17,7 +17,7 @@ export class TuiMobileDialogComponent { constructor( @Inject(TUI_IS_IOS) readonly isIOS: boolean, @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, number>, + readonly context: TuiPopover, number>, ) {} onAction(index: number): void { diff --git a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.service.ts b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.service.ts index 3aa85065da84..257ecb90c9bd 100644 --- a/projects/addon-mobile/components/mobile-dialog/mobile-dialog.service.ts +++ b/projects/addon-mobile/components/mobile-dialog/mobile-dialog.service.ts @@ -1,5 +1,5 @@ import {inject, Injectable} from '@angular/core'; -import {TuiBaseDialogContext, TuiPopoverService} from '@taiga-ui/cdk'; +import {TuiPopoverContext, TuiPopoverService} from '@taiga-ui/cdk'; import {TUI_DIALOGS} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -22,7 +22,7 @@ export class TuiMobileDialogService extends TuiPopoverService< > { override open( content: PolymorpheusContent< - TuiBaseDialogContext & TuiMobileDialogOptions + TuiMobileDialogOptions & TuiPopoverContext >, options: Partial> = {}, ): Observable { diff --git a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts index 423d1d47e9ff..4620ca8603a8 100644 --- a/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts +++ b/projects/addon-mobile/components/sheet-dialog/sheet-dialog.component.ts @@ -10,7 +10,7 @@ import { ViewChild, ViewChildren, } from '@angular/core'; -import {EMPTY_QUERY, TuiDialog, tuiPure} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, TuiPopover, tuiPure} from '@taiga-ui/cdk'; import { TUI_ANIMATIONS_SPEED, TUI_CLOSE_WORD, @@ -67,7 +67,7 @@ export class TuiSheetDialogComponent implements AfterViewInit { @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons, @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable, @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, any>, + readonly context: TuiPopover, any>, ) {} @HostBinding('style.top.px') diff --git a/projects/addon-preview/components/preview-dialog/preview-dialog.component.ts b/projects/addon-preview/components/preview-dialog/preview-dialog.component.ts index da6c1bc19d38..f2bb02956ad6 100644 --- a/projects/addon-preview/components/preview-dialog/preview-dialog.component.ts +++ b/projects/addon-preview/components/preview-dialog/preview-dialog.component.ts @@ -5,7 +5,7 @@ import { Inject, ViewEncapsulation, } from '@angular/core'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import {tuiSlideInTop} from '@taiga-ui/core'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; @@ -20,7 +20,7 @@ import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; export class TuiPreviewDialogComponent { constructor( @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, + readonly context: TuiPopover, ) {} @HostListener('document:keydown.esc') diff --git a/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts b/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts index c91021f4adc4..b34ea1aced82 100644 --- a/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts +++ b/projects/addon-tablebars/components/table-bars-host/table-bars-host.component.ts @@ -1,11 +1,12 @@ import {ChangeDetectionStrategy, Component, Inject, inject} from '@angular/core'; import {WINDOW} from '@ng-web-apis/common'; -import {TUI_PARENT_ANIMATION, TuiContext} from '@taiga-ui/cdk'; +import {TuiContext} from '@taiga-ui/cdk'; import { TUI_ANIMATIONS_SPEED, TUI_CLOSE_WORD, TUI_COMMON_ICONS, TUI_MEDIA, + TUI_PARENT_ANIMATION, TuiBrightness, TuiCommonIcons, tuiIsMobile, diff --git a/projects/cdk/abstract/dialog.directive.ts b/projects/cdk/abstract/dialog.directive.ts deleted file mode 100644 index d0128d06adb5..000000000000 --- a/projects/cdk/abstract/dialog.directive.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { - ChangeDetectorRef, - Directive, - Inject, - OnChanges, - TemplateRef, -} from '@angular/core'; -import {tuiIfMap} from '@taiga-ui/cdk/observables'; -import {TuiDialog} from '@taiga-ui/cdk/types'; -import {PolymorpheusTemplate} from '@tinkoff/ng-polymorpheus'; -import {distinctUntilChanged, endWith, ignoreElements, share, Subject} from 'rxjs'; - -import {AbstractTuiDialogService} from './dialog.service'; - -@Directive() -export abstract class AbstractTuiDialogDirective - extends PolymorpheusTemplate> - implements OnChanges -{ - private readonly open$ = new Subject(); - - options: Partial = {}; - open = false; - - openChange = this.open$.pipe( - distinctUntilChanged(), - tuiIfMap(() => - this.service.open(this, this.options).pipe(ignoreElements(), endWith(false)), - ), - share(), - ); - - constructor( - @Inject(TemplateRef) - templateRef: TemplateRef>, - @Inject(ChangeDetectorRef) cdr: ChangeDetectorRef, - @Inject(AbstractTuiDialogService) - private readonly service: AbstractTuiDialogService, - ) { - super(templateRef, cdr); - } - - ngOnChanges(): void { - this.open$.next(this.open); - } -} diff --git a/projects/cdk/abstract/dialog.service.ts b/projects/cdk/abstract/dialog.service.ts deleted file mode 100644 index 5099a54c4008..000000000000 --- a/projects/cdk/abstract/dialog.service.ts +++ /dev/null @@ -1,51 +0,0 @@ -import {Inject, Injectable} from '@angular/core'; -import {TuiBaseDialogContext} from '@taiga-ui/cdk/interfaces'; -import {TuiIdService} from '@taiga-ui/cdk/services'; -import {TuiDialog} from '@taiga-ui/cdk/types'; -import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; -import {BehaviorSubject, Observable} from 'rxjs'; - -@Injectable() -export abstract class AbstractTuiDialogService extends Observable< - ReadonlyArray> -> { - protected abstract readonly component: PolymorpheusComponent>; - - protected abstract readonly defaultOptions: T; - - protected readonly dialogs$ = new BehaviorSubject>>( - [], - ); - - constructor(@Inject(TuiIdService) private readonly idService: TuiIdService) { - super(observer => this.dialogs$.subscribe(observer)); - } - - open( - content: PolymorpheusContent>, - options: Partial = {}, - ): Observable { - return new Observable(observer => { - const completeWith = (result: K extends void ? G : K): void => { - observer.next(result); - observer.complete(); - }; - const dialog = { - ...this.defaultOptions, - ...options, - content, - completeWith, - $implicit: observer, - component: this.component, - createdAt: Date.now(), - id: this.idService.generate(), - }; - - this.dialogs$.next([...this.dialogs$.value, dialog]); - - return () => { - this.dialogs$.next(this.dialogs$.value.filter(item => item !== dialog)); - }; - }); - } -} diff --git a/projects/cdk/abstract/index.ts b/projects/cdk/abstract/index.ts index 976ddd1aedaf..30cada44edb1 100644 --- a/projects/cdk/abstract/index.ts +++ b/projects/cdk/abstract/index.ts @@ -1,7 +1,5 @@ export * from './control'; export * from './controller'; -export * from './dialog.directive'; -export * from './dialog.service'; export * from './interactive'; export * from './multiple-control'; export * from './nullable-control'; diff --git a/projects/cdk/components/alert-host/alert-host.component.ts b/projects/cdk/components/alert-host/alert-host.component.ts deleted file mode 100644 index b226d33d38ac..000000000000 --- a/projects/cdk/components/alert-host/alert-host.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Inject, - INJECTOR, - Injector, - OnInit, - Self, - TrackByFunction, - ViewEncapsulation, -} from '@angular/core'; -import {TUI_PARENT_ANIMATION} from '@taiga-ui/cdk/constants'; -import {TuiDestroyService} from '@taiga-ui/cdk/services'; -import {TUI_ALERTS} from '@taiga-ui/cdk/tokens'; -import {TuiDialog, TuiTypedMapper} from '@taiga-ui/cdk/types'; -import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; -import {combineLatest, Observable, takeUntil} from 'rxjs'; - -@Component({ - selector: 'tui-alert-host', - templateUrl: './alert-host.template.html', - styleUrls: ['./alert-host.style.less'], - encapsulation: ViewEncapsulation.None, - // So that we do not force OnPush on custom alerts - // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection - changeDetection: ChangeDetectionStrategy.Default, - providers: [TuiDestroyService], - animations: [TUI_PARENT_ANIMATION], -}) -export class TuiAlertHostComponent> - implements OnInit -{ - alerts: ReadonlyArray = []; - - constructor( - @Inject(TUI_ALERTS) private readonly allAlerts: Array>, - @Inject(INJECTOR) private readonly injector: Injector, - @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, - @Inject(ChangeDetectorRef) private readonly cdr: ChangeDetectorRef, - ) {} - - readonly trackBy: TrackByFunction = (index: number) => index; - - ngOnInit(): void { - // Due to this view being parallel to app content, `markForCheck` from `async` pipe - // can happen after view was checked, so calling `detectChanges` instead - combineLatest(this.allAlerts) - .pipe(takeUntil(this.destroy$)) - .subscribe(alerts => { - this.alerts = alerts; - this.cdr.detectChanges(); - }); - } - - readonly mapper: TuiTypedMapper<[unknown], Injector> = useValue => - Injector.create({ - providers: [ - { - provide: POLYMORPHEUS_CONTEXT, - useValue, - }, - ], - parent: this.injector, - }); -} diff --git a/projects/cdk/components/alert-host/alert-host.module.ts b/projects/cdk/components/alert-host/alert-host.module.ts deleted file mode 100644 index 40c10e3d281a..000000000000 --- a/projects/cdk/components/alert-host/alert-host.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiMapperPipeModule} from '@taiga-ui/cdk/pipes'; - -import {TuiAlertHostComponent} from './alert-host.component'; - -@NgModule({ - imports: [CommonModule, TuiMapperPipeModule], - declarations: [TuiAlertHostComponent], - exports: [TuiAlertHostComponent], -}) -export class TuiAlertHostModule {} diff --git a/projects/cdk/components/alert-host/index.ts b/projects/cdk/components/alert-host/index.ts deleted file mode 100644 index 95b6b92332c1..000000000000 --- a/projects/cdk/components/alert-host/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './alert-host.component'; -export * from './alert-host.module'; diff --git a/projects/cdk/components/alert-host/ng-package.json b/projects/cdk/components/alert-host/ng-package.json deleted file mode 100644 index bebf62dcb5e5..000000000000 --- a/projects/cdk/components/alert-host/ng-package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "lib": { - "entryFile": "index.ts" - } -} diff --git a/projects/cdk/components/index.ts b/projects/cdk/components/index.ts index b51a1e78a13c..4eb1758c8ec3 100644 --- a/projects/cdk/components/index.ts +++ b/projects/cdk/components/index.ts @@ -1,3 +1,2 @@ -export * from '@taiga-ui/cdk/components/alert-host'; export * from '@taiga-ui/cdk/components/dropdown-host'; export * from '@taiga-ui/cdk/components/scroll-controls'; diff --git a/projects/cdk/constants/index.ts b/projects/cdk/constants/index.ts index e5f7d5d69d38..e1cfe8efeb56 100644 --- a/projects/cdk/constants/index.ts +++ b/projects/cdk/constants/index.ts @@ -3,7 +3,6 @@ export * from './always-true-handler'; export * from './browser'; export * from './empty'; export * from './matcher'; -export * from './parent-animation'; export * from './polling-time'; export * from './stringify'; export * from './svg-node-filter'; diff --git a/projects/cdk/constants/parent-animation.ts b/projects/cdk/constants/parent-animation.ts deleted file mode 100644 index 17ead4f23fce..000000000000 --- a/projects/cdk/constants/parent-animation.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {animateChild, query, transition, trigger} from '@angular/animations'; - -/** - * Add to enable child :leave animation (fixes https://github.com/angular/angular/issues/15753) - */ -export const TUI_PARENT_ANIMATION = trigger('tuiParentAnimation', [ - transition(':leave', [query(':scope > *', [animateChild()], {optional: true})]), -]); - -/** - * Add on parent to stop initial :enter animation for children - */ -export const TUI_PARENT_STOP = trigger('tuiParentStop', [transition(':enter', [])]); diff --git a/projects/cdk/constants/used-icons.ts b/projects/cdk/constants/used-icons.ts index 3ff106c625ab..910e93341848 100644 --- a/projects/cdk/constants/used-icons.ts +++ b/projects/cdk/constants/used-icons.ts @@ -39,16 +39,16 @@ export const TUI_USED_ICONS = [ 'tuiIconSortAscending', 'tuiIconSortDescending', 'tuiIconSortOff', + 'tuiIconInfo', + 'tuiIconCheckCircle', + 'tuiIconXCircle', + 'tuiIconAlertCircle', 'tuiIconCheck', 'tuiIconMinusLarge', 'tuiIconChevronUp', 'tuiIconHelpCircle', 'tuiIconClose', - 'tuiIconAlertCircle', 'tuiIconChevronRight', - 'tuiIconInfo', - 'tuiIconCheckCircle', - 'tuiIconXCircle', 'tuiIconChevronLeft', 'tuiIconCalendarLarge', 'tuiIconStarLarge', diff --git a/projects/cdk/interfaces/alert-context.ts b/projects/cdk/interfaces/alert-context.ts deleted file mode 100644 index e52d97b3919e..000000000000 --- a/projects/cdk/interfaces/alert-context.ts +++ /dev/null @@ -1,3 +0,0 @@ -import {TuiBaseDialogContext} from './base-dialog-context'; - -export type TuiAlertContext = T & TuiBaseDialogContext; diff --git a/projects/cdk/interfaces/aria-dialog-context.ts b/projects/cdk/interfaces/aria-dialog-context.ts deleted file mode 100644 index 336d6a227f10..000000000000 --- a/projects/cdk/interfaces/aria-dialog-context.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; - -export interface TuiAriaDialogContext { - readonly component: PolymorpheusComponent; - readonly createdAt: number; - readonly id: string; -} diff --git a/projects/cdk/interfaces/base-dialog-context.ts b/projects/cdk/interfaces/base-dialog-context.ts deleted file mode 100644 index 21c4fc9349ae..000000000000 --- a/projects/cdk/interfaces/base-dialog-context.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {Observer} from 'rxjs'; - -import {TuiAriaDialogContext} from './aria-dialog-context'; -import {TuiContext} from './context'; - -export interface TuiBaseDialogContext - extends TuiContext>, - TuiAriaDialogContext { - readonly completeWith: (value: O) => void; -} diff --git a/projects/cdk/interfaces/index.ts b/projects/cdk/interfaces/index.ts index 880b5aafe859..22f355db6573 100644 --- a/projects/cdk/interfaces/index.ts +++ b/projects/cdk/interfaces/index.ts @@ -1,6 +1,3 @@ -export * from './alert-context'; -export * from './aria-dialog-context'; -export * from './base-dialog-context'; export * from './context'; export * from './control-value-transformer'; export * from './day-like'; diff --git a/projects/cdk/tokens/alerts.ts b/projects/cdk/tokens/alerts.ts deleted file mode 100644 index 1ceb0accbda7..000000000000 --- a/projects/cdk/tokens/alerts.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {Provider, Type} from '@angular/core'; -import {TuiAriaDialogContext} from '@taiga-ui/cdk/interfaces'; -import {tuiCreateToken} from '@taiga-ui/cdk/utils'; -import {Observable} from 'rxjs'; - -/** - * A stream of alerts - */ -export const TUI_ALERTS = tuiCreateToken< - ReadonlyArray> ->([]); - -export function tuiAsAlerts( - useExisting: Type>, -): Provider { - return { - provide: TUI_ALERTS, - multi: true, - useExisting, - }; -} diff --git a/projects/cdk/tokens/index.ts b/projects/cdk/tokens/index.ts index fce41d92015f..d11599b58df8 100644 --- a/projects/cdk/tokens/index.ts +++ b/projects/cdk/tokens/index.ts @@ -1,5 +1,4 @@ export * from './active-element'; -export * from './alerts'; export * from './base-href'; export * from './default-renderer'; export * from './ensure-base-href'; diff --git a/projects/cdk/tokens/removed-element.ts b/projects/cdk/tokens/removed-element.ts index f0eb816c6bc6..a878659799c3 100644 --- a/projects/cdk/tokens/removed-element.ts +++ b/projects/cdk/tokens/removed-element.ts @@ -2,6 +2,7 @@ import {ɵAnimationEngine as AnimationEngine} from '@angular/animations/browser' import {inject, InjectFlags} from '@angular/core'; import {tuiCreateTokenFromFactory} from '@taiga-ui/cdk/utils'; import {BehaviorSubject, map, share, startWith, switchMap, timer} from 'rxjs'; + /** * Element currently being removed by AnimationEngine */ diff --git a/projects/cdk/types/dialog.ts b/projects/cdk/types/dialog.ts deleted file mode 100644 index 0758c102b921..000000000000 --- a/projects/cdk/types/dialog.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {TuiBaseDialogContext} from '@taiga-ui/cdk/interfaces'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -export type TuiDialog = T & - TuiBaseDialogContext & {content: PolymorpheusContent>}; diff --git a/projects/cdk/types/index.ts b/projects/cdk/types/index.ts index 83fc64728289..6300975ac539 100644 --- a/projects/cdk/types/index.ts +++ b/projects/cdk/types/index.ts @@ -1,7 +1,6 @@ export * from './autocomplete'; export * from './date-mode'; export * from './deep-partial'; -export * from './dialog'; export * from './event-with'; export * from './handler'; export * from './injection-token-type'; diff --git a/projects/core/animations/animations.ts b/projects/core/animations/animations.ts index 018b61788535..e17bcd6b2410 100644 --- a/projects/core/animations/animations.ts +++ b/projects/core/animations/animations.ts @@ -17,6 +17,18 @@ export interface TuiDurationOptions { value: string; } +/** + * Add to enable child :leave animation (fixes https://github.com/angular/angular/issues/15753) + */ +export const TUI_PARENT_ANIMATION = trigger('tuiParentAnimation', [ + transition(':leave', [query(':scope > *', [animateChild()], {optional: true})]), +]); + +/** + * Add on parent to stop initial :enter animation for children + */ +export const TUI_PARENT_STOP = trigger('tuiParentStop', [transition(':enter', [])]); + export const tuiHost = trigger('tuiHost', [ transition(':enter', [ style({overflow: 'clip'}), diff --git a/projects/core/components/alert/alert.component.ts b/projects/core/components/alert/alert.component.ts index 35bc5bc23ab2..1f3dee9a9978 100644 --- a/projects/core/components/alert/alert.component.ts +++ b/projects/core/components/alert/alert.component.ts @@ -7,15 +7,15 @@ import { OnInit, Self, } from '@angular/core'; -import {TuiDestroyService, TuiDialog, tuiIsNumber} from '@taiga-ui/cdk'; +import {TuiDestroyService, TuiPopover} from '@taiga-ui/cdk'; import {tuiFadeIn, tuiHeightCollapse, tuiSlideIn} from '@taiga-ui/core/animations'; -import {TuiAlertOptions} from '@taiga-ui/core/interfaces'; import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens'; import {tuiToAnimationOptions} from '@taiga-ui/core/utils'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; -import {fromEvent, repeatWhen, takeUntil, timer} from 'rxjs'; +import {fromEvent, repeat, takeUntil, timer} from 'rxjs'; -import {TUI_ALERT_POSITION} from './alert.providers'; +import {TuiAlertOptions} from './alert.interfaces'; +import {TUI_ALERT_POSITION} from './alert.tokens'; // TODO: get rid of $any in template @Component({ @@ -49,7 +49,7 @@ export class TuiAlertComponent implements OnInit { @Inject(ElementRef) private readonly el: ElementRef, @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService, @Inject(TUI_ALERT_POSITION) readonly position: string, - @Inject(POLYMORPHEUS_CONTEXT) readonly item: TuiDialog, O>, + @Inject(POLYMORPHEUS_CONTEXT) readonly item: TuiPopover, O>, ) {} ngOnInit(): void { @@ -65,19 +65,10 @@ export class TuiAlertComponent implements OnInit { return; } - timer(tuiIsNumber(this.autoClose) ? this.autoClose : 3000) + timer(this.autoClose) .pipe( takeUntil(fromEvent(this.el.nativeElement, 'mouseenter')), - /** - * TODO: replace to - * repeat({ - * delay: () => fromEvent(this.el.nativeElement, 'mouseleave'), - * }) - * - * in RxJS 7 - */ - // eslint-disable-next-line rxjs/no-ignored-notifier - repeatWhen(() => fromEvent(this.el.nativeElement, 'mouseleave')), + repeat({delay: () => fromEvent(this.el.nativeElement, 'mouseleave')}), takeUntil(this.destroy$), ) .subscribe(() => this.close()); diff --git a/projects/core/components/alert/alert.directive.ts b/projects/core/components/alert/alert.directive.ts index 8f7cf82dd9be..f8a8e5503804 100644 --- a/projects/core/components/alert/alert.directive.ts +++ b/projects/core/components/alert/alert.directive.ts @@ -1,20 +1,13 @@ import {Directive} from '@angular/core'; -import {AbstractTuiDialogDirective, AbstractTuiDialogService} from '@taiga-ui/cdk'; -import {TuiAlertOptions} from '@taiga-ui/core/interfaces'; +import {tuiAsPopover, TuiPopoverDirective} from '@taiga-ui/cdk'; +import {TuiAlertOptions} from './alert.interfaces'; import {TuiAlertService} from './alert.service'; @Directive({ selector: 'ng-template[tuiAlert]', inputs: ['options: tuiAlertOptions', 'open: tuiAlert'], outputs: ['openChange: tuiAlertChange'], - providers: [ - { - provide: AbstractTuiDialogService, - useExisting: TuiAlertService, - }, - ], + providers: [tuiAsPopover(TuiAlertService)], }) -export class TuiAlertDirective extends AbstractTuiDialogDirective< - TuiAlertOptions -> {} +export class TuiAlertDirective extends TuiPopoverDirective> {} diff --git a/projects/core/components/alert/alert.interfaces.ts b/projects/core/components/alert/alert.interfaces.ts new file mode 100644 index 000000000000..c2084b3c963d --- /dev/null +++ b/projects/core/components/alert/alert.interfaces.ts @@ -0,0 +1,20 @@ +import {TuiHandler, TuiPopoverContext} from '@taiga-ui/cdk'; +import { + TuiNotification, + TuiNotificationOptions, +} from '@taiga-ui/core/components/notification'; +import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; + +export type TuiAlertAutoClose = TuiHandler | number; + +export interface TuiAlertOptions + extends Omit { + readonly autoClose: TuiAlertAutoClose; + readonly data: I; + readonly closeable: boolean; + readonly label: PolymorpheusContent>; +} + +export interface TuiAlertContext + extends TuiPopoverContext, + TuiAlertOptions {} diff --git a/projects/core/components/alert/alert.module.ts b/projects/core/components/alert/alert.module.ts index e0c059e3f783..2b1b7e9717c3 100644 --- a/projects/core/components/alert/alert.module.ts +++ b/projects/core/components/alert/alert.module.ts @@ -1,17 +1,14 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {tuiAsAlerts} from '@taiga-ui/cdk'; import {TuiNotificationModule} from '@taiga-ui/core/components/notification'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import {TuiAlertComponent} from './alert.component'; import {TuiAlertDirective} from './alert.directive'; -import {TuiAlertService} from './alert.service'; @NgModule({ imports: [CommonModule, PolymorpheusModule, TuiNotificationModule], declarations: [TuiAlertComponent, TuiAlertDirective], - providers: [tuiAsAlerts(TuiAlertService)], exports: [TuiAlertComponent, TuiAlertDirective], }) export class TuiAlertModule {} diff --git a/projects/core/components/alert/alert.providers.ts b/projects/core/components/alert/alert.providers.ts deleted file mode 100644 index 8b2a9ad037ba..000000000000 --- a/projects/core/components/alert/alert.providers.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {inject} from '@angular/core'; -import {TUI_IS_MOBILE, tuiCreateTokenFromFactory} from '@taiga-ui/cdk'; - -export const TUI_ALERT_POSITION = tuiCreateTokenFromFactory(() => - inject(TUI_IS_MOBILE) ? '1rem 1rem 0 auto' : '2rem 3rem 0 auto', -); diff --git a/projects/core/components/alert/alert.service.ts b/projects/core/components/alert/alert.service.ts index d75d689abaae..f8cb85deb010 100644 --- a/projects/core/components/alert/alert.service.ts +++ b/projects/core/components/alert/alert.service.ts @@ -1,20 +1,13 @@ -import {Inject, Injectable} from '@angular/core'; -import {AbstractTuiDialogService, TuiIdService} from '@taiga-ui/cdk'; -import {TuiAlertOptions} from '@taiga-ui/core/interfaces'; -import {TUI_NOTIFICATION_OPTIONS} from '@taiga-ui/core/tokens'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; +import {inject, Injectable} from '@angular/core'; +import {TuiPopoverService} from '@taiga-ui/cdk'; import {TuiAlertComponent} from './alert.component'; +import {TuiAlertOptions} from './alert.interfaces'; +import {TUI_ALERT_OPTIONS, TUI_ALERTS} from './alert.tokens'; -@Injectable({providedIn: 'root'}) -export class TuiAlertService extends AbstractTuiDialogService> { - protected readonly component = new PolymorpheusComponent(TuiAlertComponent); - - constructor( - @Inject(TUI_NOTIFICATION_OPTIONS) - protected readonly defaultOptions: TuiAlertOptions, - @Inject(TuiIdService) idService: TuiIdService, - ) { - super(idService); - } -} +@Injectable({ + providedIn: 'root', + useFactory: () => + new TuiAlertService(TUI_ALERTS, TuiAlertComponent, inject(TUI_ALERT_OPTIONS)), +}) +export class TuiAlertService extends TuiPopoverService> {} diff --git a/projects/core/components/alert/alert.template.html b/projects/core/components/alert/alert.template.html index 4fd1aae6e418..2e470327d37b 100644 --- a/projects/core/components/alert/alert.template.html +++ b/projects/core/components/alert/alert.template.html @@ -1,6 +1,5 @@ = { + autoClose: 3000, + label: '', + closeable: true, + data: undefined, +}; + +export const TUI_ALERT_OPTIONS = tuiCreateTokenFromFactory(() => ({ + ...TUI_ALERT_DEFAULT_OPTIONS, + ...inject(TUI_NOTIFICATION_OPTIONS), +})); + +export const TUI_ALERT_POSITION = tuiCreateTokenFromFactory(() => + inject(TUI_IS_MOBILE) ? '1rem 1rem 0 auto' : '2rem 3rem 0 auto', +); + +export const TUI_ALERTS = tuiCreateToken( + new BehaviorSubject>>([]), +); + +/** + * Grouping alerts by their component + */ +export const TUI_ALERTS_GROUPED = tuiCreateTokenFromFactory(() => + combineLatest([ + of(new Map, ReadonlyArray>>()), + inject(TUI_ALERTS), + ]).pipe( + map(([map, alerts]) => { + map.forEach((_, key) => map.set(key, [])); + + alerts.forEach(alert => { + const key = alert.component.component; + const value = map.get(key) || []; + + map.set(key, [...value, alert]); + }); + + return Array.from(map.values()); + }), + ), +); diff --git a/projects/core/components/alert/alerts.component.ts b/projects/core/components/alert/alerts.component.ts new file mode 100644 index 000000000000..642f6e94e155 --- /dev/null +++ b/projects/core/components/alert/alerts.component.ts @@ -0,0 +1,45 @@ +import {CommonModule} from '@angular/common'; +import { + ChangeDetectionStrategy, + Component, + inject, + INJECTOR, + Injector, + Type, + ViewEncapsulation, +} from '@angular/core'; +import {TuiMapperPipeModule, TuiTypedMapper} from '@taiga-ui/cdk'; +import {TUI_PARENT_ANIMATION} from '@taiga-ui/core/animations'; +import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; +import {identity} from 'rxjs'; + +import {TUI_ALERTS_GROUPED} from './alert.tokens'; + +@Component({ + standalone: true, + selector: 'tui-alerts', + imports: [CommonModule, TuiMapperPipeModule], + templateUrl: './alerts.template.html', + styleUrls: ['./alerts.style.less'], + encapsulation: ViewEncapsulation.None, + // So that we do not force OnPush on custom alerts + // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection + changeDetection: ChangeDetectionStrategy.Default, + animations: [TUI_PARENT_ANIMATION], +}) +export class TuiAlertsComponent { + private readonly injector = inject(INJECTOR); + + readonly alerts$ = inject(TUI_ALERTS_GROUPED); + readonly trackBy = identity; + readonly mapper: TuiTypedMapper<[Type], Injector> = useValue => + Injector.create({ + providers: [ + { + provide: POLYMORPHEUS_CONTEXT, + useValue, + }, + ], + parent: this.injector, + }); +} diff --git a/projects/cdk/components/alert-host/alert-host.style.less b/projects/core/components/alert/alerts.style.less similarity index 52% rename from projects/cdk/components/alert-host/alert-host.style.less rename to projects/core/components/alert/alerts.style.less index 434ddc889b10..5e450734efd0 100644 --- a/projects/cdk/components/alert-host/alert-host.style.less +++ b/projects/core/components/alert/alerts.style.less @@ -1,10 +1,9 @@ -tui-alert-host > .t-wrapper { - position: fixed; - top: 0; - left: 0; +@import '@taiga-ui/core/styles/taiga-ui-local'; + +tui-alerts > .t-wrapper { + .fullsize(fixed); + display: flex; - width: 100%; - height: 100%; flex-direction: column; pointer-events: none; diff --git a/projects/cdk/components/alert-host/alert-host.template.html b/projects/core/components/alert/alerts.template.html similarity index 69% rename from projects/cdk/components/alert-host/alert-host.template.html rename to projects/core/components/alert/alerts.template.html index 4db1bd33e578..8fee53cd813d 100644 --- a/projects/cdk/components/alert-host/alert-host.template.html +++ b/projects/core/components/alert/alerts.template.html @@ -1,10 +1,10 @@
diff --git a/projects/core/components/alert/index.ts b/projects/core/components/alert/index.ts index 57b69e4984bc..17c5525c92e2 100644 --- a/projects/core/components/alert/index.ts +++ b/projects/core/components/alert/index.ts @@ -1,5 +1,7 @@ export * from './alert.component'; export * from './alert.directive'; +export * from './alert.interfaces'; export * from './alert.module'; -export * from './alert.providers'; export * from './alert.service'; +export * from './alert.tokens'; +export * from './alerts.component'; diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts index 252bb8269c49..591437dd1af7 100644 --- a/projects/core/components/dialog/dialog.component.ts +++ b/projects/core/components/dialog/dialog.component.ts @@ -10,7 +10,7 @@ import { ALWAYS_TRUE_HANDLER, TUI_IS_MOBILE, TuiDestroyService, - TuiDialog, + TuiPopover, } from '@taiga-ui/cdk'; import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations'; import { @@ -78,7 +78,8 @@ export class TuiDialogComponent { constructor( @Inject(TUI_ANIMATIONS_SPEED) private readonly speed: number, @Inject(TUI_IS_MOBILE) private readonly isMobile: boolean, - @Inject(POLYMORPHEUS_CONTEXT) readonly context: TuiDialog, O>, + @Inject(POLYMORPHEUS_CONTEXT) + readonly context: TuiPopover, O>, @Inject(TuiDestroyService) @Self() destroy$: Observable, @Inject(TuiDialogCloseService) dialogClose$: Observable, @Inject(TUI_DIALOGS_CLOSE) close$: Observable, @@ -102,7 +103,7 @@ export class TuiDialogComponent { } @HostBinding('class._centered') - get header(): PolymorpheusContent, O>> { + get header(): PolymorpheusContent, O>> { return this.context.header; } diff --git a/projects/core/components/dialog/dialog.interfaces.ts b/projects/core/components/dialog/dialog.interfaces.ts index 3742a56f2c5e..f7acd9c833f3 100644 --- a/projects/core/components/dialog/dialog.interfaces.ts +++ b/projects/core/components/dialog/dialog.interfaces.ts @@ -1,4 +1,4 @@ -import {TuiDialog, TuiPopoverContext} from '@taiga-ui/cdk'; +import {TuiPopover, TuiPopoverContext} from '@taiga-ui/cdk'; import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -22,7 +22,7 @@ export interface TuiDialogOptions { readonly closeable: Observable | boolean; readonly data: I; readonly dismissible: Observable | boolean; - readonly header: PolymorpheusContent, any>>; + readonly header: PolymorpheusContent, any>>; readonly label: string; readonly required: boolean; readonly size: TuiDialogSize; diff --git a/projects/core/components/expand/expand.component.ts b/projects/core/components/expand/expand.component.ts index 1823df51fff4..aaa148119c12 100644 --- a/projects/core/components/expand/expand.component.ts +++ b/projects/core/components/expand/expand.component.ts @@ -12,7 +12,8 @@ import { TemplateRef, ViewChild, } from '@angular/core'; -import {TUI_PARENT_ANIMATION, TuiValuesOf} from '@taiga-ui/cdk'; +import {TuiValuesOf} from '@taiga-ui/cdk'; +import {TUI_PARENT_ANIMATION} from '@taiga-ui/core/animations'; import {TUI_EXPAND_LOADED} from '@taiga-ui/core/constants'; import {TuiExpandContentDirective} from './expand-content.directive'; diff --git a/projects/core/components/hints-host/hints-host.component.ts b/projects/core/components/hints-host/hints-host.component.ts index 5c3eb8a9b8aa..b6f2ee7c7feb 100644 --- a/projects/core/components/hints-host/hints-host.component.ts +++ b/projects/core/components/hints-host/hints-host.component.ts @@ -6,7 +6,8 @@ import { OnInit, Self, } from '@angular/core'; -import {TUI_PARENT_ANIMATION, TuiDestroyService} from '@taiga-ui/cdk'; +import {TuiDestroyService} from '@taiga-ui/cdk'; +import {TUI_PARENT_ANIMATION} from '@taiga-ui/core/animations'; import {TuiPortalItem} from '@taiga-ui/core/interfaces'; import {TuiHintService} from '@taiga-ui/core/services'; import {Observable, takeUntil} from 'rxjs'; diff --git a/projects/core/components/notification/index.ts b/projects/core/components/notification/index.ts index 4f8fcba75b54..2d23d9a4df5c 100644 --- a/projects/core/components/notification/index.ts +++ b/projects/core/components/notification/index.ts @@ -1,2 +1,3 @@ export * from './notification.component'; export * from './notification.module'; +export * from './notification.options'; diff --git a/projects/core/components/notification/notification.component.ts b/projects/core/components/notification/notification.component.ts index 5eac40ebbbfd..d9c08bf20df2 100644 --- a/projects/core/components/notification/notification.component.ts +++ b/projects/core/components/notification/notification.component.ts @@ -8,16 +8,11 @@ import { Output, } from '@angular/core'; import {tuiIsObserved} from '@taiga-ui/cdk'; -import { - TUI_CLOSE_WORD, - TUI_COMMON_ICONS, - TUI_NOTIFICATION_OPTIONS, - TuiCommonIcons, - TuiNotificationDefaultOptions, -} from '@taiga-ui/core/tokens'; -import {TuiNotificationT} from '@taiga-ui/core/types'; +import {TUI_CLOSE_WORD, TUI_COMMON_ICONS, TuiCommonIcons} from '@taiga-ui/core/tokens'; import {Observable} from 'rxjs'; +import {TUI_NOTIFICATION_OPTIONS, TuiNotificationOptions} from './notification.options'; + @Component({ selector: 'tui-notification', templateUrl: './notification.template.html', @@ -25,18 +20,12 @@ import {Observable} from 'rxjs'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class TuiNotificationComponent { - /** - * @deprecated Use {@link TuiNotificationComponent.icon} input or TUI_NOTIFICATION_OPTIONS instead - */ - @Input() - hasIcon = this.options.hasIcon; - @Input() icon = this.options.icon; @Input() @HostBinding('attr.data-status') - status: TuiNotificationT = this.options.status; + status = this.options.status; @Input() @HostBinding('attr.data-size') @@ -52,7 +41,7 @@ export class TuiNotificationComponent { constructor( @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable, @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons, - @Inject(TUI_NOTIFICATION_OPTIONS) readonly options: TuiNotificationDefaultOptions, + @Inject(TUI_NOTIFICATION_OPTIONS) readonly options: TuiNotificationOptions, ) {} get hasClose(): boolean { diff --git a/projects/core/tokens/notification-options.ts b/projects/core/components/notification/notification.options.ts similarity index 57% rename from projects/core/tokens/notification-options.ts rename to projects/core/components/notification/notification.options.ts index 94ea9bdf4a20..4d8e07f2d11a 100644 --- a/projects/core/tokens/notification-options.ts +++ b/projects/core/components/notification/notification.options.ts @@ -1,15 +1,17 @@ import {Provider} from '@angular/core'; -import {tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; -import {TuiAlertOptions} from '@taiga-ui/core/interfaces'; +import {TuiContext, tuiCreateToken, tuiProvideOptions} from '@taiga-ui/cdk'; import {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types'; +import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; -export interface TuiNotificationDefaultOptions - extends Omit, 'data'> { - size: TuiSizeL | TuiSizeS; +export type TuiNotification = 'error' | 'info' | 'neutral' | 'success' | 'warning'; + +export interface TuiNotificationOptions { + readonly status: TuiNotification; + readonly icon: PolymorpheusContent>; + readonly size: TuiSizeL | TuiSizeS; } -/** @deprecated remove export */ -export const STATUS_ICON = { +const STATUS_ICON = { info: 'tuiIconInfo', success: 'tuiIconCheckCircle', error: 'tuiIconXCircle', @@ -18,15 +20,10 @@ export const STATUS_ICON = { } as const; /** Default values for the notification options. */ -export const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationDefaultOptions = { - autoClose: 3000, - label: '', +export const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationOptions = { status: 'info', - hasCloseButton: true, icon: ({$implicit}) => STATUS_ICON[$implicit], size: 'm', - hasIcon: true, - defaultAutoCloseTime: 3000, }; /** @@ -35,7 +32,7 @@ export const TUI_NOTIFICATION_DEFAULT_OPTIONS: TuiNotificationDefaultOptions = { export const TUI_NOTIFICATION_OPTIONS = tuiCreateToken(TUI_NOTIFICATION_DEFAULT_OPTIONS); export function tuiNotificationOptionsProvider( - options: Partial, + options: Partial, ): Provider { return tuiProvideOptions( TUI_NOTIFICATION_OPTIONS, diff --git a/projects/core/components/notification/notification.template.html b/projects/core/components/notification/notification.template.html index de5b9015fdde..cb3b22f7fd3e 100644 --- a/projects/core/components/notification/notification.template.html +++ b/projects/core/components/notification/notification.template.html @@ -1,4 +1,4 @@ - + { component!: TuiNotificationComponent; hasCloseButton = true; - status: TuiNotificationT = 'info'; + status: TuiNotification = 'info'; onClose(): void {} } diff --git a/projects/core/components/root/root.module.ts b/projects/core/components/root/root.module.ts index 9c0c268889b2..360ada7a9ad3 100644 --- a/projects/core/components/root/root.module.ts +++ b/projects/core/components/root/root.module.ts @@ -1,10 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import { - TuiAlertHostModule, - TuiDropdownHostModule, - TuiScrollControlsModule, -} from '@taiga-ui/cdk'; +import {TuiDropdownHostModule, TuiScrollControlsModule} from '@taiga-ui/cdk'; +import {TuiAlertsComponent} from '@taiga-ui/core/components/alert'; import {TuiDialogsComponent} from '@taiga-ui/core/components/dialog'; import {TuiHintsHostModule} from '@taiga-ui/core/components/hints-host'; import {TuiSvgDefsHostModule} from '@taiga-ui/core/internal/svg-defs-host'; @@ -19,9 +16,9 @@ import {TuiRootComponent} from './root.component'; TuiDropdownHostModule, TuiSvgDefsHostModule, TuiHintsHostModule, - TuiAlertHostModule, TuiScrollControlsModule, TuiDialogsComponent, + TuiAlertsComponent, ], declarations: [TuiRootComponent], exports: [TuiRootComponent], diff --git a/projects/core/components/root/root.template.html b/projects/core/components/root/root.template.html index 3d6b96d59a27..d71fe1dff479 100644 --- a/projects/core/components/root/root.template.html +++ b/projects/core/components/root/root.template.html @@ -10,7 +10,7 @@ - + diff --git a/projects/core/directives/hint/hint-unstyled.component.ts b/projects/core/directives/hint/hint-unstyled.component.ts index 54cd139a7104..94c72fd90a8c 100644 --- a/projects/core/directives/hint/hint-unstyled.component.ts +++ b/projects/core/directives/hint/hint-unstyled.component.ts @@ -5,7 +5,8 @@ import { Inject, TemplateRef, } from '@angular/core'; -import {TUI_PARENT_ANIMATION, TuiContext} from '@taiga-ui/cdk'; +import {TuiContext} from '@taiga-ui/cdk'; +import {TUI_PARENT_ANIMATION} from '@taiga-ui/core/animations'; import {TuiPortalItem} from '@taiga-ui/core/interfaces'; import {POLYMORPHEUS_CONTEXT, PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; diff --git a/projects/core/enums/index.ts b/projects/core/enums/index.ts index 6cfae90b9d70..e32ee05fcb8f 100644 --- a/projects/core/enums/index.ts +++ b/projects/core/enums/index.ts @@ -1,5 +1,4 @@ export * from './appearance'; export * from './dropdown-animation'; export * from './interactive-state'; -export * from './notification'; export * from './range-state'; diff --git a/projects/core/enums/notification.ts b/projects/core/enums/notification.ts deleted file mode 100644 index b9ed3989776e..000000000000 --- a/projects/core/enums/notification.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @deprecated use union type TuiNotificationT instead - */ -// eslint-disable-next-line no-restricted-syntax -export enum TuiNotification { - Error = 'error', - Info = 'info', - Success = 'success', - Warning = 'warning', -} diff --git a/projects/core/interfaces/alert-options.ts b/projects/core/interfaces/alert-options.ts deleted file mode 100644 index 74d461aaa3bf..000000000000 --- a/projects/core/interfaces/alert-options.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {TuiContext, TuiHandler} from '@taiga-ui/cdk'; -import {TuiNotification} from '@taiga-ui/core/enums'; -import {TuiNotificationT} from '@taiga-ui/core/types'; -import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; - -export type TuiAlertAutoClose = - | TuiHandler - | boolean - | number; - -export interface TuiAlertOptions { - readonly autoClose: TuiAlertAutoClose; - readonly data: I; - /** @deprecated use autoClose instead **/ - readonly defaultAutoCloseTime: number; - readonly hasCloseButton: boolean; - /** @deprecated use icon instead **/ - readonly hasIcon: boolean; - readonly icon: PolymorpheusContent>; - readonly label: PolymorpheusContent>; - readonly status: TuiNotification | TuiNotificationT; -} diff --git a/projects/core/interfaces/index.ts b/projects/core/interfaces/index.ts index bb074126ccc6..0fcc05e41d2e 100644 --- a/projects/core/interfaces/index.ts +++ b/projects/core/interfaces/index.ts @@ -1,4 +1,3 @@ -export * from './alert-options'; export * from './data-list-accessor'; export * from './data-list-host'; export * from './icon-error'; diff --git a/projects/core/tokens/index.ts b/projects/core/tokens/index.ts index b2b2a0c7d592..44d560a86fd6 100644 --- a/projects/core/tokens/index.ts +++ b/projects/core/tokens/index.ts @@ -16,7 +16,6 @@ export * from './is-mobile-resolution'; export * from './legacy-mask'; export * from './media'; export * from './mode'; -export * from './notification-options'; export * from './number-format'; export * from './number-format-observable'; export * from './option-content'; diff --git a/projects/core/types/index.ts b/projects/core/types/index.ts index 3cd1c6b23e54..63e50582a4b5 100644 --- a/projects/core/types/index.ts +++ b/projects/core/types/index.ts @@ -8,7 +8,6 @@ export * from './dropdown-align'; export * from './dropdown-width'; export * from './hint-direction'; export * from './marker-handler'; -export * from './notification'; export * from './option-role'; export * from './orientation'; export * from './point'; diff --git a/projects/core/types/notification.ts b/projects/core/types/notification.ts deleted file mode 100644 index b43d957d674c..000000000000 --- a/projects/core/types/notification.ts +++ /dev/null @@ -1 +0,0 @@ -export type TuiNotificationT = 'error' | 'info' | 'neutral' | 'success' | 'warning'; diff --git a/projects/demo-playwright/tests/core/alert-service/alert-service.spec.ts b/projects/demo-playwright/tests/core/alert-service/alert-service.spec.ts index 1939a4b6380f..cf46ae482fa2 100644 --- a/projects/demo-playwright/tests/core/alert-service/alert-service.spec.ts +++ b/projects/demo-playwright/tests/core/alert-service/alert-service.spec.ts @@ -7,12 +7,12 @@ test.describe('AlertService', () => { }); test('is shown correctly', async ({page}) => { - await tuiGoto(page, '/services/alert-service'); + await tuiGoto(page, '/components/alert'); const example = page.locator('#text'); const showAlertButton = example.locator('tui-alerts-example-1 button').first(); await showAlertButton.click(); - await expect(page.locator('tui-alert')).toHaveScreenshot('01-alert-service.png'); + await expect(page.locator('tui-alert')).toHaveScreenshot('01-alert.png'); }); }); diff --git a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts index 8139c3847cff..061e50fdeffb 100644 --- a/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts +++ b/projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts @@ -33,7 +33,7 @@ export class TuiDocumentationApiPagePO { } async hideNotifications(): Promise { - const notifications = await this.page.locator('tui-alert-host tui-alert').all(); + const notifications = await this.page.locator('tui-alerts tui-alert').all(); for (const notification of notifications) { await tuiHideElement(notification); diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts index 273be2790001..a45c87b44656 100644 --- a/projects/demo/src/modules/app/app.routes.ts +++ b/projects/demo/src/modules/app/app.routes.ts @@ -1822,11 +1822,11 @@ export const ROUTES: Routes = [ }, // SERVICES { - path: 'services/alert-service', + path: 'components/alert', loadChildren: async () => - (await import('../services/alerts/alerts.module')).ExampleTuiAlertsModule, + (await import('../components/alert/alert.module')).ExampleTuiAlertModule, data: { - title: 'AlertService', + title: 'Alert', }, }, { diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index f332c04e306f..189a8ababa2a 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -150,6 +150,12 @@ export const pages: TuiDocPages = [ keywords: 'кнопка, button, ссылка, link, действие, icon, иконка', route: '/components/action', }, + { + section: 'Components', + title: 'Alert', + keywords: 'уведомление, нотификация, бабл, облачко, alert, notification', + route: '/components/alert', + }, { section: 'Components', title: 'Avatar', @@ -1487,12 +1493,6 @@ export const pages: TuiDocPages = [ section: 'Tools', title: 'Services', subPages: [ - { - section: 'Tools', - title: 'AlertService', - keywords: 'уведомление, нотификация, бабл, облачко, alert, notification', - route: '/services/alert-service', - }, { section: 'Tools', title: 'BreakpointService', diff --git a/projects/demo/src/modules/services/alerts/alerts.component.ts b/projects/demo/src/modules/components/alert/alert.component.ts similarity index 84% rename from projects/demo/src/modules/services/alerts/alerts.component.ts rename to projects/demo/src/modules/components/alert/alert.component.ts index 9aeeac9e7b46..7570370f2322 100644 --- a/projects/demo/src/modules/services/alerts/alerts.component.ts +++ b/projects/demo/src/modules/components/alert/alert.component.ts @@ -1,20 +1,27 @@ -import {Component, Inject, Injector} from '@angular/core'; +import {Component, Inject, inject, Injector} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDocExample} from '@taiga-ui/addon-doc'; -import {TuiBaseDialogContext} from '@taiga-ui/cdk'; -import {TuiAlertOptions, TuiAlertService, TuiNotificationT} from '@taiga-ui/core'; +import {TuiPopoverContext} from '@taiga-ui/cdk'; +import { + TUI_NOTIFICATION_OPTIONS, + TuiAlertOptions, + TuiAlertService, + TuiNotification, +} from '@taiga-ui/core'; import {PolymorpheusComponent, PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {switchMap} from 'rxjs'; import {AlertExampleWithDataComponent} from './examples/4/alert-example-with-data/alert-example-with-data.component'; @Component({ - selector: 'example-tui-alerts', - templateUrl: './alerts.template.html', - styleUrls: ['./alerts.style.less'], + selector: 'example-tui-alert', + templateUrl: './alert.template.html', + styleUrls: ['./alert.style.less'], changeDetection, }) -export class ExampleTuiAlertsComponent { +export class ExampleTuiAlertComponent { + private readonly defaultIcon = inject(TUI_NOTIFICATION_OPTIONS).icon; + readonly method = import('./method.md?raw'); readonly exampleServiceUsage = import('./examples/import/service-usage.md?raw'); @@ -26,7 +33,6 @@ export class ExampleTuiAlertsComponent { readonly exampleCustomAlert = import('./examples/import/custom-alert.md?raw'); readonly exampleLazyModule = import('./examples/import/lazy-module.md?raw'); - readonly exampleModule = import('./examples/import/module.md?raw'); readonly exampleOptions = import('./examples/import/define-options.md?raw'); readonly example1: TuiDocExample = { @@ -108,25 +114,27 @@ export class ExampleTuiAlertsComponent { label = 'Heading'; - readonly statusVariants: TuiNotificationT[] = ['info', 'success', 'error', 'warning']; + readonly statusVariants: TuiNotification[] = ['info', 'success', 'error', 'warning']; status = this.statusVariants[0]; + readonly iconVariants = ['Default', 'tuiIconHeart']; + + icon = this.iconVariants[0]; + readonly contentVariants = ['String', 'Component']; content = this.contentVariants[0]; - readonly autoCloseVariants = [true, false, 5000, 1000, 500]; - - autoClose = this.autoCloseVariants[0]; + readonly autoCloseVariants = [0, 3000, 5000, 1000, 500]; - hasCloseButton = true; + autoClose = this.autoCloseVariants[1]; - hasIcon = true; + closeable = true; readonly component: PolymorpheusComponent< AlertExampleWithDataComponent, - TuiAlertOptions & TuiBaseDialogContext + TuiAlertOptions & TuiPopoverContext >; constructor( @@ -141,7 +149,7 @@ export class ExampleTuiAlertsComponent { } get selectedContent(): PolymorpheusContent< - TuiAlertOptions & TuiBaseDialogContext + TuiAlertOptions & TuiPopoverContext > { return this.content === 'String' ? this.content : this.component; } @@ -153,8 +161,8 @@ export class ExampleTuiAlertsComponent { data: this.data, status: this.status, autoClose: this.autoClose, - hasCloseButton: this.hasCloseButton, - hasIcon: this.hasIcon, + closeable: this.closeable, + icon: this.icon === this.iconVariants[0] ? this.defaultIcon : this.icon, }) .pipe( switchMap(response => diff --git a/projects/demo/src/modules/services/alerts/alerts.module.ts b/projects/demo/src/modules/components/alert/alert.module.ts similarity index 64% rename from projects/demo/src/modules/services/alerts/alerts.module.ts rename to projects/demo/src/modules/components/alert/alert.module.ts index 3ab844d52f70..5bf939de31aa 100644 --- a/projects/demo/src/modules/services/alerts/alerts.module.ts +++ b/projects/demo/src/modules/components/alert/alert.module.ts @@ -17,17 +17,17 @@ import { import {TuiInputModule, TuiRadioListModule} from '@taiga-ui/kit'; import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; -import {ExampleTuiAlertsComponent} from './alerts.component'; -import {TuiAlertsExampleComponent1} from './examples/1'; -import {TuiAlertsExampleComponent2} from './examples/2'; -import {TuiAlertsExampleComponent3} from './examples/3'; +import {ExampleTuiAlertComponent} from './alert.component'; +import {TuiAlertExampleComponent1} from './examples/1'; +import {TuiAlertExampleComponent2} from './examples/2'; +import {TuiAlertExampleComponent3} from './examples/3'; import {AlertExampleModule} from './examples/3/alert-example/alert-example.module'; -import {TuiAlertsExampleComponent4} from './examples/4'; +import {TuiAlertExampleComponent4} from './examples/4'; import {AlertExampleWithDataModule} from './examples/4/alert-example-with-data/alert-example-with-data.module'; -import {TuiAlertsExampleComponent5} from './examples/5'; +import {TuiAlertExampleComponent5} from './examples/5'; import {AlertExampleWithCustomLabelModule} from './examples/5/alert-example-with-custom-label/alert-example-with-custom-label.module'; import {CustomLabelModule} from './examples/5/custom-label/custom-label.module'; -import {TuiAlertsExampleComponent6} from './examples/6'; +import {TuiAlertExampleComponent6} from './examples/6'; @NgModule({ imports: [ @@ -47,17 +47,17 @@ import {TuiAlertsExampleComponent6} from './examples/6'; TuiInputModule, TuiLinkModule, TuiAddonDocModule, - RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAlertsComponent)), + RouterModule.forChild(tuiGenerateRoutes(ExampleTuiAlertComponent)), ], declarations: [ - ExampleTuiAlertsComponent, - TuiAlertsExampleComponent1, - TuiAlertsExampleComponent2, - TuiAlertsExampleComponent3, - TuiAlertsExampleComponent4, - TuiAlertsExampleComponent5, - TuiAlertsExampleComponent6, + ExampleTuiAlertComponent, + TuiAlertExampleComponent1, + TuiAlertExampleComponent2, + TuiAlertExampleComponent3, + TuiAlertExampleComponent4, + TuiAlertExampleComponent5, + TuiAlertExampleComponent6, ], - exports: [ExampleTuiAlertsComponent], + exports: [ExampleTuiAlertComponent], }) -export class ExampleTuiAlertsModule {} +export class ExampleTuiAlertModule {} diff --git a/projects/demo/src/modules/services/alerts/alerts.style.less b/projects/demo/src/modules/components/alert/alert.style.less similarity index 100% rename from projects/demo/src/modules/services/alerts/alerts.style.less rename to projects/demo/src/modules/components/alert/alert.style.less diff --git a/projects/demo/src/modules/services/alerts/alerts.template.html b/projects/demo/src/modules/components/alert/alert.template.html similarity index 68% rename from projects/demo/src/modules/services/alerts/alerts.template.html rename to projects/demo/src/modules/components/alert/alert.template.html index 97bc935bb391..1826e96f9344 100644 --- a/projects/demo/src/modules/services/alerts/alerts.template.html +++ b/projects/demo/src/modules/components/alert/alert.template.html @@ -1,20 +1,10 @@ -

Service to show notifications

-

- Do not forget to add - TuiAlertModule - into your app.module to use it -

- -

- Singleton - you do not need to provide a service. It is just available to inject -

+

Built-in implementation of notifications

Position on screen can be configured by providing margins with @@ -82,31 +72,6 @@ > Show -

-

To show notification, use method

- - of - TuiAlertService - , where - O - is output data type and - I - is input data type. If content does not need input data, the second argument is optional. In the sample - above the both of them are - number - . -

- You can also just unsubscribe from a stream to hide a notification (this observable is returned from - open - method). You can save a subscription for that or use - takeUntil - like tools from - RxJs -

-
Content - -

- TuiNotificationOptionsWithData - interface: -

- - Auto close after 3 seconds + Auto close timeout, 0 for no auto close Has close button - Has icon + Icon
    -
  1. -

    - Add - TuiAlertModule - into your app.module -

    - - -
    2. -

  2. Use service - show + open method and subscribe to Observable

    @@ -202,7 +149,7 @@ To pass notification with custom content, you can use your template @@ -212,10 +159,10 @@

  3. - You can also customize notification logic with a component. Use + You can also customize notification logic with a component. Inject POLYMORPHEUS_CONTEXT into the component to get context input data and to output results. It has the following interface: - + , where O is output data type and @@ -252,9 +199,11 @@

  4. - If you use it from lazy loading modules, do not forget to use - new TuiComponentContent Injector - of component where you call it + If you use it from lazy loading modules, and want to reach for some local providers, you can pass + Injector + into + new PolymorpheusComponent + of your alert component.

    - Optionally use the - TUI_NOTIFICATION_OPTIONS - injection token to override the default options with a helper (works only in app.module.ts). + You can customize default alert options by providing + TUI_ALERT_OPTIONS + injection token globally across your app.

    >>; + withdrawTemplate?: TemplateRef; @ViewChild('depositTemplate') - depositTemplate?: TemplateRef>>; + depositTemplate?: TemplateRef; money = 1000; - constructor(@Inject(TuiAlertService) private readonly alerts: TuiAlertService) {} - showWithdrawAlert(): void { this.alerts .open(this.withdrawTemplate || '', { label: 'A template sample', status: 'warning', - autoClose: false, + autoClose: 0, }) .subscribe(); } @@ -36,7 +35,7 @@ export class TuiAlertsExampleComponent2 { .open(this.depositTemplate || '', { label: 'A template sample', status: 'success', - autoClose: false, + autoClose: 0, }) .subscribe(); } diff --git a/projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.component.ts b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts similarity index 83% rename from projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.component.ts rename to projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts index e2130d33d0e1..f3032196d73c 100644 --- a/projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.component.ts +++ b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.component.ts @@ -1,6 +1,6 @@ import {Component, Inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import {TuiAlertOptions} from '@taiga-ui/core'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; @@ -12,7 +12,7 @@ import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; export class AlertExampleComponent { constructor( @Inject(POLYMORPHEUS_CONTEXT) - private readonly context: TuiDialog, boolean>, + private readonly context: TuiPopover, boolean>, ) {} ok(): void { diff --git a/projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.module.ts b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.module.ts similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.module.ts rename to projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.module.ts diff --git a/projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.template.html b/projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/3/alert-example/alert-example.template.html rename to projects/demo/src/modules/components/alert/examples/3/alert-example/alert-example.template.html diff --git a/projects/demo/src/modules/services/alerts/examples/3/index.html b/projects/demo/src/modules/components/alert/examples/3/index.html similarity index 56% rename from projects/demo/src/modules/services/alerts/examples/3/index.html rename to projects/demo/src/modules/components/alert/examples/3/index.html index 0b003f03b072..379588d6c8b1 100644 --- a/projects/demo/src/modules/services/alerts/examples/3/index.html +++ b/projects/demo/src/modules/components/alert/examples/3/index.html @@ -1,4 +1,4 @@ -

    This notification will be removed after router change (see component sample)

    +

    This notification will be removed after router change (see TypeScript tab)

    This is a declarative directive alert diff --git a/projects/demo/src/modules/services/alerts/examples/6/index.ts b/projects/demo/src/modules/components/alert/examples/6/index.ts similarity index 88% rename from projects/demo/src/modules/services/alerts/examples/6/index.ts rename to projects/demo/src/modules/components/alert/examples/6/index.ts index 2928d8a9abd4..dc859eff4966 100644 --- a/projects/demo/src/modules/services/alerts/examples/6/index.ts +++ b/projects/demo/src/modules/components/alert/examples/6/index.ts @@ -8,6 +8,6 @@ import {encapsulation} from '@demo/emulate/encapsulation'; encapsulation, changeDetection, }) -export class TuiAlertsExampleComponent6 { +export class TuiAlertExampleComponent6 { show = false; } diff --git a/projects/demo/src/modules/services/alerts/examples/import/custom-alert.md b/projects/demo/src/modules/components/alert/examples/import/custom-alert.md similarity index 77% rename from projects/demo/src/modules/services/alerts/examples/import/custom-alert.md rename to projects/demo/src/modules/components/alert/examples/import/custom-alert.md index 50dcd314cc80..7ef051947b7e 100644 --- a/projects/demo/src/modules/services/alerts/examples/import/custom-alert.md +++ b/projects/demo/src/modules/components/alert/examples/import/custom-alert.md @@ -1,12 +1,12 @@ ```ts import {TuiAlertOptions} from '@taiga-ui/core'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; //... export class NotificationExampleComponent { - constructor(@Inject(POLYMORPHEUS_CONTEXT) private readonly context: TuiDialog, boolean>) {} + constructor(@Inject(POLYMORPHEUS_CONTEXT) private readonly context: TuiPopover, boolean>) {} ok() { this.context.completeWith(true); diff --git a/projects/demo/src/modules/services/alerts/examples/import/define-options.md b/projects/demo/src/modules/components/alert/examples/import/define-options.md similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/import/define-options.md rename to projects/demo/src/modules/components/alert/examples/import/define-options.md diff --git a/projects/demo/src/modules/services/alerts/examples/import/lazy-module.md b/projects/demo/src/modules/components/alert/examples/import/lazy-module.md similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/import/lazy-module.md rename to projects/demo/src/modules/components/alert/examples/import/lazy-module.md diff --git a/projects/demo/src/modules/services/alerts/examples/import/service-usage-component.md b/projects/demo/src/modules/components/alert/examples/import/service-usage-component.md similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/import/service-usage-component.md rename to projects/demo/src/modules/components/alert/examples/import/service-usage-component.md diff --git a/projects/demo/src/modules/services/alerts/examples/import/service-usage.md b/projects/demo/src/modules/components/alert/examples/import/service-usage.md similarity index 100% rename from projects/demo/src/modules/services/alerts/examples/import/service-usage.md rename to projects/demo/src/modules/components/alert/examples/import/service-usage.md diff --git a/projects/demo/src/modules/components/alert/method.md b/projects/demo/src/modules/components/alert/method.md new file mode 100644 index 000000000000..7447dcc31bf3 --- /dev/null +++ b/projects/demo/src/modules/components/alert/method.md @@ -0,0 +1,6 @@ +```text +open( + content: PolymorpheusContent>, + options: Partial = {}, +): Observable; +``` diff --git a/projects/demo/src/modules/components/dialog/dialog.template.html b/projects/demo/src/modules/components/dialog/dialog.template.html index 4d2862a3407f..3c0cc323bbcb 100644 --- a/projects/demo/src/modules/components/dialog/dialog.template.html +++ b/projects/demo/src/modules/components/dialog/dialog.template.html @@ -3,7 +3,7 @@ package="CORE" > -

    Optional built-in implementation of Taiga UI modals

    +

    Built-in implementation of Taiga UI modals

    If you want custom dialogs see @@ -113,16 +113,14 @@ -

    - -
    + Template can be customized Say "Hi and bye!" -
    -

    - To show a dialog, use method - -

    - of - TuiDialogService - , where - O - is output data type and - I - input data type. In this sample, input data has type - number - and output data has type - string - . -

    - You can also just unsubscribe from - Observable - to close a dialog (this observable is returned from - open - method). You can save a subscription for that or use - takeUntil - like tools from - RxJs -

    -
    diff --git a/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.ts b/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.ts index 56c28c7abcb6..27aa39e3b0c6 100644 --- a/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.ts +++ b/projects/demo/src/modules/components/pdf-viewer/examples/2/actions-content.component.ts @@ -1,5 +1,5 @@ import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import {TuiPdfViewerOptions} from '@taiga-ui/kit'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; @@ -13,6 +13,6 @@ import type {Buttons} from './index'; export class ActionsContentComponent { constructor( @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, string>, + readonly context: TuiPopover, string>, ) {} } diff --git a/projects/demo/src/modules/components/pdf-viewer/examples/2/index.ts b/projects/demo/src/modules/components/pdf-viewer/examples/2/index.ts index 2ae295083c4b..59f697ce8ba6 100644 --- a/projects/demo/src/modules/components/pdf-viewer/examples/2/index.ts +++ b/projects/demo/src/modules/components/pdf-viewer/examples/2/index.ts @@ -1,7 +1,7 @@ import {Component, Inject} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import {TuiAlertService} from '@taiga-ui/core'; import {TuiPdfViewerOptions, TuiPdfViewerService} from '@taiga-ui/kit'; import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; @@ -12,7 +12,7 @@ import {PdfContentComponent} from './pdf-content.component'; export type Buttons = ReadonlyArray< Readonly<{ - onClick(context: TuiDialog, string>): void; + onClick(context: TuiPopover, string>): void; text: string; }> >; diff --git a/projects/demo/src/modules/customization/dialogs/examples/1/prompt/prompt.component.ts b/projects/demo/src/modules/customization/dialogs/examples/1/prompt/prompt.component.ts index 3cedd352b2d7..c567fd71a950 100644 --- a/projects/demo/src/modules/customization/dialogs/examples/1/prompt/prompt.component.ts +++ b/projects/demo/src/modules/customization/dialogs/examples/1/prompt/prompt.component.ts @@ -1,6 +1,6 @@ import {Component, Inject, Self} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiDestroyService, TuiDialog} from '@taiga-ui/cdk'; +import {TuiDestroyService, TuiPopover} from '@taiga-ui/cdk'; import {TuiDialogCloseService} from '@taiga-ui/core'; import {POLYMORPHEUS_CONTEXT} from '@tinkoff/ng-polymorpheus'; import {Observable, takeUntil} from 'rxjs'; @@ -18,7 +18,7 @@ export class PromptComponent { // Here you get options + content + id + observer constructor( @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, + readonly context: TuiPopover, @Inject(TuiDialogCloseService) close$: Observable, @Self() @Inject(TuiDestroyService) destroy$: Observable, ) { diff --git a/projects/demo/src/modules/services/alerts/examples/3/index.ts b/projects/demo/src/modules/services/alerts/examples/3/index.ts deleted file mode 100644 index 46070d4ecb55..000000000000 --- a/projects/demo/src/modules/services/alerts/examples/3/index.ts +++ /dev/null @@ -1,47 +0,0 @@ -import {Component, Inject, Injector} from '@angular/core'; -import {Router} from '@angular/router'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; -import {Observable, switchMap, takeUntil} from 'rxjs'; - -import {AlertExampleComponent} from './alert-example/alert-example.component'; - -@Component({ - selector: 'tui-alerts-example-3', - templateUrl: './index.html', - encapsulation, - changeDetection, -}) -export class TuiAlertsExampleComponent3 { - readonly notification: Observable; - - constructor( - @Inject(TuiAlertService) alerts: TuiAlertService, - @Inject(Router) router: Router, - @Inject(Injector) private readonly injector: Injector, - ) { - this.notification = alerts - .open( - new PolymorpheusComponent(AlertExampleComponent, this.injector), - { - label: 'Question', - status: 'error', - autoClose: false, - }, - ) - .pipe( - switchMap(response => - alerts.open(`Got a value — ${response}`, { - label: 'Information', - }), - ), - takeUntil(router.events), - ); - } - - showNotification(): void { - this.notification.subscribe(); - } -} diff --git a/projects/demo/src/modules/services/alerts/examples/4/index.ts b/projects/demo/src/modules/services/alerts/examples/4/index.ts deleted file mode 100644 index 3443fe6b2e11..000000000000 --- a/projects/demo/src/modules/services/alerts/examples/4/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -import {Component, Inject, Injector} from '@angular/core'; -import {Router} from '@angular/router'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; -import {Observable, switchMap, takeUntil} from 'rxjs'; - -import {AlertExampleWithDataComponent} from './alert-example-with-data/alert-example-with-data.component'; - -@Component({ - selector: 'tui-alerts-example-4', - templateUrl: './index.html', - encapsulation, - changeDetection, -}) -export class TuiAlertsExampleComponent4 { - readonly notification: Observable; - - constructor( - @Inject(TuiAlertService) alerts: TuiAlertService, - @Inject(Router) router: Router, - @Inject(Injector) private readonly injector: Injector, - ) { - this.notification = alerts - .open( - new PolymorpheusComponent(AlertExampleWithDataComponent, this.injector), - { - label: 'Heading is so long that it should be shown in two lines of text', - data: 237, - status: 'warning', - autoClose: false, - }, - ) - .pipe( - switchMap(response => - alerts.open(`Got a value — ${response}`, { - label: 'Information', - }), - ), - takeUntil(router.events), - ); - } - - showNotification(): void { - this.notification.subscribe(); - } -} diff --git a/projects/demo/src/modules/services/alerts/examples/5/index.ts b/projects/demo/src/modules/services/alerts/examples/5/index.ts deleted file mode 100644 index 7df7c92c2c60..000000000000 --- a/projects/demo/src/modules/services/alerts/examples/5/index.ts +++ /dev/null @@ -1,66 +0,0 @@ -import {Component, Inject, Injector} from '@angular/core'; -import {Router} from '@angular/router'; -import {changeDetection} from '@demo/emulate/change-detection'; -import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiAlertService} from '@taiga-ui/core'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; -import {Observable, takeUntil} from 'rxjs'; - -import {AlertExampleWithCustomLabelComponent} from './alert-example-with-custom-label/alert-example-with-custom-label.component'; -import {CustomLabelComponent} from './custom-label/custom-label.component'; - -@Component({ - selector: 'tui-alerts-example-5', - templateUrl: './index.html', - encapsulation, - changeDetection, -}) -export class TuiAlertsExampleComponent5 { - readonly notification: Observable; - readonly notificationWithCustomLabel: Observable; - - constructor( - @Inject(TuiAlertService) alerts: TuiAlertService, - @Inject(Router) router: Router, - @Inject(Injector) private readonly injector: Injector, - ) { - this.notification = alerts - .open( - new PolymorpheusComponent( - AlertExampleWithCustomLabelComponent, - this.injector, - ), - { - label: ({status}) => - status === 'error' - ? 'Error label from function' - : 'Info label from function', - status: 'error', - autoClose: false, - }, - ) - .pipe(takeUntil(router.events)); - - this.notificationWithCustomLabel = alerts - .open( - new PolymorpheusComponent( - AlertExampleWithCustomLabelComponent, - this.injector, - ), - { - label: new PolymorpheusComponent(CustomLabelComponent, this.injector), - status: 'warning', - autoClose: false, - }, - ) - .pipe(takeUntil(router.events)); - } - - showNotification(): void { - this.notification.subscribe(); - } - - showNotificationWithCustomLabel(): void { - this.notificationWithCustomLabel.subscribe(); - } -} diff --git a/projects/demo/src/modules/services/alerts/examples/import/module.md b/projects/demo/src/modules/services/alerts/examples/import/module.md deleted file mode 100644 index b5bda0516a5a..000000000000 --- a/projects/demo/src/modules/services/alerts/examples/import/module.md +++ /dev/null @@ -1,13 +0,0 @@ -```ts -import {TuiAlertModule, TuiRootModule} from '@taiga-ui/core'; -//... - -@NgModule({ - imports: [ - TuiRootModule, - TuiAlertModule, - //... - ], -}) -export class AppModule {} -``` diff --git a/projects/demo/src/modules/services/alerts/method.md b/projects/demo/src/modules/services/alerts/method.md deleted file mode 100644 index d746a4c679e6..000000000000 --- a/projects/demo/src/modules/services/alerts/method.md +++ /dev/null @@ -1,6 +0,0 @@ -```text -open( - content: PolymorpheusContent & TuiAlertOptions>, - options: Partial = {}, -): Observable; -``` diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts index c2ee315d2281..fdb6f96ba5b5 100644 --- a/projects/demo/used-icons.ts +++ b/projects/demo/used-icons.ts @@ -24,6 +24,7 @@ export const TUI_USED_ICONS = [ 'tuiIconThumbsUpLarge', 'tuiIconThumbsDownLarge', 'tuiIconAlignJustifyLarge', + 'tuiIconHeart', 'tuiIconUserLarge', 'tuiIconSettingsLarge', 'tuiIconMenuLarge', @@ -76,7 +77,6 @@ export const TUI_USED_ICONS = [ 'tuiIconEdit2', 'tuiIconVideoLarge', 'tuiIconArrowUp', - 'tuiIconHeart', 'tuiIconPlusCircleLarge', 'tuiIconMastercard', 'tuiIconPhoneForwardedLarge', diff --git a/projects/kit/components/pdf-viewer/pdf-viewer.component.ts b/projects/kit/components/pdf-viewer/pdf-viewer.component.ts index 394786a4b482..34262ed3f62e 100644 --- a/projects/kit/components/pdf-viewer/pdf-viewer.component.ts +++ b/projects/kit/components/pdf-viewer/pdf-viewer.component.ts @@ -5,7 +5,7 @@ import { Inject, inject, } from '@angular/core'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import { TUI_ANIMATIONS_SPEED, TUI_CLOSE_WORD, @@ -38,7 +38,7 @@ export class TuiPdfViewerComponent { @Inject(TUI_CLOSE_WORD) readonly closeWord$: Observable, @Inject(TUI_COMMON_ICONS) readonly icons: TuiCommonIcons, @Inject(POLYMORPHEUS_CONTEXT) - readonly context: TuiDialog, O>, + readonly context: TuiPopover, O>, ) {} @HostListener('document:keydown.esc') diff --git a/projects/kit/components/pdf-viewer/pdf-viewer.service.ts b/projects/kit/components/pdf-viewer/pdf-viewer.service.ts index 792b52591381..5783bf0d1ce1 100644 --- a/projects/kit/components/pdf-viewer/pdf-viewer.service.ts +++ b/projects/kit/components/pdf-viewer/pdf-viewer.service.ts @@ -1,6 +1,6 @@ import {inject, Injectable} from '@angular/core'; import {SafeResourceUrl} from '@angular/platform-browser'; -import {TuiBaseDialogContext, TuiPopoverService} from '@taiga-ui/cdk'; +import {TuiPopoverContext, TuiPopoverService} from '@taiga-ui/cdk'; import {TUI_DIALOGS} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {Observable} from 'rxjs'; @@ -9,7 +9,7 @@ import {TuiPdfViewerComponent} from './pdf-viewer.component'; import {TUI_PDF_VIEWER_OPTIONS, TuiPdfViewerOptions} from './pdf-viewer.options'; type Content = PolymorpheusContent< - TuiBaseDialogContext & TuiPdfViewerOptions + TuiPdfViewerOptions & TuiPopoverContext >; @Injectable({ diff --git a/projects/kit/components/push/push-alert.component.ts b/projects/kit/components/push/push-alert.component.ts index 080956eb9836..bb322ce4fb87 100644 --- a/projects/kit/components/push/push-alert.component.ts +++ b/projects/kit/components/push/push-alert.component.ts @@ -1,5 +1,5 @@ import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; -import {TuiDialog} from '@taiga-ui/cdk'; +import {TuiPopover} from '@taiga-ui/cdk'; import { TUI_ANIMATIONS_SPEED, tuiFadeIn, @@ -27,7 +27,7 @@ import {TuiPushAlertDirective} from './push-alert.directive'; }) export class TuiPushAlertComponent { readonly options = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED)); - readonly context = inject(POLYMORPHEUS_CONTEXT) as TuiDialog; + readonly context = inject(POLYMORPHEUS_CONTEXT) as TuiPopover; get isDirective(): boolean { return this.context.content instanceof TuiPushAlertDirective; diff --git a/projects/kit/components/push/push-alert.template.html b/projects/kit/components/push/push-alert.template.html index 84794437e1f1..282db334470c 100644 --- a/projects/kit/components/push/push-alert.template.html +++ b/projects/kit/components/push/push-alert.template.html @@ -1,5 +1,5 @@ + + + diff --git a/projects/kit/components/push/push.module.ts b/projects/kit/components/push/push.module.ts index b1b82f6df793..241dd333e3a9 100644 --- a/projects/kit/components/push/push.module.ts +++ b/projects/kit/components/push/push.module.ts @@ -1,6 +1,5 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {TUI_ALERTS} from '@taiga-ui/cdk'; import { TuiButtonModule, TuiFormatDatePipeModule, @@ -11,7 +10,6 @@ import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; import {TuiPushComponent} from './push.component'; import {TuiPushDirective} from './push.directive'; -import {TuiPushService} from './push.service'; import {TuiPushAlertComponent} from './push-alert.component'; import {TuiPushAlertDirective} from './push-alert.directive'; @@ -30,13 +28,6 @@ import {TuiPushAlertDirective} from './push-alert.directive'; TuiPushAlertComponent, TuiPushAlertDirective, ], - providers: [ - { - provide: TUI_ALERTS, - useExisting: TuiPushService, - multi: true, - }, - ], exports: [ TuiPushComponent, TuiPushDirective, diff --git a/projects/kit/components/push/push.service.ts b/projects/kit/components/push/push.service.ts index 2f4e088c46d0..978a564dc9ae 100644 --- a/projects/kit/components/push/push.service.ts +++ b/projects/kit/components/push/push.service.ts @@ -1,12 +1,13 @@ import {inject, Injectable} from '@angular/core'; -import {AbstractTuiDialogService} from '@taiga-ui/cdk'; -import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; +import {TuiPopoverService} from '@taiga-ui/cdk'; +import {TUI_ALERTS} from '@taiga-ui/core'; import {TUI_PUSH_OPTIONS, TuiPushOptions} from './push.options'; import {TuiPushAlertComponent} from './push-alert.component'; -@Injectable({providedIn: 'root'}) -export class TuiPushService extends AbstractTuiDialogService { - protected readonly component = new PolymorpheusComponent(TuiPushAlertComponent); - protected readonly defaultOptions = inject(TUI_PUSH_OPTIONS); -} +@Injectable({ + providedIn: 'root', + useFactory: () => + new TuiPushService(TUI_ALERTS, TuiPushAlertComponent, inject(TUI_PUSH_OPTIONS)), +}) +export class TuiPushService extends TuiPopoverService {} diff --git a/projects/kit/components/push/test/push.component.spec.ts b/projects/kit/components/push/test/push.component.spec.ts index d6329840f91c..e0500ad883e9 100644 --- a/projects/kit/components/push/test/push.component.spec.ts +++ b/projects/kit/components/push/test/push.component.spec.ts @@ -1,7 +1,6 @@ import {Component, DebugElement} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {TuiIdService} from '@taiga-ui/cdk'; import {TuiRootModule} from '@taiga-ui/core'; import {TuiPageObject} from '@taiga-ui/testing'; @@ -31,13 +30,7 @@ describe('Push with TUI_PUSH_OPTIONS', () => { TestBed.configureTestingModule({ imports: [NoopAnimationsModule, TuiRootModule, TuiPushModule], declarations: [TestComponent], - providers: [ - tuiPushOptionsProvider({heading}), - { - provide: TuiPushService, - useFactory: () => new TuiPushService(TestBed.inject(TuiIdService)), - }, - ], + providers: [tuiPushOptionsProvider({heading})], }); await TestBed.compileComponents(); fixture = TestBed.createComponent(TestComponent);