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

src/lib-dev/modal/module.ts

@@ -1,4 +1,4 @@
-import {Component, NgModule, TemplateRef, ViewEncapsulation} from '@angular/core';
+import {Component, Input, NgModule, TemplateRef, ViewEncapsulation} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -16,13 +16,14 @@ import { McModalModule, McModalRef, McModalService } from '../../lib/modal';
 export class ModalDemoComponent {
     isVisible = false;
     tplModal: McModalRef;
+    htmlModalVisible = false;
 
     constructor(private modalService: McModalService) {
     }
 
     showConfirm(): void {
         this.modalService.confirm({
-            mcTitle  : '<i>Do you Want to delete these items?</i>',
+            mcTitle  : 'Do you Want to delete these items?',
             mcOkText: 'okey',
             mcCancelText: 'nooo!',
             mcContent: '<b>Some descriptions</b>',
@@ -33,7 +34,8 @@ export class ModalDemoComponent {
     showDeleteConfirm(): void {
         this.modalService.confirm({
             mcTitle     : 'Are you sure delete this task?',
-            mcContent   : '<b style="color: red;">Some descriptions</b>',
+//            mcContent   : '<b style="color: red;">Some descriptions</b>',
+            mcContent   : 'Some descriptions',
             mcOkText    : 'Yes',
             mcOkType    : 'danger',
             mcOnOk      : () => console.log('OK'),
@@ -48,12 +50,56 @@ export class ModalDemoComponent {
             mcContent: tplContent,
             mcFooter: tplFooter,
             mcMaskClosable: false,
-            mcClosable: false,
-            mcMaskStyle: {opacity: 0.4},
+            mcClosable: true,
             mcOnOk: () => console.log('Click ok')
         });
     }
 
+    createComponentModal(): void {
+        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',
+                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(): void {
+        let pos = 0;
+
+        [ 'create', 'info', 'success', 'error' ].forEach((method) => this.modalService[method]({
+            mcMask: false,
+            mcTitle: `Test ${method} title`,
+            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(), 10000);
+    }
+
     destroyTplModal(): void {
         this.tplModal.destroy();
     }
@@ -74,9 +120,37 @@ export class ModalDemoComponent {
 }
 
 
+@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(): void {
+        this.modal.destroy({ data: 'this the result data' });
+    }
+}
+
 @NgModule({
     declarations: [
-        ModalDemoComponent
+        ModalDemoComponent,
+        McModalCustomComponent
+    ],
+    entryComponents: [
+        McModalCustomComponent
     ],
     imports: [
         BrowserModule,

src/lib-dev/modal/template.html

@@ -1,7 +1,12 @@
 <h2>Base</h2>
 
 <button (click)="showModal()">Show Modal</button>
-<mc-modal [(mcVisible)]="isVisible" mcTitle="The first Modal" (mcOnCancel)="handleCancel()" (mcOnOk)="handleOk()">
+<mc-modal [(mcVisible)]="isVisible"
+          mcClosable="false"
+          mcTitle="The first Modal"
+          (mcOnCancel)="handleCancel()" (mcOnOk)="handleOk()"
+          mcCancelText="Cancel"
+          mcOkText="Accept">
     <p>Content one</p>
     <p>Content two</p>
     <p>Content three</p>
@@ -30,3 +35,16 @@ <h3>Modal from service</h3>
 <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>Many many modals</h3>
+<button mc-button color="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
+<mc-modal [(mcVisible)]="htmlModalVisible"
+          [mcMask]="true"
+          [mcZIndex]="1001"
+          mcTitle="Non-service html modal">This is a non-service html modal</mc-modal>

src/lib/core/public-api.ts

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

src/lib/core/utils/utils.ts

@@ -4,48 +4,3 @@ export function isBoolean(val: any): val is boolean { return typeof val === 'boo
 export function toBoolean(value: any): boolean {
     return value != null && `${value}` !== 'false';
 }
-
-/**
- * Input decorator that handle a prop to do get/set automatically with toBoolean
- *
- * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
- *
- * @howToUse
- * ```
- * @Input() @InputBoolean() visible: boolean = false;
- *
- * // Act as below:
- * // @Input()
- * // get visible() { return this.__visibile; }
- * // set visible(value) { this.__visible = value; }
- * // __visible = false;
- * ```
- */
-export function InputBoolean(): any { // tslint:disable-line:no-any
-    return function InputBooleanPropDecorator (target: object, name: string): void {
-        // Add our own private prop
-        const privatePropName = `$$__${name}`;
-
-        if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
-            console.warn(`The prop "${privatePropName}" is already exist, it will be overrided by InputBoolean decorator.`);
-        }
-
-        Object.defineProperty(target, privatePropName, {
-            configurable: true,
-            writable: true
-        });
-
-        Object.defineProperty(target, name, {
-            get(): boolean {
-                return this[ privatePropName ]; // tslint:disable-line:no-invalid-this
-            },
-            set(value: boolean | string): void {
-                this[ privatePropName ] = toBoolean(value); // tslint:disable-line:no-invalid-this
-            }
-        });
-
-        // // Do rest things for input decorator
-        // const inputDecorator = Input();
-        // inputDecorator(target, name);
-    };
-}

src/lib/modal/_modal-animation.scss

@@ -0,0 +1,104 @@
+@import '../core/styles/functions/timing';
+
+
+$animation-duration-base: 0.2s;
+
+@mixin _motion-common($duration: $animation-duration-base) {
+    animation-duration: $duration;
+    animation-fill-mode: both;
+}
+
+@mixin _motion-common-leave($duration: $animation-duration-base) {
+    animation-duration: $duration;
+    animation-fill-mode: both;
+}
+
+@mixin _make-motion($className, $keyframeName, $duration: $animation-duration-base) {
+    .#{$className}-enter,
+    .#{$className}-appear {
+        @include _motion-common($duration);
+        animation-play-state: paused;
+    }
+    .#{$className}-leave {
+        @include _motion-common-leave($duration);
+        animation-play-state: paused;
+    }
+
+    .#{$className}-enter.#{$className}-enter-active,
+    .#{$className}-appear.#{$className}-appear-active {
+        animation-name: #{$keyframeName}In;
+        animation-play-state: running;
+    }
+
+    .#{$className}-leave.#{$className}-leave-active {
+        animation-name: #{$keyframeName}Out;
+        animation-play-state: running;
+        pointer-events: none;
+    }
+}
+
+@mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
+    @include _make-motion($className, $keyframeName, $duration);
+    .#{className}-enter,
+    .#{className}-appear {
+        transform: scale(0);
+        animation-timing-function: $ease-out-circ;
+    }
+    .#{className}-leave {
+        animation-timing-function: $ease-in-out-circ;
+    }
+}
+
+@mixin fade-motion($className, $keyframeName) {
+    @include _make-motion($className, $keyframeName);
+    .#{className}-enter,
+    .#{className}-appear {
+        opacity: 0;
+        animation-timing-function: linear;
+    }
+    .#{className}-leave {
+        animation-timing-function: linear;
+    }
+}
+
+@keyframes mcFadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes mcFadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes mcZoomIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.2);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes mcZoomOut {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.2);
+    }
+}
+
+@include fade-motion(fade, mcFade);
+@include zoom-motion(zoom, mcZoom);

