@ptsecurity/mosaic 13.6.1 → 13.7.2

package/fesm2020/ptsecurity-mosaic-modal.mjs

@@ -16,844 +16,852 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { filter } from 'rxjs/operators';
 
-class McModalControlService {
-    constructor(parentService) {
-        this.parentService = parentService;
-        // @ts-ignore
-        this.rootOpenModals = this.parentService ? null : [];
-        // @ts-ignore
-        this.rootAfterAllClose = this.parentService ? null : new Subject();
-        // @ts-ignore
-        this.rootRegisteredMetaMap = this.parentService ? null : new Map();
-    }
-    // Track singleton afterAllClose through over the injection tree
-    get afterAllClose() {
-        return this.parentService ? this.parentService.afterAllClose : this.rootAfterAllClose;
-    }
-    // Track singleton openModals array through over the injection tree
-    get openModals() {
-        return this.parentService ? this.parentService.openModals : this.rootOpenModals;
-    }
-    // Registered modal for later usage
-    get registeredMetaMap() {
-        return this.parentService ? this.parentService.registeredMetaMap : this.rootRegisteredMetaMap;
-    }
-    // Register a modal to listen its open/close
-    registerModal(modalRef) {
-        if (!this.hasRegistered(modalRef)) {
-            const afterOpenSubscription = modalRef.afterOpen.subscribe(() => this.openModals.push(modalRef));
-            const afterCloseSubscription = modalRef.afterClose.subscribe(() => this.removeOpenModal(modalRef));
-            this.registeredMetaMap.set(modalRef, { modalRef, afterOpenSubscription, afterCloseSubscription });
-            this.handleMultipleMasks(modalRef);
-        }
-    }
-    hasRegistered(modalRef) {
-        return this.registeredMetaMap.has(modalRef);
-    }
-    // Close all registered opened modals
-    closeAll() {
-        let i = this.openModals.length;
-        while (i--) {
-            this.openModals[i].close();
-        }
-    }
-    removeOpenModal(modalRef) {
-        const index = this.openModals.indexOf(modalRef);
-        if (index > -1) {
-            this.openModals.splice(index, 1);
-            if (!this.openModals.length) {
-                this.afterAllClose.next();
-            }
-        }
-    }
-    handleMultipleMasks(modalRef) {
-        const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
-        if (modals.filter((modal) => modal.mcVisible).length > 1) {
-            const otherModals = modals.splice(0, modals.length - 1)
-                .filter((modal) => modal.mcVisible && modal.mcMask);
-            // hide other masks
-            setTimeout(() => {
-                otherModals.forEach((modal) => {
-                    modal.getInstance().mcMask = false;
-                    modal.markForCheck();
-                });
-            });
-            // show other masks on close
-            modalRef.afterClose.subscribe(() => {
-                otherModals.forEach((modal) => {
-                    modal.getInstance().mcMask = true;
-                    modal.markForCheck();
-                });
-            });
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McModalControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService, deps: [{ token: McModalControlService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ McModalControlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: McModalControlService, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
+class McModalControlService {
+    constructor(parentService) {
+        this.parentService = parentService;
+        // @ts-ignore
+        this.rootOpenModals = this.parentService ? null : [];
+        // @ts-ignore
+        this.rootAfterAllClose = this.parentService ? null : new Subject();
+        // @ts-ignore
+        this.rootRegisteredMetaMap = this.parentService ? null : new Map();
+    }
+    // Track singleton afterAllClose through over the injection tree
+    get afterAllClose() {
+        return this.parentService ? this.parentService.afterAllClose : this.rootAfterAllClose;
+    }
+    // Track singleton openModals array through over the injection tree
+    get openModals() {
+        return this.parentService ? this.parentService.openModals : this.rootOpenModals;
+    }
+    // Registered modal for later usage
+    get registeredMetaMap() {
+        return this.parentService ? this.parentService.registeredMetaMap : this.rootRegisteredMetaMap;
+    }
+    // Register a modal to listen its open/close
+    registerModal(modalRef) {
+        if (!this.hasRegistered(modalRef)) {
+            const afterOpenSubscription = modalRef.afterOpen.subscribe(() => this.openModals.push(modalRef));
+            const afterCloseSubscription = modalRef.afterClose.subscribe(() => this.removeOpenModal(modalRef));
+            this.registeredMetaMap.set(modalRef, { modalRef, afterOpenSubscription, afterCloseSubscription });
+            this.handleMultipleMasks(modalRef);
+        }
+    }
+    hasRegistered(modalRef) {
+        return this.registeredMetaMap.has(modalRef);
+    }
+    // Close all registered opened modals
+    closeAll() {
+        let i = this.openModals.length;
+        while (i--) {
+            this.openModals[i].close();
+        }
+    }
+    removeOpenModal(modalRef) {
+        const index = this.openModals.indexOf(modalRef);
+        if (index > -1) {
+            this.openModals.splice(index, 1);
+            if (!this.openModals.length) {
+                this.afterAllClose.next();
+            }
+        }
+    }
+    handleMultipleMasks(modalRef) {
+        const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
+        if (modals.filter((modal) => modal.mcVisible).length > 1) {
+            const otherModals = modals.splice(0, modals.length - 1)
+                .filter((modal) => modal.mcVisible && modal.mcMask);
+            // hide other masks
+            setTimeout(() => {
+                otherModals.forEach((modal) => {
+                    modal.getInstance().mcMask = false;
+                    modal.markForCheck();
+                });
+            });
+            // show other masks on close
+            modalRef.afterClose.subscribe(() => {
+                otherModals.forEach((modal) => {
+                    modal.getInstance().mcMask = true;
+                    modal.markForCheck();
+                });
+            });
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McModalControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService, deps: [{ token: McModalControlService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ McModalControlService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalControlService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: McModalControlService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
                 }] }]; } });
 
-/**
- * API class that public to users to handle the modal instance.
- * McModalRef is aim to avoid accessing to the modal instance directly by users.
- */
-// tslint:disable-next-line:naming-convention
-class McModalRef {
+/**
+ * API class that public to users to handle the modal instance.
+ * McModalRef is aim to avoid accessing to the modal instance directly by users.
+ */
+// tslint:disable-next-line:naming-convention
+class McModalRef {
 }
 
-class ModalUtil {
-    constructor(document) {
-        this.document = document;
-        this.lastPosition = { x: -1, y: -1 };
-        this.listenDocumentClick();
-    }
-    getLastClickPosition() {
-        return this.lastPosition;
-    }
-    listenDocumentClick() {
-        this.document.addEventListener('click', (event) => {
-            this.lastPosition = { x: event.clientX, y: event.clientY };
-        });
-    }
-}
+class ModalUtil {
+    constructor(document) {
+        this.document = document;
+        this.lastPosition = { x: -1, y: -1 };
+        this.listenDocumentClick();
+    }
+    getLastClickPosition() {
+        return this.lastPosition;
+    }
+    listenDocumentClick() {
+        this.document.addEventListener('click', (event) => {
+            this.lastPosition = { x: event.clientX, y: event.clientY };
+        });
+    }
+}
 const modalUtilObject = new ModalUtil(document);
 
-var ModalSize;
-(function (ModalSize) {
-    ModalSize["Small"] = "small";
-    ModalSize["Normal"] = "normal";
-    ModalSize["Large"] = "large";
+var ModalSize;
+(function (ModalSize) {
+    ModalSize["Small"] = "small";
+    ModalSize["Normal"] = "normal";
+    ModalSize["Large"] = "large";
 })(ModalSize || (ModalSize = {}));
 
-class McModalTitle {
-}
-/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalTitle, selector: "[mc-modal-title], mc-modal-title, [mcModalTitle]", host: { classAttribute: "mc-modal-header mc-modal-title" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalTitle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[mc-modal-title], mc-modal-title, [mcModalTitle]`,
-                    host: {
-                        class: 'mc-modal-header mc-modal-title'
-                    }
-                }]
-        }] });
-class McModalBody {
-}
-/** @nocollapse */ /** @nocollapse */ McModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalBody, selector: "[mc-modal-body], mc-modal-body, [mcModalBody]", host: { classAttribute: "mc-modal-body" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalBody, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[mc-modal-body], mc-modal-body, [mcModalBody]`,
-                    host: {
-                        class: 'mc-modal-body'
-                    }
-                }]
-        }] });
-class McModalFooter {
-}
-/** @nocollapse */ /** @nocollapse */ McModalFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McModalFooter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalFooter, selector: "[mc-modal-footer], mc-modal-footer, [mcModalFooter]", host: { classAttribute: "mc-modal-footer" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalFooter, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[mc-modal-footer], mc-modal-footer, [mcModalFooter]`,
-                    host: {
-                        class: 'mc-modal-footer'
-                    }
-                }]
-        }] });
-class McModalMainAction {
-}
-/** @nocollapse */ /** @nocollapse */ McModalMainAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McModalMainAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalMainAction, selector: "[mc-modal-main-action]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalMainAction, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[mc-modal-main-action]`
-                }]
+class McModalTitle {
+}
+/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalTitle, selector: "[mc-modal-title], mc-modal-title, [mcModalTitle]", host: { classAttribute: "mc-modal-header mc-modal-title" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[mc-modal-title], mc-modal-title, [mcModalTitle]`,
+                    host: {
+                        class: 'mc-modal-header mc-modal-title'
+                    }
+                }]
+        }] });
+class McModalBody {
+}
+/** @nocollapse */ /** @nocollapse */ McModalBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalBody, selector: "[mc-modal-body], mc-modal-body, [mcModalBody]", host: { classAttribute: "mc-modal-body" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[mc-modal-body], mc-modal-body, [mcModalBody]`,
+                    host: {
+                        class: 'mc-modal-body'
+                    }
+                }]
+        }] });
+class McModalFooter {
+}
+/** @nocollapse */ /** @nocollapse */ McModalFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalFooter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalFooter, selector: "[mc-modal-footer], mc-modal-footer, [mcModalFooter]", host: { classAttribute: "mc-modal-footer" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[mc-modal-footer], mc-modal-footer, [mcModalFooter]`,
+                    host: {
+                        class: 'mc-modal-footer'
+                    }
+                }]
+        }] });
+class McModalMainAction {
+}
+/** @nocollapse */ /** @nocollapse */ McModalMainAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalMainAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McModalMainAction, selector: "[mc-modal-main-action]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalMainAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[mc-modal-main-action]`
+                }]
         }] });
 
