feat(toast): toast service implementation (#UIM-829)

angular.json

@@ -1399,6 +1399,35 @@
                 }
             }
         },
+        "dev-toast": {
+            "projectType": "application",
+            "root": "packages/mosaic-dev/toast",
+            "sourceRoot": "packages/mosaic-dev/toast",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/mosaic-dev/toast",
+                        "tsConfig": "packages/mosaic-dev/toast/tsconfig.app.json",
+                        "index": "packages/mosaic-dev/index.html",
+                        "main": "packages/mosaic-dev/toast/main.ts",
+                        "polyfills": "packages/mosaic-dev/polyfills.ts",
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "dev-toast:build"
+                    }
+                }
+            }
+        },
         "dev-toggle": {
             "projectType": "application",
             "root": "packages/mosaic-dev/toggle",

commitlint.config.js

@@ -44,6 +44,7 @@ const scope_types = [
     'tags',
     'textarea',
     'timepicker',
+    'toast',
     'toggle',
     'tooltip',
     'tree',

package.json

@@ -195,6 +195,7 @@
         "server-dev:tabs": "ng serve dev-tabs --port 3003",
         "server-dev:tags": "ng serve dev-tags --port 3003",
         "server-dev:textarea": "ng serve dev-textarea --port 3003",
+        "server-dev:toast": "ng serve dev-toast --port 3003",
         "server-dev:toggle": "ng serve dev-toggle --port 3003",
         "server-dev:theme-picker": "ng serve dev-theme-picker --port 3003",
         "server-dev:tree": "ng serve dev-tree --port 3003",

packages/docs/src/app/shared/documentation-items/documentation-items.ts

@@ -94,6 +94,12 @@ const DOCS: { [key: string]: DocCategory[] } = {
                     name: 'Tooltip',
                     summary: '',
                     examples: ['tooltip-types']
+                },
+                {
+                    id: 'toast',
+                    name: 'Toast',
+                    summary: '',
+                    examples: ['toast-types']
                 }
             ]
         },

packages/mosaic-dev/toast/main.ts

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { DemoModule } from './module';
+
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    // tslint:disable-next-line:no-console
+    .catch((error) => console.error(error));

packages/mosaic-dev/toast/module.ts

@@ -0,0 +1,103 @@
+/* tslint:disable:no-console */
+import { NgModule, Component, ViewEncapsulation, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ThemePalette } from '@ptsecurity/mosaic/core';
+import {
+    McToastStyle,
+    MC_TOAST_CONFIG,
+    McToastData,
+    McToastModule,
+    McToastService,
+    McToastPosition,
+    McToastComponent
+} from '@ptsecurity/mosaic/toast';
+
+import { McButtonModule } from '../../mosaic/button';
+
+
+@Component({
+    selector: 'mc-new-toast',
+    template: '<div>MyToastComponent</div>',
+    host: {
+        class: 'my-toast'
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class MyToastComponent extends McToastComponent {
+    constructor(
+        readonly data: McToastData,
+        readonly service: McToastService
+    ) {
+        super(data, service);
+
+        console.log('MyToastComponent: ');
+    }
+}
+
+
+@Component({
+    selector: 'app',
+    templateUrl: './template.html',
+    styleUrls: ['../main.scss', './styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ToastDemoComponent {
+    themePalette = ThemePalette;
+
+    constructor(
+        private toastService: McToastService,
+        private newToastService: McToastService<MyToastComponent>
+    ) {}
+
+    showToast(style: McToastStyle) {
+        this.toastService.show({ style, title: 'Success', content: 'Message Content' });
+    }
+
+    showToastTitleTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.show({ style, title: template, content: 'Message Content' });
+    }
+
+    showToastContentTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.show({ style, title: 'Success', content: template });
+    }
+
+    showNewToast(style: McToastStyle) {
+        this.newToastService.show({ style, title: 'Success', content: 'Message Content' });
+    }
+
+    showTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.showTemplate({ style, title: 'Success', content: 'Message Content' }, template);
+    }
+}
+
+@NgModule({
+    declarations: [
+        ToastDemoComponent,
+        MyToastComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        McButtonModule,
+        McToastModule
+    ],
+    bootstrap: [ToastDemoComponent],
+    providers: [
+        McToastService,
+        {
+            provide: MC_TOAST_CONFIG,
+            useValue: {
+                position: McToastPosition.TOP_RIGHT,
+                duration: 3000,
+                onTop: true
+            }
+        }
+        // {
+        //     provide: McToastComponent,
+        //     useFactory: () => MyToastComponent
+        // }
+    ]
+})
+export class DemoModule {}

packages/mosaic-dev/toast/styles.scss

@@ -0,0 +1,18 @@
+.demo-block {
+    display: flex;
+    flex-flow: row wrap;
+
+    .example-button-group {
+        display: flex;
+        flex-flow: column wrap;
+
+        button {
+            width: 150px;
+            margin-bottom: 5px;
+        }
+    }
+
+    .toasts-container {
+        margin-left: 20px;
+    }
+}

packages/mosaic-dev/toast/template.html

@@ -0,0 +1,28 @@
+<ng-template #toastTitleTemplate let-toast>
+    my title
+</ng-template>
+
+<ng-template #toastContentTemplate let-toast>
+    <b>my content</b>
+</ng-template>
+
+<ng-template #template let-data>
+    Template with data.title: {{ data.title }}
+</ng-template>
+
+<div class="demo-block">
+    <div class="example-button-group">
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('success')">Success</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('info')">Info</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('warning')">Warn</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('error')">Error</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToastTitleTemplate('error', toastTitleTemplate)">Title Template</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToastContentTemplate('error', toastContentTemplate)">Content Template</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showNewToast('warning')">MyToast</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showTemplate('warning', template)">show template</button>
+    </div>
+</div>

packages/mosaic-dev/toast/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.dev.json",
+    "files": [
+        "module.ts",
+        "../polyfills.ts"
+    ],
+    "include": ["**/*.ts"]
+}

packages/mosaic-examples/mosaic/toast/index.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { MC_TOAST_CONFIG, McToastModule, McToastPosition, McToastService } from '@ptsecurity/mosaic/toast';
+
+import { ToastOverviewExample } from './toast-overview/toast-overview-example';
+
+
+export {
+    ToastOverviewExample
+};
+
+const EXAMPLES = [
+    ToastOverviewExample
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        McButtonModule,
+        McToastModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES,
+    providers: [
+        McToastService,
+        {
+            provide: MC_TOAST_CONFIG,
+            useValue: {
+                position: McToastPosition.TOP_RIGHT,
+                duration: 3000
+            }
+        }
+    ]
+})
+export class ToastExamplesModule {}