src/lib/modal/_modal-confirm.scss

@@ -0,0 +1,49 @@
+
+.mc-confirm {
+    .mc-modal-header {
+        display: none;
+    }
+
+    .mc-modal-close {
+        display: none;
+    }
+
+    .mc-modal-body {
+        padding: 32px 32px 16px;
+    }
+
+    // TODO
+    &-body-wrapper {
+        //.clearfix()
+        zoom: 1;
+        &:before,
+        &:after {
+            content: "";
+            display: table;
+        }
+        &:after {
+            clear: both;
+        }
+    }
+
+    &-body {
+        .mc-confirm-title {
+            display: block;
+            overflow: auto;
+        }
+
+        .mc-confirm-content {
+            margin-top: 8px;
+        }
+    }
+
+    .mc-confirm-btns {
+        text-align: right;
+        // GRAY-600
+        border-top: 1px solid #f0f0f0;
+
+        button + button {
+            margin: 16px 16px 16px;
+        }
+    }
+}

src/lib/modal/modal-ref.class.ts

@@ -7,7 +7,7 @@ import { McModalComponent } from './modal.component';
  * API class that public to users to handle the modal instance.
  * McModalRef is aim to avoid accessing to the modal instance directly by users.
  */
-export abstract class McModalRef<T = any, R = any> { // tslint:disable-line:no-any
+export abstract class McModalRef<T = any, R = any> {
     abstract afterOpen: Observable<void>;
     abstract afterClose: Observable<R>;