fix: add prefix to toaster css classes

- Toaster Interface added for custom toaster service implementation
- optimize imports and removed unnecessary service

npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html

@@ -1,5 +1,5 @@
 <div
-  class="toast-container"
+  class="abp-toast-container"
   [style.top]="top || 'auto'"
   [style.right]="right || 'auto'"
   [style.bottom]="bottom || 'auto'"

npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss

@@ -1,4 +1,4 @@
-.toast-container {
+.abp-toast-container {
   position: fixed;
   display: flex;
   flex-direction: column;

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html

@@ -1,15 +1,15 @@
-<div class="toast" [ngClass]="severityClass" (click)="tap()">
-  <div class="toast-icon">
+<div class="abp-toast" [ngClass]="severityClass" (click)="tap()">
+  <div class="abp-toast-icon">
     <i class="fa icon" [ngClass]="iconClass"></i>
   </div>
-  <div class="toast-content">
-    <button class="toast-close-button" (click)="close()" *ngIf="toast.options.closable">
+  <div class="abp-toast-content">
+    <button class="abp-toast-close-button" (click)="close()" *ngIf="toast.options.closable">
       <i class="fa fa-times"></i>
     </button>
-    <div class="toast-title">
+    <div class="abp-toast-title">
       {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}
     </div>
-    <p class="toast-message">
+    <p class="abp-toast-message">
       {{ toast.message | abpLocalization: toast.options?.messageLocalizationParams }}
     </p>
   </div>

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss

@@ -10,7 +10,9 @@
   }
 }
 
