feat(angular/toast): add framework integration for custom toast message

siemens · Aug 31, 2022 · 7f31f9b · 7f31f9b
1 parent 606f2e4
commit 7f31f9b
Show file tree

Hide file tree

Showing 25 changed files with 425 additions and 16 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -5,6 +5,8 @@ import { BasicNavigation } from 'src/preview-examples/basic-navigation';
 import { ButtonGroup } from 'src/preview-examples/button-group';
 import { Buttons } from 'src/preview-examples/buttons';
 import { Modal } from 'src/preview-examples/modal';
+import { Toast } from 'src/preview-examples/toast';
+import { ToastCustom } from 'src/preview-examples/toast-custom';
 
 const routes: Routes = [
   {
@@ -35,6 +37,14 @@ const routes: Routes = [
         path: 'modal',
         component: Modal,
       },
+      {
+        path: 'toast',
+        component: Toast,
+      },
+      {
+        path: 'toast-custom',
+        component: ToastCustom,
+      },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -4,14 +4,16 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { CoreUIModule } from '@siemens/ix-angular/dist';
+import { CoreUIModule } from '@siemens/ix-angular';
 import { AGGrid } from 'src/preview-examples/aggrid';
 import { ButtonGroup } from 'src/preview-examples/button-group';
 import { Buttons } from 'src/preview-examples/buttons';
 
 import { AgGridModule } from 'ag-grid-angular';
 import { BasicNavigation } from 'src/preview-examples/basic-navigation';
 import { Modal } from 'src/preview-examples/modal';
+import { Toast } from 'src/preview-examples/toast';
+import { ToastCustom } from 'src/preview-examples/toast-custom';
 
 @NgModule({
   declarations: [
@@ -21,6 +23,8 @@ import { Modal } from 'src/preview-examples/modal';
     AGGrid,
     BasicNavigation,
     Modal,
+    Toast,
+    ToastCustom,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/modal.ts b/packages/angular-test-app/src/preview-examples/modal.ts
@@ -2,7 +2,7 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { ModalService } from '@siemens/ix-angular/dist';
+import { ModalService } from '@siemens/ix-angular';
 
 @Component({
   selector: 'app-modal',

diff --git a/packages/angular-test-app/src/preview-examples/toast-custom.ts b/packages/angular-test-app/src/preview-examples/toast-custom.ts
@@ -0,0 +1,37 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ToastService } from '@siemens/ix-angular';
+
+@Component({
+  selector: 'app-toast',
+  template: `
+    <div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+    <ix-button (click)="showToastMessage()">Show Toast</ix-button>
+    <ng-template #customToast let-toast>
+      <div>
+        <div>Custom toast message</div>
+        <ix-button (click)="toast.close('Action')">Action</ix-button>
+      </div>
+    </ng-template>
+  `,
+})
+export class ToastCustom {
+  @ViewChild('customToast', { read: TemplateRef })
+  customToastRef!: TemplateRef<any>;
+
+  constructor(private readonly toastService: ToastService) {}
+
+  async showToastMessage() {
+    this.toastService.show({
+      message: this.customToastRef,
+    });
+  }
+}
diff --git a/packages/angular-test-app/src/preview-examples/toast.ts b/packages/angular-test-app/src/preview-examples/toast.ts
@@ -0,0 +1,31 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ToastService } from '@siemens/ix-angular';
+
+@Component({
+  selector: 'app-toast',
+  template: `
+    <div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+    <ix-button (click)="showToastMessage()">Show Toast</ix-button>
+  `,
+})
+export class Toast {
+  @ViewChild('customToast', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly toastService: ToastService) {}
+
+  async showToastMessage() {
+    this.toastService.show({
+      message: 'Hello World!',
+    });
+  }
+}
diff --git a/packages/angular-test-app/src/styles.scss b/packages/angular-test-app/src/styles.scss
@@ -3,7 +3,11 @@
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-alpine.css';
 
+// Relative import only for monorepo with symlinking normal import should be @siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css
 @import './../../../node_modules/@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
 
+// Relative import only for monorepo with symlinking normal import should be @siemens/ix/dist/siemens-ix/siemens-ix.css
 @import './../../../node_modules/@siemens/ix/dist/siemens-ix/siemens-ix.css';
+
+// Relative import only for monorepo with symlinking normal import should be @siemens/ix-icons/dist/css/ix-icons.css
 @import './../../../node_modules/@siemens/ix-icons/dist/css/ix-icons.css';
diff --git a/packages/angular-test-app/tsconfig.json b/packages/angular-test-app/tsconfig.json
@@ -23,6 +23,10 @@
       "dom"
     ],
     "preserveSymlinks": true,
+    "paths": {
+      "@siemens/ix-angular": ["./../../node_modules/@siemens/ix-angular/dist"],
+      "@siemens/ix-angular/*": ["./../../node_modules/@siemens/ix-angular/dist"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
@@ -6,3 +6,4 @@ export * from '@siemens/ix';
 export * from './components';
 export * from './modal';
 export * from './module';
+export * from './toast';
diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts
@@ -11,6 +11,7 @@ import {
 import { appInitialize } from './app-initialize';
 import { DIRECTIVES } from './declare-components';
 import { ModalService } from './modal';
+import { ToastService } from './toast';
 const DECLARATIONS = [...DIRECTIVES];
 
 @NgModule({
@@ -29,6 +30,7 @@ export class CoreUIModule {
           deps: [DOCUMENT, NgZone],
         },
         ModalService,
+        ToastService,
       ],
     };
   }

diff --git a/packages/angular/src/toast/index.ts b/packages/angular/src/toast/index.ts
@@ -0,0 +1,4 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+export * from './toast.service';
diff --git a/packages/angular/src/toast/toast.config.ts b/packages/angular/src/toast/toast.config.ts
@@ -0,0 +1,9 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { TemplateRef } from '@angular/core';
+import { ToastConfig as IxToastConfig } from '@siemens/ix';
+
+export type ToastConfig = Omit<IxToastConfig, 'message'> & {
+  message: string | TemplateRef<any>;
+};
diff --git a/packages/angular/src/toast/toast.service.ts b/packages/angular/src/toast/toast.service.ts
@@ -0,0 +1,45 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Injectable } from '@angular/core';
+import { toast, ToastConfig as IxToastConfig } from '@siemens/ix';
+import { ToastConfig } from './toast.config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  public async show(config: ToastConfig) {
+    if (typeof config.message === 'string') {
+      return toast(config as IxToastConfig);
+    }
+
+    const context: {
+      close: (() => void) | null;
+    } = {
+      close: null,
+    };
+
+    const embeddedView = config.message.createEmbeddedView({
+      $implicit: context,
+    });
+
+    const node: HTMLElement = embeddedView.rootNodes[0];
+    const instance = await toast({
+      ...config,
+      message: node,
+    });
+
+    context.close = () => {
+      instance.close();
+    };
+
+    embeddedView.detectChanges();
+
+    instance.onClose.once(() => {
+      embeddedView.destroy();
+    });
+
+    return instance;
+  }
+}
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1192,7 +1192,7 @@ export namespace Components {
           * Display a toast message
           * @param config
          */
-        "showToast": (config: ToastConfig) => Promise<{ onClose: TypedEvent<void>; close: () => void; }>;
+        "showToast": (config: ToastConfig) => Promise<{ onClose: TypedEvent<any>; close: (result?: any) => void; }>;
     }
     interface IxToggle {
         /**

diff --git a/packages/core/src/components/toast/readme.md b/packages/core/src/components/toast/readme.md
@@ -14,13 +14,13 @@
 
 ## Methods
 
-### `showToast(config: ToastConfig) => Promise<{ onClose: TypedEvent<void>; close: () => void; }>`
+### `showToast(config: ToastConfig) => Promise<{ onClose: TypedEvent<any>; close: (result?: any) => void; }>`
 
 Display a toast message
 
 #### Returns
 
-Type: `Promise<{ onClose: TypedEvent<void>; close: () => void; }>`
+Type: `Promise<{ onClose: TypedEvent<any>; close: (result?: any) => void; }>`
 
 
 

diff --git a/packages/core/src/components/toast/toast-container.tsx b/packages/core/src/components/toast/toast-container.tsx
@@ -47,11 +47,11 @@ export class CwToastContainer {
   async showToast(config: ToastConfig) {
     const toast = document.createElement('ix-toast');
 
-    const onClose = new TypedEvent<void>();
+    const onClose = new TypedEvent<any | undefined>();
 
-    function removeToast() {
+    function removeToast(result?: any) {
       toast.remove();
-      onClose.emit();
+      onClose.emit(result);
     }
 
     toast.toastTitle = config.title;
@@ -60,9 +60,13 @@ export class CwToastContainer {
     toast.autoCloseDelay = config.autoCloseDelay;
     toast.icon = config.icon;
     toast.iconColor = config.iconColor;
-    toast.addEventListener('closeToast', () => {
-      removeToast();
-    });
+    toast.addEventListener(
+      'closeToast',
+      (event: CustomEvent<any | undefined>) => {
+        const { detail } = event;
+        removeToast(detail);
+      }
+    );
 
     if (typeof config.message === 'string') {
       toast.innerText = config.message;
@@ -74,8 +78,8 @@ export class CwToastContainer {
 
     return {
       onClose,
-      close: () => {
-        removeToast();
+      close: (result?: any) => {
+        removeToast(result);
       },
     };
   }

diff --git a/packages/documentation/docs/auto-generated/previews/angular/modal.md b/packages/documentation/docs/auto-generated/previews/angular/modal.md
@@ -4,7 +4,7 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { ModalService } from '@siemens/ix-angular/dist';
+import { ModalService } from '@siemens/ix-angular';
 
 @Component({
   selector: 'app-modal',

diff --git a/packages/documentation/docs/auto-generated/previews/angular/toast-custom.md b/packages/documentation/docs/auto-generated/previews/angular/toast-custom.md
@@ -0,0 +1,40 @@
+<!-- Auto generated! Please edit here: siemens-ix/packages/angular-test-app/src/preview-examples/toast-custom.ts -->
+```typescript
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ToastService } from '@siemens/ix-angular';
+
+@Component({
+  selector: 'app-toast',
+  template: `
+    <div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+    <ix-button (click)="showToastMessage()">Show Toast</ix-button>
+    <ng-template #customToast let-toast>
+      <div>
+        <div>Custom toast message</div>
+        <ix-button (click)="toast.close('Action')">Action</ix-button>
+      </div>
+    </ng-template>
+  `,
+})
+export class ToastCustom {
+  @ViewChild('customToast', { read: TemplateRef })
+  customToastRef!: TemplateRef<any>;
+
+  constructor(private readonly toastService: ToastService) {}
+
+  async showToastMessage() {
+    this.toastService.show({
+      message: this.customToastRef,
+    });
+  }
+}
+```
diff --git a/packages/documentation/docs/auto-generated/previews/angular/toast.md b/packages/documentation/docs/auto-generated/previews/angular/toast.md
@@ -0,0 +1,34 @@
+<!-- Auto generated! Please edit here: siemens-ix/packages/angular-test-app/src/preview-examples/toast.ts -->
+```typescript
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { ToastService } from '@siemens/ix-angular';
+
+@Component({
+  selector: 'app-toast',
+  template: `
+    <div>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet.
+    </div>
+    <ix-button (click)="showToastMessage()">Show Toast</ix-button>
+  `,
+})
+export class Toast {
+  @ViewChild('customToast', { read: TemplateRef })
+  customModalRef!: TemplateRef<any>;
+
+  constructor(private readonly toastService: ToastService) {}
+
+  async showToastMessage() {
+    this.toastService.show({
+      message: 'Hello World!',
+    });
+  }
+}
+```