Skip to content

Commit 17c6793

Browse files
committed
simplify logic
1 parent 23776b1 commit 17c6793

File tree

9 files changed

+55
-95
lines changed

9 files changed

+55
-95
lines changed

projects/ngx-toastr/src/lib/toastr.css

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -164,24 +164,6 @@ button.toast-close-button {
164164
opacity: 0.4;
165165
}
166166

167-
/* animation */
168-
.toast-in {
169-
animation: toast-animation var(--animation-duration) var(--animation-easing);
170-
}
171-
172-
.toast-out {
173-
animation: toast-animation var(--animation-duration) var(--animation-easing) reverse;
174-
}
175-
176-
@keyframes toast-animation {
177-
from {
178-
opacity: 0;
179-
}
180-
to {
181-
opacity: 1;
182-
}
183-
}
184-
185167
/* Responsive Design */
186168
@media all and (max-width: 240px) {
187169
.toast-container .ngx-toastr.div {

projects/ngx-toastr/src/lib/toastr/toast-noanimation/toast-noanimation.component.html renamed to projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,21 @@
99
@if (title()) {
1010
<div [class]="_options.titleClass" [attr.aria-label]="title()">
1111
{{ title() }}
12+
1213
@if (duplicatesCount) {
1314
<ng-container>[{{ duplicatesCount + 1 }}]</ng-container>
1415
}
1516
</div>
1617
}
1718

18-
@if (message() && _options.enableHtml) {
19-
<div role="alert" [class]="_options.messageClass" [innerHTML]="message()"></div>
20-
}
21-
22-
@if (message() && !_options.enableHtml) {
23-
<div role="alert" [class]="_options.messageClass" [attr.aria-label]="message()">
24-
{{ message() }}
25-
</div>
19+
@if (message()) {
20+
@if (_options.enableHtml) {
21+
<div role="alert" [class]="_options.messageClass" [innerHTML]="message()"></div>
22+
} @else {
23+
<div role="alert" [class]="_options.messageClass" [attr.aria-label]="message()">
24+
{{ message() }}
25+
</div>
26+
}
2627
}
2728

2829
@if (_options.progressBar) {

projects/ngx-toastr/src/lib/toastr/toast.abstract.ts renamed to projects/ngx-toastr/src/lib/toastr/base-toast/base-toast.component.ts

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
11
import {
22
ApplicationRef,
3+
ChangeDetectionStrategy,
4+
Component,
35
computed,
4-
Directive,
56
inject,
67
linkedSignal,
78
signal,
89
type OnDestroy,
910
} from '@angular/core';
10-
import { ToastPackage, type IndividualConfig } from './toastr-config';
11-
import { ToastrService } from './toastr.service';
11+
import { ToastPackage, type IndividualConfig } from '../toastr-config';
12+
import { ToastrService } from '../toastr.service';
1213
import type { Subscription } from 'rxjs';
13-
import { TimeoutsService } from '../timeouts.service';
14-
15-
@Directive({})
16-
export abstract class ToastBase<ConfigPayload = unknown> implements OnDestroy {
14+
import { TimeoutsService } from '../../timeouts.service';
15+
16+
@Component({
17+
selector: '[toast-component]',
18+
templateUrl: './base-toast.component.html',
19+
changeDetection: ChangeDetectionStrategy.OnPush,
20+
host: {
21+
'[class]': 'toastClasses()',
22+
'[style.display]': 'displayStyle()',
23+
'(mouseenter)': 'stickAround()',
24+
'(mouseleave)': 'delayedHideToast()',
25+
'(click)': 'tapToast()',
26+
},
27+
})
28+
export class ToastBase<ConfigPayload = unknown> implements OnDestroy {
1729
public toastPackage = inject(ToastPackage);
1830
protected toastrService = inject(ToastrService);
1931
protected appRef = inject(ApplicationRef);

projects/ngx-toastr/src/lib/toastr/toast-noanimation/toast-noanimation.component.ts

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
1-
import { ChangeDetectionStrategy, ModuleWithProviders } from '@angular/core';
2-
import { Component, NgModule } from '@angular/core';
1+
import { ModuleWithProviders } from '@angular/core';
2+
import { NgModule } from '@angular/core';
33
import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from '../toastr-config';
4-
import { ToastBase } from '../toast.abstract';
5-
6-
@Component({
7-
selector: '[toast-component]',
8-
templateUrl: './toast-noanimation.component.html',
9-
standalone: true,
10-
changeDetection: ChangeDetectionStrategy.OnPush,
11-
host: {
12-
'[class]': 'toastClasses()',
13-
'[style.display]': 'displayStyle()',
14-
'(mouseenter)': 'stickAround()',
15-
'(mouseleave)': 'delayedHideToast()',
16-
'(click)': 'tapToast()',
17-
},
18-
})
19-
export class ToastNoAnimation extends ToastBase {}
4+
import { ToastBase as ToastNoAnimation } from '../base-toast/base-toast.component';
205

216
export const DefaultNoAnimationsGlobalConfig: GlobalConfig = {
227
...DefaultNoComponentGlobalConfig,
@@ -43,3 +28,5 @@ export class ToastNoAnimationModule {
4328
};
4429
}
4530
}
31+
32+
export { ToastNoAnimation };

projects/ngx-toastr/src/lib/toastr/toast/toast.component.html

Lines changed: 0 additions & 32 deletions
This file was deleted.
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:host {
2+
&.toast-in {
3+
animation: toast-animation var(--animation-duration) var(--animation-easing);
4+
}
5+
6+
&.toast-out {
7+
animation: toast-animation var(--animation-duration) var(--animation-easing) reverse;
8+
}
9+
}
10+
11+
@keyframes toast-animation {
12+
from {
13+
opacity: 0;
14+
}
15+
to {
16+
opacity: 1;
17+
}
18+
}
Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
1-
import { ChangeDetectionStrategy, Component, NgZone, signal, inject } from '@angular/core';
2-
import { ToastBase } from '../toast.abstract';
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2+
import { ToastBase } from '../base-toast/base-toast.component';
33

44
@Component({
55
selector: '[toast-component]',
6-
templateUrl: './toast.component.html',
6+
templateUrl: '../base-toast/base-toast.component.html',
7+
styleUrl: './toast.component.scss',
78
host: {
8-
'[class]': 'toastClasses()',
9-
'[style.display]': 'displayStyle()',
10-
'(mouseenter)': 'stickAround()',
11-
'(mouseleave)': 'delayedHideToast()',
12-
'(click)': 'tapToast()',
139
'[style.--animation-easing]': 'params().easing',
1410
'[style.--animation-duration]': 'params().easeTime + "ms"',
1511
'animate.enter': 'toast-in',
1612
'animate.leave': 'toast-out',
1713
},
18-
preserveWhitespaces: false,
1914
standalone: true,
2015
changeDetection: ChangeDetectionStrategy.OnPush,
2116
})
2217
export class Toast<ConfigPayload = unknown> extends ToastBase<ConfigPayload> {
23-
protected ngZone? = inject(NgZone);
2418
readonly params = signal({ easeTime: this.toastPackage.config.easeTime, easing: 'ease-in' });
2519
}

src/app/bootstrap-toast/bootstrap-toast.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Toast } from 'ngx-toastr';
44
@Component({
55
selector: '[bootstrap-toast-component]',
66
templateUrl: './bootstrap-toast.component.html',
7-
preserveWhitespaces: false,
87
})
98
export class BootstrapToast extends Toast {
109
// used for demo purposes

src/app/pink-toast/pink-toast.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { Toast } from 'ngx-toastr';
1010
'animate.enter': 'animate-pink-in',
1111
'animate.leave': 'animate-pink-out',
1212
},
13-
preserveWhitespaces: false,
1413
})
1514
export class PinkToast extends Toast {
1615
// used for demo purposes

0 commit comments

Comments
 (0)