@koobiq/components 18.7.0 → 18.8.0

package/fesm2022/koobiq-components-modal.mjs

@@ -2,6 +2,7 @@ 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 { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import * as i7 from '@angular/common';
 import { DOCUMENT, NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -302,7 +303,7 @@ class KbqModalComponent extends KbqModalRef {
         this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
     }
     open() {
-        this.focusedElementBeforeOpen = this.document.activeElement;
+        this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
         this.previouslyFocusedElementOrigin = this.focusMonitor['_lastFocusOrigin'];
         this.focusMonitor
             .monitor(this.modalContainer, true)
@@ -574,13 +575,13 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", 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: "17.0.0", version: "18.2.6", 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 />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\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                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div\n            kbq-title\n            class=\"kbq-modal-header\"\n            [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n        >\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i\n                        kbq-icon=\"kbq-xmark_16\"\n                        [color]=\"componentColors.Contrast\"\n                    ></i>\n                </button>\n            }\n        </div>\n    }\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div\n            class=\"kbq-modal-footer\"\n            [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n        >\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\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                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button\n                            kbq-button\n                            (click)=\"onClickOkCancel('cancel')\"\n                        >\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\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            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"kbqOkType\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\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)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius);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)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.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);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.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) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-5xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", 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 />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\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 cdkTrapFocus class=\"kbq-modal-content\">\n                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div kbq-title class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i kbq-icon=\"kbq-xmark_16\" [color]=\"componentColors.Contrast\"></i>\n                </button>\n            }\n        </div>\n    }\n    <div #modalBody class=\"kbq-modal-body kbq-scrollbar\" [ngStyle]=\"kbqBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\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                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\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            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button kbq-button [attr.autofocus]=\"true\" [color]=\"kbqOkType\" (click)=\"onClickOkCancel('ok')\">\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\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)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius);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)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.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);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.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) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-5xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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 />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\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                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div\n            kbq-title\n            class=\"kbq-modal-header\"\n            [class.kbq-modal-body_top-overflow]=\"isTopOverflow\"\n        >\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i\n                        kbq-icon=\"kbq-xmark_16\"\n                        [color]=\"componentColors.Contrast\"\n                    ></i>\n                </button>\n            }\n        </div>\n    }\n    <div\n        #modalBody\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [ngStyle]=\"kbqBodyStyle\"\n        (scroll)=\"checkOverflow()\"\n    >\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div\n            class=\"kbq-modal-footer\"\n            [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\"\n        >\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\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                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button\n                            kbq-button\n                            (click)=\"onClickOkCancel('cancel')\"\n                        >\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\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            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [color]=\"kbqOkType\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button\n                    kbq-button\n                    (click)=\"onClickOkCancel('cancel')\"\n                >\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\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)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius);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)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.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);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.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) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-5xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
+                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\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 cdkTrapFocus class=\"kbq-modal-content\">\n                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div kbq-title class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i kbq-icon=\"kbq-xmark_16\" [color]=\"componentColors.Contrast\"></i>\n                </button>\n            }\n        </div>\n    }\n    <div #modalBody class=\"kbq-modal-body kbq-scrollbar\" [ngStyle]=\"kbqBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\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                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\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            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button kbq-button [attr.autofocus]=\"true\" [color]=\"kbqOkType\" (click)=\"onClickOkCancel('ok')\">\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\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)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius);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)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.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);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.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) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-5xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 0;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\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]
@@ -675,10 +676,7 @@ class KbqModalTitle {
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqModalTitle, deps: [{ token: KbqModalComponent }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqModalTitle, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "class.kbq-modal-header_closable": "modal.kbqClosable" }, classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
-        <div
-            class="kbq-modal-title"
-            kbq-title
-        >
+        <div class="kbq-modal-title" kbq-title>
             <ng-content />
         </div>
 
@@ -689,10 +687,7 @@ class KbqModalTitle {
                 (click)="modal.onClickCloseBtn()"
                 kbq-button
             >
-                <i
-                    [color]="modal.componentColors.Contrast"
-                    kbq-icon="kbq-xmark_16"
-                ></i>
+                <i [color]="modal.componentColors.Contrast" kbq-icon="kbq-xmark_16"></i>
             </button>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
@@ -702,10 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
             args: [{
                     selector: `[kbq-modal-title], kbq-modal-title, [kbqModalTitle]`,
                     template: `
-        <div
-            class="kbq-modal-title"
-            kbq-title
-        >
+        <div class="kbq-modal-title" kbq-title>
             <ng-content />
         </div>
 
@@ -716,10 +708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 (click)="modal.onClickCloseBtn()"
                 kbq-button
             >
-                <i
-                    [color]="modal.componentColors.Contrast"
-                    kbq-icon="kbq-xmark_16"
-                ></i>
+                <i [color]="modal.componentColors.Contrast" kbq-icon="kbq-xmark_16"></i>
             </button>
         }
     `,