@koobiq/components 16.0.0-beta.1

package/fesm2022/koobiq-components-modal.mjs

@@ -0,0 +1,868 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Optional, SkipSelf, Pipe, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ViewChildren, Directive, NgModule } from '@angular/core';
+import { ESCAPE, ENTER } from '@koobiq/cdk/keycodes';
+import { ThemePalette } from '@koobiq/components/core';
+import { Subject } from 'rxjs';
+import * as i4 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import * as i5 from '@koobiq/components/button';
+import { KbqButtonModule } from '@koobiq/components/button';
+import * as i6 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+
+class KbqModalControlService {
+    // 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;
+    }
+    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();
+    }
+    // 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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalControlService, deps: [{ token: KbqModalControlService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalControlService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalControlService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: KbqModalControlService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; } });
+
+/**
+ * API class that public to users to handle the modal instance.
+ * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
+ */
+// tslint:disable-next-line:naming-convention
+class KbqModalRef {
+}
+
+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["Medium"] = "medium";
+    // Normal is deprecated and will be deleted in 16.x
+    ModalSize["Normal"] = "medium";
+    ModalSize["Large"] = "large";
+})(ModalSize || (ModalSize = {}));
+
+class CssUnitPipe {
+    transform(value, defaultUnit = 'px') {
+        const formatted = +value;
+        return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: CssUnitPipe, name: "toCssUnit" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CssUnitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'toCssUnit'
+                }]
+        }] });
+
+// Duration when perform animations (ms)
+const MODAL_ANIMATE_DURATION = 200;
+class KbqModalComponent extends KbqModalRef {
+    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;
+    }
+    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.Medium;
+        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();
+    }
+    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;
+    }
+    getKbqFooter() {
+        return this.getElement().getElementsByClassName('kbq-modal-footer').item(0);
+    }
+    onClickMask($event) {
+        if (this.mcMask &&
+            this.mcMaskClosable &&
+            $event.target.classList.contains('kbq-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('[kbq-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: KbqModalRef, useValue: this }],
+            parent: this.viewContainer.injector
+        });
+        this.contentComponentRef = factory.create(childInjector);
+        if (this.mcComponentParams) {
+            // @ts-ignore
+            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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: KbqModalControlService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalComponent, selector: "kbq-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=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        kbq-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"kbq-modal-close kbq-button_transparent\">\n                    <i kbq-icon=\"mc-close-L_16\" class=\"kbq-icon kbq-icon_light\" [color]=\"themePalette.Secondary\"></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=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"kbq-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=\"kbq-modal-body kbq-scrollbar\" #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=\"kbq-modal-footer\" [class.kbq-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                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-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                    kbq-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-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=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"kbq-confirm-body-wrapper\">\n            <div class=\"kbq-confirm-body\">\n                <div class=\"kbq-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> <!-- /.kbq-confirm-body-wrapper -->\n    </div>\n    <div class=\"kbq-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-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 kbq-button [color]=\"themePalette.Secondary\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-header,.kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding:var(--kbq-modal-confirm-size-padding, 24px)}.kbq-confirm-body-wrapper{zoom:1}.kbq-confirm-body-wrapper:before,.kbq-confirm-body-wrapper:after{content:\"\";display:table}.kbq-confirm-body-wrapper:after{clear:both}.kbq-confirm-body .kbq-confirm-title{display:block;overflow:auto}.kbq-confirm .kbq-confirm-btns{border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);text-align:right}.kbq-confirm .kbq-confirm-btns button+button,.kbq-confirm .kbq-confirm-btns button:only-child{margin:16px}.kbq-modal{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large, 960px)}.kbq-modal .kbq-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--kbq-modal-size-close-width, 56px);height:var(--kbq-modal-size-close-width, 56px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-title{margin:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;height:var(--kbq-modal-header-size-height, 56px);border-radius:var(--kbq-modal-header-size-border-radius, 8px 8px 0 0);padding:var(--kbq-modal-header-size-padding, 0 16px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:var(--kbq-modal-body-size-max-height, calc(100vh - 260px));padding:var(--kbq-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--kbq-modal-footer-size-height, 64px);border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);padding:var(--kbq-modal-footer-size-padding, 0 16px)}.kbq-modal-footer button+button{margin-left:16px;margin-bottom:0}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kbq-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=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        kbq-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"kbq-modal-close kbq-button_transparent\">\n                    <i kbq-icon=\"mc-close-L_16\" class=\"kbq-icon kbq-icon_light\" [color]=\"themePalette.Secondary\"></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=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"kbq-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=\"kbq-modal-body kbq-scrollbar\" #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=\"kbq-modal-footer\" [class.kbq-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                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-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                    kbq-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-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=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"kbq-confirm-body-wrapper\">\n            <div class=\"kbq-confirm-body\">\n                <div class=\"kbq-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> <!-- /.kbq-confirm-body-wrapper -->\n    </div>\n    <div class=\"kbq-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-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 kbq-button [color]=\"themePalette.Secondary\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-header,.kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding:var(--kbq-modal-confirm-size-padding, 24px)}.kbq-confirm-body-wrapper{zoom:1}.kbq-confirm-body-wrapper:before,.kbq-confirm-body-wrapper:after{content:\"\";display:table}.kbq-confirm-body-wrapper:after{clear:both}.kbq-confirm-body .kbq-confirm-title{display:block;overflow:auto}.kbq-confirm .kbq-confirm-btns{border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);text-align:right}.kbq-confirm .kbq-confirm-btns button+button,.kbq-confirm .kbq-confirm-btns button:only-child{margin:16px}.kbq-modal{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large, 960px)}.kbq-modal .kbq-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--kbq-modal-size-close-width, 56px);height:var(--kbq-modal-size-close-width, 56px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-title{margin:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;height:var(--kbq-modal-header-size-height, 56px);border-radius:var(--kbq-modal-header-size-border-radius, 8px 8px 0 0);padding:var(--kbq-modal-header-size-padding, 0 16px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:var(--kbq-modal-body-size-max-height, calc(100vh - 260px));padding:var(--kbq-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--kbq-modal-footer-size-height, 64px);border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);padding:var(--kbq-modal-footer-size-padding, 0 16px)}.kbq-modal-footer button+button{margin-left:16px;margin-bottom:0}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: KbqModalControlService }, { 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';
+}
+
+class KbqModalTitle {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalTitle, selector: "[kbq-modal-title], kbq-modal-title, [mcModalTitle]", host: { classAttribute: "kbq-modal-header kbq-modal-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[kbq-modal-title], kbq-modal-title, [mcModalTitle]`,
+                    host: {
+                        class: 'kbq-modal-header kbq-modal-title'
+                    }
+                }]
+        }] });
+class KbqModalBody {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalBody, selector: "[kbq-modal-body], kbq-modal-body, [mcModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[kbq-modal-body], kbq-modal-body, [mcModalBody]`,
+                    host: {
+                        class: 'kbq-modal-body'
+                    }
+                }]
+        }] });
+class KbqModalFooter {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalFooter, selector: "[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]`,
+                    host: {
+                        class: 'kbq-modal-footer'
+                    }
+                }]
+        }] });
+class KbqModalMainAction {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalMainAction, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalMainAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[kbq-modal-main-action]`
+                }]
+        }] });
+
+// 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()
+            .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.overlayRef.hostElement.classList.add('kbq-modal-overlay');
+        this.modalRef = this.overlayRef.attach(new ComponentPortal(KbqModalComponent));
+    }
+}
+class KbqModalService {
+    // 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();
+    }
+    constructor(overlay, modalControl) {
+        this.overlay = overlay;
+        this.modalControl = modalControl;
+    }
+    // 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 = `kbq-confirm kbq-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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalService, deps: [{ token: i1.Overlay }, { token: KbqModalControlService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: KbqModalControlService }]; } });
+
+class KbqModalModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, declarations: [KbqModalComponent,
+            KbqModalTitle,
+            KbqModalBody,
+            KbqModalFooter,
+            CssUnitPipe,
+            KbqModalMainAction], imports: [CommonModule,
+            OverlayModule,
+            A11yModule,
+            KbqButtonModule,
+            KbqIconModule], exports: [KbqModalComponent,
+            KbqModalTitle,
+            KbqModalBody,
+            KbqModalFooter,
+            KbqModalMainAction] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, providers: [
+            KbqModalControlService,
+            KbqModalService
+        ], imports: [CommonModule,
+            OverlayModule,
+            A11yModule,
+            KbqButtonModule,
+            KbqIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        A11yModule,
+                        KbqButtonModule,
+                        KbqIconModule
+                    ],
+                    exports: [
+                        KbqModalComponent,
+                        KbqModalTitle,
+                        KbqModalBody,
+                        KbqModalFooter,
+                        KbqModalMainAction
+                    ],
+                    declarations: [
+                        KbqModalComponent,
+                        KbqModalTitle,
+                        KbqModalBody,
+                        KbqModalFooter,
+                        CssUnitPipe,
+                        KbqModalMainAction
+                    ],
+                    providers: [
+                        KbqModalControlService,
+                        KbqModalService
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KbqModalBody, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, ModalSize };
+//# sourceMappingURL=koobiq-components-modal.mjs.map