feat(modal): Component Modal

src/lib-dev/modal/module.ts

@@ -0,0 +1,190 @@
+import { Component, Input, NgModule, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McButtonModule } from '../../lib/button/';
+import { McIconModule } from '../../lib/icon';
+import { McModalModule, McModalRef, McModalService } from '../../lib/modal';
+
+
+// tslint:disable:no-console
+// tslint:disable:no-magic-numbers
+// tslint:disable:no-unnecessary-class
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ModalDemoComponent {
+    isVisible = false;
+    tplModal: McModalRef;
+    htmlModalVisible = false;
+
+    constructor(private modalService: McModalService) {}
+
+    showConfirm() {
+        this.modalService.success({
+            mcContent   : 'Сохранить сделанные изменения в запросе "Все активы с виндой"?',
+            mcOkText    : 'Сохранить',
+            mcCancelText: 'Отмена',
+            mcOnOk      : () => console.log('OK')
+        });
+    }
+
+    showDeleteConfirm() {
+        this.modalService.delete({
+            mcContent   : 'The selected action "Send to Arbor" is used in a rule' +
+                ' or an alert. It will be <b>deleted</b> there too. </br></br>' +
+                'Delete the selected action anyway?',
+            mcOkType    : 'warn',
+            mcOkText    : 'Yes',
+            mcCancelText: 'No',
+            mcWidth     : '480px',
+            mcOnOk      : () => console.log('OK'),
+            mcOnCancel  : () => console.log('Cancel')
+        });
+    }
+
+    createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>) {
+        this.tplModal = this.modalService.create({
+            mcTitle       : tplTitle,
+            mcContent     : tplContent,
+            mcFooter      : tplFooter,
+            mcMaskClosable: false,
+            mcClosable    : true,
+            mcOnOk        : () => console.log('Click ok')
+        });
+    }
+
+    createLongModal() {
+
+        const modal = this.modalService.create({
+            mcTitle     : 'Modal Title',
+            mcContent   : McModalLongCustomComponent,
+            mcOkText    : 'Yes',
+            mcCancelText: 'No'
+        });
+    }
+
+    createComponentModal() {
+        const modal = this.modalService.create({
+            mcTitle: 'Modal Title',
+            mcContent: McModalCustomComponent,
+            mcComponentParams: {
+                title: 'title in component',
+                subtitle: 'component sub title，will be changed after 2 sec'
+            },
+            mcFooter: [{
+                label: 'change component title from outside',
+                type: 'primary',
+                onClick: (componentInstance: any) => {
+                    componentInstance.title = 'title in inner component is changed';
+                }
+            }]
+        });
+
+        modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+
+        // Return a result when closed
+        modal.afterClose.subscribe((result) => console.log('[afterClose] The result is:', result));
+
+        // delay until modal instance created
+        window.setTimeout(() => {
+            const instance = modal.getContentComponent();
+            instance.subtitle = 'sub title is changed';
+        }, 2000);
+    }
+
+    openAndCloseAll() {
+        let pos = 0;
+
+        [ 'create', 'delete', 'success' ].forEach((method) => this.modalService[method]({
+            mcOkText    : 'Yes',
+            mcMask: false,
+            mcContent: `Test content: <b>${method}</b>`,
+            mcStyle: { position: 'absolute', top: `${pos * 70}px`, left: `${(pos++) * 300}px` }
+        }));
+
+        this.htmlModalVisible = true;
+
+        this.modalService.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
+
+        window.setTimeout(() => this.modalService.closeAll(), 5000);
+    }
+
+    destroyTplModal() {
+        this.tplModal.destroy();
+    }
+}
+
+
+@Component({
+    selector: 'mc-modal-custom-long-component',
+    template: `
+    <ng-container *ngFor="let item of longText">
+        <p>{{ item }}</p>
+    </ng-container>
+  `
+})
+export class McModalLongCustomComponent {
+
+    longText: any = [];
+
+    constructor() {
+        for (let i = 0; i < 50; i++) {
+            this.longText.push(`text lint - ${i}`);
+        }
+    }
+}
+
+@Component({
+    selector: 'mc-modal-custom-component',
+    template: `
+    <div>
+      <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>
+    </div>
+  `
+})
+export class McModalCustomComponent {
+    @Input() title: string;
+    @Input() subtitle: string;
+
+    constructor(private modal: McModalRef) { }
+
+    destroyModal() {
+        this.modal.destroy({ data: 'this the result data' });
+    }
+}
+
+@NgModule({
+    declarations: [
+        ModalDemoComponent,
+        McModalCustomComponent,
+        McModalLongCustomComponent
+    ],
+    entryComponents: [
+        McModalCustomComponent,
+        McModalLongCustomComponent
+    ],
+    imports: [
+        BrowserModule,
+        McButtonModule,
+        McIconModule,
+        McModalModule
+    ],
+    bootstrap: [
+        ModalDemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/modal/styles.scss

@@ -0,0 +1,3 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+@import '../../lib/core/theming/prebuilt/default-theme';

src/lib-dev/modal/template.html

@@ -0,0 +1,44 @@
+<p class="mc-headline">Confirm</p>
+
+<button mc-button (click)="showConfirm()" style="margin-right: 18px;">Confirm</button>
+<button mc-button (click)="showDeleteConfirm()">Delete</button>
+
+
+<p class="mc-headline">Modal from service</p>
+<button mc-button color="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
+    <span>Template</span>
+</button>
+<ng-template #tplTitle>
+    <span>Заголовок окна</span>
+</ng-template>
+<ng-template #tplContent>
+    <p>some contents...</p>
+    <p>some contents...</p>
+    <p>some contents...</p>
+    <p>some contents...</p>
+    <p>some contents...</p>
+</ng-template>
+<ng-template #tplFooter>
+    <button mc-button color="primary" (click)="destroyTplModal()">Close after submit</button>
+</ng-template>
+
+<p class="mc-headline">Modal with custom component</p>
+<button mc-button color="primary" (click)="createComponentModal()">
+   Open
+</button>
+
+
+<p class="mc-headline">Modal with looong component</p>
+<button mc-button color="primary" (click)="createLongModal()">
+    Open
+</button>
+
+
+<p class="mc-headline">Many many modals</p>
+<button mc-button color="primary" (click)="openAndCloseAll()">Open more modals then close all after 10s</button>
+<mc-modal [(mcVisible)]="htmlModalVisible"
+          [mcMask]="true"
+          mcOkText="Accept"
+          mcCancelText="Cancel"
+          [mcZIndex]="1001"
+          mcTitle="Non-service html modal">This is a non-service html modal</mc-modal>

src/lib/core/public-api.ts

@@ -3,3 +3,4 @@ export * from './common-behaviors/index';
 export * from './line/line';
 export * from './error/error-options';
 export * from './selection/index';
+export * from './services/measure-scrollbar.service';

src/lib/core/services/measure-scrollbar.service.ts

@@ -0,0 +1,50 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class McMeasureScrollbarService {
+
+    get scrollBarWidth(): number {
+        if (this._scrollbarWidth) {
+            return this._scrollbarWidth;
+        }
+        this.initScrollBarWidth();
+
+        return this._scrollbarWidth;
+    }
+
+    private _scrollbarWidth: number;
+    private scrollbarMeasure = {
+        position: 'absolute',
+        top: '-9999px',
+        width: '50px',
+        height: '50px',
+        overflow: 'scroll'
+    };
+
+    constructor(
+        @Inject(DOCUMENT) private document: any
+    ) {
+        this.initScrollBarWidth();
+    }
+
+    initScrollBarWidth() {
+        const scrollDiv = this.document.createElement('div');
+
+        for (const scrollProp in this.scrollbarMeasure) {
+            if (this.scrollbarMeasure.hasOwnProperty(scrollProp)) {
+                scrollDiv.style[scrollProp] = this.scrollbarMeasure[scrollProp];
+            }
+        }
+
+        this.document.body.appendChild(scrollDiv);
+
+        const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+        this.document.body.removeChild(scrollDiv);
+        this._scrollbarWidth = width;
+    }
+}

src/lib/core/styles/_variables.scss

@@ -0,0 +1,9 @@
+
+$zindex-modal-mask      : 1000;
+$zindex-modal           : 1000;
+$zindex-notification    : 1010;
+$zindex-message         : 1010;
+$zindex-popover         : 1030;
+$zindex-picker          : 1050;
+$zindex-dropdown        : 1050;
+$zindex-tooltip         : 1060;

src/lib/core/styles/typography/_all-typography.scss

@@ -9,6 +9,7 @@
 @import '../../../navbar/navbar-theme';
 @import '../../../input/input-theme';
 @import '../../../form-field/form-field-theme';
+@import '../../../modal/modal-theme';
 
 
 @mixin mosaic-typography($config: null) {
@@ -28,4 +29,5 @@
     @include mc-navbar-typography($config);
     @include mc-input-typography($config);
     @include mc-form-field-typography($config);
+    @include mc-modal-typography($config);
 }

src/lib/core/theming/_all-theme.scss

@@ -13,6 +13,7 @@
 @import '../../navbar/navbar-theme';
 @import '../../input/input-theme';
 @import '../../form-field/form-field-theme';
+@import '../../modal/modal-theme';
 
 
 @mixin mosaic-theme($theme) {
@@ -30,4 +31,5 @@
     @include mc-navbar-theme($theme);
     @include mc-input-theme($theme);
     @include mc-form-field-theme($theme);
+    @include mc-modal-theme($theme);
 }