MikroWizard Initial commit | MikroFront Welcome to the world :)

src/app/views/toast-simple/toast-sample-icon.component.svg

@@ -0,0 +1,11 @@
+<svg
+  class="rounded me-2"
+  width="20"
+  height="20"
+  xmlns="http://www.w3.org/2000/svg"
+  preserveAspectRatio="xMidYMid slice"
+  focusable="false"
+  role="img"
+>
+  <rect width="100%" height="100%" fill="#007aff"></rect>
+</svg>

src/app/views/toast-simple/toast-sample-icon.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'toast-sample-icon',
+  templateUrl: './toast-sample-icon.component.svg',
+})
+export class ToastSampleIconComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/views/toast-simple/toast.component.html

@@ -0,0 +1,12 @@
+<ng-container>
+  <c-toast-header [closeButton]="closeButton">
+    <i *ngIf="color=='danger'" style="color:#e55353" class="fa-solid fa-xmark mx-1"></i>
+    <i *ngIf="color=='info'" style="color:#3399ff" class="fa-solid fa-exclamation mx-1"></i>
+    <i *ngIf="color=='warning'" style="color:#f9b115" class="fa-solid fa-triangle-exclamation mx-1"></i>
+    <strong style="line-height:1;">{{ title }}</strong>
+  </c-toast-header>
+  <c-toast-body #toastBody [cToastClose]="toastBody.toast">
+    <p class="mb-1" style="color:#fff;">{{ body }} </p>
+    <ng-content />
+  </c-toast-body>
+</ng-container>

src/app/views/toast-simple/toast.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  overflow: hidden;
+}

src/app/views/toast-simple/toast.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { ButtonModule, ProgressModule, ToastModule } from '@coreui/angular';
+import { IconSetService } from '@coreui/icons-angular';
+import { iconSubset } from '../../../../icons/icon-subset';
+import { AppToastComponent } from './toast.component';
+
+describe('ToastComponent', () => {
+  let component: AppToastComponent;
+  let fixture: ComponentFixture<AppToastComponent>;
+  let iconSetService: IconSetService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+    imports: [NoopAnimationsModule, ToastModule, ProgressModule, ButtonModule, AppToastComponent],
+    providers: [IconSetService]
+})
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    iconSetService = TestBed.inject(IconSetService);
+    iconSetService.icons = { ...iconSubset };
+
+    fixture = TestBed.createComponent(AppToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/toast-simple/toast.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, Renderer2 } from '@angular/core';
+
+import { ToastComponent, ToasterService, ToastHeaderComponent, ToastBodyComponent, ToastCloseDirective,  ProgressComponent } from '@coreui/angular';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-toast-simple',
+    templateUrl: './toast.component.html',
+    styleUrls: ['./toast.component.scss'],
+    providers: [{ provide: ToastComponent, useExisting: forwardRef(() => AppToastComponent) }],
+    standalone: true,
+    imports: [ToastHeaderComponent, ToastBodyComponent, ToastCloseDirective,  ProgressComponent,CommonModule]
+})
+export class AppToastComponent extends ToastComponent {
+
+  @Input() closeButton = true;
+  @Input() title = '';
+  @Input() body = '';
+
+  constructor(
+    public override hostElement: ElementRef,
+    public override renderer: Renderer2,
+    public override toasterService: ToasterService,
+    public override changeDetectorRef: ChangeDetectorRef
+  ) {
+    super(hostElement, renderer, toasterService, changeDetectorRef);
+  }
+}