feat(docs): added basic Modal example

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

@@ -60,6 +60,19 @@ const DOCS: { [key: string]: DocCategory[] } = {
                 }
             ]
         },
+        {
+            id: 'modals',
+            name: 'Popups & Modals',
+            summary: '',
+            items: [
+                {
+                    id: 'modal',
+                    name: 'Modal',
+                    summary: '',
+                    examples: ['modal-types']
+                }
+            ]
+        },
         {
             id: 'forms',
             name: 'Form Controls',

packages/mosaic-examples/mosaic-module.ts

@@ -4,20 +4,22 @@ import { McButtonModule } from '@ptsecurity/mosaic/button';
 import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox';
 import { McDropdownModule } from '@ptsecurity/mosaic/dropdown';
 import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McModalModule } from '@ptsecurity/mosaic/modal';
 import { McRadioModule } from '@ptsecurity/mosaic/radio';
 import { McTextareaModule } from '@ptsecurity/mosaic/textarea';
 
 
 @NgModule({
 
     imports: [
-         McButtonModule,
-         McCheckboxModule,
-         McDropdownModule,
-         McRadioModule,
-         McMomentDateModule,
-         McFormFieldModule,
-         McTextareaModule
+        McButtonModule,
+        McCheckboxModule,
+        McDropdownModule,
+        McRadioModule,
+        McMomentDateModule,
+        McFormFieldModule,
+        McTextareaModule,
+        McModalModule
     ],
     exports: [
         McButtonModule,
@@ -26,7 +28,8 @@ import { McTextareaModule } from '@ptsecurity/mosaic/textarea';
         McMomentDateModule,
         McDropdownModule,
         McFormFieldModule,
-        McTextareaModule
+        McTextareaModule,
+        McModalModule
     ]
 })
 export class ExampleMosaicModule {}

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

@@ -0,0 +1 @@
+/** No CSS for this example */

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

@@ -0,0 +1 @@
+<button mc-button color="primary" (click)="openModal()">Open Modal</button>

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

@@ -0,0 +1,57 @@
+import { Component, Input } from '@angular/core';
+import { McModalRef, McModalService } from '@ptsecurity/mosaic/modal';
+
+
+/**
+ * @title Basic Modal
+ */
+@Component({
+    selector: 'modal-overview-example',
+    templateUrl: 'modal-overview-example.html',
+    styleUrls: ['modal-overview-example.css']
+})
+export class ModalOverviewExample {
+
+    constructor(
+        private modalService: McModalService
+    ) {}
+
+    openModal() {
+        this.modalService.open({
+            mcComponent: McModalCustomComponent
+        });
+    }
+}
+
+@Component({
+    selector: 'mc-modal-full-custom-component',
+    template: `
+        <mc-modal-title>
+            Modal Title
+        </mc-modal-title>
+
+        <mc-modal-body>
+            <h2>{{ title }}</h2>
+            <h4>{{ subtitle }}</h4>
+            <p>
+                <span>Get Modal instance in component</span>
+                <button mc-button color="primary" (click)="destroyModal()">destroy modal in the component</button>
+            </p>
+        </mc-modal-body>
+
+        <div mc-modal-footer>
+            <button mc-button color="primary" >Save</button>
+            <button mc-button autofocus>Close</button>
+        </div>
+  `
+})
+export class McModalCustomComponent {
+    @Input() title: string;
+    @Input() subtitle: string;
+
+    constructor(private modal: McModalRef) { }
+
+    destroyModal() {
+        this.modal.destroy({ data: 'this the result data' });
+    }
+}

packages/mosaic-examples/mosaic/modal/module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McModalModule } from '@ptsecurity/mosaic/modal';
+
+import { McModalCustomComponent, ModalOverviewExample } from './modal-overview/modal-overview-example';
+
+
+const EXAMPLES = [
+    ModalOverviewExample,
+    McModalCustomComponent
+];
+
+@NgModule({
+    imports: [
+        FormsModule,
+        McButtonModule,
+        McModalModule,
+        McIconModule
+    ],
+    declarations: EXAMPLES,
+    exports: EXAMPLES,
+    entryComponents: [
+        McModalCustomComponent
+    ]
+})
+export class ModalExamplesModule {}

packages/mosaic/modal/modal.md

@@ -0,0 +1 @@
+<!-- example(modal-overview) -->