@koobiq/components 16.0.0-beta.5 → 16.0.0-beta.7

package/fesm2022/koobiq-components-modal.mjs

@@ -1,20 +1,22 @@
+import * as i3 from '@angular/cdk/a11y';
+import { A11yModule, FocusTrapFactory, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@angular/common';
+import * as i4 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 { KbqComponentColors } from '@koobiq/components/core';
+import { take, filter } from 'rxjs/operators';
 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 * as i7 from '@koobiq/components/title';
+import { KbqTitleModule } from '@koobiq/components/title';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { filter } from 'rxjs/operators';
 
 class KbqModalControlService {
     // Track singleton afterAllClose through over the injection tree
@@ -68,20 +70,20 @@ class KbqModalControlService {
     }
     handleMultipleMasks(modalRef) {
         const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
-        if (modals.filter((modal) => modal.mcVisible).length > 1) {
+        if (modals.filter((modal) => modal.kbqVisible).length > 1) {
             const otherModals = modals.splice(0, modals.length - 1)
-                .filter((modal) => modal.mcVisible && modal.mcMask);
+                .filter((modal) => modal.kbqVisible && modal.kbqMask);
             // hide other masks
             setTimeout(() => {
                 otherModals.forEach((modal) => {
-                    modal.getInstance().mcMask = false;
+                    modal.getInstance().kbqMask = false;
                     modal.markForCheck();
                 });
             });
             // show other masks on close
             modalRef.afterClose.subscribe(() => {
                 otherModals.forEach((modal) => {
-                    modal.getInstance().mcMask = true;
+                    modal.getInstance().kbqMask = true;
                     modal.markForCheck();
                 });
             });
@@ -127,8 +129,6 @@ 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 = {}));
 
@@ -150,37 +150,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
 // 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 kbqVisible() { return this._kbqVisible; }
+    set kbqVisible(value) { this._kbqVisible = value; }
+    get kbqClosable() { return this._kbqClosable; }
+    set kbqClosable(value) { this._kbqClosable = value; }
+    get kbqMask() { return this._kbqMask; }
+    set kbqMask(value) { this._kbqMask = value; }
+    get kbqMaskClosable() { return this._kbqMaskClosable; }
+    set kbqMaskClosable(value) { this._kbqMaskClosable = value; }
+    get kbqOkLoading() { return this._kbqOkLoading; }
+    set kbqOkLoading(value) { this._kbqOkLoading = value; }
+    get kbqCancelLoading() { return this._kbqCancelLoading; }
+    set kbqCancelLoading(value) { this._kbqCancelLoading = value; }
+    // Observable alias for kbqAfterOpen
     get afterOpen() {
-        return this.mcAfterOpen.asObservable();
+        return this.kbqAfterOpen.asObservable();
     }
-    // Observable alias for mcAfterClose
+    // Observable alias for kbqAfterClose
     get afterClose() {
-        return this.mcAfterClose.asObservable();
+        return this.kbqAfterClose.asObservable();
     }
     get okText() {
-        return this.mcOkText;
+        return this.kbqOkText;
     }
     get cancelText() {
-        return this.mcCancelText;
+        return this.kbqCancelText;
     }
     // Indicate whether this dialog should hidden
     get hidden() {
-        return !this.mcVisible && !this.animationState;
+        return !this.kbqVisible && !this.animationState;
     }
-    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, document) {
+    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, focusMonitor, document) {
         super();
         this.overlay = overlay;
         this.renderer = renderer;
@@ -189,45 +189,46 @@ class KbqModalComponent extends KbqModalRef {
         this.viewContainer = viewContainer;
         this.modalControl = modalControl;
         this.changeDetector = changeDetector;
+        this.focusMonitor = focusMonitor;
         this.document = document;
         this.componentColors = KbqComponentColors;
-        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;
+        this.kbqModalType = 'default';
+        this._kbqVisible = false;
+        this.kbqVisibleChange = new EventEmitter();
+        this.kbqZIndex = 1000;
+        this.kbqSize = ModalSize.Medium;
+        this.kbqCloseByESC = true;
+        this._kbqClosable = true;
+        this._kbqMask = true;
+        this._kbqMaskClosable = false;
         // Trigger when modal open(visible) after animations
-        this.mcAfterOpen = new EventEmitter();
+        this.kbqAfterOpen = new EventEmitter();
         // Trigger when modal leave-animation over
-        this.mcAfterClose = new EventEmitter();
-        this.mcOkType = KbqComponentColors.Contrast;
-        this.mcRestoreFocus = true;
-        this._mcOkLoading = false;
-        this.mcOnOk = new EventEmitter();
-        this._mcCancelLoading = false;
-        this.mcOnCancel = new EventEmitter();
+        this.kbqAfterClose = new EventEmitter();
+        this.kbqOkType = KbqComponentColors.Contrast;
+        this.kbqRestoreFocus = true;
+        this._kbqOkLoading = false;
+        this.kbqOnOk = new EventEmitter();
+        this._kbqCancelLoading = false;
+        this.kbqOnCancel = new EventEmitter();
         // The origin point that animation based on
         this.transformOrigin = '0px 0px 0px';
-        this.mcGetContainer = () => this.overlay.create();
+        this.kbqGetContainer = () => this.overlay.create();
     }
     ngOnInit() {
         // Create component along without View
-        if (this.isComponent(this.mcContent)) {
-            this.createDynamicComponent(this.mcContent);
+        if (this.isComponent(this.kbqContent)) {
+            this.createDynamicComponent(this.kbqContent);
         }
         // Setup default button options
-        if (this.isModalButtons(this.mcFooter)) {
-            this.mcFooter = this.formatModalButtons(this.mcFooter);
+        if (this.isModalButtons(this.kbqFooter)) {
+            this.kbqFooter = this.formatModalButtons(this.kbqFooter);
         }
-        if (this.isComponent(this.mcComponent)) {
-            this.createDynamicComponent(this.mcComponent);
+        if (this.isComponent(this.kbqComponent)) {
+            this.createDynamicComponent(this.kbqComponent);
         }
         // Place the modal dom to elsewhere
-        this.container = typeof this.mcGetContainer === 'function' ? this.mcGetContainer() : this.mcGetContainer;
+        this.container = typeof this.kbqGetContainer === 'function' ? this.kbqGetContainer() : this.kbqGetContainer;
         if (this.container instanceof HTMLElement) {
             this.container.appendChild(this.elementRef.nativeElement);
         }
@@ -240,13 +241,13 @@ class KbqModalComponent extends KbqModalRef {
     }
     // [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
+    // here we can't support "kbqContent"(Component) etc. as inputs that initialized dynamically.
+    // BUT: User also can change "kbqContent" dynamically to trigger UI changes
     // (provided you don't use Component that needs initializations)
     ngOnChanges(changes) {
-        if (changes.mcVisible) {
+        if (changes.kbqVisible) {
             // Do not trigger animation while initializing
-            this.handleVisibleStateChange(this.mcVisible, !changes.mcVisible.firstChange);
+            this.handleVisibleStateChange(this.kbqVisible, !changes.kbqVisible.firstChange);
         }
     }
     ngAfterViewInit() {
@@ -269,14 +270,21 @@ class KbqModalComponent extends KbqModalRef {
     }
     open() {
         this.focusedElementBeforeOpen = this.document.activeElement;
+        this.focusMonitor.monitor(this.modalContainer, true)
+            .pipe(take(1))
+            .subscribe((origin) => {
+            this.previouslyFocusedElementOrigin = origin;
+            this.focusMonitor.stopMonitoring(this.modalContainer);
+        });
         this.changeVisibleFromInside(true);
     }
     close(result) {
-        if (this.mcRestoreFocus) {
-            this.focusedElementBeforeOpen?.focus();
-        }
-        this.changeVisibleFromInside(false, result);
-        this.focusedElementBeforeOpen = null;
+        this.changeVisibleFromInside(false, result).then(() => {
+            if (this.kbqRestoreFocus && this.focusedElementBeforeOpen) {
+                this.focusMonitor.focusVia(this.focusedElementBeforeOpen, this.previouslyFocusedElementOrigin);
+                this.focusedElementBeforeOpen = null;
+            }
+        });
     }
     // Destroy equals Close
     destroy(result) {
@@ -307,16 +315,16 @@ class KbqModalComponent extends KbqModalRef {
         return this.getElement().getElementsByClassName('kbq-modal-footer').item(0);
     }
     onClickMask($event) {
-        if (this.mcMask &&
-            this.mcMaskClosable &&
+        if (this.kbqMask &&
+            this.kbqMaskClosable &&
             $event.target.classList.contains('kbq-modal-wrap') &&
-            this.mcVisible) {
+            this.kbqVisible) {
             this.onClickOkCancel('cancel');
         }
     }
     // tslint:disable-next-line: no-reserved-keywords
     isModalType(type) {
-        return this.mcModalType === type;
+        return this.kbqModalType === type;
     }
     onKeyDown(event) {
         // tslint:disable-next-line:deprecation .key isn't supported in Edge
@@ -326,7 +334,7 @@ class KbqModalComponent extends KbqModalRef {
         }
         // tslint:disable-next-line:deprecation .key isn't supported in Edge
         if (event.ctrlKey && event.keyCode === ENTER) {
-            if (this.mcModalType === 'confirm') {
+            if (this.kbqModalType === 'confirm') {
                 this.triggerOk();
             }
             this.getElement().querySelector('[kbq-modal-main-action]')?.click();
@@ -335,22 +343,25 @@ class KbqModalComponent extends KbqModalRef {
     }
     // AoT
     onClickCloseBtn() {
-        if (this.mcVisible) {
+        if (this.kbqVisible) {
             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];
+        this.handleCloseResult(type, (doClose) => doClose !== false);
+    }
+    handleCloseResult(triggerType, canClose) {
+        const trigger = { ok: this.kbqOnOk, cancel: this.kbqOnCancel }[triggerType];
+        const loadingKey = { ok: 'kbqOkLoading', cancel: 'kbqCancelLoading' }[triggerType];
         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);
+            const caseClose = (doClose) => canClose(doClose) && this.close(doClose);
             if (isPromise(result)) {
                 this[loadingKey] = true;
                 const handleThen = (doClose) => {
@@ -390,7 +401,7 @@ class KbqModalComponent extends KbqModalRef {
         }
         return typeof value === 'function' ? value.apply(options, args) : value;
     }
-    // On mcFooter's modal button click
+    // On kbqFooter's modal button click
     // AoT
     onButtonClick(button) {
         // Call onClick directly
@@ -412,21 +423,21 @@ class KbqModalComponent extends KbqModalRef {
             // Emit open/close event after animations over
             .then(() => {
             if (visible) {
-                this.mcAfterOpen.emit();
+                this.kbqAfterOpen.emit();
             }
             else {
-                this.mcAfterClose.emit(closeResult);
+                this.kbqAfterClose.emit(closeResult);
                 // Show/hide scrollbar when animation is over
                 this.changeBodyOverflow();
             }
         });
     }
-    // Change mcVisible from inside
+    // Change kbqVisible from inside
     changeVisibleFromInside(visible, closeResult) {
-        if (this.mcVisible !== visible) {
-            // Change mcVisible value immediately
-            this.mcVisible = visible;
-            this.mcVisibleChange.emit(visible);
+        if (this.kbqVisible !== visible) {
+            // Change kbqVisible value immediately
+            this.kbqVisible = visible;
+            this.kbqVisibleChange.emit(visible);
             return this.handleVisibleStateChange(visible, true, closeResult);
         }
         return Promise.resolve();
@@ -497,9 +508,9 @@ class KbqModalComponent extends KbqModalRef {
             parent: this.viewContainer.injector
         });
         this.contentComponentRef = factory.create(childInjector);
-        if (this.mcComponentParams) {
+        if (this.kbqComponentParams) {
             // @ts-ignore
-            Object.assign(this.contentComponentRef.instance, this.mcComponentParams);
+            Object.assign(this.contentComponentRef.instance, this.kbqComponentParams);
         }
         // Do the first change detection immediately
         // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
@@ -526,78 +537,78 @@ class KbqModalComponent extends KbqModalRef {
             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\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                <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\">\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\n        <button *ngIf=\"mcClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\">\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\">\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]=\"componentColors.Contrast\"\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            <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 class=\"kbq-confirm-footer\" *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 *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-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);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-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline: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;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.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 }); }
+    /** @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: i3.FocusMonitor }, { 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: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", kbqZIndex: "kbqZIndex", kbqWidth: "kbqWidth", kbqSize: "kbqSize", kbqWrapClassName: "kbqWrapClassName", kbqClassName: "kbqClassName", kbqStyle: "kbqStyle", kbqTitle: "kbqTitle", kbqCloseByESC: "kbqCloseByESC", kbqClosable: "kbqClosable", kbqMask: "kbqMask", kbqMaskClosable: "kbqMaskClosable", kbqMaskStyle: "kbqMaskStyle", kbqBodyStyle: "kbqBodyStyle", kbqOkText: "kbqOkText", kbqOkType: "kbqOkType", kbqRestoreFocus: "kbqRestoreFocus", kbqOkLoading: "kbqOkLoading", kbqOnOk: "kbqOnOk", kbqCancelText: "kbqCancelText", kbqCancelLoading: "kbqCancelLoading", kbqOnCancel: "kbqOnCancel", kbqGetContainer: "kbqGetContainer" }, outputs: { kbqVisibleChange: "kbqVisibleChange", kbqAfterOpen: "kbqAfterOpen", kbqAfterClose: "kbqAfterClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, 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=\"kbqMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"kbqMaskStyle\"\n         [style.zIndex]=\"kbqZIndex\">\n    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n         [style.zIndex]=\"kbqZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"kbqStyle\"\n             [style.width]=\"kbqWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\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=\"kbqTitle\" class=\"kbq-modal-header\" kbq-title>\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(kbqTitle)\" [ngTemplateOutlet]=\"$any(kbqTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button *ngIf=\"kbqClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"kbqBodyStyle\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(kbqContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(kbqContent)\" [ngTemplateOutlet]=\"$any(kbqContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\" class=\"kbq-modal-footer\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(kbqFooter)\" [ngTemplateOutlet]=\"$any(kbqFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\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=\"kbqOkText\"\n                    kbq-button\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"kbqCancelText\" 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]=\"kbqBodyStyle\">\n            <ng-container #bodyContainer>\n                <ng-container *ngIf=\"!isComponent(kbqContent)\" [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                                  [ngTemplateOutlet]=\"$any(kbqContent)\">\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                </ng-container>\n            </ng-container>\n    </div>\n    <div class=\"kbq-confirm-footer\" *ngIf=\"kbqOkText || kbqCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"kbqOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"kbqOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button *ngIf=\"kbqCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);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-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline: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;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.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: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { 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\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                <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\">\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\n        <button *ngIf=\"mcClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\">\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\">\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]=\"componentColors.Contrast\"\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            <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 class=\"kbq-confirm-footer\" *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 *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-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);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-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline: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;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.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: [{
+                    }, 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=\"kbqMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"kbqMaskStyle\"\n         [style.zIndex]=\"kbqZIndex\">\n    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n         [style.zIndex]=\"kbqZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"kbqStyle\"\n             [style.width]=\"kbqWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\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=\"kbqTitle\" class=\"kbq-modal-header\" kbq-title>\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(kbqTitle)\" [ngTemplateOutlet]=\"$any(kbqTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button *ngIf=\"kbqClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"kbqBodyStyle\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(kbqContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(kbqContent)\" [ngTemplateOutlet]=\"$any(kbqContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                    <div [innerHTML]=\"kbqContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\" class=\"kbq-modal-footer\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(kbqFooter)\" [ngTemplateOutlet]=\"$any(kbqFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(kbqFooter)\">\n                <div [innerHTML]=\"kbqFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(kbqFooter)\">\n                <ng-container *ngFor=\"let button of $any(kbqFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\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=\"kbqOkText\"\n                    kbq-button\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"kbqCancelText\" 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]=\"kbqBodyStyle\">\n            <ng-container #bodyContainer>\n                <ng-container *ngIf=\"!isComponent(kbqContent)\" [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isTemplateRef(kbqContent)\"\n                                  [ngTemplateOutlet]=\"$any(kbqContent)\">\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"isNonEmptyString(kbqContent)\">\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                </ng-container>\n            </ng-container>\n    </div>\n    <div class=\"kbq-confirm-footer\" *ngIf=\"kbqOkText || kbqCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"kbqOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"kbqOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button *ngIf=\"kbqCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);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-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline: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;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.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: i3.FocusMonitor }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { mcModalType: [{
+                }] }]; }, propDecorators: { kbqModalType: [{
                 type: Input
-            }], mcComponent: [{
+            }], kbqComponent: [{
                 type: Input
-            }], mcContent: [{
+            }], kbqContent: [{
                 type: Input
-            }], mcComponentParams: [{
+            }], kbqComponentParams: [{
                 type: Input
-            }], mcFooter: [{
+            }], kbqFooter: [{
                 type: Input
-            }], mcVisible: [{
+            }], kbqVisible: [{
                 type: Input
-            }], mcVisibleChange: [{
+            }], kbqVisibleChange: [{
                 type: Output
-            }], mcZIndex: [{
+            }], kbqZIndex: [{
                 type: Input
-            }], mcWidth: [{
+            }], kbqWidth: [{
                 type: Input
-            }], mcSize: [{
+            }], kbqSize: [{
                 type: Input
-            }], mcWrapClassName: [{
+            }], kbqWrapClassName: [{
                 type: Input
-            }], mcClassName: [{
+            }], kbqClassName: [{
                 type: Input
-            }], mcStyle: [{
+            }], kbqStyle: [{
                 type: Input
-            }], mcTitle: [{
+            }], kbqTitle: [{
                 type: Input
-            }], mcCloseByESC: [{
+            }], kbqCloseByESC: [{
                 type: Input
-            }], mcClosable: [{
+            }], kbqClosable: [{
                 type: Input
-            }], mcMask: [{
+            }], kbqMask: [{
                 type: Input
-            }], mcMaskClosable: [{
+            }], kbqMaskClosable: [{
                 type: Input
-            }], mcMaskStyle: [{
+            }], kbqMaskStyle: [{
                 type: Input
-            }], mcBodyStyle: [{
+            }], kbqBodyStyle: [{
                 type: Input
-            }], mcAfterOpen: [{
+            }], kbqAfterOpen: [{
                 type: Output
-            }], mcAfterClose: [{
+            }], kbqAfterClose: [{
                 type: Output
-            }], mcOkText: [{
+            }], kbqOkText: [{
                 type: Input
-            }], mcOkType: [{
+            }], kbqOkType: [{
                 type: Input
-            }], mcRestoreFocus: [{
+            }], kbqRestoreFocus: [{
                 type: Input
-            }], mcOkLoading: [{
+            }], kbqOkLoading: [{
                 type: Input
-            }], mcOnOk: [{
+            }], kbqOnOk: [{
                 type: Input
             }, {
                 type: Output
-            }], mcCancelText: [{
+            }], kbqCancelText: [{
                 type: Input
-            }], mcCancelLoading: [{
+            }], kbqCancelLoading: [{
                 type: Input
-            }], mcOnCancel: [{
+            }], kbqOnCancel: [{
                 type: Input
             }, {
                 type: Output
@@ -613,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             }], modalBody: [{
                 type: ViewChild,
                 args: ['modalBody']
-            }], mcGetContainer: [{
+            }], kbqGetContainer: [{
                 type: Input
             }] } });
 ////////////
@@ -680,18 +691,18 @@ class ModalBuilderForService {
     constructor(overlay, options = {}) {
         this.overlay = overlay;
         this.createModal();
-        if (!('mcGetContainer' in options)) {
-            options.mcGetContainer = undefined;
+        if (!('kbqGetContainer' in options)) {
+            options.kbqGetContainer = undefined;
         }
         this.changeProps(options);
         this.modalRef.instance.open();
-        this.modalRef.instance.mcAfterClose.subscribe(() => this.destroyModal());
+        this.modalRef.instance.kbqAfterClose.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);
+            return !!(event.keyCode === ESCAPE && options.kbqCloseByESC);
         }))
-            .subscribe(() => this.modalRef.instance.close());
+            .subscribe(() => this.getInstance()?.handleCloseResult('cancel', () => true));
     }
     getInstance() {
         return this.modalRef && this.modalRef.instance;
@@ -732,44 +743,44 @@ class KbqModalService {
         this.modalControl.closeAll();
     }
     create(options = {}) {
-        if (typeof options.mcOnCancel !== 'function') {
+        if (typeof options.kbqOnCancel !== 'function') {
             // Leave a empty function to close this modal by default
             // tslint:disable-next-line
-            options.mcOnCancel = () => { };
+            options.kbqOnCancel = () => { };
         }
-        if (!('mcCloseByESC' in options)) {
-            options.mcCloseByESC = true;
+        if (!('kbqCloseByESC' in options)) {
+            options.kbqCloseByESC = true;
         }
         // Remove the Cancel button if the user not specify a Cancel button
-        if (!('mcCancelText' in options)) {
-            options.mcCancelText = undefined;
+        if (!('kbqCancelText' in options)) {
+            options.kbqCancelText = undefined;
         }
         // Remove the Ok button if the user not specify a Ok button
-        if (!('mcOkText' in options)) {
-            options.mcOkText = undefined;
+        if (!('kbqOkText' in options)) {
+            options.kbqOkText = undefined;
         }
         // Remove the footer if the user not specify a footer
-        if (!('mcFooter' in options)) {
-            options.mcFooter = undefined;
+        if (!('kbqFooter' in options)) {
+            options.kbqFooter = 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.`);
+        if ('kbqFooter' in options) {
+            console.warn(`The Confirm-Modal doesn't support "kbqFooter", this property will be ignored.`);
         }
         // NOTE: only support function currently by calling confirm()
-        if (typeof options.mcOnOk !== 'function') {
+        if (typeof options.kbqOnOk !== 'function') {
             // Leave a empty function to close this modal by default
             // tslint:disable-next-line
-            options.mcOnOk = () => { };
+            options.kbqOnOk = () => { };
         }
-        options.mcModalType = 'confirm';
-        options.mcClassName = `kbq-confirm kbq-confirm-${confirmType} ${options.mcClassName || ''}`;
+        options.kbqModalType = 'confirm';
+        options.kbqClassName = `kbq-confirm kbq-confirm-${confirmType} ${options.kbqClassName || ''}`;
         return this.create(options);
     }
     open(options = {}) {
-        options.mcModalType = 'custom';
+        options.kbqModalType = 'custom';
         return this.create(options);
     }
     success(options = {}) {
@@ -800,19 +811,22 @@ class KbqModalModule {
             OverlayModule,
             A11yModule,
             KbqButtonModule,
-            KbqIconModule], exports: [KbqModalComponent,
+            KbqIconModule,
+            KbqTitleModule], 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
+            KbqModalService,
+            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
         ], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             KbqButtonModule,
-            KbqIconModule] }); }
+            KbqIconModule,
+            KbqTitleModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, decorators: [{
             type: NgModule,
@@ -822,7 +836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         OverlayModule,
                         A11yModule,
                         KbqButtonModule,
-                        KbqIconModule
+                        KbqIconModule,
+                        KbqTitleModule
                     ],
                     exports: [
                         KbqModalComponent,
@@ -841,7 +856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     ],
                     providers: [
                         KbqModalControlService,
-                        KbqModalService
+                        KbqModalService,
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
                     ]
                 }]
         }] });