@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/fesm2022/koobiq-components-modal.mjs

@@ -18,6 +18,14 @@ import * as i7 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
 import { ComponentPortal } from '@angular/cdk/portal';
 
+/**
+ * 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 KbqModalControlService {
     // Track singleton afterAllClose through over the injection tree
     get afterAllClose() {
@@ -71,7 +79,8 @@ class KbqModalControlService {
     handleMultipleMasks(modalRef) {
         const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
         if (modals.filter((modal) => modal.kbqVisible).length > 1) {
-            const otherModals = modals.splice(0, modals.length - 1)
+            const otherModals = modals
+                .splice(0, modals.length - 1)
                 .filter((modal) => modal.kbqVisible && modal.kbqMask);
             // hide other masks
             setTimeout(() => {
@@ -100,14 +109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                     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;
@@ -150,18 +151,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
 // Duration when perform animations (ms)
 const MODAL_ANIMATE_DURATION = 200;
 class KbqModalComponent extends KbqModalRef {
-    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; }
+    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.kbqAfterOpen.asObservable();
@@ -274,16 +299,15 @@ class KbqModalComponent extends KbqModalRef {
         const offsetHeight = nativeElement.offsetHeight;
         const scrollHeight = nativeElement.scrollHeight;
         this.isTopOverflow = scrollTop > 0;
-        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
+        this.isBottomOverflow = (scrollTop + offsetHeight) < scrollHeight;
     }
     open() {
         this.focusedElementBeforeOpen = this.document.activeElement;
-        this.focusMonitor.monitor(this.modalContainer, true)
+        this.previouslyFocusedElementOrigin = this.focusMonitor['_lastFocusOrigin'];
+        this.focusMonitor
+            .monitor(this.modalContainer, true)
             .pipe(take(1))
-            .subscribe((origin) => {
-            this.previouslyFocusedElementOrigin = origin;
-            this.focusMonitor.stopMonitoring(this.modalContainer);
-        });
+            .subscribe(() => this.focusMonitor.stopMonitoring(this.modalContainer));
         this.changeVisibleFromInside(true);
     }
     close(result) {
@@ -336,7 +360,7 @@ class KbqModalComponent extends KbqModalRef {
     }
     onKeyDown(event) {
         // tslint:disable-next-line:deprecation .key isn't supported in Edge
-        if (event.keyCode === ESCAPE && this.container && (this.container instanceof OverlayRef)) {
+        if (event.keyCode === ESCAPE && this.container && this.container instanceof OverlayRef) {
             this.close();
             event.preventDefault();
         }
@@ -417,7 +441,7 @@ class KbqModalComponent extends KbqModalRef {
         const result = this.getButtonCallableProp(button, 'onClick');
         if (isPromise(result)) {
             button.loading = true;
-            result.then(() => button.loading = false).catch(() => button.loading = false);
+            result.then(() => (button.loading = false)).catch(() => (button.loading = false));
         }
     }
     // Do rest things when visible state changed
@@ -426,8 +450,7 @@ class KbqModalComponent extends KbqModalRef {
         if (visible) {
             this.changeBodyOverflow(1);
         }
-        return Promise
-            .resolve(animation && this.animateTo(visible))
+        return (Promise.resolve(animation && this.animateTo(visible))
             // Emit open/close event after animations over
             .then(() => {
             if (visible) {
@@ -438,7 +461,7 @@ class KbqModalComponent extends KbqModalRef {
                 // Show/hide scrollbar when animation is over
                 this.changeBodyOverflow();
             }
-        });
+        }));
     }
     // Change kbqVisible from inside
     changeVisibleFromInside(visible, closeResult) {
@@ -474,10 +497,10 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     animateTo(isVisible) {
-        // Figure out the lastest click position when shows up
+        // Figure out the latest 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
+            // so if not postponed to next event-loop, we can't get the latest click position
             window.setTimeout(() => this.updateTransformOrigin());
         }
         this.changeAnimationState(isVisible ? 'enter' : 'leave');
@@ -533,7 +556,7 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /**
-     * Take care of the body's overflow to decide the existense of scrollbar
+     * Take care of the body's overflow to decide the existence of scrollbar
      * @param plusNum The number that the openModals.length will increase soon
      */
     changeBodyOverflow(plusNum = 0) {
@@ -546,13 +569,13 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", 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: "17.2.0", type: KbqModalComponent, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", 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    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [class.kbq-modal_no-footer]=\"!kbqFooter\"\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 [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\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\" (scroll)=\"checkOverflow()\">\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\"\n         class=\"kbq-modal-footer\"\n         [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\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                        [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                    [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            [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-confirm-footer{display:flex;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 .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;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}.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, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.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:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalComponent, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", 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\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    ></ng-container>\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    ></ng-container>\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    ></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<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                ></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *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\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            ></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                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\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\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *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\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\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-confirm-footer{display:flex;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 .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;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}.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, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.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:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;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: "17.2.0", 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=\"kbqMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"kbqMaskStyle\">\n    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [class.kbq-modal_no-footer]=\"!kbqFooter\"\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 [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\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\" (scroll)=\"checkOverflow()\">\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\"\n         class=\"kbq-modal-footer\"\n         [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\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                        [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                    [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            [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-confirm-footer{display:flex;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 .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;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}.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, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.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:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
+                    }, 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\n        *ngIf=\"kbqMask\"\n        class=\"kbq-modal-mask\"\n        [class.kbq-modal-mask-hidden]=\"hidden\"\n        [ngClass]=\"maskAnimationClassMap\"\n        [ngStyle]=\"kbqMaskStyle\"\n    ></div>\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div\n                cdkTrapFocus\n                class=\"kbq-modal-content\"\n            >\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('default')\"\n                        [ngTemplateOutlet]=\"tplContentDefault\"\n                    ></ng-container>\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('confirm')\"\n                        [ngTemplateOutlet]=\"tplContentConfirm\"\n                    ></ng-container>\n                    <ng-container\n                        *ngSwitchCase=\"isModalType('custom')\"\n                        [ngTemplateOutlet]=\"tplContentCustom\"\n                    ></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<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div\n        *ngIf=\"kbqTitle\"\n        kbq-title\n        class=\"kbq-modal-header\"\n        [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n    >\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container\n                    *ngSwitchCase=\"isTemplateRef(kbqTitle)\"\n                    [ngTemplateOutlet]=\"$any(kbqTitle)\"\n                ></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(kbqTitle)\">\n                    <div [innerHTML]=\"kbqTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button\n            *ngIf=\"kbqClosable\"\n            kbq-button\n            class=\"kbq-modal-close kbq-button_transparent\"\n            [color]=\"'contrast'\"\n            (click)=\"onClickCloseBtn()\"\n        >\n            <i\n                kbq-icon=\"mc-close-L_16\"\n                [color]=\"componentColors.Contrast\"\n            ></i>\n        </button>\n    </div>\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *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\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqFooter || kbqOkText || kbqCancelText\"\n        class=\"kbq-modal-footer\"\n        [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n    >\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container\n                *ngSwitchCase=\"isTemplateRef(kbqFooter)\"\n                [ngTemplateOutlet]=\"$any(kbqFooter)\"\n            ></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                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        kbq-button\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        [color]=\"button.type\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        (click)=\"onButtonClick(button)\"\n                    >\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    *ngIf=\"kbqOkText\"\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n                <button\n                    *ngIf=\"kbqCancelText\"\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\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\n        class=\"kbq-modal-body\"\n        [ngStyle]=\"kbqBodyStyle\"\n    >\n        <ng-container #bodyContainer>\n            <ng-container\n                *ngIf=\"!isComponent(kbqContent)\"\n                [ngSwitch]=\"true\"\n            >\n                <ng-container\n                    *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\n                    *ngSwitchDefault\n                    [ngTemplateOutlet]=\"tplOriginContent\"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"kbqOkText || kbqCancelText\"\n        class=\"kbq-confirm-footer\"\n    >\n        <button\n            *ngIf=\"kbqOkText\"\n            kbq-button\n            [attr.autofocus]=\"true\"\n            [color]=\"kbqOkType\"\n            (click)=\"onClickOkCancel('ok')\"\n        >\n            {{ okText }}\n        </button>\n\n        <button\n            *ngIf=\"kbqCancelText\"\n            kbq-button\n            (click)=\"onClickOkCancel('cancel')\"\n        >\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-confirm-footer{display:flex;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 .kbq-modal-close{position:absolute;top:16px;right:8px}.kbq-modal-wrap{position:fixed;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}.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, 48px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 24px)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top, 0)}.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:var(--kbq-modal-size-content-padding-top-without-header, 24px) var(--kbq-modal-size-content-padding-horizontal, 24px) var(--kbq-modal-size-content-padding-bottom, 8px) var(--kbq-modal-size-content-padding-horizontal, 24px);word-wrap:break-word}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical, 20px) var(--kbq-modal-size-footer-padding-horizontal, 24px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ 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]
@@ -636,33 +659,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
 ////////////
 function isPromise(obj) {
     // tslint:disable-next-line: no-unbound-method
-    return !!obj &&
+    return (!!obj &&
         (typeof obj === 'object' || typeof obj === 'function') &&
         typeof obj.then === 'function' &&
-        typeof obj.catch === 'function';
+        typeof obj.catch === 'function');
 }
 
 class KbqModalTitle {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalTitle, selector: "[kbq-modal-title], kbq-modal-title, [mcModalTitle]", host: { classAttribute: "kbq-modal-header kbq-modal-title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalTitle, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
+        <div
+            class="kbq-modal-title"
+            kbq-title
+        >
+            <ng-content></ng-content>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalTitle, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
-                    selector: `[kbq-modal-title], kbq-modal-title, [mcModalTitle]`,
+                    selector: `[kbq-modal-title], kbq-modal-title, [kbqModalTitle]`,
+                    template: `
+        <div
+            class="kbq-modal-title"
+            kbq-title
+        >
+            <ng-content></ng-content>
+        </div>
+    `,
                     host: {
-                        class: 'kbq-modal-header kbq-modal-title'
+                        class: 'kbq-modal-header'
                     }
                 }]
         }] });
 class KbqModalBody {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalBody, selector: "[kbq-modal-body], kbq-modal-body, [mcModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalBody, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalBody, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[kbq-modal-body], kbq-modal-body, [mcModalBody]`,
+                    selector: `[kbq-modal-body], kbq-modal-body, [kbqModalBody]`,
                     host: {
                         class: 'kbq-modal-body'
                     }
@@ -670,12 +708,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
         }] });
 class KbqModalFooter {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalFooter, selector: "[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqModalFooter, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqModalFooter, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[kbq-modal-footer], kbq-modal-footer, [mcModalFooter]`,
+                    selector: `[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]`,
                     host: {
                         class: 'kbq-modal-footer'
                     }
@@ -703,7 +741,8 @@ class ModalBuilderForService {
         this.changeProps(options);
         this.modalRef.instance.open();
         this.modalRef.instance.kbqAfterClose.subscribe(() => this.destroyModal());
-        this.overlayRef.keydownEvents()
+        this.overlayRef
+            .keydownEvents()
             .pipe(filter((event) => {
             // tslint:disable-next-line:deprecation replacement .key isn't supported in Edge
             return !!(event.keyCode === ESCAPE && options.kbqCloseByESC);