@ptsecurity/mosaic 12.1.0 → 13.0.0

package/fesm2015/ptsecurity-mosaic-modal.mjs

@@ -0,0 +1,842 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
+import * as i5 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Optional, SkipSelf, Directive, Pipe, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { ESCAPE, ENTER } from '@ptsecurity/cdk/keycodes';
+import { ThemePalette } from '@ptsecurity/mosaic/core';
+import { Subject } from 'rxjs';
+import * as i3 from '@ptsecurity/mosaic/button';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import * as i4 from '@ptsecurity/mosaic/icon';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import * as i6 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+
+/**
+ * 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 };
+        });
+    }
+}
+const modalUtilObject = new ModalUtil(document);
+
+var ModalSize;
+(function (ModalSize) {
+    ModalSize["Small"] = "small";
+    ModalSize["Normal"] = "normal";
+    ModalSize["Large"] = "large";
+})(ModalSize || (ModalSize = {}));
+
+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 });
+        }
+    }
+    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();
+            }
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McModalControlService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", ngImport: i0, type: McModalControlService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: McModalControlService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: McModalControlService, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    } });
+
+class McModalTitle {
+}
+/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: McModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalTitle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", 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.1.1", ngImport: i0, type: McModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalBody.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", 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.1.1", ngImport: i0, type: McModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalFooter.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", 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.1.1", ngImport: i0, type: McModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McModalMainAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: McModalMainAction, selector: "[mc-modal-main-action]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ /** @nocollapse */ CssUnitPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CssUnitPipe, name: "toCssUnit" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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() {
+        var _a;
+        // If using Component, it is the time to attach View while bodyContainer is ready
+        if (this.contentComponentRef) {
+            this.bodyContainer.insert(this.contentComponentRef.hostView);
+        }
+        (_a = this.getElement().getElementsByTagName('button')[0]) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        const nativeElement = (_a = this.modalBody) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a;
+        // 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();
+            }
+            (_a = this.getElement().querySelector('[mc-modal-main-action]')) === null || _a === void 0 ? void 0 : _a.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 Object.assign({
+                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.1.1", 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.1.1", 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 -->\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:24px;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:0 0 4px 4px;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:48px;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:400px;width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:640px;width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:960px;width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:56px;width:var(--mc-modal-size-close-width, 56px);height: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:4px;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:block;border-radius:4px 4px 0 0;border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:14px 16px;padding:var(--mc-modal-header-size-padding, 14px 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:16px 24px 24px;padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:block;border-radius:0 0 4px 4px;border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:16px;padding:var(--mc-modal-footer-size-padding, 16px 16px);text-align:right}.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.1.1", 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:24px;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:0 0 4px 4px;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:48px;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:400px;width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:640px;width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:960px;width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:56px;width:var(--mc-modal-size-close-width, 56px);height: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:4px;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:block;border-radius:4px 4px 0 0;border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:14px 16px;padding:var(--mc-modal-header-size-padding, 14px 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:16px 24px 24px;padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:block;border-radius:0 0 4px 4px;border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:16px;padding:var(--mc-modal-footer-size-padding, 16px 16px);text-align:right}.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';
+}
+
+// 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.1.1", 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.1.1", ngImport: i0, type: McModalService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", ngImport: i0, type: McModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", 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.1.1", ngImport: i0, type: McModalModule, providers: [
+        McModalControlService,
+        McModalService
+    ], imports: [[
+            CommonModule,
+            OverlayModule,
+            A11yModule,
+            McButtonModule,
+            McIconModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", 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.
+ */
+
+export { McModalBody, McModalComponent, McModalFooter, McModalMainAction, McModalModule, McModalRef, McModalService, McModalTitle, ModalSize };
+//# sourceMappingURL=ptsecurity-mosaic-modal.mjs.map