chore: fixed tslint (+8 squashed commit)

Squashed commit:

[e19991f] chore: fixed paddings

[04be966] chore: added close icon

[e0fcadf] updated autoFocus and unit tests

[c4c16f6] added ESC

[8d04868] added theme

[3b222b9] update examples

[fda416e] update examples (+7 squashed commit)

Squashed commit:

[5367c8e] update check and dev

[94edb15] update examples

[e1a05bb] updated unit tests

[0df30b6] update styles

[29593a3] update styles (+11 squashed commit)

Squashed commit:

[06bbe01] remove InputBoolean

[f460201] updated code style

[dd9b61a] updated wallaby config

[6da021f] fix unit

[7a54c1e] fix unit

[5a169ef] fix build

[455cff9] updated modal confirm

[7735fdf] added example with component

[93c0299] added mc-buttons

[78cad3c] added animation

[205e841] added some styles

[fe2143d] added some styles

[2c17514] added some styles

[9686fe0] added modal

src/lib-dev/modal/module.ts

@@ -0,0 +1,204 @@
+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 tilte 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();
+    }
+
+    showModal() {
+        this.isVisible = true;
+    }
+
+    handleOk() {
+        console.log('Button ok clicked!');
+        this.isVisible = false;
+    }
+
+    handleCancel() {
+        console.log('Button cancel clicked!');
+        this.isVisible = false;
+    }
+}
+
+
+@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,57 @@
+<h2>As component (not use in prod)</h2>
+
+<button mc-button (click)="showModal()">Show Modal</button>
+<mc-modal [(mcVisible)]="isVisible"
+          mcTitle="The first Modal"
+          (mcOnCancel)="handleCancel()" (mcOnOk)="handleOk()"
+          mcCancelText="Cancel"
+          mcOkText="Accept">
+    <p>Content one</p>
+    <p>Content two</p>
+    <p>Content three</p>
+</mc-modal>
+
+<h2>Confirm</h2>
+
+<button mc-button (click)="showConfirm()">Confirm</button>
+<button mc-button (click)="showDeleteConfirm()">Delete</button>
+
+
+<h3>Modal from service</h3>
+<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>
+
+<h3>Modal with custom component</h3>
+<button mc-button color="primary" (click)="createComponentModal()">
+   Open
+</button>
+
+
+<h3>Modal with looong component</h3>
+<button mc-button color="primary" (click)="createLongModal()">
+    Open
+</button>
+
+
+<h3>Many many modals</h3>
+<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

@@ -6,6 +6,16 @@ import { Inject, Injectable } from '@angular/core';
     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',
@@ -15,31 +25,26 @@ export class McMeasureScrollbarService {
         overflow: 'scroll'
     };
 
-    get scrollBarWidth(): number {
-        if (this._scrollbarWidth) {
-            return this._scrollbarWidth;
-        }
+    constructor(
+        @Inject(DOCUMENT) private document: any
+    ) {
         this.initScrollBarWidth();
-
-        return this._scrollbarWidth;
     }
 
-    initScrollBarWidth(): void {
+    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;
     }
-
-    // tslint:disable-next-line:no-any
-    constructor(@Inject(DOCUMENT) private document: any) {
-        this.initScrollBarWidth();
-    }
 }

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

@@ -7,6 +7,7 @@
 @import '../../../navbar/navbar-theme';
 @import '../../../input/input-theme';
 @import '../../../form-field/form-field-theme';
+@import '../../../modal/modal-theme';
 
 
 @mixin mosaic-typography($config: null) {
@@ -25,4 +26,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

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