-class CssUnitPipe {
-    transform(value, defaultUnit = 'px') {
-        const formatted = +value;
-        return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
-    }
-}
-/** @nocollapse */ /** @nocollapse */ CssUnitPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ /** @nocollapse */ CssUnitPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, name: "toCssUnit" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'toCssUnit'
-                }]
+class CssUnitPipe {
+    transform(value, defaultUnit = 'px') {
+        const formatted = +value;
+        return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CssUnitPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ /** @nocollapse */ CssUnitPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, name: "toCssUnit" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CssUnitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toCssUnit'
+                }]
         }] });
 
-// Duration when perform animations (ms)
-const MODAL_ANIMATE_DURATION = 200;
-class McModalComponent extends McModalRef {
-    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, document) {
-        super();
-        this.overlay = overlay;
-        this.renderer = renderer;
-        this.cfr = cfr;
-        this.elementRef = elementRef;
-        this.viewContainer = viewContainer;
-        this.modalControl = modalControl;
-        this.changeDetector = changeDetector;
-        this.document = document;
-        this.themePalette = ThemePalette;
-        this.mcModalType = 'default';
-        this._mcVisible = false;
-        this.mcVisibleChange = new EventEmitter();
-        this.mcZIndex = 1000;
-        this.mcSize = ModalSize.Normal;
-        this.mcCloseByESC = true;
-        this._mcClosable = true;
-        this._mcMask = true;
-        this._mcMaskClosable = false;
-        // Trigger when modal open(visible) after animations
-        this.mcAfterOpen = new EventEmitter();
-        // Trigger when modal leave-animation over
-        this.mcAfterClose = new EventEmitter();
-        this.mcOkType = 'primary';
-        this._mcOkLoading = false;
-        this.mcOnOk = new EventEmitter();
-        this._mcCancelLoading = false;
-        this.mcOnCancel = new EventEmitter();
-        this.isTopOverflow = false;
-        this.isBottomOverflow = false;
-        // The origin point that animation based on
-        this.transformOrigin = '0px 0px 0px';
-        this.mcGetContainer = () => this.overlay.create();
-    }
-    get mcVisible() { return this._mcVisible; }
-    set mcVisible(value) { this._mcVisible = value; }
-    get mcClosable() { return this._mcClosable; }
-    set mcClosable(value) { this._mcClosable = value; }
-    get mcMask() { return this._mcMask; }
-    set mcMask(value) { this._mcMask = value; }
-    get mcMaskClosable() { return this._mcMaskClosable; }
-    set mcMaskClosable(value) { this._mcMaskClosable = value; }
-    get mcOkLoading() { return this._mcOkLoading; }
-    set mcOkLoading(value) { this._mcOkLoading = value; }
-    get mcCancelLoading() { return this._mcCancelLoading; }
-    set mcCancelLoading(value) { this._mcCancelLoading = value; }
-    // Observable alias for mcAfterOpen
-    get afterOpen() {
-        return this.mcAfterOpen.asObservable();
-    }
-    // Observable alias for mcAfterClose
-    get afterClose() {
-        return this.mcAfterClose.asObservable();
-    }
-    get okText() {
-        return this.mcOkText;
-    }
-    get cancelText() {
-        return this.mcCancelText;
-    }
-    // Indicate whether this dialog should hidden
-    get hidden() {
-        return !this.mcVisible && !this.animationState;
-    }
-    ngOnInit() {
-        // Create component along without View
-        if (this.isComponent(this.mcContent)) {
-            this.createDynamicComponent(this.mcContent);
-        }
-        // Setup default button options
-        if (this.isModalButtons(this.mcFooter)) {
-            this.mcFooter = this.formatModalButtons(this.mcFooter);
-        }
-        if (this.isComponent(this.mcComponent)) {
-            this.createDynamicComponent(this.mcComponent);
-        }
-        // Place the modal dom to elsewhere
-        this.container = typeof this.mcGetContainer === 'function' ? this.mcGetContainer() : this.mcGetContainer;
-        if (this.container instanceof HTMLElement) {
-            this.container.appendChild(this.elementRef.nativeElement);
-        }
-        else if (this.container instanceof OverlayRef) {
-            // NOTE: only attach the dom to overlay, the view container is not changed actually
-            this.container.overlayElement.appendChild(this.elementRef.nativeElement);
-        }
-        // Register modal when afterOpen/afterClose is stable
-        this.modalControl.registerModal(this);
-    }
-    // [NOTE] NOT available when using by service!
-    // Because ngOnChanges never be called when using by service,
-    // here we can't support "mcContent"(Component) etc. as inputs that initialized dynamically.
-    // BUT: User also can change "mcContent" dynamically to trigger UI changes
-    // (provided you don't use Component that needs initializations)
-    ngOnChanges(changes) {
-        if (changes.mcVisible) {
-            // Do not trigger animation while initializing
-            this.handleVisibleStateChange(this.mcVisible, !changes.mcVisible.firstChange);
-        }
-    }
-    ngAfterViewInit() {
-        // If using Component, it is the time to attach View while bodyContainer is ready
-        if (this.contentComponentRef) {
-            this.bodyContainer.insert(this.contentComponentRef.hostView);
-        }
-        this.getElement().getElementsByTagName('button')[0]?.focus();
-        for (const autoFocusedButton of this.autoFocusedButtons.toArray()) {
-            if (autoFocusedButton.nativeElement.autofocus) {
-                autoFocusedButton.nativeElement.focus();
-                break;
-            }
-        }
-        this.checkOverflow();
-    }
-    ngOnDestroy() {
-        if (this.container instanceof OverlayRef) {
-            this.container.dispose();
-        }
-    }
-    checkOverflow() {
-        const nativeElement = this.modalBody?.nativeElement;
-        if (!nativeElement) {
-            return;
-        }
-        const scrollTop = nativeElement.scrollTop;
-        const offsetHeight = nativeElement.offsetHeight;
-        const scrollHeight = nativeElement.scrollHeight;
-        this.isTopOverflow = scrollTop > 0;
-        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
-    }
-    open() {
-        this.changeVisibleFromInside(true);
-    }
-    close(result) {
-        this.changeVisibleFromInside(false, result);
-    }
-    // Destroy equals Close
-    destroy(result) {
-        this.close(result);
-    }
-    markForCheck() {
-        this.changeDetector.markForCheck();
-    }
-    triggerOk() {
-        this.onClickOkCancel('ok');
-    }
-    triggerCancel() {
-        this.onClickOkCancel('cancel');
-    }
-    getInstance() {
-        return this;
-    }
-    getContentComponentRef() {
-        return this.contentComponentRef;
-    }
-    getContentComponent() {
-        return this.contentComponentRef && this.contentComponentRef.instance;
-    }
-    getElement() {
-        return this.elementRef && this.elementRef.nativeElement;
-    }
-    getMcFooter() {
-        return this.getElement().getElementsByClassName('mc-modal-footer').item(0);
-    }
-    onClickMask($event) {
-        if (this.mcMask &&
-            this.mcMaskClosable &&
-            $event.target.classList.contains('mc-modal-wrap') &&
-            this.mcVisible) {
-            this.onClickOkCancel('cancel');
-        }
-    }
-    // tslint:disable-next-line: no-reserved-keywords
-    isModalType(type) {
-        return this.mcModalType === type;
-    }
-    onKeyDown(event) {
-        // tslint:disable-next-line:deprecation .key isn't supported in Edge
-        if (event.keyCode === ESCAPE && this.container && (this.container instanceof OverlayRef)) {
-            this.close();
-            event.preventDefault();
-        }
-        // tslint:disable-next-line:deprecation .key isn't supported in Edge
-        if (event.ctrlKey && event.keyCode === ENTER) {
-            if (this.mcModalType === 'confirm') {
-                this.triggerOk();
-            }
-            this.getElement().querySelector('[mc-modal-main-action]')?.click();
-            event.preventDefault();
-        }
-    }
-    // AoT
-    onClickCloseBtn() {
-        if (this.mcVisible) {
-            this.onClickOkCancel('cancel');
-        }
-    }
-    // AoT
-    // tslint:disable-next-line: no-reserved-keywords
-    onClickOkCancel(type) {
-        const trigger = { ok: this.mcOnOk, cancel: this.mcOnCancel }[type];
-        const loadingKey = { ok: 'mcOkLoading', cancel: 'mcCancelLoading' }[type];
-        if (trigger instanceof EventEmitter) {
-            trigger.emit(this.getContentComponent());
-        }
-        else if (typeof trigger === 'function') {
-            const result = trigger(this.getContentComponent());
-            // Users can return "false" to prevent closing by default
-            const caseClose = (doClose) => (doClose !== false) && this.close(doClose);
-            if (isPromise(result)) {
-                this[loadingKey] = true;
-                const handleThen = (doClose) => {
-                    this[loadingKey] = false;
-                    caseClose(doClose);
-                };
-                result.then(handleThen).catch(handleThen);
-            }
-            else {
-                caseClose(result);
-            }
-        }
-    }
-    // AoT
-    isNonEmptyString(value) {
-        return typeof value === 'string' && value !== '';
-    }
-    // AoT
-    isTemplateRef(value) {
-        return value instanceof TemplateRef;
-    }
-    // AoT
-    isComponent(value) {
-        return value instanceof Type;
-    }
-    // AoT
-    isModalButtons(value) {
-        return Array.isArray(value) && value.length > 0;
-    }
-    // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
-    // AoT
-    getButtonCallableProp(options, prop) {
-        const value = options[prop];
-        const args = [];
-        if (this.contentComponentRef) {
-            args.push(this.contentComponentRef.instance);
-        }
-        return typeof value === 'function' ? value.apply(options, args) : value;
-    }
-    // On mcFooter's modal button click
-    // AoT
-    onButtonClick(button) {
-        // Call onClick directly
-        // tslint:disable-next-line:no-inferred-empty-object-type  rule seems to be broken
-        const result = this.getButtonCallableProp(button, 'onClick');
-        if (isPromise(result)) {
-            button.loading = true;
-            result.then(() => button.loading = false).catch(() => button.loading = false);
-        }
-    }
-    // Do rest things when visible state changed
-    handleVisibleStateChange(visible, animation = true, closeResult) {
-        // Hide scrollbar at the first time when shown up
-        if (visible) {
-            this.changeBodyOverflow(1);
-        }
-        return Promise
-            .resolve(animation && this.animateTo(visible))
-            // Emit open/close event after animations over
-            .then(() => {
-            if (visible) {
-                this.mcAfterOpen.emit();
-            }
-            else {
-                this.mcAfterClose.emit(closeResult);
-                // Show/hide scrollbar when animation is over
-                this.changeBodyOverflow();
-            }
-        });
-    }
-    // Change mcVisible from inside
-    changeVisibleFromInside(visible, closeResult) {
-        if (this.mcVisible !== visible) {
-            // Change mcVisible value immediately
-            this.mcVisible = visible;
-            this.mcVisibleChange.emit(visible);
-            return this.handleVisibleStateChange(visible, true, closeResult);
-        }
-        return Promise.resolve();
-    }
-    changeAnimationState(state) {
-        this.animationState = state;
-        if (state) {
-            this.maskAnimationClassMap = {
-                [`fade-${state}`]: true,
-                [`fade-${state}-active`]: true
-            };
-            this.modalAnimationClassMap = {
-                [`zoom-${state}`]: true,
-                [`zoom-${state}-active`]: true
-            };
-        }
-        else {
-            // @ts-ignore
-            this.maskAnimationClassMap = this.modalAnimationClassMap = null;
-        }
-        if (this.contentComponentRef) {
-            this.contentComponentRef.changeDetectorRef.markForCheck();
-        }
-        else {
-            this.changeDetector.markForCheck();
-        }
-    }
-    animateTo(isVisible) {
-        // Figure out the lastest click position when shows up
-        if (isVisible) {
-            // [NOTE] Using timeout due to the document.click event is fired later than visible change,
-            // so if not postponed to next event-loop, we can't get the lastest click position
-            window.setTimeout(() => this.updateTransformOrigin());
-        }
-        this.changeAnimationState(isVisible ? 'enter' : 'leave');
-        // Return when animation is over
-        return new Promise((resolve) => {
-            return window.setTimeout(() => {
-                this.changeAnimationState(null);
-                resolve(null);
-            }, MODAL_ANIMATE_DURATION);
-        });
-    }
-    formatModalButtons(buttons) {
-        return buttons.map((button) => {
-            return {
-                ...{
-                    type: 'default',
-                    size: 'default',
-                    autoLoading: true,
-                    show: true,
-                    loading: false,
-                    disabled: false
-                },
-                ...button
-            };
-        });
-    }
-    /**
-     * Create a component dynamically but not attach to any View
-     * (this action will be executed when bodyContainer is ready)
-     * @param component Component class
-     */
-    createDynamicComponent(component) {
-        const factory = this.cfr.resolveComponentFactory(component);
-        const childInjector = Injector.create({
-            providers: [{ provide: McModalRef, useValue: this }],
-            parent: this.viewContainer.injector
-        });
-        this.contentComponentRef = factory.create(childInjector);
-        if (this.mcComponentParams) {
-            Object.assign(this.contentComponentRef.instance, this.mcComponentParams);
-        }
-        // Do the first change detection immediately
-        // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
-        this.contentComponentRef.changeDetectorRef.detectChanges();
-    }
-    // Update transform-origin to the last click position on document
-    updateTransformOrigin() {
-        const modalElement = this.modalContainer.nativeElement;
-        const lastPosition = modalUtilObject.getLastClickPosition();
-        if (lastPosition) {
-            this.transformOrigin = `${lastPosition.x - modalElement.offsetLeft}px ${lastPosition.y - modalElement.offsetTop}px 0px`;
-        }
-    }
-    /**
-     * Take care of the body's overflow to decide the existense of scrollbar
-     * @param plusNum The number that the openModals.length will increase soon
-     */
-    changeBodyOverflow(plusNum = 0) {
-        const openModals = this.modalControl.openModals;
-        if (openModals.length + plusNum > 0) {
-            this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-        }
-        else {
-            this.renderer.removeStyle(this.document.body, 'overflow');
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: McModalControlService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McModalComponent, selector: "mc-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\r\n<ng-template #tplOriginContent>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div>\r\n    <div *ngIf=\"mcMask\"\r\n         class=\"mc-modal-mask\"\r\n         [ngClass]=\"maskAnimationClassMap\"\r\n         [class.mc-modal-mask-hidden]=\"hidden\"\r\n         [ngStyle]=\"mcMaskStyle\"\r\n         [style.zIndex]=\"mcZIndex\"\r\n    ></div>\r\n    <div (mousedown)=\"onClickMask($event)\"\r\n         class=\"mc-modal-wrap {{ mcWrapClassName }}\"\r\n         [style.zIndex]=\"mcZIndex\"\r\n         [style.display]=\"hidden ? 'none' : ''\"\r\n         tabindex=\"-1\">\r\n\r\n        <div #modalContainer\r\n             class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\r\n             [ngClass]=\"modalAnimationClassMap\"\r\n             [ngStyle]=\"mcStyle\"\r\n             [style.width]=\"mcWidth | toCssUnit\"\r\n             [style.transform-origin]=\"transformOrigin\">\r\n\r\n            <div class=\"mc-modal-content\" cdkTrapFocus>\r\n                <button *ngIf=\"mcClosable\"\r\n                        mc-button\r\n                        (click)=\"onClickCloseBtn()\"\r\n                        class=\"mc-modal-close mc-button_transparent\">\r\n                    <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\r\n                </button>\r\n                <ng-container [ngSwitch]=\"true\">\r\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\r\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\r\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\r\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\r\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\r\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #tplContentCustom>\r\n    <ng-container #bodyContainer></ng-container>\r\n</ng-template>\r\n\r\n\r\n<!-- [Predefined] Default Modal Content -->\r\n<ng-template #tplContentDefault>\r\n    <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\r\n        <div class=\"mc-modal-title\">\r\n            <ng-container [ngSwitch]=\"true\">\r\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\r\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\r\n                    <div [innerHTML]=\"mcTitle\"></div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\r\n        <ng-container #bodyContainer>\r\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\r\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\r\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\r\n                    <div [innerHTML]=\"mcContent\"></div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\r\n        <ng-container [ngSwitch]=\"true\">\r\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\r\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\r\n                <div [innerHTML]=\"mcFooter\"></div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\r\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\r\n                    <button\r\n                        mc-button\r\n                        #autoFocusedButton\r\n                        [attr.autofocus]=\"button.autoFocus\"\r\n                        [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\r\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\r\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\r\n                        [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\r\n                        (click)=\"onButtonClick(button)\"\r\n                        [color]=\"button.type\">\r\n                        {{ button.label }}\r\n                    </button>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <button\r\n                    #autoFocusedButton\r\n                    [attr.autofocus]=\"true\"\r\n                    *ngIf=\"mcOkText\"\r\n                    mc-button\r\n                    [color]=\"themePalette.Primary\"\r\n                    (click)=\"onClickOkCancel('ok')\">\r\n\r\n                    {{ okText }}\r\n                </button>\r\n                <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\r\n                    {{ cancelText }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<!-- /[Predefined] Default Modal Content -->\r\n\r\n<!-- [Predefined] Confirm Modal Content -->\r\n<ng-template #tplContentConfirm>\r\n    <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\r\n        <div class=\"mc-confirm-body-wrapper\">\r\n            <div class=\"mc-confirm-body\">\r\n                <div class=\"mc-confirm-content\">\r\n                    <ng-container #bodyContainer>\r\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\r\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\r\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\r\n                                <div [innerHTML]=\"mcContent\"></div>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div> <!-- /.mc-confirm-body-wrapper -->\r\n    </div>\r\n    <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\r\n        <button\r\n            mc-button\r\n            #autoFocusedButton\r\n            [color]=\"mcOkType\"\r\n            [attr.autofocus]=\"true\"\r\n            *ngIf=\"mcOkText\"\r\n            (click)=\"onClickOkCancel('ok')\">\r\n\r\n            {{ okText }}\r\n        </button>\r\n\r\n        <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\r\n            {{ cancelText }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n<!-- /[Predefined] Confirm Modal Content -->\r\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button+button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"], components: [{ type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.McButtonCssStyler, selector: "[mc-button]" }, { type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: McModalMainAction, selector: "[mc-modal-main-action]" }], pipes: { "toCssUnit": CssUnitPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mc-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '(keydown)': 'onKeyDown($event)'
-                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\r\n<ng-template #tplOriginContent>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<div>\r\n    <div *ngIf=\"mcMask\"\r\n         class=\"mc-modal-mask\"\r\n         [ngClass]=\"maskAnimationClassMap\"\r\n         [class.mc-modal-mask-hidden]=\"hidden\"\r\n         [ngStyle]=\"mcMaskStyle\"\r\n         [style.zIndex]=\"mcZIndex\"\r\n    ></div>\r\n    <div (mousedown)=\"onClickMask($event)\"\r\n         class=\"mc-modal-wrap {{ mcWrapClassName }}\"\r\n         [style.zIndex]=\"mcZIndex\"\r\n         [style.display]=\"hidden ? 'none' : ''\"\r\n         tabindex=\"-1\">\r\n\r\n        <div #modalContainer\r\n             class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\r\n             [ngClass]=\"modalAnimationClassMap\"\r\n             [ngStyle]=\"mcStyle\"\r\n             [style.width]=\"mcWidth | toCssUnit\"\r\n             [style.transform-origin]=\"transformOrigin\">\r\n\r\n            <div class=\"mc-modal-content\" cdkTrapFocus>\r\n                <button *ngIf=\"mcClosable\"\r\n                        mc-button\r\n                        (click)=\"onClickCloseBtn()\"\r\n                        class=\"mc-modal-close mc-button_transparent\">\r\n                    <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\r\n                </button>\r\n                <ng-container [ngSwitch]=\"true\">\r\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\r\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\r\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\r\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\r\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\r\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #tplContentCustom>\r\n    <ng-container #bodyContainer></ng-container>\r\n</ng-template>\r\n\r\n\r\n<!-- [Predefined] Default Modal Content -->\r\n<ng-template #tplContentDefault>\r\n    <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\r\n        <div class=\"mc-modal-title\">\r\n            <ng-container [ngSwitch]=\"true\">\r\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\r\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\r\n                    <div [innerHTML]=\"mcTitle\"></div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\r\n        <ng-container #bodyContainer>\r\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\r\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\r\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\r\n                    <div [innerHTML]=\"mcContent\"></div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\r\n        <ng-container [ngSwitch]=\"true\">\r\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\r\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\r\n                <div [innerHTML]=\"mcFooter\"></div>\r\n            </ng-container>\r\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\r\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\r\n                    <button\r\n                        mc-button\r\n                        #autoFocusedButton\r\n                        [attr.autofocus]=\"button.autoFocus\"\r\n                        [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\r\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\r\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\r\n                        [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\r\n                        (click)=\"onButtonClick(button)\"\r\n                        [color]=\"button.type\">\r\n                        {{ button.label }}\r\n                    </button>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngSwitchDefault>\r\n                <button\r\n                    #autoFocusedButton\r\n                    [attr.autofocus]=\"true\"\r\n                    *ngIf=\"mcOkText\"\r\n                    mc-button\r\n                    [color]=\"themePalette.Primary\"\r\n                    (click)=\"onClickOkCancel('ok')\">\r\n\r\n                    {{ okText }}\r\n                </button>\r\n                <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\r\n                    {{ cancelText }}\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n<!-- /[Predefined] Default Modal Content -->\r\n\r\n<!-- [Predefined] Confirm Modal Content -->\r\n<ng-template #tplContentConfirm>\r\n    <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\r\n        <div class=\"mc-confirm-body-wrapper\">\r\n            <div class=\"mc-confirm-body\">\r\n                <div class=\"mc-confirm-content\">\r\n                    <ng-container #bodyContainer>\r\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\r\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\r\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\r\n                                <div [innerHTML]=\"mcContent\"></div>\r\n                            </ng-container>\r\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div> <!-- /.mc-confirm-body-wrapper -->\r\n    </div>\r\n    <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\r\n        <button\r\n            mc-button\r\n            #autoFocusedButton\r\n            [color]=\"mcOkType\"\r\n            [attr.autofocus]=\"true\"\r\n            *ngIf=\"mcOkText\"\r\n            (click)=\"onClickOkCancel('ok')\">\r\n\r\n            {{ okText }}\r\n        </button>\r\n\r\n        <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\r\n            {{ cancelText }}\r\n        </button>\r\n    </div>\r\n</ng-template>\r\n<!-- /[Predefined] Confirm Modal Content -->\r\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button+button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: McModalControlService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { mcModalType: [{
-                type: Input
-            }], mcComponent: [{
-                type: Input
-            }], mcContent: [{
-                type: Input
-            }], mcComponentParams: [{
-                type: Input
-            }], mcFooter: [{
-                type: Input
-            }], mcVisible: [{
-                type: Input
-            }], mcVisibleChange: [{
-                type: Output
-            }], mcZIndex: [{
-                type: Input
-            }], mcWidth: [{
-                type: Input
-            }], mcSize: [{
-                type: Input
-            }], mcWrapClassName: [{
-                type: Input
-            }], mcClassName: [{
-                type: Input
-            }], mcStyle: [{
-                type: Input
-            }], mcTitle: [{
-                type: Input
-            }], mcCloseByESC: [{
-                type: Input
-            }], mcClosable: [{
-                type: Input
-            }], mcMask: [{
-                type: Input
-            }], mcMaskClosable: [{
-                type: Input
-            }], mcMaskStyle: [{
-                type: Input
-            }], mcBodyStyle: [{
-                type: Input
-            }], mcAfterOpen: [{
-                type: Output
-            }], mcAfterClose: [{
-                type: Output
-            }], mcOkText: [{
-                type: Input
-            }], mcOkType: [{
-                type: Input
-            }], mcOkLoading: [{
-                type: Input
-            }], mcOnOk: [{
-                type: Input
-            }, {
-                type: Output
-            }], mcCancelText: [{
-                type: Input
-            }], mcCancelLoading: [{
-                type: Input
-            }], mcOnCancel: [{
-                type: Input
-            }, {
-                type: Output
-            }], modalContainer: [{
-                type: ViewChild,
-                args: ['modalContainer', { static: true }]
-            }], bodyContainer: [{
-                type: ViewChild,
-                args: ['bodyContainer', { read: ViewContainerRef, static: false }]
-            }], autoFocusedButtons: [{
-                type: ViewChildren,
-                args: ['autoFocusedButton', { read: ElementRef }]
-            }], modalBody: [{
-                type: ViewChild,
-                args: ['modalBody']
-            }], mcGetContainer: [{
-                type: Input
-            }] } });
-////////////
-function isPromise(obj) {
-    // tslint:disable-next-line: no-unbound-method
-    return !!obj &&
-        (typeof obj === 'object' || typeof obj === 'function') &&
-        typeof obj.then === 'function' &&
-        typeof obj.catch === 'function';
+// Duration when perform animations (ms)
+const MODAL_ANIMATE_DURATION = 200;
+class McModalComponent extends McModalRef {
+    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, document) {
+        super();
+        this.overlay = overlay;
+        this.renderer = renderer;
+        this.cfr = cfr;
+        this.elementRef = elementRef;
+        this.viewContainer = viewContainer;
+        this.modalControl = modalControl;
+        this.changeDetector = changeDetector;
+        this.document = document;
+        this.themePalette = ThemePalette;
+        this.mcModalType = 'default';
+        this._mcVisible = false;
+        this.mcVisibleChange = new EventEmitter();
+        this.mcZIndex = 1000;
+        this.mcSize = ModalSize.Normal;
+        this.mcCloseByESC = true;
+        this._mcClosable = true;
+        this._mcMask = true;
+        this._mcMaskClosable = false;
+        // Trigger when modal open(visible) after animations
+        this.mcAfterOpen = new EventEmitter();
+        // Trigger when modal leave-animation over
+        this.mcAfterClose = new EventEmitter();
+        this.mcOkType = 'primary';
+        this.mcRestoreFocus = true;
+        this._mcOkLoading = false;
+        this.mcOnOk = new EventEmitter();
+        this._mcCancelLoading = false;
+        this.mcOnCancel = new EventEmitter();
+        this.isTopOverflow = false;
+        this.isBottomOverflow = false;
+        // The origin point that animation based on
+        this.transformOrigin = '0px 0px 0px';
+        this.mcGetContainer = () => this.overlay.create();
+    }
+    get mcVisible() { return this._mcVisible; }
+    set mcVisible(value) { this._mcVisible = value; }
+    get mcClosable() { return this._mcClosable; }
+    set mcClosable(value) { this._mcClosable = value; }
+    get mcMask() { return this._mcMask; }
+    set mcMask(value) { this._mcMask = value; }
+    get mcMaskClosable() { return this._mcMaskClosable; }
+    set mcMaskClosable(value) { this._mcMaskClosable = value; }
+    get mcOkLoading() { return this._mcOkLoading; }
+    set mcOkLoading(value) { this._mcOkLoading = value; }
+    get mcCancelLoading() { return this._mcCancelLoading; }
+    set mcCancelLoading(value) { this._mcCancelLoading = value; }
+    // Observable alias for mcAfterOpen
+    get afterOpen() {
+        return this.mcAfterOpen.asObservable();
+    }
+    // Observable alias for mcAfterClose
+    get afterClose() {
+        return this.mcAfterClose.asObservable();
+    }
+    get okText() {
+        return this.mcOkText;
+    }
+    get cancelText() {
+        return this.mcCancelText;
+    }
+    // Indicate whether this dialog should hidden
+    get hidden() {
+        return !this.mcVisible && !this.animationState;
+    }
+    ngOnInit() {
+        // Create component along without View
+        if (this.isComponent(this.mcContent)) {
+            this.createDynamicComponent(this.mcContent);
+        }
+        // Setup default button options
+        if (this.isModalButtons(this.mcFooter)) {
+            this.mcFooter = this.formatModalButtons(this.mcFooter);
+        }
+        if (this.isComponent(this.mcComponent)) {
+            this.createDynamicComponent(this.mcComponent);
+        }
+        // Place the modal dom to elsewhere
+        this.container = typeof this.mcGetContainer === 'function' ? this.mcGetContainer() : this.mcGetContainer;
+        if (this.container instanceof HTMLElement) {
+            this.container.appendChild(this.elementRef.nativeElement);
+        }
+        else if (this.container instanceof OverlayRef) {
+            // NOTE: only attach the dom to overlay, the view container is not changed actually
+            this.container.overlayElement.appendChild(this.elementRef.nativeElement);
+        }
+        // Register modal when afterOpen/afterClose is stable
+        this.modalControl.registerModal(this);
+    }
+    // [NOTE] NOT available when using by service!
+    // Because ngOnChanges never be called when using by service,
+    // here we can't support "mcContent"(Component) etc. as inputs that initialized dynamically.
+    // BUT: User also can change "mcContent" dynamically to trigger UI changes
+    // (provided you don't use Component that needs initializations)
+    ngOnChanges(changes) {
+        if (changes.mcVisible) {
+            // Do not trigger animation while initializing
+            this.handleVisibleStateChange(this.mcVisible, !changes.mcVisible.firstChange);
+        }
+    }
+    ngAfterViewInit() {
+        // If using Component, it is the time to attach View while bodyContainer is ready
+        if (this.contentComponentRef) {
+            this.bodyContainer.insert(this.contentComponentRef.hostView);
+        }
+        this.getElement().getElementsByTagName('button')[0]?.focus();
+        for (const autoFocusedButton of this.autoFocusedButtons.toArray()) {
+            if (autoFocusedButton.nativeElement.autofocus) {
+                autoFocusedButton.nativeElement.focus();
+                break;
+            }
+        }
+        this.checkOverflow();
+    }
+    ngOnDestroy() {
+        if (this.container instanceof OverlayRef) {
+            this.container.dispose();
+        }
+    }
+    checkOverflow() {
+        const nativeElement = this.modalBody?.nativeElement;
+        if (!nativeElement) {
+            return;
+        }
+        const scrollTop = nativeElement.scrollTop;
+        const offsetHeight = nativeElement.offsetHeight;
+        const scrollHeight = nativeElement.scrollHeight;
+        this.isTopOverflow = scrollTop > 0;
+        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
+    }
+    open() {
+        this.focusedElementBeforeOpen = this.document.activeElement;
+        this.changeVisibleFromInside(true);
+    }
+    close(result) {
+        if (this.mcRestoreFocus) {
+            this.focusedElementBeforeOpen?.focus();
+        }
+        this.changeVisibleFromInside(false, result);
+        this.focusedElementBeforeOpen = null;
+    }
+    // Destroy equals Close
+    destroy(result) {
+        this.close(result);
+    }
+    markForCheck() {
+        this.changeDetector.markForCheck();
+    }
+    triggerOk() {
+        this.onClickOkCancel('ok');
+    }
+    triggerCancel() {
+        this.onClickOkCancel('cancel');
+    }
+    getInstance() {
+        return this;
+    }
+    getContentComponentRef() {
+        return this.contentComponentRef;
+    }
+    getContentComponent() {
+        return this.contentComponentRef && this.contentComponentRef.instance;
+    }
+    getElement() {
+        return this.elementRef && this.elementRef.nativeElement;
+    }
+    getMcFooter() {
+        return this.getElement().getElementsByClassName('mc-modal-footer').item(0);
+    }
+    onClickMask($event) {
+        if (this.mcMask &&
+            this.mcMaskClosable &&
+            $event.target.classList.contains('mc-modal-wrap') &&
+            this.mcVisible) {
+            this.onClickOkCancel('cancel');
+        }
+    }
+    // tslint:disable-next-line: no-reserved-keywords
+    isModalType(type) {
+        return this.mcModalType === type;
+    }
+    onKeyDown(event) {
+        // tslint:disable-next-line:deprecation .key isn't supported in Edge
+        if (event.keyCode === ESCAPE && this.container && (this.container instanceof OverlayRef)) {
+            this.close();
+            event.preventDefault();
+        }
+        // tslint:disable-next-line:deprecation .key isn't supported in Edge
+        if (event.ctrlKey && event.keyCode === ENTER) {
+            if (this.mcModalType === 'confirm') {
+                this.triggerOk();
+            }
+            this.getElement().querySelector('[mc-modal-main-action]')?.click();
+            event.preventDefault();
+        }
+    }
+    // AoT
+    onClickCloseBtn() {
+        if (this.mcVisible) {
+            this.onClickOkCancel('cancel');
+        }
+    }
+    // AoT
+    // tslint:disable-next-line: no-reserved-keywords
+    onClickOkCancel(type) {
+        const trigger = { ok: this.mcOnOk, cancel: this.mcOnCancel }[type];
+        const loadingKey = { ok: 'mcOkLoading', cancel: 'mcCancelLoading' }[type];
+        if (trigger instanceof EventEmitter) {
+            trigger.emit(this.getContentComponent());
+        }
+        else if (typeof trigger === 'function') {
+            const result = trigger(this.getContentComponent());
+            // Users can return "false" to prevent closing by default
+            const caseClose = (doClose) => (doClose !== false) && this.close(doClose);
+            if (isPromise(result)) {
+                this[loadingKey] = true;
+                const handleThen = (doClose) => {
+                    this[loadingKey] = false;
+                    caseClose(doClose);
+                };
+                result.then(handleThen).catch(handleThen);
+            }
+            else {
+                caseClose(result);
+            }
+        }
+    }
+    // AoT
+    isNonEmptyString(value) {
+        return typeof value === 'string' && value !== '';
+    }
+    // AoT
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    // AoT
+    isComponent(value) {
+        return value instanceof Type;
+    }
+    // AoT
+    isModalButtons(value) {
+        return Array.isArray(value) && value.length > 0;
+    }
+    // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
+    // AoT
+    getButtonCallableProp(options, prop) {
+        const value = options[prop];
+        const args = [];
+        if (this.contentComponentRef) {
+            args.push(this.contentComponentRef.instance);
+        }
+        return typeof value === 'function' ? value.apply(options, args) : value;
+    }
+    // On mcFooter's modal button click
+    // AoT
+    onButtonClick(button) {
+        // Call onClick directly
+        // tslint:disable-next-line:no-inferred-empty-object-type  rule seems to be broken
+        const result = this.getButtonCallableProp(button, 'onClick');
+        if (isPromise(result)) {
+            button.loading = true;
+            result.then(() => button.loading = false).catch(() => button.loading = false);
+        }
+    }
+    // Do rest things when visible state changed
+    handleVisibleStateChange(visible, animation = true, closeResult) {
+        // Hide scrollbar at the first time when shown up
+        if (visible) {
+            this.changeBodyOverflow(1);
+        }
+        return Promise
+            .resolve(animation && this.animateTo(visible))
+            // Emit open/close event after animations over
+            .then(() => {
+            if (visible) {
+                this.mcAfterOpen.emit();
+            }
+            else {
+                this.mcAfterClose.emit(closeResult);
+                // Show/hide scrollbar when animation is over
+                this.changeBodyOverflow();
+            }
+        });
+    }
+    // Change mcVisible from inside
+    changeVisibleFromInside(visible, closeResult) {
+        if (this.mcVisible !== visible) {
+            // Change mcVisible value immediately
+            this.mcVisible = visible;
+            this.mcVisibleChange.emit(visible);
+            return this.handleVisibleStateChange(visible, true, closeResult);
+        }
+        return Promise.resolve();
+    }
+    changeAnimationState(state) {
+        this.animationState = state;
+        if (state) {
+            this.maskAnimationClassMap = {
+                [`fade-${state}`]: true,
+                [`fade-${state}-active`]: true
+            };
+            this.modalAnimationClassMap = {
+                [`zoom-${state}`]: true,
+                [`zoom-${state}-active`]: true
+            };
+        }
+        else {
+            // @ts-ignore
+            this.maskAnimationClassMap = this.modalAnimationClassMap = null;
+        }
+        if (this.contentComponentRef) {
+            this.contentComponentRef.changeDetectorRef.markForCheck();
+        }
+        else {
+            this.changeDetector.markForCheck();
+        }
+    }
+    animateTo(isVisible) {
+        // Figure out the lastest click position when shows up
+        if (isVisible) {
+            // [NOTE] Using timeout due to the document.click event is fired later than visible change,
+            // so if not postponed to next event-loop, we can't get the lastest click position
+            window.setTimeout(() => this.updateTransformOrigin());
+        }
+        this.changeAnimationState(isVisible ? 'enter' : 'leave');
+        // Return when animation is over
+        return new Promise((resolve) => {
+            return window.setTimeout(() => {
+                this.changeAnimationState(null);
+                resolve(null);
+            }, MODAL_ANIMATE_DURATION);
+        });
+    }
+    formatModalButtons(buttons) {
+        return buttons.map((button) => {
+            return {
+                ...{
+                    type: 'default',
+                    size: 'default',
+                    autoLoading: true,
+                    show: true,
+                    loading: false,
+                    disabled: false
+                },
+                ...button
+            };
+        });
+    }
+    /**
+     * Create a component dynamically but not attach to any View
+     * (this action will be executed when bodyContainer is ready)
+     * @param component Component class
+     */
+    createDynamicComponent(component) {
+        const factory = this.cfr.resolveComponentFactory(component);
+        const childInjector = Injector.create({
+            providers: [{ provide: McModalRef, useValue: this }],
+            parent: this.viewContainer.injector
+        });
+        this.contentComponentRef = factory.create(childInjector);
+        if (this.mcComponentParams) {
+            Object.assign(this.contentComponentRef.instance, this.mcComponentParams);
+        }
+        // Do the first change detection immediately
+        // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
+        this.contentComponentRef.changeDetectorRef.detectChanges();
+    }
+    // Update transform-origin to the last click position on document
+    updateTransformOrigin() {
+        const modalElement = this.modalContainer.nativeElement;
+        const lastPosition = modalUtilObject.getLastClickPosition();
+        if (lastPosition) {
+            this.transformOrigin = `${lastPosition.x - modalElement.offsetLeft}px ${lastPosition.y - modalElement.offsetTop}px 0px`;
+        }
+    }
+    /**
+     * Take care of the body's overflow to decide the existense of scrollbar
+     * @param plusNum The number that the openModals.length will increase soon
+     */
+    changeBodyOverflow(plusNum = 0) {
+        const openModals = this.modalControl.openModals;
+        if (openModals.length + plusNum > 0) {
+            this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+        }
+        else {
+            this.renderer.removeStyle(this.document.body, 'overflow');
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: McModalControlService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McModalComponent, selector: "mc-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcRestoreFocus: "mcRestoreFocus", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"mc-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.mc-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"mc-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        mc-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"mc-modal-close mc-button_transparent\">\n                    <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n                </button>\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"mc-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        mc-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    mc-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"mc-confirm-body-wrapper\">\n            <div class=\"mc-confirm-body\">\n                <div class=\"mc-confirm-content\">\n                    <ng-container #bodyContainer>\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                                <div [innerHTML]=\"mcContent\"></div>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div> <!-- /.mc-confirm-body-wrapper -->\n    </div>\n    <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            mc-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"], components: [{ type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.McButtonCssStyler, selector: "[mc-button]" }, { type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: McModalMainAction, selector: "[mc-modal-main-action]" }], pipes: { "toCssUnit": CssUnitPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(keydown)': 'onKeyDown($event)'
+                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"mc-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.mc-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"mc-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        mc-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"mc-modal-close mc-button_transparent\">\n                    <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n                </button>\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"mc-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        mc-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    mc-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"mc-confirm-body-wrapper\">\n            <div class=\"mc-confirm-body\">\n                <div class=\"mc-confirm-content\">\n                    <ng-container #bodyContainer>\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                                <div [innerHTML]=\"mcContent\"></div>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div> <!-- /.mc-confirm-body-wrapper -->\n    </div>\n    <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            mc-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: McModalControlService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { mcModalType: [{
+                type: Input
+            }], mcComponent: [{
+                type: Input
+            }], mcContent: [{
+                type: Input
+            }], mcComponentParams: [{
+                type: Input
+            }], mcFooter: [{
+                type: Input
+            }], mcVisible: [{
+                type: Input
+            }], mcVisibleChange: [{
+                type: Output
+            }], mcZIndex: [{
+                type: Input
+            }], mcWidth: [{
+                type: Input
+            }], mcSize: [{
+                type: Input
+            }], mcWrapClassName: [{
+                type: Input
+            }], mcClassName: [{
+                type: Input
+            }], mcStyle: [{
+                type: Input
+            }], mcTitle: [{
+                type: Input
+            }], mcCloseByESC: [{
+                type: Input
+            }], mcClosable: [{
+                type: Input
+            }], mcMask: [{
+                type: Input
+            }], mcMaskClosable: [{
+                type: Input
+            }], mcMaskStyle: [{
+                type: Input
+            }], mcBodyStyle: [{
+                type: Input
+            }], mcAfterOpen: [{
+                type: Output
+            }], mcAfterClose: [{
+                type: Output
+            }], mcOkText: [{
+                type: Input
+            }], mcOkType: [{
+                type: Input
+            }], mcRestoreFocus: [{
+                type: Input
+            }], mcOkLoading: [{
+                type: Input
+            }], mcOnOk: [{
+                type: Input
+            }, {
+                type: Output
+            }], mcCancelText: [{
+                type: Input
+            }], mcCancelLoading: [{
+                type: Input
+            }], mcOnCancel: [{
+                type: Input
+            }, {
+                type: Output
+            }], modalContainer: [{
+                type: ViewChild,
+                args: ['modalContainer', { static: true }]
+            }], bodyContainer: [{
+                type: ViewChild,
+                args: ['bodyContainer', { read: ViewContainerRef, static: false }]
+            }], autoFocusedButtons: [{
+                type: ViewChildren,
+                args: ['autoFocusedButton', { read: ElementRef }]
+            }], modalBody: [{
+                type: ViewChild,
+                args: ['modalBody']
+            }], mcGetContainer: [{
+                type: Input
+            }] } });
+////////////
+function isPromise(obj) {
+    // tslint:disable-next-line: no-unbound-method
+    return !!obj &&
+        (typeof obj === 'object' || typeof obj === 'function') &&
+        typeof obj.then === 'function' &&
+        typeof obj.catch === 'function';
 }
 