-.toast {
+$toastClass: abp-toast;
+
+.#{$toastClass} {
   display: grid;
   grid-template-columns: 50px 1fr;
   gap: 10px;
@@ -23,19 +25,19 @@
   z-index: 9999;
   @include fillColor(#f0f0f0, #000);
   opacity: 1;
-  &.toast-success {
+  &.#{$toastClass}-success {
     @include fillColor(#51a351, #fff);
   }
-  &.toast-info {
+  &.#{$toastClass}-info {
     @include fillColor(#2f96b4, #fff);
   }
-  &.toast-warning {
+  &.#{$toastClass}-warning {
     @include fillColor(#f89406, #fff);
   }
-  &.toast-error {
+  &.#{$toastClass}-error {
     @include fillColor(#bd362f, #fff);
   }
-  .toast-icon {
+  .#{$toastClass}-icon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,9 +45,9 @@
       font-size: 36px;
     }
   }
-  .toast-content {
+  .#{$toastClass}-content {
     position: relative;
-    .toast-close-button {
+    .#{$toastClass}-close-button {
       position: absolute;
       top: 0;
       right: 0;
@@ -64,13 +66,13 @@
         outline: none;
       }
     }
-    .toast-title {
+    .#{$toastClass}-title {
       margin: 0;
       padding: 0;
       font-size: 1rem;
       font-weight: 600;
     }
-    .toast-message {
+    .#{$toastClass}-message {
       margin: 0;
       padding: 0;
       max-width: 240px;

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Toaster } from '../../models/toaster';
 import { ToasterService } from '../../services/toaster.service';
-import { LocalizationService } from '@abp/ng.core';
 import snq from 'snq';
 
 @Component({
@@ -15,7 +14,7 @@ export class ToastComponent implements OnInit {
 
   get severityClass(): string {
     if (!this.toast || !this.toast.severity) return '';
-    return `toast-${this.toast.severity}`;
+    return `abp-toast-${this.toast.severity}`;
   }
 
   get iconClass(): string {
@@ -33,10 +32,7 @@ export class ToastComponent implements OnInit {
     }
   }
 
-  constructor(
-    private toastService: ToasterService,
-    private localizationService: LocalizationService,
-  ) {}
+  constructor(private toasterService: ToasterService) {}
 
   ngOnInit() {
     if (snq(() => this.toast.options.sticky)) return;
@@ -47,10 +43,10 @@ export class ToastComponent implements OnInit {
   }
 
   close() {
-    this.toastService.remove(this.toast.options.id);
+    this.toasterService.remove(this.toast.options.id);
   }
 
   tap() {
-    if (this.toast.options && this.toast.options.tapToDismiss) this.close();
+    if (this.toast.options?.tapToDismiss) this.close();
   }
 }

npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts

@@ -20,4 +20,36 @@ export namespace Toaster {
   }
 
   export type Severity = 'neutral' | 'success' | 'info' | 'warning' | 'error';
+  export type ToasterId = string | number;
+
+  export interface Service {
+    show: (
+      message: Config.LocalizationParam,
+      title: Config.LocalizationParam,
+      severity: Toaster.Severity,
+      options: Partial<Toaster.ToastOptions>,
+    ) => ToasterId;
+    remove: (id: number) => void;
+    clear: (key?: string) => void;
+    info: (
+      message: Config.LocalizationParam,
+      title?: Config.LocalizationParam,
+      options?: Partial<Toaster.ToastOptions>,
+    ) => ToasterId;
+    success: (
+      message: Config.LocalizationParam,
+      title?: Config.LocalizationParam,
+      options?: Partial<Toaster.ToastOptions>,
+    ) => ToasterId;
+    warn: (
+      message: Config.LocalizationParam,
+      title?: Config.LocalizationParam,
+      options?: Partial<Toaster.ToastOptions>,
+    ) => ToasterId;
+    error: (
+      message: Config.LocalizationParam,
+      title?: Config.LocalizationParam,
+      options?: Partial<Toaster.ToastOptions>,
+    ) => ToasterId;
+  }
 }

npm/ng-packs/packages/theme-shared/src/lib/services/toaster.service.ts

@@ -1,14 +1,14 @@
-import { Injectable, ComponentRef } from '@angular/core';
+import { ComponentRef, Injectable } from '@angular/core';
 import { Toaster } from '../models';
 import { ReplaySubject } from 'rxjs';
-import { Config, PROJECTION_STRATEGY, ContentProjectionService } from '@abp/ng.core';
+import { Config, ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core';
 import snq from 'snq';
 import { ToastContainerComponent } from '../components/toast-container/toast-container.component';
 
 @Injectable({
   providedIn: 'root',
 })
-export class ToasterService {
+export class ToasterService implements Toaster.Service {
   toasts$ = new ReplaySubject<Toaster.Toast[]>(1);
 
   private lastId = -1;

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -22,54 +22,41 @@ import { LoadingDirective } from './directives/loading.directive';
 import { NgxDatatableDefaultDirective } from './directives/ngx-datatable-default.directive';
 import { NgxDatatableListDirective } from './directives/ngx-datatable-list.directive';
 import { TableSortDirective } from './directives/table-sort.directive';
-import { ErrorHandler } from './handlers/error.handler';
 import { initLazyStyleHandler } from './handlers/lazy-style.handler';
 import { RootParams } from './models/common';
 import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
-import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
+import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
 
+const declarationsWithExports = [
+  BreadcrumbComponent,
+  ButtonComponent,
+  ChartComponent,
+  ConfirmationComponent,
+  LoaderBarComponent,
+  LoadingComponent,
+  ModalComponent,
+  TableComponent,
+  TableEmptyMessageComponent,
+  ToastComponent,
+  ToastContainerComponent,
+  SortOrderIconComponent,
+  NgxDatatableDefaultDirective,
+  NgxDatatableListDirective,
+  LoadingDirective,
+  TableSortDirective,
+];
 @NgModule({
   imports: [CoreModule, NgxDatatableModule, NgxValidateCoreModule, NgbPaginationModule],
   declarations: [
-    BreadcrumbComponent,
-    ButtonComponent,
-    ChartComponent,
-    ConfirmationComponent,
+    ...declarationsWithExports,
     HttpErrorWrapperComponent,
-    LoaderBarComponent,
-    LoadingComponent,
-    ModalComponent,
     ModalContainerComponent,
-    TableComponent,
-    TableEmptyMessageComponent,
-    ToastComponent,
-    ToastContainerComponent,
-    SortOrderIconComponent,
-    NgxDatatableDefaultDirective,
-    NgxDatatableListDirective,
-    LoadingDirective,
-    TableSortDirective,
   ],
   exports: [
     NgxDatatableModule,
-    BreadcrumbComponent,
-    ButtonComponent,
-    ChartComponent,
-    ConfirmationComponent,
-    LoaderBarComponent,
-    LoadingComponent,
-    ModalComponent,
-    TableComponent,
-    TableEmptyMessageComponent,
-    ToastComponent,
-    ToastContainerComponent,
-    SortOrderIconComponent,
-    NgxDatatableDefaultDirective,
-    NgxDatatableListDirective,
-    LoadingDirective,
-    TableSortDirective,
+    ...declarationsWithExports,
   ],
   providers: [DatePipe],
   entryComponents: [
@@ -81,8 +68,6 @@ import { DateParserFormatter } from './utils/date-parser-formatter';
   ],
 })
 export class ThemeSharedModule {
-  constructor(private errorHandler: ErrorHandler) {}
-
   static forRoot(options = {} as RootParams): ModuleWithProviders<ThemeSharedModule> {
     return {
       ngModule: ThemeSharedModule,