@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-modal.mjs

@@ -1,20 +1,18 @@
-import * as i3 from '@angular/cdk/a11y';
-import { CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
+import { FocusMonitor, CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
+import { Overlay, OverlayRef, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
-import { DOCUMENT, NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, Optional, SkipSelf, Injectable, inject, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Input, ViewChild, ViewChildren, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, InjectionToken, isDevMode, NgModule } from '@angular/core';
-import { ESCAPE, ENTER } from '@koobiq/cdk/keycodes';
-import * as i4 from '@koobiq/components/button';
+import { Pipe, inject, Injectable, Renderer2, ComponentFactoryResolver, ElementRef, ViewContainerRef, ChangeDetectorRef, output, EventEmitter, viewChild, viewChildren, TemplateRef, Type, Injector, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, InjectionToken, isDevMode, NgModule } from '@angular/core';
+import * as i1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import { KbqComponentColors } from '@koobiq/components/core';
-import * as i5 from '@koobiq/components/icon';
+import { KbqComponentColors, ESCAPE, ENTER, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/title';
+import { KbqTitleModule, KbqTitleDirective } from '@koobiq/components/title';
 import { take, switchMap, filter } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { KbqTitleDirective, KbqTitleModule } from '@koobiq/components/title';
 import { ComponentPortal } from '@angular/cdk/portal';
 
 /**
@@ -29,10 +27,10 @@ class CssUnitPipe {
         const formatted = +value;
         return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: CssUnitPipe, isStandalone: true, name: "toCssUnit" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: CssUnitPipe, isStandalone: true, name: "toCssUnit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CssUnitPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CssUnitPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'toCssUnit'
@@ -52,6 +50,18 @@ var ModalSize;
 const MODAL_ANIMATE_DURATION = 300;
 
 class KbqModalControlService {
+    constructor() {
+        this.parentService = inject(KbqModalControlService, { optional: true, skipSelf: true });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.rootOpenModals = this.parentService ? null : [];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.rootAfterAllClose = this.parentService ? null : new Subject();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.rootRegisteredMetaMap = this.parentService ? null : new Map();
+    }
     // Track singleton afterAllClose through over the injection tree
     get afterAllClose() {
         return this.parentService ? this.parentService.afterAllClose : this.rootAfterAllClose;
@@ -64,18 +74,6 @@ class KbqModalControlService {
     get registeredMetaMap() {
         return this.parentService ? this.parentService.registeredMetaMap : this.rootRegisteredMetaMap;
     }
-    constructor(parentService) {
-        this.parentService = parentService;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.rootOpenModals = this.parentService ? null : [];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.rootAfterAllClose = this.parentService ? null : new Subject();
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.rootRegisteredMetaMap = this.parentService ? null : new Map();
-    }
     // Register a modal to listen its open/close
     registerModal(modalRef) {
         if (!this.hasRegistered(modalRef)) {
@@ -143,17 +141,13 @@ class KbqModalControlService {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalControlService, deps: [{ token: KbqModalControlService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalControlService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalControlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalControlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalControlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: KbqModalControlService, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }] });
+        }] });
 
 /** @docs-private */
 class ModalUtil {
@@ -178,36 +172,112 @@ const modalUtilObject = new ModalUtil(
 typeof document === 'undefined' ? undefined : document);
 
 class KbqModalComponent extends KbqModalRef {
+    constructor() {
+        super(...arguments);
+        this.overlay = inject(Overlay);
+        this.renderer = inject(Renderer2);
+        this.cfr = inject(ComponentFactoryResolver);
+        this.elementRef = inject(ElementRef);
+        this.viewContainer = inject(ViewContainerRef);
+        this.modalControl = inject(KbqModalControlService);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.focusMonitor = inject(FocusMonitor);
+        this.document = inject(DOCUMENT);
+        this.componentColors = KbqComponentColors;
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqModalType = 'default';
+        this._kbqVisible = false;
+        this.kbqVisibleChange = output();
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqSize = ModalSize.Medium;
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqCloseByESC = true;
+        this._kbqClosable = true;
+        this._kbqMask = true;
+        this._kbqMaskClosable = false;
+        // Trigger when modal open(visible) after animations
+        this.kbqAfterOpen = new EventEmitter();
+        // Trigger when modal leave-animation over
+        this.kbqAfterClose = new EventEmitter();
+        /** Emitted before the modal begins its closing animation. */
+        this.kbqBeforeClose = new EventEmitter();
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqOkType = KbqComponentColors.Contrast;
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqRestoreFocus = true;
+        this._kbqOkLoading = false;
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqOnOk = new EventEmitter();
+        this._kbqCancelLoading = false;
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqOnCancel = new EventEmitter();
+        this.modalContainer = viewChild.required('modalContainer');
+        this.bodyContainer = viewChild.required('bodyContainer', { read: ViewContainerRef });
+        // Only aim to focus the ok button that needs to be auto focused
+        this.autoFocusedButtons = viewChildren('autoFocusedButton', ...(ngDevMode ? [{ debugName: "autoFocusedButtons", read: ElementRef }] : [{ read: ElementRef }]));
+        // The origin point that animation based on
+        this.transformOrigin = '0px 0px 0px';
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
+        this.kbqGetContainer = () => this.overlay.create();
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqVisible() {
         return this._kbqVisible;
     }
     set kbqVisible(value) {
         this._kbqVisible = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqClosable() {
         return this._kbqClosable;
     }
     set kbqClosable(value) {
         this._kbqClosable = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqMask() {
         return this._kbqMask;
     }
     set kbqMask(value) {
         this._kbqMask = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqMaskClosable() {
         return this._kbqMaskClosable;
     }
     set kbqMaskClosable(value) {
         this._kbqMaskClosable = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqOkLoading() {
         return this._kbqOkLoading;
     }
     set kbqOkLoading(value) {
         this._kbqOkLoading = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get kbqCancelLoading() {
         return this._kbqCancelLoading;
     }
@@ -236,44 +306,6 @@ class KbqModalComponent extends KbqModalRef {
     get hidden() {
         return !this.kbqVisible && !this.animationState;
     }
-    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, focusMonitor) {
-        super();
-        this.overlay = overlay;
-        this.renderer = renderer;
-        this.cfr = cfr;
-        this.elementRef = elementRef;
-        this.viewContainer = viewContainer;
-        this.modalControl = modalControl;
-        this.changeDetector = changeDetector;
-        this.focusMonitor = focusMonitor;
-        this.document = inject(DOCUMENT);
-        this.componentColors = KbqComponentColors;
-        this.kbqModalType = 'default';
-        this._kbqVisible = false;
-        this.kbqVisibleChange = new EventEmitter();
-        this.kbqSize = ModalSize.Medium;
-        this.kbqCloseByESC = true;
-        this._kbqClosable = true;
-        this._kbqMask = true;
-        this._kbqMaskClosable = false;
-        // Trigger when modal open(visible) after animations
-        this.kbqAfterOpen = new EventEmitter();
-        // Trigger when modal leave-animation over
-        this.kbqAfterClose = new EventEmitter();
-        /** Emitted before the modal begins its closing animation. */
-        this.kbqBeforeClose = new EventEmitter();
-        this.kbqOkType = KbqComponentColors.Contrast;
-        this.kbqRestoreFocus = true;
-        this._kbqOkLoading = false;
-        this.kbqOnOk = new EventEmitter();
-        this._kbqCancelLoading = false;
-        this.kbqOnCancel = new EventEmitter();
-        this.isTopOverflow = false;
-        this.isBottomOverflow = false;
-        // The origin point that animation based on
-        this.transformOrigin = '0px 0px 0px';
-        this.kbqGetContainer = () => this.overlay.create();
-    }
     // [NOTE] NOT available when using by service!
     // Because ngOnChanges never be called when using by service,
     // here we can't support "kbqContent"(Component) etc. as inputs that initialized dynamically.
@@ -312,33 +344,23 @@ class KbqModalComponent extends KbqModalRef {
     ngAfterViewInit() {
         // If using Component, it is the time to attach View while bodyContainer is ready
         if (this.contentComponentRef) {
-            this.bodyContainer.insert(this.contentComponentRef.hostView);
+            this.bodyContainer().insert(this.contentComponentRef.hostView);
         }
         this.getElement().getElementsByTagName('button')[0]?.focus();
         this.getElement().querySelector('button[autofocus]')?.focus();
-        this.checkOverflow();
     }
     ngOnDestroy() {
         if (this.container instanceof OverlayRef) {
             this.container.dispose();
         }
     }
-    checkOverflow() {
-        const nativeElement = this.modalBody?.nativeElement;
-        if (!nativeElement) {
-            return;
-        }
-        const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
-        this.isTopOverflow = scrollTop > 0;
-        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
-    }
     open() {
         this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
         this.previouslyFocusedElementOrigin = this.focusMonitor['_lastFocusOrigin'];
         this.focusMonitor
-            .monitor(this.modalContainer, true)
+            .monitor(this.modalContainer(), true)
             .pipe(take(1))
-            .subscribe(() => this.focusMonitor.stopMonitoring(this.modalContainer));
+            .subscribe(() => this.focusMonitor.stopMonitoring(this.modalContainer()));
         this.changeVisibleFromInside(true);
     }
     close(result) {
@@ -411,7 +433,7 @@ class KbqModalComponent extends KbqModalRef {
     onClickOkCancel(type) {
         this.handleCloseResult(type, (doClose) => doClose !== false);
     }
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     handleCloseResult(triggerType, canClose) {
         const trigger = { ok: this.kbqOnOk, cancel: this.kbqOnCancel }[triggerType];
         const loadingKey = { ok: 'kbqOkLoading', cancel: 'kbqCancelLoading' }[triggerType];
@@ -421,7 +443,7 @@ class KbqModalComponent extends KbqModalRef {
         else if (typeof trigger === 'function') {
             const result = trigger(this.getContentComponent());
             // Users can return "false" to prevent closing by default
-            // eslint-disable-next-line @typescript-eslint/ban-types
+            // eslint-disable-next-line @typescript-eslint/no-empty-object-type
             const caseClose = (doClose) => canClose(doClose) && this.close(doClose);
             if (isPromise(result)) {
                 this[loadingKey] = true;
@@ -437,28 +459,28 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     // AoT
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     isNonEmptyString(value) {
         return typeof value === 'string' && value !== '';
     }
     // AoT
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     isTemplateRef(value) {
         return value instanceof TemplateRef;
     }
     // AoT
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     isComponent(value) {
         return value instanceof Type;
     }
     // AoT
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     isModalButtons(value) {
         return Array.isArray(value) && value.length > 0;
     }
     // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
     // AoT
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     getButtonCallableProp(options, prop) {
         const value = options[prop];
         const args = [];
@@ -467,6 +489,15 @@ class KbqModalComponent extends KbqModalRef {
         }
         return typeof value === 'function' ? value.apply(options, args) : value;
     }
+    /** Returns the full set of classes for the modal container: base, custom class name, size and animation classes. */
+    getContainerClasses() {
+        const classes = ['kbq-modal-container', this.kbqClassName, `kbq-modal_${this.kbqSize}`];
+        if (this.modalAnimationClassMap) {
+            const animationClasses = this.modalAnimationClassMap;
+            classes.push(...Object.keys(animationClasses).filter((key) => animationClasses[key]));
+        }
+        return classes.filter(Boolean).join(' ');
+    }
     // On kbqFooter's modal button click
     // AoT
     onButtonClick(button) {
@@ -474,7 +505,7 @@ class KbqModalComponent extends KbqModalRef {
         const result = this.getButtonCallableProp(button, 'onClick');
         if (isPromise(result)) {
             button.loading = true;
-            // eslint-disable-next-line @typescript-eslint/ban-types
+            // eslint-disable-next-line @typescript-eslint/no-empty-object-type
             result.then(() => (button.loading = false)).catch(() => (button.loading = false));
         }
     }
@@ -584,18 +615,13 @@ class KbqModalComponent extends KbqModalRef {
             parent: this.viewContainer.injector
         });
         this.contentComponentRef = factory.create(childInjector);
-        if (this.kbqComponentParams) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            Object.assign(this.contentComponentRef.instance, this.kbqComponentParams);
-        }
         // Do the first change detection immediately
         // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
         this.contentComponentRef.changeDetectorRef.detectChanges();
     }
     // Update transform-origin to the last click position on document
     updateTransformOrigin() {
-        const modalElement = this.modalContainer.nativeElement;
+        const modalElement = this.modalContainer().nativeElement;
         const lastPosition = modalUtilObject.getLastClickPosition();
         if (lastPosition) {
             this.transformOrigin = `${lastPosition.x - modalElement.offsetLeft}px ${lastPosition.y - modalElement.offsetTop}px 0px`;
@@ -614,38 +640,36 @@ class KbqModalComponent extends KbqModalRef {
             this.renderer.removeStyle(this.document.body, 'overflow');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqModalComponent, isStandalone: true, 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", kbqBeforeClose: "kbqBeforeClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" }, classAttribute: "kbq-modal" }, 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        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal-container {{ 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                    type=\"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)}@keyframes mcFadeIn{0%{opacity:0}to{opacity:1}}@keyframes mcFadeOut{0%{opacity:1}to{opacity:0}}@keyframes mcZoomIn{0%{opacity:0;transform:translateY(-25%)}to{opacity:1;transform:scale(1)}}@keyframes mcZoomOut{0%{transform:scale(1)}to{opacity:0;transform:translateY(-30%)}}.fade-enter,.fade-appear,.fade-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-active,.fade-appear.fade-appear-active{animation-name:mcFadeIn;animation-play-state:running}.fade-leave.fade-leave-active{animation-name:mcFadeOut;animation-play-state:running;pointer-events:none}.className-enter,.className-appear{opacity:0;animation-timing-function:ease-out}.className-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-appear,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-active,.zoom-appear.zoom-appear-active{animation-name:mcZoomIn;animation-play-state:running}.zoom-leave.zoom-leave-active{animation-name:mcZoomOut;animation-play-state:running;pointer-events:none}.className-enter,.className-appear{transform:translateY(-25%);animation-timing-function:cubic-bezier(.075,.82,.165,1)}.className-leave{transform:translate(0);animation-timing-function:cubic-bezier(.785,.135,.15,.86)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.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;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.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);overflow-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-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal-container .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-style:var(--kbq-typography-title-font-style);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-style:var(--kbq-typography-text-normal-font-style);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-6xl);--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: 1px;--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);--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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqModalComponent, isStandalone: true, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", kbqWidth: "kbqWidth", kbqSize: "kbqSize", kbqWrapClassName: "kbqWrapClassName", kbqClassName: "kbqClassName", kbqStyle: "kbqStyle", kbqTitle: "kbqTitle", kbqCaption: "kbqCaption", 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", kbqBeforeClose: "kbqBeforeClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" }, classAttribute: "kbq-modal" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, isSignal: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef, isSignal: true }], 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            [class]=\"maskAnimationClassMap\"\n            [style]=\"kbqMaskStyle\"\n        ></div>\n    }\n\n    <div\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            [class]=\"getContainerClasses()\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [style]=\"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 || kbqCaption) {\n        <div class=\"kbq-modal-header\" [kbqOverflowShadowTop]=\"modalBodyOverflow\">\n            <div class=\"kbq-modal-header-content\">\n                @if (kbqTitle) {\n                    <div class=\"kbq-modal-title\" kbq-title>\n                        @switch (true) {\n                            @case (isTemplateRef(kbqTitle)) {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                            }\n                            @case (isNonEmptyString(kbqTitle)) {\n                                <div #kbqTitleText [innerHTML]=\"kbqTitle\"></div>\n                            }\n                        }\n                    </div>\n                }\n                @if (kbqCaption) {\n                    <div class=\"kbq-modal-caption\" kbq-title>\n                        @switch (true) {\n                            @case (isTemplateRef(kbqCaption)) {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqCaption)\" />\n                            }\n                            @case (isNonEmptyString(kbqCaption)) {\n                                <div #kbqTitleText [innerHTML]=\"kbqCaption\"></div>\n                            }\n                        }\n                    </div>\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    type=\"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\n        #modalBodyOverflow=\"kbqOverflowShadowContainer\"\n        kbqOverflowShadowContainer\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [style]=\"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 (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [kbqOverflowShadowBottom]=\"modalBodyOverflow\">\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\" [style]=\"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)}@keyframes mcFadeIn{0%{opacity:0}to{opacity:1}}@keyframes mcFadeOut{0%{opacity:1}to{opacity:0}}@keyframes mcZoomIn{0%{opacity:0;transform:translateY(-25%)}to{opacity:1;transform:scale(1)}}@keyframes mcZoomOut{0%{transform:scale(1)}to{opacity:0;transform:translateY(-30%)}}.fade-enter,.fade-appear,.fade-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-active,.fade-appear.fade-appear-active{animation-name:mcFadeIn;animation-play-state:running}.fade-leave.fade-leave-active{animation-name:mcFadeOut;animation-play-state:running;pointer-events:none}.fade-enter,.fade-appear{opacity:0;animation-timing-function:ease-out}.fade-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-appear,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-active,.zoom-appear.zoom-appear-active{animation-name:mcZoomIn;animation-play-state:running}.zoom-leave.zoom-leave-active{animation-name:mcZoomOut;animation-play-state:running;pointer-events:none}.zoom-enter,.zoom-appear{transform:translateY(-25%);animation-timing-function:cubic-bezier(.075,.82,.165,1)}.zoom-leave{transform:translate(0);animation-timing-function:cubic-bezier(.785,.135,.15,.86)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.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;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.kbq-modal-header-content{display:flex;flex:1;flex-direction:column;min-width:0}.kbq-modal-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.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);overflow-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-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);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-caption,.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-6xl);--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: 1px;--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);--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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["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: "19.2.21", ngImport: i0, type: KbqModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-modal', imports: [
                         CdkTrapFocus,
-                        NgStyle,
-                        NgClass,
                         KbqButtonModule,
                         KbqIconModule,
                         CssUnitPipe,
-                        NgTemplateOutlet
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        NgTemplateOutlet,
+                        KbqOverflowShadowContainer,
+                        KbqOverflowShadowTop,
+                        KbqOverflowShadowBottom,
+                        KbqTitleModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-modal',
                         '(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        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal-container {{ 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                    type=\"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)}@keyframes mcFadeIn{0%{opacity:0}to{opacity:1}}@keyframes mcFadeOut{0%{opacity:1}to{opacity:0}}@keyframes mcZoomIn{0%{opacity:0;transform:translateY(-25%)}to{opacity:1;transform:scale(1)}}@keyframes mcZoomOut{0%{transform:scale(1)}to{opacity:0;transform:translateY(-30%)}}.fade-enter,.fade-appear,.fade-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-active,.fade-appear.fade-appear-active{animation-name:mcFadeIn;animation-play-state:running}.fade-leave.fade-leave-active{animation-name:mcFadeOut;animation-play-state:running;pointer-events:none}.className-enter,.className-appear{opacity:0;animation-timing-function:ease-out}.className-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-appear,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-active,.zoom-appear.zoom-appear-active{animation-name:mcZoomIn;animation-play-state:running}.zoom-leave.zoom-leave-active{animation-name:mcZoomOut;animation-play-state:running;pointer-events:none}.className-enter,.className-appear{transform:translateY(-25%);animation-timing-function:cubic-bezier(.075,.82,.165,1)}.className-leave{transform:translate(0);animation-timing-function:cubic-bezier(.785,.135,.15,.86)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.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;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.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);overflow-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-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal-container .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-style:var(--kbq-typography-title-font-style);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-style:var(--kbq-typography-text-normal-font-style);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-6xl);--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: 1px;--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);--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 }], propDecorators: { kbqModalType: [{
+                    }, 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            [class]=\"maskAnimationClassMap\"\n            [style]=\"kbqMaskStyle\"\n        ></div>\n    }\n\n    <div\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            [class]=\"getContainerClasses()\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [style]=\"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 || kbqCaption) {\n        <div class=\"kbq-modal-header\" [kbqOverflowShadowTop]=\"modalBodyOverflow\">\n            <div class=\"kbq-modal-header-content\">\n                @if (kbqTitle) {\n                    <div class=\"kbq-modal-title\" kbq-title>\n                        @switch (true) {\n                            @case (isTemplateRef(kbqTitle)) {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                            }\n                            @case (isNonEmptyString(kbqTitle)) {\n                                <div #kbqTitleText [innerHTML]=\"kbqTitle\"></div>\n                            }\n                        }\n                    </div>\n                }\n                @if (kbqCaption) {\n                    <div class=\"kbq-modal-caption\" kbq-title>\n                        @switch (true) {\n                            @case (isTemplateRef(kbqCaption)) {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqCaption)\" />\n                            }\n                            @case (isNonEmptyString(kbqCaption)) {\n                                <div #kbqTitleText [innerHTML]=\"kbqCaption\"></div>\n                            }\n                        }\n                    </div>\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    type=\"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\n        #modalBodyOverflow=\"kbqOverflowShadowContainer\"\n        kbqOverflowShadowContainer\n        class=\"kbq-modal-body kbq-scrollbar\"\n        [style]=\"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 (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [kbqOverflowShadowBottom]=\"modalBodyOverflow\">\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\" [style]=\"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)}@keyframes mcFadeIn{0%{opacity:0}to{opacity:1}}@keyframes mcFadeOut{0%{opacity:1}to{opacity:0}}@keyframes mcZoomIn{0%{opacity:0;transform:translateY(-25%)}to{opacity:1;transform:scale(1)}}@keyframes mcZoomOut{0%{transform:scale(1)}to{opacity:0;transform:translateY(-30%)}}.fade-enter,.fade-appear,.fade-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-active,.fade-appear.fade-appear-active{animation-name:mcFadeIn;animation-play-state:running}.fade-leave.fade-leave-active{animation-name:mcFadeOut;animation-play-state:running;pointer-events:none}.fade-enter,.fade-appear{opacity:0;animation-timing-function:ease-out}.fade-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-appear,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-active,.zoom-appear.zoom-appear-active{animation-name:mcZoomIn;animation-play-state:running}.zoom-leave.zoom-leave-active{animation-name:mcZoomOut;animation-play-state:running;pointer-events:none}.zoom-enter,.zoom-appear{transform:translateY(-25%);animation-timing-function:cubic-bezier(.075,.82,.165,1)}.zoom-leave{transform:translate(0);animation-timing-function:cubic-bezier(.785,.135,.15,.86)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.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;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.kbq-modal-header-content{display:flex;flex:1;flex-direction:column;min-width:0}.kbq-modal-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.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);overflow-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-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-caption{color:var(--kbq-foreground-contrast-secondary)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);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-caption,.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);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-6xl);--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: 1px;--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);--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"] }]
+        }], propDecorators: { kbqModalType: [{
                 type: Input
             }], kbqComponent: [{
                 type: Input
             }], kbqContent: [{
                 type: Input
-            }], kbqComponentParams: [{
-                type: Input
             }], kbqFooter: [{
                 type: Input
             }], kbqVisible: [{
                 type: Input
-            }], kbqVisibleChange: [{
-                type: Output
-            }], kbqWidth: [{
+            }], kbqVisibleChange: [{ type: i0.Output, args: ["kbqVisibleChange"] }], kbqWidth: [{
                 type: Input
             }], kbqSize: [{
                 type: Input
@@ -657,6 +681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }], kbqTitle: [{
                 type: Input
+            }], kbqCaption: [{
+                type: Input
             }], kbqCloseByESC: [{
                 type: Input
             }], kbqClosable: [{
@@ -695,19 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }, {
                 type: Output
-            }], modalContainer: [{
-                type: ViewChild,
-                args: ['modalContainer', { static: true }]
-            }], bodyContainer: [{
-                type: ViewChild,
-                args: ['bodyContainer', { read: ViewContainerRef, static: false }]
-            }], autoFocusedButtons: [{
-                type: ViewChildren,
-                args: ['autoFocusedButton', { read: ElementRef }]
-            }], modalBody: [{
-                type: ViewChild,
-                args: ['modalBody']
-            }], kbqGetContainer: [{
+            }], modalContainer: [{ type: i0.ViewChild, args: ['modalContainer', { isSignal: true }] }], bodyContainer: [{ type: i0.ViewChild, args: ['bodyContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], autoFocusedButtons: [{ type: i0.ViewChildren, args: ['autoFocusedButton', { ...{ read: ElementRef }, isSignal: true }] }], kbqGetContainer: [{
                 type: Input
             }] } });
 function isPromise(obj) {
@@ -718,11 +732,11 @@ function isPromise(obj) {
 }
 
 class KbqModalTitle {
-    constructor(modal) {
-        this.modal = modal;
+    constructor() {
+        this.modal = inject(KbqModalComponent);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalTitle, deps: [{ token: KbqModalComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqModalTitle, isStandalone: true, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "class.kbq-modal-header_closable": "modal.kbqClosable" }, classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqModalTitle, isStandalone: true, 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>
             <ng-content />
         </div>
@@ -738,9 +752,9 @@ class KbqModalTitle {
                 <i kbq-icon="kbq-xmark_16" [color]="modal.componentColors.Contrast"></i>
             </button>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalTitle, decorators: [{
             type: Component,
             args: [{
                     selector: `[kbq-modal-title], kbq-modal-title, [kbqModalTitle]`,
@@ -771,12 +785,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-modal-header_closable]': 'modal.kbqClosable'
                     }
                 }]
-        }], ctorParameters: () => [{ type: KbqModalComponent }] });
+        }] });
 class KbqModalBody {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalBody, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-body], kbq-modal-body, [kbqModalBody]`,
@@ -786,10 +800,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqModalFooter {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqModalFooter, isStandalone: true, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqModalFooter, isStandalone: true, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]`,
@@ -799,10 +813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqModalMainAction {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqModalMainAction, isStandalone: true, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqModalMainAction, isStandalone: true, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalMainAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalMainAction, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-main-action]`
@@ -855,6 +869,11 @@ class ModalBuilderForService {
     }
 }
 class KbqModalService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.modalControl = inject(KbqModalControlService);
+        this.injector = inject(Injector);
+    }
     // Track of the current close modals (we assume invisible is close this time)
     get openModals() {
         return this.modalControl.openModals;
@@ -862,11 +881,6 @@ class KbqModalService {
     get afterAllClose() {
         return this.modalControl.afterAllClose.asObservable();
     }
-    constructor(overlay, modalControl, injector) {
-        this.overlay = overlay;
-        this.modalControl = modalControl;
-        this.injector = injector;
-    }
     // Closes all of the currently-open dialogs
     closeAll() {
         this.modalControl.closeAll();
@@ -925,24 +939,22 @@ class KbqModalService {
     delete(options = {}) {
         return this.confirm(options, 'warn');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalService, deps: [{ token: i1.Overlay }, { token: KbqModalControlService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: KbqModalControlService }, { type: i0.Injector }] });
+        }] });
 
 class KbqModalModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqModalModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqModalModule, imports: [OverlayModule,
             A11yModule,
             KbqButtonModule,
             KbqIconModule,
             KbqTitleModule,
             NgTemplateOutlet,
-            NgStyle,
-            NgClass,
             KbqModalComponent,
             KbqModalTitle,
             KbqModalBody,
@@ -953,7 +965,7 @@ class KbqModalModule {
             KbqModalBody,
             KbqModalFooter,
             KbqModalMainAction] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalModule, providers: [
             KbqModalControlService,
             KbqModalService,
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
@@ -965,7 +977,7 @@ class KbqModalModule {
             KbqModalComponent,
             KbqModalTitle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -975,8 +987,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqIconModule,
                         KbqTitleModule,
                         NgTemplateOutlet,
-                        NgStyle,
-                        NgClass,
                         KbqModalComponent,
                         KbqModalTitle,
                         KbqModalBody,
@@ -984,17 +994,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         CssUnitPipe,
                         KbqModalMainAction
                     ],
+                    providers: [
+                        KbqModalControlService,
+                        KbqModalService,
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
+                    ],
                     exports: [
                         KbqModalComponent,
                         KbqModalTitle,
                         KbqModalBody,
                         KbqModalFooter,
                         KbqModalMainAction
-                    ],
-                    providers: [
-                        KbqModalControlService,
-                        KbqModalService,
-                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
                     ]
                 }]
         }] });