-// A builder used for managing service creating modals
-class ModalBuilderForService {
-    constructor(overlay, options = {}) {
-        this.overlay = overlay;
-        this.createModal();
-        if (!('mcGetContainer' in options)) {
-            options.mcGetContainer = undefined;
-        }
-        this.changeProps(options);
-        this.modalRef.instance.open();
-        this.modalRef.instance.mcAfterClose.subscribe(() => this.destroyModal());
-        this.overlayRef.keydownEvents()
-            // @ts-ignore
-            .pipe(filter((event) => {
-            // tslint:disable-next-line:deprecation replacement .key isn't supported in Edge
-            return event.keyCode === ESCAPE && options.mcCloseByESC;
-        }))
-            .subscribe(() => this.modalRef.instance.close());
-    }
-    getInstance() {
-        return this.modalRef && this.modalRef.instance;
-    }
-    destroyModal() {
-        if (this.modalRef) {
-            this.overlayRef.dispose();
-            this.modalRef = null;
-        }
-    }
-    changeProps(options) {
-        if (this.modalRef) {
-            // here not limit user's inputs at runtime
-            Object.assign(this.modalRef.instance, options);
-        }
-    }
-    // Create component to ApplicationRef
-    createModal() {
-        this.overlayRef = this.overlay.create();
-        this.modalRef = this.overlayRef.attach(new ComponentPortal(McModalComponent));
-    }
-}
-class McModalService {
-    constructor(overlay, modalControl) {
-        this.overlay = overlay;
-        this.modalControl = modalControl;
-    }
-    // Track of the current close modals (we assume invisible is close this time)
-    get openModals() {
-        return this.modalControl.openModals;
-    }
-    get afterAllClose() {
-        return this.modalControl.afterAllClose.asObservable();
-    }
-    // Closes all of the currently-open dialogs
-    closeAll() {
-        this.modalControl.closeAll();
-    }
-    create(options = {}) {
-        if (typeof options.mcOnCancel !== 'function') {
-            // Leave a empty function to close this modal by default
-            // tslint:disable-next-line
-            options.mcOnCancel = () => { };
-        }
-        if (!('mcCloseByESC' in options)) {
-            options.mcCloseByESC = true;
-        }
-        // Remove the Cancel button if the user not specify a Cancel button
-        if (!('mcCancelText' in options)) {
-            options.mcCancelText = undefined;
-        }
-        // Remove the Ok button if the user not specify a Ok button
-        if (!('mcOkText' in options)) {
-            options.mcOkText = undefined;
-        }
-        // Remove the footer if the user not specify a footer
-        if (!('mcFooter' in options)) {
-            options.mcFooter = undefined;
-        }
-        return new ModalBuilderForService(this.overlay, options).getInstance();
-    }
-    confirm(options = {}, confirmType = 'confirm') {
-        if ('mcFooter' in options) {
-            console.warn(`The Confirm-Modal doesn't support "mcFooter", this property will be ignored.`);
-        }
-        // NOTE: only support function currently by calling confirm()
-        if (typeof options.mcOnOk !== 'function') {
-            // Leave a empty function to close this modal by default
-            // tslint:disable-next-line
-            options.mcOnOk = () => { };
-        }
-        options.mcModalType = 'confirm';
-        options.mcClassName = `mc-confirm mc-confirm-${confirmType} ${options.mcClassName || ''}`;
-        return this.create(options);
-    }
-    open(options = {}) {
-        options.mcModalType = 'custom';
-        return this.create(options);
-    }
-    success(options = {}) {
-        return this.simpleConfirm(options, 'success');
-    }
-    // tslint:disable-next-line: no-reserved-keywords
-    delete(options = {}) {
-        return this.simpleConfirm(options, 'warn');
-    }
-    simpleConfirm(options = {}, confirmType) {
-        return this.confirm(options, confirmType);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService, deps: [{ token: i1.Overlay }, { token: McModalControlService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ McModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService, decorators: [{
-            type: Injectable
+// A builder used for managing service creating modals
+class ModalBuilderForService {
+    constructor(overlay, options = {}) {
+        this.overlay = overlay;
+        this.createModal();
+        if (!('mcGetContainer' in options)) {
+            options.mcGetContainer = undefined;
+        }
+        this.changeProps(options);
+        this.modalRef.instance.open();
+        this.modalRef.instance.mcAfterClose.subscribe(() => this.destroyModal());
+        this.overlayRef.keydownEvents()
+            // @ts-ignore
+            .pipe(filter((event) => {
+            // tslint:disable-next-line:deprecation replacement .key isn't supported in Edge
+            return event.keyCode === ESCAPE && options.mcCloseByESC;
+        }))
+            .subscribe(() => this.modalRef.instance.close());
+    }
+    getInstance() {
+        return this.modalRef && this.modalRef.instance;
+    }
+    destroyModal() {
+        if (this.modalRef) {
+            this.overlayRef.dispose();
+            this.modalRef = null;
+        }
+    }
+    changeProps(options) {
+        if (this.modalRef) {
+            // here not limit user's inputs at runtime
+            Object.assign(this.modalRef.instance, options);
+        }
+    }
+    // Create component to ApplicationRef
+    createModal() {
+        this.overlayRef = this.overlay.create();
+        this.modalRef = this.overlayRef.attach(new ComponentPortal(McModalComponent));
+    }
+}
+class McModalService {
+    constructor(overlay, modalControl) {
+        this.overlay = overlay;
+        this.modalControl = modalControl;
+    }
+    // Track of the current close modals (we assume invisible is close this time)
+    get openModals() {
+        return this.modalControl.openModals;
+    }
+    get afterAllClose() {
+        return this.modalControl.afterAllClose.asObservable();
+    }
+    // Closes all of the currently-open dialogs
+    closeAll() {
+        this.modalControl.closeAll();
+    }
+    create(options = {}) {
+        if (typeof options.mcOnCancel !== 'function') {
+            // Leave a empty function to close this modal by default
+            // tslint:disable-next-line
+            options.mcOnCancel = () => { };
+        }
+        if (!('mcCloseByESC' in options)) {
+            options.mcCloseByESC = true;
+        }
+        // Remove the Cancel button if the user not specify a Cancel button
+        if (!('mcCancelText' in options)) {
+            options.mcCancelText = undefined;
+        }
+        // Remove the Ok button if the user not specify a Ok button
+        if (!('mcOkText' in options)) {
+            options.mcOkText = undefined;
+        }
+        // Remove the footer if the user not specify a footer
+        if (!('mcFooter' in options)) {
+            options.mcFooter = undefined;
+        }
+        return new ModalBuilderForService(this.overlay, options).getInstance();
+    }
+    confirm(options = {}, confirmType = 'confirm') {
+        if ('mcFooter' in options) {
+            console.warn(`The Confirm-Modal doesn't support "mcFooter", this property will be ignored.`);
+        }
+        // NOTE: only support function currently by calling confirm()
+        if (typeof options.mcOnOk !== 'function') {
+            // Leave a empty function to close this modal by default
+            // tslint:disable-next-line
+            options.mcOnOk = () => { };
+        }
+        options.mcModalType = 'confirm';
+        options.mcClassName = `mc-confirm mc-confirm-${confirmType} ${options.mcClassName || ''}`;
+        return this.create(options);
+    }
+    open(options = {}) {
+        options.mcModalType = 'custom';
+        return this.create(options);
+    }
+    success(options = {}) {
+        return this.simpleConfirm(options, 'success');
+    }
+    // tslint:disable-next-line: no-reserved-keywords
+    delete(options = {}) {
+        return this.simpleConfirm(options, 'warn');
+    }
+    simpleConfirm(options = {}, confirmType) {
+        return this.confirm(options, confirmType);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService, deps: [{ token: i1.Overlay }, { token: McModalControlService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ McModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: McModalControlService }]; } });
 
-class McModalModule {
-}
-/** @nocollapse */ /** @nocollapse */ McModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, declarations: [McModalComponent,
-        McModalTitle,
-        McModalBody,
-        McModalFooter,
-        CssUnitPipe,
-        McModalMainAction], imports: [CommonModule,
-        OverlayModule,
-        A11yModule,
-        McButtonModule,
-        McIconModule], exports: [McModalComponent,
-        McModalTitle,
-        McModalBody,
-        McModalFooter,
-        McModalMainAction] });
-/** @nocollapse */ /** @nocollapse */ McModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, providers: [
-        McModalControlService,
-        McModalService
-    ], imports: [[
-            CommonModule,
-            OverlayModule,
-            A11yModule,
-            McButtonModule,
-            McIconModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        OverlayModule,
-                        A11yModule,
-                        McButtonModule,
-                        McIconModule
-                    ],
-                    exports: [
-                        McModalComponent,
-                        McModalTitle,
-                        McModalBody,
-                        McModalFooter,
-                        McModalMainAction
-                    ],
-                    declarations: [
-                        McModalComponent,
-                        McModalTitle,
-                        McModalBody,
-                        McModalFooter,
-                        CssUnitPipe,
-                        McModalMainAction
-                    ],
-                    providers: [
-                        McModalControlService,
-                        McModalService
-                    ],
-                    entryComponents: [McModalComponent]
-                }]
+class McModalModule {
+}
+/** @nocollapse */ /** @nocollapse */ McModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, declarations: [McModalComponent,
+        McModalTitle,
+        McModalBody,
+        McModalFooter,
+        CssUnitPipe,
+        McModalMainAction], imports: [CommonModule,
+        OverlayModule,
+        A11yModule,
+        McButtonModule,
+        McIconModule], exports: [McModalComponent,
+        McModalTitle,
+        McModalBody,
+        McModalFooter,
+        McModalMainAction] });
+/** @nocollapse */ /** @nocollapse */ McModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, providers: [
+        McModalControlService,
+        McModalService
+    ], imports: [[
+            CommonModule,
+            OverlayModule,
+            A11yModule,
+            McButtonModule,
+            McIconModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        A11yModule,
+                        McButtonModule,
+                        McIconModule
+                    ],
+                    exports: [
+                        McModalComponent,
+                        McModalTitle,
+                        McModalBody,
+                        McModalFooter,
+                        McModalMainAction
+                    ],
+                    declarations: [
+                        McModalComponent,
+                        McModalTitle,
+                        McModalBody,
+                        McModalFooter,
+                        CssUnitPipe,
+                        McModalMainAction
+                    ],
+                    providers: [
+                        McModalControlService,
+                        McModalService
+                    ],
+                    entryComponents: [McModalComponent]
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { McModalBody, McModalComponent, McModalFooter, McModalMainAction, McModalModule, McModalRef, McModalService, McModalTitle, ModalSize };