packages/mosaic-examples/mosaic/toast/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.css

@@ -0,0 +1,8 @@
+.example-button-group {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.example-button {
+    margin-bottom: 10px;
+}

packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.html

@@ -0,0 +1,28 @@
+<ng-template #toastTitleTemplate let-toast>
+    my title
+</ng-template>
+
+<ng-template #toastContentTemplate let-toast>
+    <b>my content</b>
+</ng-template>
+
+<ng-template #template let-data>
+    <div>Template with data.title: {{ data.title }}</div>
+</ng-template>
+
+<div class="demo-block">
+    <div class="example-button-group">
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('success')">Success</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('info')">Info</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('warning')">Warn</button>
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToast('error')">Error</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToastTitleTemplate('error', toastTitleTemplate)">Title Template</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showToastContentTemplate('error', toastContentTemplate)">Content Template</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showNewToast('warning')">MyToast</button>
+
+        <button class="example-button" mc-button [color]="themePalette.Primary" (click)="showTemplate('warning', template)">show template</button>
+    </div>
+</div>

packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.ts

@@ -0,0 +1,61 @@
+/* tslint:disable:no-console */
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ThemePalette } from '@ptsecurity/mosaic/core';
+import { McToastData, McToastStyle, McToastService, McToastComponent } from '@ptsecurity/mosaic/toast';
+
+
+@Component({
+    selector: 'mc-new-toast',
+    template: '<div>MyToastComponent</div>',
+    host: {
+        class: 'my-toast'
+    },
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
+})
+export class MyToastComponent extends McToastComponent {
+    constructor(
+        readonly data: McToastData,
+        readonly service: McToastService
+    ) {
+        super(data, service);
+
+        console.log('MyToastComponent: ');
+    }
+}
+/**
+ * @title Basic Toast
+ */
+@Component({
+    selector: 'toast-overview-example',
+    templateUrl: 'toast-overview-example.html',
+    styleUrls: ['toast-overview-example.css']
+})
+export class ToastOverviewExample {
+    themePalette = ThemePalette;
+
+    constructor(
+        private toastService: McToastService,
+        private newToastService: McToastService<MyToastComponent>
+    ) {}
+
+    showToast(style: McToastStyle) {
+        this.toastService.show({ style, title: 'Success', content: 'Message Content' });
+    }
+
+    showToastTitleTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.show({ style, title: template, content: 'Message Content' });
+    }
+
+    showToastContentTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.show({ style, title: 'Success', content: template });
+    }
+
+    showNewToast(style: McToastStyle) {
+        this.newToastService.show({ style, title: 'Success', content: 'Message Content' });
+    }
+
+    showTemplate(style: McToastStyle, template: TemplateRef<any>) {
+        this.toastService.showTemplate({ style, title: 'Success', content: 'Message Content' }, template);
+    }
+}

packages/mosaic/toast/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

packages/mosaic/toast/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

packages/mosaic/toast/public-api.ts

@@ -0,0 +1,5 @@
+export * from './toast.service';
+export * from './toast.module';
+export * from './toast.type';
+export * from './toast.component';
+export * from './toast-container.component';