@koobiq/components 20.4.2 → 21.0.1

package/fesm2022/koobiq-components-modal.mjs

@@ -1,43 +1,49 @@
-import { FocusMonitor, CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
-import { Overlay, OverlayRef, OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { Pipe, InjectionToken, inject, signal, computed, Injectable, TemplateRef, Type, Renderer2, EnvironmentInjector, ElementRef, ViewContainerRef, ChangeDetectorRef, Injector, input, model, booleanAttribute, EventEmitter, viewChild, viewChildren, linkedSignal, untracked, isDevMode, afterNextRender, createComponent, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, Directive, DestroyRef, NgModule } from '@angular/core';
+import { FocusMonitor, InputModalityDetector, CdkTrapFocus, A11yModule, ConfigurableFocusTrapFactory, FocusTrapFactory } from '@angular/cdk/a11y';
+import { Overlay, OverlayRef, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Pipe, inject, Injectable, Renderer2, EnvironmentInjector, ElementRef, ViewContainerRef, ChangeDetectorRef, output, EventEmitter, viewChild, viewChildren, signal, TemplateRef, Type, Injector, createComponent, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, Directive, InjectionToken, isDevMode, NgModule } from '@angular/core';
-import * as i1 from '@koobiq/components/button';
+import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i4 from '@koobiq/components/core';
-import { KbqComponentColors, ESCAPE, ENTER, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom } from '@koobiq/components/core';
-import * as i2 from '@koobiq/components/icon';
+import * as i1 from '@koobiq/components/core';
+import { kbqAnimationsDisabled, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, KbqComponentColors, ESCAPE, ENTER, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom } from '@koobiq/components/core';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i3 from '@koobiq/components/title';
+import * as i5 from '@koobiq/components/scrollbar';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
+import * as i4 from '@koobiq/components/title';
 import { KbqTitleModule, KbqTitleDirective } from '@koobiq/components/title';
-import { take, switchMap, filter } from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ComponentPortal } from '@angular/cdk/portal';
 
-/**
- * API class that public to users to handle the modal instance.
- * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
- */
-class KbqModalRef {
-}
-
 class CssUnitPipe {
+    /** Returns `null` for a value that was never set, so the style binding it feeds is cleared. */
     transform(value, defaultUnit = 'px') {
+        if (value === null || value === undefined)
+            return null;
         const formatted = +value;
         return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: CssUnitPipe, isStandalone: true, name: "toCssUnit" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: CssUnitPipe, isStandalone: true, name: "toCssUnit" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: CssUnitPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: CssUnitPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'toCssUnit'
                 }]
         }] });
 
+/**
+ * API class that public to users to handle the modal instance.
+ * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
+ */
+class KbqModalRef {
+}
+
 var ModalSize;
 (function (ModalSize) {
     ModalSize["Small"] = "small";
@@ -46,13 +52,26 @@ var ModalSize;
 })(ModalSize || (ModalSize = {}));
 /**
  * Duration when perform animations (ms)
- * @docs-private
+ *
+ * @internal
  */
 const MODAL_ANIMATE_DURATION = 300;
+/** Injection token exposing the dialog to the directives composed inside it. */
+const KBQ_MODAL = new InjectionToken('KBQ_MODAL');
+/**
+ * Options `KbqModalService` passes to the dialog it creates. The dialog reads them as the initial
+ * values of its inputs, which is how the imperative path reaches signal inputs at all: a dialog
+ * created by the service has no template bindings, so an input keeps its initial value for life.
+ * Never provided on the declarative path, where the bindings carry the same values.
+ *
+ * @docs-private
+ */
+const KBQ_MODAL_OPTIONS = new InjectionToken('KBQ_MODAL_OPTIONS');
 
 class KbqModalControlService {
     constructor() {
         this.parentService = inject(KbqModalControlService, { optional: true, skipSelf: true });
+        this.document = inject(DOCUMENT);
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.rootOpenModals = this.parentService ? null : [];
@@ -62,6 +81,18 @@ class KbqModalControlService {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         this.rootRegisteredMetaMap = this.parentService ? null : new Map();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.rootVisibleModals = this.parentService
+            ? null
+            : signal([]);
+        // Lazy, so the copy a child-level service never reads costs nothing.
+        this.rootTopVisibleModal = computed(() => {
+            const modals = this.visibleModals();
+            return modals.length ? modals[modals.length - 1] : null;
+        }, ...(ngDevMode ? [{ debugName: "rootTopVisibleModal" }] : /* istanbul ignore next */ []));
+        /** Elements this service took out of the accessibility tree while a dialog is shown. */
+        this.inertedElements = [];
     }
     // Track singleton afterAllClose through over the injection tree
     get afterAllClose() {
@@ -71,6 +102,18 @@ class KbqModalControlService {
     get openModals() {
         return this.parentService ? this.parentService.openModals : this.rootOpenModals;
     }
+    /**
+     * Dialogs currently shown, in the order they were shown. Unlike `openModals` this is updated
+     * synchronously, before the opening animation, so the body scroll lock and the stacking rules
+     * do not lag 300ms behind the dialog they describe.
+     */
+    get visibleModals() {
+        return this.parentService ? this.parentService.visibleModals : this.rootVisibleModals;
+    }
+    /** The dialog on top of the stack, i.e. the only one assistive technology should reach. */
+    get topVisibleModal() {
+        return this.parentService ? this.parentService.topVisibleModal : this.rootTopVisibleModal;
+    }
     // Registered modal for later usage
     get registeredMetaMap() {
         return this.parentService ? this.parentService.registeredMetaMap : this.rootRegisteredMetaMap;
@@ -84,6 +127,36 @@ class KbqModalControlService {
             this.handleMultipleMasks(modalRef);
         }
     }
+    /**
+     * Releases everything the registry holds for a dialog, whether or not it was ever shown.
+     * `removeOpenModal` only ever runs for a dialog that reached `afterOpen`, so a dialog created
+     * and destroyed without being shown — the normal life of a `<kbq-modal>` in a template nobody
+     * triggers — would otherwise stay in the root-level map forever.
+     */
+    deregisterModal(modalRef) {
+        this.setVisible(modalRef, false);
+        this.removeOpenModal(modalRef);
+    }
+    /** Records whether a dialog is shown, synchronously with the visibility change itself. */
+    setVisible(modalRef, visible) {
+        if (this.parentService) {
+            this.parentService.setVisible(modalRef, visible);
+            return;
+        }
+        const modals = this.rootVisibleModals();
+        const index = modals.indexOf(modalRef);
+        if (visible) {
+            if (index > -1)
+                return;
+            this.rootVisibleModals.set([...modals, modalRef]);
+        }
+        else {
+            if (index === -1)
+                return;
+            this.rootVisibleModals.set(modals.filter((modal) => modal !== modalRef));
+        }
+        this.syncBackgroundInert();
+    }
     hasRegistered(modalRef) {
         return this.registeredMetaMap.has(modalRef);
     }
@@ -94,84 +167,132 @@ class KbqModalControlService {
             this.openModals[i].close();
         }
     }
+    /**
+     * Takes the page behind the dialog out of the accessibility tree and the tab order.
+     *
+     * `aria-modal="true"` is enough for modern screen readers, but it is advisory: `inert` is what
+     * actually stops the virtual cursor and the pointer from reaching the page underneath. Only
+     * body children that do not contain a shown dialog are marked, so every overlay — the dialogs
+     * themselves, dropdowns opened inside them, toasts — stays reachable, and so do live regions.
+     */
+    syncBackgroundInert() {
+        const visible = this.rootVisibleModals();
+        if (visible.length) {
+            const modalElements = visible.map((modal) => modal.getElement()).filter(Boolean);
+            for (const child of Array.from(this.document.body.children)) {
+                if (this.inertedElements.includes(child) || child.hasAttribute('inert'))
+                    continue;
+                if (child.hasAttribute('aria-live') || child.querySelector('[aria-live]'))
+                    continue;
+                if (modalElements.some((element) => child.contains(element)))
+                    continue;
+                child.setAttribute('inert', '');
+                this.inertedElements.push(child);
+            }
+        }
+        else {
+            this.inertedElements.forEach((element) => element.removeAttribute('inert'));
+            this.inertedElements = [];
+        }
+    }
     removeOpenModal(modalRef) {
         const index = this.openModals.indexOf(modalRef);
         if (index > -1) {
             this.openModals.splice(index, 1);
-            if (this.hasRegistered(modalRef)) {
-                const { afterOpenSubscription, afterCloseSubscription } = this.registeredMetaMap.get(modalRef);
-                afterOpenSubscription.unsubscribe();
-                afterCloseSubscription.unsubscribe();
-                this.registeredMetaMap.delete(modalRef);
-            }
-            if (!this.openModals.length) {
-                this.afterAllClose.next();
-            }
+        }
+        this.unregister(modalRef);
+        if (index > -1 && !this.openModals.length) {
+            this.afterAllClose.next();
         }
     }
+    unregister(modalRef) {
+        const meta = this.registeredMetaMap.get(modalRef);
+        if (!meta)
+            return;
+        meta.afterOpenSubscription.unsubscribe();
+        meta.afterCloseSubscription.unsubscribe();
+        meta.beforeCloseSubscription?.unsubscribe();
+        this.registeredMetaMap.delete(modalRef);
+    }
     handleMultipleMasks(modalRef) {
         const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
-        if (modals.filter((modal) => modal.kbqVisible).length > 1) {
+        if (modals.filter((modal) => modal.kbqVisible()).length > 1) {
             const visibleModalsWithMask = modals
                 .splice(0, modals.length - 1)
-                .filter((modal) => modal.kbqVisible && modal.kbqMask);
+                .filter((modal) => modal.kbqVisible() && modal.kbqMask());
             // Trigger leave animation on other masks, then disable them after animation completes
             visibleModalsWithMask.forEach((modal) => {
-                setTimeout(() => {
-                    modal.getInstance().animateMaskTo(null);
-                    modal.getInstance().kbqMask = false;
-                    modal.markForCheck();
-                }, MODAL_ANIMATE_DURATION);
                 modal.getInstance().animateMaskTo('leave');
                 modal.markForCheck();
+                this.afterMaskAnimation(modal, () => {
+                    modal.getInstance().animateMaskTo(null);
+                    modal.getInstance().setMaskEnabled(false);
+                    modal.markForCheck();
+                });
             });
             // On close, restore other masks with enter animation, then reset animation state after it completes
-            modalRef.beforeClose.subscribe(() => {
+            const beforeCloseSubscription = modalRef.beforeClose.subscribe(() => {
+                // Invariant with respect to the loop below — the dialog being closed is the same
+                // one every time round.
+                modalRef.getInstance().animateMaskTo('leave');
+                this.afterMaskAnimation(modalRef, () => {
+                    modalRef.getInstance().animateMaskTo(null);
+                    modalRef.getInstance().setMaskEnabled(false);
+                });
                 visibleModalsWithMask.forEach((modal) => {
-                    setTimeout(() => {
-                        modalRef.getInstance().animateMaskTo(null);
-                        modalRef.getInstance().kbqMask = false;
-                        modal.getInstance().animateMaskTo(null);
-                        modal.markForCheck();
-                    }, MODAL_ANIMATE_DURATION);
-                    modalRef.getInstance().animateMaskTo('leave');
-                    modal.getInstance().kbqMask = true;
+                    modal.getInstance().setMaskEnabled(true);
                     modal.getInstance().animateMaskTo('enter');
                     modal.markForCheck();
+                    this.afterMaskAnimation(modal, () => {
+                        modal.getInstance().animateMaskTo(null);
+                        modal.markForCheck();
+                    });
                 });
             });
+            const meta = this.registeredMetaMap.get(modalRef);
+            // The closure captures a set of sibling dialogs, so it has to die with the registration.
+            if (meta)
+                meta.beforeCloseSubscription = beforeCloseSubscription;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalControlService, providedIn: 'root' }); }
+    /**
+     * Runs `fn` once the mask animation of `modal` started just now is over, at once when that dialog has
+     * animations disabled: the covered layer would otherwise stay painted under the new one for the whole
+     * duration. Read per dialog, whose injector can be below the one of this service.
+     */
+    afterMaskAnimation(modal, fn) {
+        if (modal.getInstance().animationsDisabled) {
+            fn();
+            return;
+        }
+        setTimeout(fn, MODAL_ANIMATE_DURATION);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalControlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalControlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalControlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-/** @docs-private */
-class ModalUtil {
-    constructor(document) {
-        this.document = document;
-        this.lastPosition = { x: -1, y: -1 };
-        this.listenDocumentClick();
-    }
-    getLastClickPosition() {
-        return this.lastPosition;
-    }
-    listenDocumentClick() {
-        this.document?.addEventListener('click', (event) => {
-            this.lastPosition = { x: event.clientX, y: event.clientY };
-        });
-    }
+/**
+ * Classifies a slot value once, so the template dispatches on a value instead of calling a type
+ * guard per binding — and so the guards stay out of the component's published surface.
+ */
+function slotKind(value) {
+    if (value instanceof TemplateRef)
+        return 'template';
+    if (value instanceof Type)
+        return 'component';
+    if (Array.isArray(value))
+        return value.length > 0 ? 'buttons' : 'none';
+    if (typeof value === 'string')
+        return value === '' ? 'none' : 'string';
+    return 'none';
 }
-/** @docs-private */
-const modalUtilObject = new ModalUtil(
-// For SSR compatibility
-// eslint-disable-next-line no-restricted-globals
-typeof document === 'undefined' ? undefined : document);
-
+let uniqueIdCounter = 0;
+// `ModalOptions` is the service's contract, not the component's shape: every option is a signal
+// input here, so the two no longer match structurally and the dialog cannot declare it.
 class KbqModalComponent extends KbqModalRef {
     constructor() {
         super(...arguments);
@@ -183,114 +304,213 @@ class KbqModalComponent extends KbqModalRef {
         this.modalControl = inject(KbqModalControlService);
         this.changeDetector = inject(ChangeDetectorRef);
         this.focusMonitor = inject(FocusMonitor);
+        this.inputModalityDetector = inject(InputModalityDetector);
+        this.injector = inject(Injector);
+        /**
+         * Whether the dialog and its dim layer move without motion. Read from the dialog's own injector, under
+         * `options.injector` when the service opened it.
+         *
+         * @internal
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
+        /** Accessible name for the icon-only close button. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
         this.document = inject(DOCUMENT);
+        /**
+         * Options `KbqModalService` passed in, or `null` on the declarative path. Every input below
+         * takes its initial value from here: a service-created dialog carries no template bindings, so
+         * an input it does not bind keeps that initial value for the dialog's whole life.
+         */
+        this.options = inject(KBQ_MODAL_OPTIONS, { optional: true });
         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;
+        /** Layout the dialog renders. */
+        this.kbqModalType = input(this.options?.kbqModalType ?? 'default', ...(ngDevMode ? [{ debugName: "kbqModalType" }] : /* istanbul ignore next */ []));
+        /** The instance of component opened into the dialog. */
+        this.kbqComponent = input(this.options?.kbqComponent, ...(ngDevMode ? [{ debugName: "kbqComponent" }] : /* istanbul ignore next */ []));
+        /** Body of the dialog: text, a template or a component class. Falls back to `<ng-content>`. */
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        this.kbqContent = input(this.options?.kbqContent, ...(ngDevMode ? [{ debugName: "kbqContent" }] : /* istanbul ignore next */ []));
+        /** Footer of the dialog: text, a template, or the buttons to render. Default modal ONLY. */
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        this.kbqFooter = input(this.options?.kbqFooter, ...(ngDevMode ? [{ debugName: "kbqFooter" }] : /* istanbul ignore next */ []));
+        /** Whether the dialog is shown. Two-way bindable as `[(kbqVisible)]`. */
+        this.kbqVisible = model(this.options?.kbqVisible ?? false, ...(ngDevMode ? [{ debugName: "kbqVisible" }] : /* istanbul ignore next */ []));
+        /** Explicit width, overriding the one `kbqSize` implies. A number is read as pixels. */
+        this.kbqWidth = input(this.options?.kbqWidth, ...(ngDevMode ? [{ debugName: "kbqWidth" }] : /* istanbul ignore next */ []));
+        /** Width preset. */
+        this.kbqSize = input(this.options?.kbqSize ?? ModalSize.Medium, ...(ngDevMode ? [{ debugName: "kbqSize" }] : /* istanbul ignore next */ []));
+        /** Extra class names for the full-screen wrapper around the dialog. */
+        this.kbqWrapClassName = input(this.options?.kbqWrapClassName, ...(ngDevMode ? [{ debugName: "kbqWrapClassName" }] : /* istanbul ignore next */ []));
+        /** Extra class names for the dialog element itself. */
+        this.kbqClassName = input(this.options?.kbqClassName, ...(ngDevMode ? [{ debugName: "kbqClassName" }] : /* istanbul ignore next */ []));
+        /** Inline styles for the dialog element. */
+        this.kbqStyle = input(this.options?.kbqStyle, ...(ngDevMode ? [{ debugName: "kbqStyle" }] : /* istanbul ignore next */ []));
+        /** Heading of the dialog. Also becomes its accessible name. */
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        this.kbqTitle = input(this.options?.kbqTitle, ...(ngDevMode ? [{ debugName: "kbqTitle" }] : /* istanbul ignore next */ []));
+        /** Secondary line under the heading. Also becomes the dialog's accessible description. */
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        this.kbqCaption = input(this.options?.kbqCaption, ...(ngDevMode ? [{ debugName: "kbqCaption" }] : /* istanbul ignore next */ []));
+        /** Whether <kbd>Escape</kbd> cancels the dialog. */
+        this.kbqCloseByESC = input(this.options?.kbqCloseByESC ?? true, { ...(ngDevMode ? { debugName: "kbqCloseByESC" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Where focus lands when the dialog is shown. */
+        this.kbqAutoFocus = input(this.options?.kbqAutoFocus ?? 'first-tabbable', ...(ngDevMode ? [{ debugName: "kbqAutoFocus" }] : /* istanbul ignore next */ []));
+        /** Accessible name for a dialog rendered without `kbqTitle` — a confirm or a header-less dialog. */
+        this.kbqAriaLabel = input(this.options?.kbqAriaLabel, ...(ngDevMode ? [{ debugName: "kbqAriaLabel" }] : /* istanbul ignore next */ []));
+        /** Whether the header renders a close button. */
+        this.kbqClosable = input(this.options?.kbqClosable ?? true, { ...(ngDevMode ? { debugName: "kbqClosable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the page behind the dialog is dimmed. */
+        this.kbqMask = input(this.options?.kbqMask ?? true, { ...(ngDevMode ? { debugName: "kbqMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether a click on the dim layer cancels the dialog. */
+        this.kbqMaskClosable = input(this.options?.kbqMaskClosable ?? false, { ...(ngDevMode ? { debugName: "kbqMaskClosable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Inline styles for the dim layer. */
+        this.kbqMaskStyle = input(this.options?.kbqMaskStyle, ...(ngDevMode ? [{ debugName: "kbqMaskStyle" }] : /* istanbul ignore next */ []));
+        /** Inline styles for the body element. */
+        this.kbqBodyStyle = input(this.options?.kbqBodyStyle, ...(ngDevMode ? [{ debugName: "kbqBodyStyle" }] : /* istanbul ignore next */ []));
+        // The emitters stay the source of truth: they back the public `afterOpen`/`beforeClose`/`afterClose`
+        // observables and the subscriptions of `ModalBuilderForService`, which `OutputEmitterRef` cannot. The
+        // outputs below mirror them for template bindings; `outputFromObservable` subscribes once per listener,
+        // so `observed` still tells a bound output.
         // Trigger when modal open(visible) after animations
         this.kbqAfterOpen = new EventEmitter();
+        /** @docs-private */
+        this.kbqAfterOpenOutput = outputFromObservable(this.kbqAfterOpen, { alias: 'kbqAfterOpen' });
         // Trigger when modal leave-animation over
         this.kbqAfterClose = new EventEmitter();
+        /** @docs-private */
+        this.kbqAfterCloseOutput = outputFromObservable(this.kbqAfterClose, { alias: 'kbqAfterClose' });
         /** 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.
+        /** @docs-private */
+        this.kbqBeforeCloseOutput = outputFromObservable(this.kbqBeforeClose, { alias: 'kbqBeforeClose' });
+        /** Caption of the predefined OK button. The button is not rendered without it. */
+        this.kbqOkText = input(this.options?.kbqOkText, ...(ngDevMode ? [{ debugName: "kbqOkText" }] : /* istanbul ignore next */ []));
+        /** Color of the predefined OK button. */
+        this.kbqOkType = input(this.options?.kbqOkType ?? KbqComponentColors.Contrast, ...(ngDevMode ? [{ debugName: "kbqOkType" }] : /* istanbul ignore next */ []));
+        /** Whether focus returns to the trigger when the dialog closes. */
+        this.kbqRestoreFocus = input(this.options?.kbqRestoreFocus ?? true, { ...(ngDevMode ? { debugName: "kbqRestoreFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the predefined OK button renders its progress state. */
+        this.kbqOkLoading = input(this.options?.kbqOkLoading ?? false, { ...(ngDevMode ? { debugName: "kbqOkLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Decision handler of the predefined OK button. Returning `false` — or a promise of `false` —
+         * keeps the dialog open; anything else closes it. Receives the body component instance when the
+         * body is a component.
+         *
+         * Bind this **or** `(kbqOnOk)`, never both: a handler decides the close itself, so the event has
+         * nothing left to report and is not emitted. Binding both is reported in development mode.
+         */
+        this.kbqOkClick = input(this.options?.kbqOkClick, ...(ngDevMode ? [{ debugName: "kbqOkClick" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the predefined OK button is activated. A notification, not a decision — the dialog
+         * closes either way. Bind `[kbqOkClick]` instead to decide whether it closes.
+         */
         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.
+        /** @docs-private */
+        this.kbqOnOkOutput = outputFromObservable(this.kbqOnOk, { alias: 'kbqOnOk' });
+        /** Caption of the predefined Cancel button. The button is not rendered without it. */
+        this.kbqCancelText = input(this.options?.kbqCancelText, ...(ngDevMode ? [{ debugName: "kbqCancelText" }] : /* istanbul ignore next */ []));
+        /** Whether the predefined Cancel button renders its progress state. */
+        this.kbqCancelLoading = input(this.options?.kbqCancelLoading ?? false, { ...(ngDevMode ? { debugName: "kbqCancelLoading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Decision handler of the predefined Cancel button, the close button, <kbd>Escape</kbd> and the
+         * dim layer. Returning `false` — or a promise of `false` — keeps the dialog open.
+         *
+         * Bind this **or** `(kbqOnCancel)`, never both — see `kbqOkClick`.
+         */
+        this.kbqCancelClick = input(this.options?.kbqCancelClick, ...(ngDevMode ? [{ debugName: "kbqCancelClick" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the dialog is cancelled, by any of the controls `kbqCancelClick` covers. A
+         * notification, not a decision. Bind `[kbqCancelClick]` instead to decide whether it closes.
+         */
         this.kbqOnCancel = new EventEmitter();
+        /** @docs-private */
+        this.kbqOnCancelOutput = outputFromObservable(this.kbqOnCancel, { alias: 'kbqOnCancel' });
         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';
+        // Both the scrollable wrap and the body of a predefined layout, so a query for one would flash
+        // whichever comes first in the template rather than the one that overflows.
+        this.scrollbarViewports = viewChildren(KbqScrollbarViewport, ...(ngDevMode ? [{ debugName: "scrollbarViewports" }] : /* istanbul ignore next */ []));
+        this.trapFocus = viewChild.required(CdkTrapFocus);
+        this.uniqueId = uniqueIdCounter++;
+        /** Id of the element that names the dialog. Rendered on the title of a composed modal too. */
+        this.titleId = `kbq-modal-title-${this.uniqueId}`;
+        /** Id of the element that describes the dialog. Rendered on the caption of a composed modal too. */
+        this.captionId = `kbq-modal-caption-${this.uniqueId}`;
         /**
          * Scroll-shadow state published by `KbqModalBody` when the modal content is composed
          * manually (`kbq-modal-title`/`kbq-modal-body`/`kbq-modal-footer`), so the header/footer
          * can render matching shadows without a direct template reference between them.
+         *
          * @docs-private
          */
-        this.bodyOverflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : []));
-        // 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;
-    }
-    set kbqCancelLoading(value) {
-        this._kbqCancelLoading = value;
+        this.bodyOverflow = signal({ top: false, bottom: false }, ...(ngDevMode ? [{ debugName: "bodyOverflow" }] : /* istanbul ignore next */ []));
+        /**
+         * Footer buttons with their defaults filled in. `kbqFooter` reports what was bound; this is what
+         * the template renders, so the input is never written back over.
+         */
+        this.footer = computed(() => {
+            const footer = this.kbqFooter();
+            return Array.isArray(footer) ? this.formatModalButtons(footer) : footer;
+        }, ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.titleKind = computed(() => slotKind(this.kbqTitle()), ...(ngDevMode ? [{ debugName: "titleKind" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.captionKind = computed(() => slotKind(this.kbqCaption()), ...(ngDevMode ? [{ debugName: "captionKind" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.contentKind = computed(() => slotKind(this.kbqContent()), ...(ngDevMode ? [{ debugName: "contentKind" }] : /* istanbul ignore next */ []));
+        /** @docs-private */
+        this.footerKind = computed(() => slotKind(this.footer()), ...(ngDevMode ? [{ debugName: "footerKind" }] : /* istanbul ignore next */ []));
+        /** Phase of the open/close animation, which the class list and the hidden state follow. */
+        this.animationPhase = signal(null, ...(ngDevMode ? [{ debugName: "animationPhase" }] : /* istanbul ignore next */ []));
+        /** Full set of classes for the dialog element. */
+        this.containerClasses = computed(() => {
+            const phase = this.animationPhase();
+            const classes = ['kbq-modal-container', this.kbqClassName(), `kbq-modal_${this.kbqSize()}`];
+            if (phase)
+                classes.push(`zoom-${phase}`, `zoom-${phase}-active`);
+            return classes.filter(Boolean).join(' ');
+        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * Phase of the dim layer's animation. Follows the dialog's own phase, except while
+         * `KbqModalControlService` fades the layer of a covered dialog out on its own.
+         */
+        this.maskPhase = signal(null, ...(ngDevMode ? [{ debugName: "maskPhase" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the dim layer is actually painted: the input, overridden while another dialog covers
+         * this one. Seeded from the input so re-binding `[kbqMask]` still takes effect.
+         *
+         * The override exists because `KbqModalControlService` turns the layer of the dialogs underneath
+         * a newly opened one off and back on. That orchestration belongs in the dialog, keyed on
+         * `KbqModalControlService.topVisibleModal()` the way `inert` already is.
+         */
+        this.maskEnabled = linkedSignal(() => this.kbqMask(), ...(ngDevMode ? [{ debugName: "maskEnabled" }] : /* istanbul ignore next */ []));
+        /** Classes for the dim layer. */
+        this.maskAnimationClasses = computed(() => {
+            const phase = this.maskPhase();
+            return phase ? `fade-${phase} fade-${phase}-active` : '';
+        }, ...(ngDevMode ? [{ debugName: "maskAnimationClasses" }] : /* istanbul ignore next */ []));
+        /**
+         * Progress state the predefined buttons actually render: the input, overridden while a handler's
+         * returned promise is pending. Seeded from the input so re-binding it still takes effect.
+         */
+        this.okLoading = linkedSignal(() => this.kbqOkLoading(), ...(ngDevMode ? [{ debugName: "okLoading" }] : /* istanbul ignore next */ []));
+        this.cancelLoading = linkedSignal(() => this.kbqCancelLoading(), ...(ngDevMode ? [{ debugName: "cancelLoading" }] : /* istanbul ignore next */ []));
+        this.monitoredContainer = null;
+        this.focusMonitorSubscription = null;
+        /** Whether a `kbq-modal-title` is composed inside the dialog body. */
+        this.composedTitle = false;
+        /** Whether a `kbq-modal-caption` is composed inside the dialog body. */
+        this.composedCaption = false;
+        /** Whether a `kbq-modal-footer` is composed inside the dialog body. */
+        this.composedFooter = false;
+        this.viewInitialized = false;
+        /** Visibility the open/close flow has already run for. See `syncVisibleState`. */
+        this.handledVisible = false;
+        /** Element or overlay the dialog is rendered into. Read once, on init. */
+        this.kbqGetContainer = input(
+        // A service-created dialog is already inside an overlay the builder owns, so it must not
+        // create one of its own; the declarative path has nowhere to render until it does.
+        this.options ? (this.options.kbqGetContainer ?? null) : () => this.overlay.create(), ...(ngDevMode ? [{ debugName: "kbqGetContainer" }] : /* istanbul ignore next */ []));
     }
     // Observable alias for kbqAfterOpen
     get afterOpen() {
@@ -304,45 +524,69 @@ class KbqModalComponent extends KbqModalRef {
     get afterClose() {
         return this.kbqAfterClose.asObservable();
     }
-    get okText() {
-        return this.kbqOkText;
-    }
-    get cancelText() {
-        return this.kbqCancelText;
-    }
     // Indicate whether this dialog should hidden
     get hidden() {
-        return !this.kbqVisible && !this.animationState;
+        return !this.kbqVisible() && !this.animationState;
+    }
+    /** Whether the dialog renders a footer — a predefined button is enough, `kbqFooter` is not required. */
+    get hasFooter() {
+        return this.composedFooter || !!(this.kbqFooter() || this.kbqOkText() || this.kbqCancelText());
+    }
+    /** Id of the element naming the dialog, or `null` when there is no title to point at. */
+    get ariaLabelledBy() {
+        return this.hasTitle() ? this.titleId : null;
+    }
+    /** Accessible name for a dialog with no title. Never rendered next to `aria-labelledby`. */
+    get ariaLabel() {
+        return this.hasTitle() ? null : this.kbqAriaLabel() || null;
+    }
+    /** Id of the caption describing the dialog, or `null` when no caption is rendered. */
+    get ariaDescribedBy() {
+        return this.hasCaption() ? this.captionId : null;
+    }
+    /**
+     * Whether this dialog is covered by another one. `aria-modal` only hides the page behind the
+     * topmost dialog, so every dialog below it is taken out of the accessibility tree and the tab
+     * order explicitly.
+     */
+    get inert() {
+        const top = this.modalControl.topVisibleModal();
+        return !!top && top !== this;
+    }
+    /** @docs-private */
+    loading(triggerType) {
+        return triggerType === 'ok' ? this.okLoading() : this.cancelLoading();
     }
     // [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.
     // BUT: User also can change "kbqContent" dynamically to trigger UI changes
-    // (provided you don't use Component that needs initializations)
+    // (provided you don't use Component that needs initializations)
     ngOnChanges(changes) {
-        if (changes.kbqVisible) {
-            // Do not trigger animation while initializing
-            this.handleVisibleStateChange(this.kbqVisible, !changes.kbqVisible.firstChange);
-        }
+        // A `model()` reports a write from inside through `ngOnChanges` as well, and that write has
+        // already run the flow, so the guard inside is what keeps it from running twice.
+        if (changes.kbqVisible)
+            this.syncVisibleState(changes.kbqVisible.firstChange);
     }
     ngOnInit() {
+        const content = this.kbqContent();
+        const component = this.kbqComponent();
         // Create component along without View
-        if (this.isComponent(this.kbqContent)) {
-            this.createDynamicComponent(this.kbqContent);
-        }
-        // Setup default button options
-        if (this.isModalButtons(this.kbqFooter)) {
-            this.kbqFooter = this.formatModalButtons(this.kbqFooter);
+        if (slotKind(content) === 'component') {
+            this.createDynamicComponent(content);
         }
-        if (this.isComponent(this.kbqComponent)) {
-            this.createDynamicComponent(this.kbqComponent);
+        if (component) {
+            this.createDynamicComponent(component);
         }
         // Place the modal dom to elsewhere
-        this.container = typeof this.kbqGetContainer === 'function' ? this.kbqGetContainer() : this.kbqGetContainer;
+        const container = this.kbqGetContainer();
+        this.container = (typeof container === 'function' ? container() : container);
         if (this.container instanceof HTMLElement) {
             this.container.appendChild(this.elementRef.nativeElement);
         }
         else if (this.container instanceof OverlayRef) {
+            // The marker the outside-click filters of other overlays (e.g. `kbq-select`) key off.
+            this.container.hostElement.classList.add('kbq-modal-overlay');
             // NOTE: only attach the dom to overlay, the view container is not changed actually
             this.container.overlayElement.appendChild(this.elementRef.nativeElement);
         }
@@ -352,35 +596,51 @@ class KbqModalComponent extends KbqModalRef {
     ngAfterViewInit() {
         // If using Component, it is the time to attach View while bodyContainer is ready
         if (this.contentComponentRef) {
+            // In the custom layout the component's host element is inserted straight into
+            // `.kbq-modal-content`, so it sits between the dialog and the header, body and footer it
+            // composes. The dialog's column layout has to carry through it or the body never
+            // becomes the part that gives way.
+            if (this.isModalType('custom')) {
+                this.contentComponentRef.location.nativeElement.classList.add('kbq-modal-content-host');
+            }
             this.bodyContainer().insert(this.contentComponentRef.hostView);
         }
-        this.getElement().getElementsByTagName('button')[0]?.focus();
-        this.getElement().querySelector('button[autofocus]')?.focus();
+        this.viewInitialized = true;
+        if (this.kbqVisible()) {
+            this.monitorContainer();
+            this.focusInitialElement();
+        }
     }
     ngOnDestroy() {
         // Created in `ngOnInit` but owned by `bodyContainer` only from `ngAfterViewInit`, so a modal
         // closed in between would leak it. Destroying an already-destroyed view is a no-op.
         this.contentComponentRef?.destroy();
+        this.focusMonitorSubscription?.unsubscribe();
+        if (this.monitoredContainer) {
+            this.focusMonitor.stopMonitoring(this.monitoredContainer);
+            this.monitoredContainer = null;
+        }
+        // Release everything the dialog holds globally even when it is torn down while still open:
+        // the registry entry, the place in the stack and the body scroll lock.
+        this.modalControl.deregisterModal(this);
+        this.changeBodyOverflow();
         if (this.container instanceof OverlayRef) {
             this.container.dispose();
         }
     }
     open() {
-        this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
-        this.previouslyFocusedElementOrigin = this.focusMonitor['_lastFocusOrigin'];
-        this.focusMonitor
-            .monitor(this.modalContainer(), true)
-            .pipe(take(1))
-            .subscribe(() => this.focusMonitor.stopMonitoring(this.modalContainer()));
-        this.changeVisibleFromInside(true);
+        // Untracked, as `close()`, `triggerOk()` and `triggerCancel()`: called from a consumer's `effect()`, the state
+        // read and written on the way — `kbqVisible`, the dialogs shown, the inputs — would make the effect run again on
+        // every open and close, and an effect that creates a dialog would create another one at once.
+        untracked(() => this.changeVisibleFromInside(true));
     }
+    /**
+     * Starts the closing animation and resolves the `afterClose` contract with `result`.
+     *
+     * Closing an already closed dialog is a no-op: `afterClose` emits once per actual transition.
+     */
     close(result) {
-        this.changeVisibleFromInside(false, result).then(() => {
-            if (this.kbqRestoreFocus && this.focusedElementBeforeOpen) {
-                this.focusMonitor.focusVia(this.focusedElementBeforeOpen, this.previouslyFocusedElementOrigin);
-                this.focusedElementBeforeOpen = null;
-            }
-        });
+        untracked(() => this.changeVisibleFromInside(false, result));
     }
     // Destroy equals Close
     destroy(result) {
@@ -390,10 +650,10 @@ class KbqModalComponent extends KbqModalRef {
         this.changeDetector.markForCheck();
     }
     triggerOk() {
-        this.onClickOkCancel('ok');
+        untracked(() => this.onClickOkCancel('ok'));
     }
     triggerCancel() {
-        this.onClickOkCancel('cancel');
+        untracked(() => this.onClickOkCancel('cancel'));
     }
     getInstance() {
         return this;
@@ -407,94 +667,135 @@ class KbqModalComponent extends KbqModalRef {
     getElement() {
         return this.elementRef && this.elementRef.nativeElement;
     }
-    getKbqFooter() {
-        return this.getElement().getElementsByClassName('kbq-modal-footer').item(0);
+    /** Announces that a `kbq-modal-title` is composed inside the dialog. @docs-private */
+    registerTitle() {
+        this.composedTitle = true;
+    }
+    /** Announces that a `kbq-modal-caption` is composed inside the dialog. @docs-private */
+    registerCaption() {
+        this.composedCaption = true;
+    }
+    /** Announces that a `kbq-modal-footer` is composed inside the dialog. @docs-private */
+    registerFooter() {
+        this.composedFooter = true;
+    }
+    /** Publishes the composed body's scroll-shadow state. @docs-private */
+    setBodyOverflow(state) {
+        this.bodyOverflow.set(state);
+    }
+    /**
+     * Drives the dim layer's animation on its own, which is what lets `KbqModalControlService` fade
+     * out the layer of a dialog another one has covered.
+     *
+     * @docs-private
+     */
+    animateMaskTo(state) {
+        // The phase classes are the layer's whole motion, so leaving them off is what disables it.
+        this.maskPhase.set(this.animationsDisabled ? null : state);
+    }
+    /**
+     * Turns the dim layer off or back on without touching `kbqMask`, so a dialog covered by another
+     * one stops painting its own layer. See `maskEnabled`.
+     *
+     * @docs-private
+     */
+    setMaskEnabled(enabled) {
+        this.maskEnabled.set(enabled);
+    }
+    /** @docs-private */
+    isMaskEnabled() {
+        return this.maskEnabled();
+    }
+    // AoT
+    onClickCloseBtn() {
+        if (this.kbqVisible()) {
+            this.onClickOkCancel('cancel');
+        }
     }
+    /** @docs-private */
     onClickMask($event) {
         // Only the primary button closes the modal: the sidepanel's backdrop is driven by `click`, which
         // never fires for the right or middle button, and `mousedown` here would otherwise diverge from it.
         if ($event.button !== 0)
             return;
-        if (this.kbqMask &&
-            this.kbqMaskClosable &&
+        if (this.kbqMask() &&
+            this.kbqMaskClosable() &&
             $event.target.classList.contains('kbq-modal-wrap') &&
-            this.kbqVisible) {
+            this.kbqVisible()) {
             this.onClickOkCancel('cancel');
         }
     }
+    /** @docs-private */
     isModalType(type) {
-        return this.kbqModalType === type;
+        return this.kbqModalType() === type;
     }
+    /** @docs-private */
     onKeyDown(event) {
-        if (event.keyCode === ESCAPE && this.container && this.container instanceof OverlayRef) {
-            this.close();
-            event.preventDefault();
+        if (event.keyCode === ESCAPE) {
+            // A control inside the dialog consumed the key to close a popup of its own, such as a calendar.
+            if (event.defaultPrevented)
+                return;
+            // One implementation for both entry paths: the event only reaches the host from inside
+            // the dialog, so it cannot be the keystroke that opened it. Escape is the Cancel
+            // button, veto included.
+            if (this.kbqCloseByESC() && this.kbqVisible()) {
+                this.onClickOkCancel('cancel');
+                event.preventDefault();
+            }
+            return;
         }
         if (event.ctrlKey && event.keyCode === ENTER) {
-            if (this.kbqModalType === 'confirm') {
+            if (this.kbqModalType() === 'confirm') {
                 this.triggerOk();
             }
             this.getElement().querySelector('[kbq-modal-main-action]')?.click();
             event.preventDefault();
         }
     }
-    // AoT
-    onClickCloseBtn() {
-        if (this.kbqVisible) {
-            this.onClickOkCancel('cancel');
-        }
-    }
-    // AoT
+    /** @docs-private */
     onClickOkCancel(type) {
         this.handleCloseResult(type, (doClose) => doClose !== false);
     }
+    /** @docs-private */
     // 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];
-        if (trigger instanceof EventEmitter) {
-            trigger.emit(this.getContentComponent());
+        const handler = triggerType === 'ok' ? this.kbqOkClick() : this.kbqCancelClick();
+        const emitter = triggerType === 'ok' ? this.kbqOnOk : this.kbqOnCancel;
+        const loading = triggerType === 'ok' ? this.okLoading : this.cancelLoading;
+        // Users can return "false" to prevent closing by default
+        // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+        const caseClose = (doClose) => canClose(doClose) && this.close(doClose);
+        if (!handler) {
+            emitter.emit(this.getContentComponent());
+            caseClose(undefined);
+            return;
+        }
+        if (isDevMode() && emitter.observed) {
+            const input = triggerType === 'ok' ? 'kbqOkClick' : 'kbqCancelClick';
+            const output = triggerType === 'ok' ? 'kbqOnOk' : 'kbqOnCancel';
+            // eslint-disable-next-line no-console
+            console.warn(`KbqModal: both [${input}] and (${output}) are bound. The handler decides the close, ` +
+                `so (${output}) is never emitted. Bind one of them.`);
         }
-        else if (typeof trigger === 'function') {
-            const result = trigger(this.getContentComponent());
-            // Users can return "false" to prevent closing by default
+        const result = handler(this.getContentComponent());
+        if (isPromise(result)) {
+            loading.set(true);
             // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-            const caseClose = (doClose) => canClose(doClose) && this.close(doClose);
-            if (isPromise(result)) {
-                this[loadingKey] = true;
-                const handleThen = (doClose) => {
-                    this[loadingKey] = false;
-                    caseClose(doClose);
-                };
-                result.then(handleThen).catch(handleThen);
-            }
-            else {
-                caseClose(result);
-            }
+            const handleThen = (doClose) => {
+                loading.set(false);
+                caseClose(doClose);
+            };
+            result.then(handleThen).catch(handleThen);
+        }
+        else {
+            caseClose(result);
         }
     }
-    // AoT
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-    isNonEmptyString(value) {
-        return typeof value === 'string' && value !== '';
-    }
-    // AoT
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-    isTemplateRef(value) {
-        return value instanceof TemplateRef;
-    }
-    // AoT
-    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-    isComponent(value) {
-        return value instanceof Type;
-    }
-    // AoT
-    // 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
+    /**
+     * Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
+     *
+     * @docs-private
+     */
     // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     getButtonCallableProp(options, prop) {
         const value = options[prop];
@@ -504,17 +805,11 @@ 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
+    /**
+     * On kbqFooter's modal button click.
+     *
+     * @docs-private
+     */
     onButtonClick(button) {
         // Call onClick directly
         const result = this.getButtonCallableProp(button, 'onClick');
@@ -524,62 +819,150 @@ class KbqModalComponent extends KbqModalRef {
             result.then(() => (button.loading = false)).catch(() => (button.loading = false));
         }
     }
-    /**
-     * Sets mask animation classes for the given state, or clears them if state is null.
-     * @docs-private
-     */
-    animateMaskTo(state) {
-        this.maskAnimationClassMap = state
-            ? {
-                [`fade-${state}`]: true,
-                [`fade-${state}-active`]: true
-            }
-            : null;
+    /** Whether anything is rendered that can name the dialog. */
+    hasTitle() {
+        return this.composedTitle || (this.isModalType('default') && !!this.kbqTitle());
+    }
+    /** Whether anything is rendered that can describe the dialog. */
+    hasCaption() {
+        return this.composedCaption || (this.isModalType('default') && !!this.kbqCaption());
     }
     // Do rest things when visible state changed
     handleVisibleStateChange(visible, animation = true, closeResult) {
-        // Hide scrollbar at the first time when shown up
         if (visible) {
-            this.changeBodyOverflow(1);
+            this.captureFocus();
+            this.modalControl.setVisible(this, true);
+            // Hide scrollbar at the first time when shown up
+            this.changeBodyOverflow();
+            this.focusOnShow();
         }
         else {
             this.kbqBeforeClose.emit(closeResult);
+            this.modalControl.setVisible(this, false);
         }
         return (Promise.resolve(animation && this.animateTo(visible))
             // Emit open/close event after animations over
             .then(() => {
             if (visible) {
+                this.scrollbarViewports().forEach((viewport) => viewport.flashScrollIndicators());
                 this.kbqAfterOpen.emit();
             }
             else {
                 this.kbqAfterClose.emit(closeResult);
                 // Show/hide scrollbar when animation is over
                 this.changeBodyOverflow();
+                this.restoreFocus();
             }
         }));
     }
+    /**
+     * Remembers the element and the input modality to restore focus to. Both entry paths run
+     * through here, so a declarative `<kbq-modal [(kbqVisible)]>` restores focus like a
+     * service-created one.
+     */
+    captureFocus() {
+        this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
+        // `FocusMonitor` keeps the last origin private; the modality detector behind it is public
+        // and reports the same thing. No modality means the focus was moved by code.
+        this.previouslyFocusedElementOrigin = this.inputModalityDetector.mostRecentModality ?? 'program';
+        this.monitorContainer();
+    }
+    /**
+     * Registers the dialog element with `FocusMonitor` so focus inside it carries an origin. The
+     * registration is torn down on the first focus event and, failing that, on destroy — a dialog
+     * focus never reaches would otherwise stay in the root-provided monitor forever.
+     */
+    monitorContainer() {
+        if (!this.viewInitialized || this.monitoredContainer)
+            return;
+        this.monitoredContainer = this.modalContainer();
+        this.focusMonitorSubscription = this.focusMonitor
+            .monitor(this.monitoredContainer, true)
+            .pipe(take(1))
+            .subscribe(() => {
+            if (this.monitoredContainer) {
+                this.focusMonitor.stopMonitoring(this.monitoredContainer);
+                this.monitoredContainer = null;
+            }
+        });
+    }
+    restoreFocus() {
+        if (this.kbqRestoreFocus() && this.focusedElementBeforeOpen) {
+            this.focusMonitor.focusVia(this.focusedElementBeforeOpen, this.previouslyFocusedElementOrigin);
+            this.focusedElementBeforeOpen = null;
+        }
+    }
+    /** Moves focus into the dialog once the shown state has been rendered. */
+    focusOnShow() {
+        if (!this.viewInitialized)
+            return;
+        afterNextRender(() => this.focusInitialElement(), { injector: this.injector });
+    }
+    /**
+     * Initial focus policy. An explicit `[cdkFocusInitial]`/`autofocus` inside the dialog always
+     * wins; otherwise `kbqAutoFocus` decides. The dialog element itself is the last resort, so a
+     * modal without a single tabbable control still takes focus off the trigger behind it.
+     */
+    focusInitialElement() {
+        if (this.kbqAutoFocus() === false)
+            return;
+        const element = this.getElement();
+        const { focusTrap } = this.trapFocus();
+        // `cdkFocusInitial` is a bare attribute the CDK's own `focusInitialElement()` reads, not a
+        // directive, and that helper cannot be used here: it falls back to the first tabbable control
+        // whenever the marker is absent or its target fails the CDK's visibility check, which is
+        // exactly what 'dialog' and 'first-heading' must not do. So the marker is read directly, and
+        // it beats `autofocus` instead of losing to whichever comes first in document order.
+        const marked = element.querySelector('[cdkFocusInitial], [cdk-focus-initial]') ??
+            // Not part of the CDK's contract, but the predefined buttons carry it and the native
+            // attribute does nothing for an element inserted after the page has loaded.
+            element.querySelector('[autofocus]');
+        if (marked) {
+            marked.focus();
+            return;
+        }
+        if (this.kbqAutoFocus() === 'first-tabbable' && focusTrap.focusFirstTabbableElement())
+            return;
+        if (this.kbqAutoFocus() === 'first-heading') {
+            const heading = element.querySelector('.kbq-modal-title');
+            if (heading) {
+                heading.tabIndex = -1;
+                heading.focus();
+                return;
+            }
+        }
+        this.modalContainer().nativeElement.focus();
+    }
     // Change kbqVisible from inside
     changeVisibleFromInside(visible, closeResult) {
-        if (this.kbqVisible !== visible) {
-            // Change kbqVisible value immediately
-            this.kbqVisible = visible;
-            this.kbqVisibleChange.emit(visible);
-            return this.handleVisibleStateChange(visible, true, closeResult);
+        if (this.kbqVisible() === visible)
+            return Promise.resolve();
+        // Claimed before the write, because `model.set()` reports it through `ngOnChanges` too and
+        // the flow is run here, synchronously, where the caller can still await it.
+        this.handledVisible = visible;
+        this.kbqVisible.set(visible);
+        return this.handleVisibleStateChange(visible, true, closeResult);
+    }
+    /**
+     * Runs the open/close flow for a visibility that arrived through a binding. A value this dialog
+     * set itself has already been handled, so it is skipped.
+     */
+    syncVisibleState(firstChange) {
+        const visible = this.kbqVisible();
+        if (visible === this.handledVisible)
+            return;
+        this.handledVisible = visible;
+        // A dialog that starts hidden has nothing to report: running the close path here used to
+        // emit `kbqBeforeClose`/`kbqAfterClose` before the dialog had ever been shown.
+        if (!firstChange || visible) {
+            // Do not trigger animation while initializing
+            this.handleVisibleStateChange(visible, !firstChange);
         }
-        return Promise.resolve();
     }
     changeAnimationState(state) {
         this.animationState = state;
+        this.animationPhase.set(state);
         this.animateMaskTo(state);
-        if (state) {
-            this.modalAnimationClassMap = {
-                [`zoom-${state}`]: true,
-                [`zoom-${state}-active`]: true
-            };
-        }
-        else {
-            this.modalAnimationClassMap = null;
-        }
         if (this.contentComponentRef) {
             this.contentComponentRef.changeDetectorRef.markForCheck();
         }
@@ -587,20 +970,51 @@ class KbqModalComponent extends KbqModalRef {
             this.changeDetector.markForCheck();
         }
     }
+    /**
+     * Runs the enter/leave animation and settles when it is really over: on `animationend`, as soon
+     * as the dialog is rendered when animations are disabled (`kbqAnimationsDisabled`), and on a
+     * timer when neither arrives.
+     */
     animateTo(isVisible) {
-        // Figure out the latest click position when shows up
-        if (isVisible) {
-            // [NOTE] Using timeout due to the document.click event is fired later than visible change,
-            // so if not postponed to next event-loop, we can't get the latest click position
-            setTimeout(() => this.updateTransformOrigin());
-        }
         this.changeAnimationState(isVisible ? 'enter' : 'leave');
-        // Return when animation is over
+        if (this.animationsDisabled) {
+            this.changeAnimationState(null);
+            // There is no animation to wait for, but `open()` still runs before the first change
+            // detection on the imperative path. Settling synchronously would report the dialog as
+            // open before its view exists, and everything hanging off that — the scrollbar flash,
+            // whatever a consumer does in `afterOpen` — would find nothing to act on.
+            if (this.viewInitialized)
+                return Promise.resolve(null);
+            return new Promise((resolve) => afterNextRender(() => resolve(null), { injector: this.injector }));
+        }
         return new Promise((resolve) => {
-            return setTimeout(() => {
+            // `open()` runs before the first change detection on the imperative path, so the view
+            // may not exist yet; the timer alone drives the promise then.
+            const container = this.viewInitialized ? this.modalContainer().nativeElement : null;
+            let settled = false;
+            let timer;
+            let unlisten;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = undefined;
+                }
+                unlisten?.();
+                unlisten = undefined;
                 this.changeAnimationState(null);
                 resolve(null);
-            }, MODAL_ANIMATE_DURATION);
+            };
+            if (container) {
+                unlisten = this.renderer.listen(container, 'animationend', (event) => {
+                    // The dialog hosts animated content of its own, and `animationend` bubbles.
+                    if (event.target === container)
+                        finish();
+                });
+            }
+            timer = setTimeout(finish, MODAL_ANIMATE_DURATION);
         });
     }
     formatModalButtons(buttons) {
@@ -621,6 +1035,7 @@ class KbqModalComponent extends KbqModalRef {
     /**
      * Create a component dynamically but not attach to any View
      * (this action will be executed when bodyContainer is ready)
+     *
      * @param component Component class
      */
     createDynamicComponent(component) {
@@ -639,31 +1054,19 @@ class KbqModalComponent extends KbqModalRef {
         // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
         this.contentComponentRef.changeDetectorRef.detectChanges();
     }
-    // Update transform-origin to the last click position on document
-    updateTransformOrigin() {
-        const modalElement = this.modalContainer().nativeElement;
-        const lastPosition = modalUtilObject.getLastClickPosition();
-        if (lastPosition) {
-            this.transformOrigin = `${lastPosition.x - modalElement.offsetLeft}px ${lastPosition.y - modalElement.offsetTop}px 0px`;
-        }
-    }
-    /**
-     * Take care of the body's overflow to decide the existence of scrollbar
-     * @param plusNum The number that the openModals.length will increase soon
-     */
-    changeBodyOverflow(plusNum = 0) {
-        const openModals = this.modalControl.openModals;
-        if (openModals.length + plusNum > 0) {
+    /** Locks the body scroll while any dialog is shown, and releases it once none is. */
+    changeBodyOverflow() {
+        if (this.modalControl.visibleModals().length > 0) {
             this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
         }
         else {
             this.renderer.removeStyle(this.document.body, 'overflow');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", 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-m);--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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqModalComponent, isStandalone: true, selector: "kbq-modal", inputs: { kbqModalType: { classPropertyName: "kbqModalType", publicName: "kbqModalType", isSignal: true, isRequired: false, transformFunction: null }, kbqComponent: { classPropertyName: "kbqComponent", publicName: "kbqComponent", isSignal: true, isRequired: false, transformFunction: null }, kbqContent: { classPropertyName: "kbqContent", publicName: "kbqContent", isSignal: true, isRequired: false, transformFunction: null }, kbqFooter: { classPropertyName: "kbqFooter", publicName: "kbqFooter", isSignal: true, isRequired: false, transformFunction: null }, kbqVisible: { classPropertyName: "kbqVisible", publicName: "kbqVisible", isSignal: true, isRequired: false, transformFunction: null }, kbqWidth: { classPropertyName: "kbqWidth", publicName: "kbqWidth", isSignal: true, isRequired: false, transformFunction: null }, kbqSize: { classPropertyName: "kbqSize", publicName: "kbqSize", isSignal: true, isRequired: false, transformFunction: null }, kbqWrapClassName: { classPropertyName: "kbqWrapClassName", publicName: "kbqWrapClassName", isSignal: true, isRequired: false, transformFunction: null }, kbqClassName: { classPropertyName: "kbqClassName", publicName: "kbqClassName", isSignal: true, isRequired: false, transformFunction: null }, kbqStyle: { classPropertyName: "kbqStyle", publicName: "kbqStyle", isSignal: true, isRequired: false, transformFunction: null }, kbqTitle: { classPropertyName: "kbqTitle", publicName: "kbqTitle", isSignal: true, isRequired: false, transformFunction: null }, kbqCaption: { classPropertyName: "kbqCaption", publicName: "kbqCaption", isSignal: true, isRequired: false, transformFunction: null }, kbqCloseByESC: { classPropertyName: "kbqCloseByESC", publicName: "kbqCloseByESC", isSignal: true, isRequired: false, transformFunction: null }, kbqAutoFocus: { classPropertyName: "kbqAutoFocus", publicName: "kbqAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, kbqAriaLabel: { classPropertyName: "kbqAriaLabel", publicName: "kbqAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, kbqClosable: { classPropertyName: "kbqClosable", publicName: "kbqClosable", isSignal: true, isRequired: false, transformFunction: null }, kbqMask: { classPropertyName: "kbqMask", publicName: "kbqMask", isSignal: true, isRequired: false, transformFunction: null }, kbqMaskClosable: { classPropertyName: "kbqMaskClosable", publicName: "kbqMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, kbqMaskStyle: { classPropertyName: "kbqMaskStyle", publicName: "kbqMaskStyle", isSignal: true, isRequired: false, transformFunction: null }, kbqBodyStyle: { classPropertyName: "kbqBodyStyle", publicName: "kbqBodyStyle", isSignal: true, isRequired: false, transformFunction: null }, kbqOkText: { classPropertyName: "kbqOkText", publicName: "kbqOkText", isSignal: true, isRequired: false, transformFunction: null }, kbqOkType: { classPropertyName: "kbqOkType", publicName: "kbqOkType", isSignal: true, isRequired: false, transformFunction: null }, kbqRestoreFocus: { classPropertyName: "kbqRestoreFocus", publicName: "kbqRestoreFocus", isSignal: true, isRequired: false, transformFunction: null }, kbqOkLoading: { classPropertyName: "kbqOkLoading", publicName: "kbqOkLoading", isSignal: true, isRequired: false, transformFunction: null }, kbqOkClick: { classPropertyName: "kbqOkClick", publicName: "kbqOkClick", isSignal: true, isRequired: false, transformFunction: null }, kbqCancelText: { classPropertyName: "kbqCancelText", publicName: "kbqCancelText", isSignal: true, isRequired: false, transformFunction: null }, kbqCancelLoading: { classPropertyName: "kbqCancelLoading", publicName: "kbqCancelLoading", isSignal: true, isRequired: false, transformFunction: null }, kbqCancelClick: { classPropertyName: "kbqCancelClick", publicName: "kbqCancelClick", isSignal: true, isRequired: false, transformFunction: null }, kbqGetContainer: { classPropertyName: "kbqGetContainer", publicName: "kbqGetContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kbqVisible: "kbqVisibleChange", kbqAfterOpenOutput: "kbqAfterOpen", kbqAfterCloseOutput: "kbqAfterClose", kbqBeforeCloseOutput: "kbqBeforeClose", kbqOnOkOutput: "kbqOnOk", kbqOnCancelOutput: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" }, classAttribute: "kbq-modal" }, providers: [{ provide: KBQ_MODAL, useExisting: KbqModalComponent }], viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, isSignal: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "scrollbarViewports", predicate: KbqScrollbarViewport, descendants: true, isSignal: true }, { propertyName: "trapFocus", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<!-- `aria-modal` only hides the page behind the topmost dialog, so a dialog covered by another one\n     is taken out of the accessibility tree and the tab order explicitly. -->\n<div [attr.inert]=\"inert ? '' : null\">\n    @if (isMaskEnabled()) {\n        <div\n            class=\"kbq-modal-mask {{ maskAnimationClasses() }}\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [style]=\"kbqMaskStyle()\"\n        ></div>\n    }\n\n    <div\n        class=\"kbq-modal-wrap {{ kbqWrapClassName() }}\"\n        kbqScrollbarViewport\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            cdkTrapFocus\n            role=\"dialog\"\n            tabindex=\"-1\"\n            [attr.aria-describedby]=\"ariaDescribedBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-modal]=\"true\"\n            [class]=\"containerClasses()\"\n            [class.kbq-modal_no-footer]=\"!hasFooter\"\n            [style]=\"kbqStyle()\"\n            [style.width]=\"kbqWidth() | toCssUnit\"\n        >\n            <div class=\"kbq-modal-content\">\n                @switch (kbqModalType()) {\n                    @case ('default') {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case ('confirm') {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case ('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<!-- The body of a predefined layout: the same three forms `kbqContent` can take, and `<ng-content>`\n     when it takes none. A component body is inserted into `#bodyContainer` from `ngAfterViewInit`. -->\n<ng-template #tplContentBody>\n    <ng-container #bodyContainer>\n        @if (contentKind() !== 'component') {\n            @switch (contentKind()) {\n                @case ('template') {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqContent())\" />\n                }\n                @case ('string') {\n                    <div [innerHTML]=\"kbqContent()\"></div>\n                }\n                @default {\n                    <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                }\n            }\n        }\n    </ng-container>\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 [attr.id]=\"titleId\">\n                        @switch (titleKind()) {\n                            @case ('template') {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqTitle())\" />\n                            }\n                            @case ('string') {\n                                <div [innerHTML]=\"kbqTitle()\"></div>\n                            }\n                        }\n                    </div>\n                }\n                @if (kbqCaption()) {\n                    <div class=\"kbq-modal-caption\" kbq-title [attr.id]=\"captionId\">\n                        @switch (captionKind()) {\n                            @case ('template') {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqCaption())\" />\n                            }\n                            @case ('string') {\n                                <div [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                    [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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        kbqScrollbarViewport\n        class=\"kbq-modal-body\"\n        [style]=\"kbqBodyStyle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"tplContentBody\" />\n    </div>\n    @if (hasFooter) {\n        <div class=\"kbq-modal-footer\" [kbqOverflowShadowBottom]=\"modalBodyOverflow\">\n            @switch (footerKind()) {\n                @case ('template') {\n                    <ng-container [ngTemplateOutlet]=\"$any(footer())\" />\n                }\n                @case ('string') {\n                    <div [innerHTML]=\"footer()\"></div>\n                }\n                @case ('buttons') {\n                    @for (button of $any(footer()); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\n                                kbq-button\n                                [attr.autofocus]=\"button.autoFocus ? '' : null\"\n                                [attr.kbq-modal-main-action]=\"button.kbqModalMainAction ? '' : null\"\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                            [class.kbq-progress]=\"loading('ok')\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ kbqOkText() }}\n                        </button>\n                    }\n                    @if (kbqCancelText()) {\n                        <button kbq-button [class.kbq-progress]=\"loading('cancel')\" (click)=\"onClickOkCancel('cancel')\">\n                            {{ kbqCancelText() }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        #confirmBodyOverflow=\"kbqOverflowShadowContainer\"\n        kbqOverflowShadowContainer\n        kbqScrollbarViewport\n        class=\"kbq-modal-body\"\n        [style]=\"kbqBodyStyle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"tplContentBody\" />\n    </div>\n    @if (kbqOkText() || kbqCancelText()) {\n        <div class=\"kbq-confirm-footer\" [kbqOverflowShadowBottom]=\"confirmBodyOverflow\">\n            @if (kbqOkText()) {\n                <button\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [class.kbq-progress]=\"loading('ok')\"\n                    [color]=\"kbqOkType()\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ kbqOkText() }}\n                </button>\n            }\n            @if (kbqCancelText()) {\n                <button kbq-button [class.kbq-progress]=\"loading('cancel')\" (click)=\"onClickOkCancel('cancel')\">\n                    {{ kbqCancelText() }}\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-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-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{opacity:0;animation-timing-function:ease-out}.fade-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-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{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)}@media(prefers-reduced-motion:reduce){.fade-enter,.fade-leave{animation:none;opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.zoom-enter,.zoom-leave{animation:none;opacity:1;transform:none}}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-viewport-inset);border-radius:var(--kbq-modal-size-border-radius)}@supports (corner-shape: squircle){.kbq-modal-container{corner-shape:squircle;border-radius:clamp(var(--kbq-modal-size-border-radius) * 1.85,var(--kbq-modal-size-border-radius) * 2.3 - 3.6px,var(--kbq-modal-size-border-radius) * 2)}}.kbq-modal-container{display:flex;flex-direction:column;width:auto;max-height:calc(100vh - 2 * var(--kbq-modal-size-viewport-inset));margin:0 auto;list-style:none}.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_no-footer .kbq-modal-body{padding-bottom:var(--kbq-modal-size-content-padding-bottom-without-footer)}.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)}@supports (corner-shape: squircle){.kbq-modal-content{corner-shape:squircle;border-radius:clamp(var(--kbq-modal-size-border-radius) * 1.85,var(--kbq-modal-size-border-radius) * 2.3 - 3.6px,var(--kbq-modal-size-border-radius) * 2)}}.kbq-modal-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;background-clip:padding-box}.kbq-modal-content-host{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.kbq-modal-header{display:flex;flex:0 0 auto;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;flex:1 1 auto;min-height:0;overflow-y:auto;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-footer,.kbq-confirm-footer{display:flex;flex:0 0 auto;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-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-m);--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-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-viewport-inset: var(--kbq-size-5xl);--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: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { 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: i4.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-modal', imports: [
                         CdkTrapFocus,
@@ -671,79 +1074,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         KbqIconModule,
                         CssUnitPipe,
                         NgTemplateOutlet,
+                        KbqScrollbarViewport,
                         KbqOverflowShadowContainer,
                         KbqOverflowShadowTop,
                         KbqOverflowShadowBottom,
                         KbqTitleModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                    ], providers: [{ provide: KBQ_MODAL, useExisting: KbqModalComponent }], 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            [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-m);--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
-            }], kbqFooter: [{
-                type: Input
-            }], kbqVisible: [{
-                type: Input
-            }], kbqVisibleChange: [{ type: i0.Output, args: ["kbqVisibleChange"] }], kbqWidth: [{
-                type: Input
-            }], kbqSize: [{
-                type: Input
-            }], kbqWrapClassName: [{
-                type: Input
-            }], kbqClassName: [{
-                type: Input
-            }], kbqStyle: [{
-                type: Input
-            }], kbqTitle: [{
-                type: Input
-            }], kbqCaption: [{
-                type: Input
-            }], kbqCloseByESC: [{
-                type: Input
-            }], kbqClosable: [{
-                type: Input
-            }], kbqMask: [{
-                type: Input
-            }], kbqMaskClosable: [{
-                type: Input
-            }], kbqMaskStyle: [{
-                type: Input
-            }], kbqBodyStyle: [{
-                type: Input
-            }], kbqAfterOpen: [{
-                type: Output
-            }], kbqAfterClose: [{
-                type: Output
-            }], kbqBeforeClose: [{
-                type: Output
-            }], kbqOkText: [{
-                type: Input
-            }], kbqOkType: [{
-                type: Input
-            }], kbqRestoreFocus: [{
-                type: Input
-            }], kbqOkLoading: [{
-                type: Input
-            }], kbqOnOk: [{
-                type: Input
-            }, {
-                type: Output
-            }], kbqCancelText: [{
-                type: Input
-            }], kbqCancelLoading: [{
-                type: Input
-            }], kbqOnCancel: [{
-                type: Input
-            }, {
-                type: Output
-            }], 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
-            }] } });
+                    }, hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ], template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<!-- `aria-modal` only hides the page behind the topmost dialog, so a dialog covered by another one\n     is taken out of the accessibility tree and the tab order explicitly. -->\n<div [attr.inert]=\"inert ? '' : null\">\n    @if (isMaskEnabled()) {\n        <div\n            class=\"kbq-modal-mask {{ maskAnimationClasses() }}\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [style]=\"kbqMaskStyle()\"\n        ></div>\n    }\n\n    <div\n        class=\"kbq-modal-wrap {{ kbqWrapClassName() }}\"\n        kbqScrollbarViewport\n        tabindex=\"-1\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            cdkTrapFocus\n            role=\"dialog\"\n            tabindex=\"-1\"\n            [attr.aria-describedby]=\"ariaDescribedBy\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-modal]=\"true\"\n            [class]=\"containerClasses()\"\n            [class.kbq-modal_no-footer]=\"!hasFooter\"\n            [style]=\"kbqStyle()\"\n            [style.width]=\"kbqWidth() | toCssUnit\"\n        >\n            <div class=\"kbq-modal-content\">\n                @switch (kbqModalType()) {\n                    @case ('default') {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case ('confirm') {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case ('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<!-- The body of a predefined layout: the same three forms `kbqContent` can take, and `<ng-content>`\n     when it takes none. A component body is inserted into `#bodyContainer` from `ngAfterViewInit`. -->\n<ng-template #tplContentBody>\n    <ng-container #bodyContainer>\n        @if (contentKind() !== 'component') {\n            @switch (contentKind()) {\n                @case ('template') {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqContent())\" />\n                }\n                @case ('string') {\n                    <div [innerHTML]=\"kbqContent()\"></div>\n                }\n                @default {\n                    <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                }\n            }\n        }\n    </ng-container>\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 [attr.id]=\"titleId\">\n                        @switch (titleKind()) {\n                            @case ('template') {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqTitle())\" />\n                            }\n                            @case ('string') {\n                                <div [innerHTML]=\"kbqTitle()\"></div>\n                            }\n                        }\n                    </div>\n                }\n                @if (kbqCaption()) {\n                    <div class=\"kbq-modal-caption\" kbq-title [attr.id]=\"captionId\">\n                        @switch (captionKind()) {\n                            @case ('template') {\n                                <ng-container [ngTemplateOutlet]=\"$any(kbqCaption())\" />\n                            }\n                            @case ('string') {\n                                <div [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                    [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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        kbqScrollbarViewport\n        class=\"kbq-modal-body\"\n        [style]=\"kbqBodyStyle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"tplContentBody\" />\n    </div>\n    @if (hasFooter) {\n        <div class=\"kbq-modal-footer\" [kbqOverflowShadowBottom]=\"modalBodyOverflow\">\n            @switch (footerKind()) {\n                @case ('template') {\n                    <ng-container [ngTemplateOutlet]=\"$any(footer())\" />\n                }\n                @case ('string') {\n                    <div [innerHTML]=\"footer()\"></div>\n                }\n                @case ('buttons') {\n                    @for (button of $any(footer()); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\n                                kbq-button\n                                [attr.autofocus]=\"button.autoFocus ? '' : null\"\n                                [attr.kbq-modal-main-action]=\"button.kbqModalMainAction ? '' : null\"\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                            [class.kbq-progress]=\"loading('ok')\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ kbqOkText() }}\n                        </button>\n                    }\n                    @if (kbqCancelText()) {\n                        <button kbq-button [class.kbq-progress]=\"loading('cancel')\" (click)=\"onClickOkCancel('cancel')\">\n                            {{ kbqCancelText() }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div\n        #confirmBodyOverflow=\"kbqOverflowShadowContainer\"\n        kbqOverflowShadowContainer\n        kbqScrollbarViewport\n        class=\"kbq-modal-body\"\n        [style]=\"kbqBodyStyle()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"tplContentBody\" />\n    </div>\n    @if (kbqOkText() || kbqCancelText()) {\n        <div class=\"kbq-confirm-footer\" [kbqOverflowShadowBottom]=\"confirmBodyOverflow\">\n            @if (kbqOkText()) {\n                <button\n                    kbq-button\n                    [attr.autofocus]=\"true\"\n                    [class.kbq-progress]=\"loading('ok')\"\n                    [color]=\"kbqOkType()\"\n                    (click)=\"onClickOkCancel('ok')\"\n                >\n                    {{ kbqOkText() }}\n                </button>\n            }\n            @if (kbqCancelText()) {\n                <button kbq-button [class.kbq-progress]=\"loading('cancel')\" (click)=\"onClickOkCancel('cancel')\">\n                    {{ kbqCancelText() }}\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-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.fade-enter.fade-enter-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{opacity:0;animation-timing-function:ease-out}.fade-leave{animation-timing-function:ease-out}.zoom-enter,.zoom-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.zoom-enter.zoom-enter-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{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)}@media(prefers-reduced-motion:reduce){.fade-enter,.fade-leave{animation:none;opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.zoom-enter,.zoom-leave{animation:none;opacity:1;transform:none}}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-viewport-inset);border-radius:var(--kbq-modal-size-border-radius)}@supports (corner-shape: squircle){.kbq-modal-container{corner-shape:squircle;border-radius:clamp(var(--kbq-modal-size-border-radius) * 1.85,var(--kbq-modal-size-border-radius) * 2.3 - 3.6px,var(--kbq-modal-size-border-radius) * 2)}}.kbq-modal-container{display:flex;flex-direction:column;width:auto;max-height:calc(100vh - 2 * var(--kbq-modal-size-viewport-inset));margin:0 auto;list-style:none}.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_no-footer .kbq-modal-body{padding-bottom:var(--kbq-modal-size-content-padding-bottom-without-footer)}.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)}@supports (corner-shape: squircle){.kbq-modal-content{corner-shape:squircle;border-radius:clamp(var(--kbq-modal-size-border-radius) * 1.85,var(--kbq-modal-size-border-radius) * 2.3 - 3.6px,var(--kbq-modal-size-border-radius) * 2)}}.kbq-modal-content{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;background-clip:padding-box}.kbq-modal-content-host{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.kbq-modal-header{display:flex;flex:0 0 auto;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;flex:1 1 auto;min-height:0;overflow-y:auto;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-footer,.kbq-confirm-footer{display:flex;flex:0 0 auto;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-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-m);--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-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-viewport-inset: var(--kbq-size-5xl);--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: i0.Input, args: [{ isSignal: true, alias: "kbqModalType", required: false }] }], kbqComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqComponent", required: false }] }], kbqContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqContent", required: false }] }], kbqFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqFooter", required: false }] }], kbqVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqVisible", required: false }] }, { type: i0.Output, args: ["kbqVisibleChange"] }], kbqWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqWidth", required: false }] }], kbqSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSize", required: false }] }], kbqWrapClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqWrapClassName", required: false }] }], kbqClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqClassName", required: false }] }], kbqStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqStyle", required: false }] }], kbqTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTitle", required: false }] }], kbqCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCaption", required: false }] }], kbqCloseByESC: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCloseByESC", required: false }] }], kbqAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAutoFocus", required: false }] }], kbqAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqAriaLabel", required: false }] }], kbqClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqClosable", required: false }] }], kbqMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqMask", required: false }] }], kbqMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqMaskClosable", required: false }] }], kbqMaskStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqMaskStyle", required: false }] }], kbqBodyStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqBodyStyle", required: false }] }], kbqAfterOpenOutput: [{ type: i0.Output, args: ["kbqAfterOpen"] }], kbqAfterCloseOutput: [{ type: i0.Output, args: ["kbqAfterClose"] }], kbqBeforeCloseOutput: [{ type: i0.Output, args: ["kbqBeforeClose"] }], kbqOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOkText", required: false }] }], kbqOkType: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOkType", required: false }] }], kbqRestoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqRestoreFocus", required: false }] }], kbqOkLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOkLoading", required: false }] }], kbqOkClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqOkClick", required: false }] }], kbqOnOkOutput: [{ type: i0.Output, args: ["kbqOnOk"] }], kbqCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCancelText", required: false }] }], kbqCancelLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCancelLoading", required: false }] }], kbqCancelClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqCancelClick", required: false }] }], kbqOnCancelOutput: [{ type: i0.Output, args: ["kbqOnCancel"] }], modalContainer: [{ type: i0.ViewChild, args: ['modalContainer', { isSignal: true }] }], bodyContainer: [{ type: i0.ViewChild, args: ['bodyContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], scrollbarViewports: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }], trapFocus: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], kbqGetContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqGetContainer", required: false }] }] } });
 function isPromise(obj) {
     return (!!obj &&
         (typeof obj === 'object' || typeof obj === 'function') &&
@@ -753,32 +1095,41 @@ function isPromise(obj) {
 
 class KbqModalTitle {
     constructor() {
-        this.modal = inject(KbqModalComponent);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqModalTitle, isStandalone: true, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "class.kbq-modal-header_closable": "modal.kbqClosable", "style.box-shadow": "modal.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
+        this.modal = inject(KBQ_MODAL);
+        /** Accessible name for the icon-only close button. */
+        this.a11yLocaleConfiguration = inject(KbqLocaleOverridesDirective, { self: true }).read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        // Lets the dialog point `aria-labelledby` at this heading instead of going unnamed.
+        this.modal.registerTitle();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqModalTitle, isStandalone: true, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "style.box-shadow": "modal.bodyOverflow().top ? \"var(--kbq-shadow-overflow-normal-bottom)\" : null" }, classAttribute: "kbq-modal-header" }, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective, inputs: ["kbqLocaleOverrides", "localeOverrides"] }], ngImport: i0, template: `
         <div class="kbq-modal-header-content">
-            <div class="kbq-modal-title" kbq-title>
+            <div class="kbq-modal-title" kbq-title [attr.id]="modal.titleId">
                 <ng-content />
             </div>
 
             <ng-content select="kbq-modal-caption, [kbq-modal-caption], [kbqModalCaption]" />
         </div>
 
-        @if (modal.kbqClosable) {
+        <!-- Outside the two-line clamp of the title, so actions next to the heading do not need
+             to pierce encapsulation to escape it. -->
+        <ng-content select="[kbqModalTitleActions]" />
+
+        @if (modal.kbqClosable()) {
             <button
                 class="kbq-modal-close kbq-button_transparent"
                 type="button"
                 kbq-button
+                [attr.aria-label]="a11yLocaleConfiguration().close"
                 [color]="'contrast'"
                 (click)="modal.onClickCloseBtn()"
             >
                 <i kbq-icon="kbq-xmark_16" [color]="modal.componentColors.Contrast"></i>
             </button>
         }
-    `, 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"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalTitle, decorators: [{
             type: Component,
             args: [{
                     selector: `[kbq-modal-title], kbq-modal-title, [kbqModalTitle]`,
@@ -789,18 +1140,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                     ],
                     template: `
         <div class="kbq-modal-header-content">
-            <div class="kbq-modal-title" kbq-title>
+            <div class="kbq-modal-title" kbq-title [attr.id]="modal.titleId">
                 <ng-content />
             </div>
 
             <ng-content select="kbq-modal-caption, [kbq-modal-caption], [kbqModalCaption]" />
         </div>
 
-        @if (modal.kbqClosable) {
+        <!-- Outside the two-line clamp of the title, so actions next to the heading do not need
+             to pierce encapsulation to escape it. -->
+        <ng-content select="[kbqModalTitleActions]" />
+
+        @if (modal.kbqClosable()) {
             <button
                 class="kbq-modal-close kbq-button_transparent"
                 type="button"
                 kbq-button
+                [attr.aria-label]="a11yLocaleConfiguration().close"
                 [color]="'contrast'"
                 (click)="modal.onClickCloseBtn()"
             >
@@ -808,25 +1164,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
             </button>
         }
     `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         class: 'kbq-modal-header',
-                        '[class.kbq-modal-header_closable]': 'modal.kbqClosable',
                         '[style.box-shadow]': 'modal.bodyOverflow().top ? "var(--kbq-shadow-overflow-normal-bottom)" : null'
-                    }
+                    },
+                    hostDirectives: [
+                        { directive: KbqLocaleOverridesDirective, inputs: ['kbqLocaleOverrides: localeOverrides'] }
+                    ]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Caption of a manually composed modal (`kbqComponent`). Projected into the header rendered by
  * `KbqModalTitle`, below the title, and clamped to two lines. The resulting markup matches the
  * header of a modal created via `KbqModalService.create`.
  */
 class KbqModalCaption {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalCaption, isStandalone: true, selector: "[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]", host: { classAttribute: "kbq-modal-caption" }, hostDirectives: [{ directive: i3.KbqTitleDirective }], ngImport: i0, template: `
+    constructor() {
+        this.modal = inject(KBQ_MODAL);
+        // Lets the dialog point `aria-describedby` at this caption; without it the composed path
+        // renders a description no screen reader is told about.
+        this.modal.registerCaption();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqModalCaption, isStandalone: true, selector: "[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]", host: { properties: { "attr.id": "modal.captionId" }, classAttribute: "kbq-modal-caption" }, hostDirectives: [{ directive: i4.KbqTitleDirective }], ngImport: i0, template: `
         <ng-content />
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalCaption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalCaption, decorators: [{
             type: Component,
             args: [{
                     selector: `[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]`,
@@ -835,11 +1200,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'kbq-modal-caption'
+                        class: 'kbq-modal-caption',
+                        '[attr.id]': 'modal.captionId'
                     },
                     hostDirectives: [KbqTitleDirective]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 /**
  * Scrollable body of a manually composed modal (`kbqComponent`). Publishes its scroll-shadow
  * state onto the modal instance so a sibling `KbqModalTitle`/`KbqModalFooter` can render the
@@ -847,31 +1213,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  */
 class KbqModalBody {
     constructor() {
-        this.modal = inject(KbqModalComponent);
+        this.modal = inject(KBQ_MODAL);
         this.overflowContainer = inject(KbqOverflowShadowContainer);
-        effect(() => this.modal.bodyOverflow.set(this.overflowContainer.overflow()));
+        this.scrollbarViewport = inject(KbqScrollbarViewport);
+        effect(() => this.modal.setBodyOverflow(this.overflowContainer.overflow()));
+        this.modal.afterOpen.pipe(takeUntilDestroyed()).subscribe(() => this.scrollbarViewport.flashScrollIndicators());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body kbq-scrollbar" }, hostDirectives: [{ directive: i4.KbqOverflowShadowContainer }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqModalBody, isStandalone: true, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body" }, hostDirectives: [{ directive: i1.KbqOverflowShadowContainer }, { directive: i5.KbqScrollbarViewport }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalBody, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalBody, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-body], kbq-modal-body, [kbqModalBody]`,
                     host: {
-                        class: 'kbq-modal-body kbq-scrollbar'
+                        class: 'kbq-modal-body'
                     },
-                    hostDirectives: [KbqOverflowShadowContainer]
+                    hostDirectives: [KbqOverflowShadowContainer, KbqScrollbarViewport]
                 }]
         }], ctorParameters: () => [] });
 class KbqModalFooter {
     constructor() {
-        this.modal = inject(KbqModalComponent);
+        this.modal = inject(KBQ_MODAL);
+        // Without this the dialog cannot tell a composed footer from no footer at all, and would
+        // add the no-footer bottom padding underneath one.
+        this.modal.registerFooter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalFooter, isStandalone: true, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { properties: { "style.box-shadow": "modal.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqModalFooter, isStandalone: true, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { properties: { "style.box-shadow": "modal.bodyOverflow().bottom ? \"var(--kbq-shadow-overflow-normal-top)\" : null" }, classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]`,
@@ -880,12 +1251,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         '[style.box-shadow]': 'modal.bodyOverflow().bottom ? "var(--kbq-shadow-overflow-normal-top)" : null'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 class KbqModalMainAction {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqModalMainAction, isStandalone: true, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: KbqModalMainAction, isStandalone: true, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalMainAction, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalMainAction, decorators: [{
             type: Directive,
             args: [{
                     selector: `[kbq-modal-main-action]`
@@ -896,22 +1267,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
 const KBQ_MODAL_DATA = new InjectionToken('KbqModalData');
 /**
  * A builder used for managing service creating modals
+ *
  * @docs-private
  */
 class ModalBuilderForService {
-    constructor(overlay, options = {}, injector) {
+    constructor(overlay, options = {}, injector, 
+    /** Lifetime of the caller. The dialog is destroyed with it. */
+    openerDestroyRef = null) {
         this.overlay = overlay;
         this.options = options;
         this.injector = injector;
         this.createModal();
-        if (!('kbqGetContainer' in options)) {
-            options.kbqGetContainer = undefined;
-        }
-        this.changeProps(options);
-        // Defers ESC handling until the modal is fully open, avoiding premature close during the opening animation.
-        this.modalRef.instance.kbqAfterOpen.pipe(switchMap(() => this.overlayRef.keydownEvents()), filter((event) => {
-            return !!(event.keyCode === ESCAPE && options.kbqCloseByESC);
-        })).subscribe(() => this.getInstance()?.handleCloseResult('cancel', () => true));
+        this.mirrorEmitters(options);
+        // Nobody owns the builder, so without this the dialog outlives whatever opened it: it stays
+        // painted over the next view, `afterClose` never emits, and the body scroll lock is kept.
+        this.detachFromOpener = openerDestroyRef?.onDestroy(() => this.destroyModal());
         this.modalRef.instance.open();
         this.modalRef.instance.kbqAfterClose.subscribe(() => this.destroyModal());
     }
@@ -920,19 +1290,41 @@ class ModalBuilderForService {
     }
     destroyModal() {
         if (this.modalRef) {
+            this.detachFromOpener?.();
+            this.detachFromOpener = undefined;
             this.overlayRef.dispose();
             this.modalRef = null;
         }
     }
-    changeProps(options) {
-        if (this.modalRef) {
-            // here not limit user's inputs at runtime
-            Object.assign(this.modalRef.instance, options);
+    /**
+     * Mirrors the caller's emitters onto the dialog's own outputs. The option values themselves
+     * reach the dialog through `KBQ_MODAL_OPTIONS`, as the initial values of its inputs — a dialog
+     * created by the service has no template bindings to carry them.
+     */
+    mirrorEmitters(options) {
+        if (!this.modalRef)
+            return;
+        const { kbqAfterOpen, kbqAfterClose, kbqOnOk, kbqOnCancel } = options;
+        // Mirrored, never substituted, so `afterOpen`/`afterClose` on the returned ref keep working
+        // and the overlay teardown does not hang off an emitter the caller owns and can complete.
+        if (kbqAfterOpen) {
+            this.modalRef.instance.kbqAfterOpen.subscribe(() => kbqAfterOpen.emit());
+        }
+        if (kbqAfterClose) {
+            this.modalRef.instance.kbqAfterClose.subscribe((result) => kbqAfterClose.emit(result));
+        }
+        if (kbqOnOk) {
+            this.modalRef.instance.kbqOnOk.subscribe((instance) => kbqOnOk.emit(instance));
+        }
+        if (kbqOnCancel) {
+            this.modalRef.instance.kbqOnCancel.subscribe((instance) => kbqOnCancel.emit(instance));
         }
     }
     // Create component to ApplicationRef
     createModal() {
-        this.overlayRef = this.overlay.create();
+        // Second line of defence behind the `DestroyRef` above: a router navigation disposes the
+        // overlay even when the dialog was opened from a longer-lived injector.
+        this.overlayRef = this.overlay.create(new OverlayConfig({ disposeOnNavigation: true }));
         this.overlayRef.hostElement.classList.add('kbq-modal-overlay');
         this.modalRef = this.overlayRef.attach(new ComponentPortal(KbqModalComponent, undefined, this.injector));
     }
@@ -954,46 +1346,31 @@ class KbqModalService {
     closeAll() {
         this.modalControl.closeAll();
     }
+    /**
+     * Opens a dialog. Its lifetime is bound to `options.injector` — the caller's injector when one
+     * is passed, the root environment injector otherwise — so destroying the opener closes it.
+     */
     create(options = {}) {
-        if (typeof options.kbqOnCancel !== 'function') {
-            // Leave an empty function to close this modal by default
-            options.kbqOnCancel = () => { };
-        }
-        if (typeof options.kbqOnOk !== 'function') {
-            // Leave an empty function to close this modal by default
-            options.kbqOnOk = () => { };
-        }
-        if (!('kbqCloseByESC' in options)) {
-            options.kbqCloseByESC = true;
-        }
-        // Remove the Cancel button if the user not specify a Cancel button
-        if (!('kbqCancelText' in options)) {
-            options.kbqCancelText = undefined;
-        }
-        // Remove the Ok button if the user not specify an Ok button
-        if (!('kbqOkText' in options)) {
-            options.kbqOkText = undefined;
-        }
-        // Remove the footer if the user not specify a footer
-        if (!('kbqFooter' in options)) {
-            options.kbqFooter = undefined;
-        }
+        const parentInjector = options.injector || this.injector;
         const injector = Injector.create({
-            parent: options.injector || this.injector,
-            providers: [{ provide: KBQ_MODAL_DATA, useValue: options.data }]
+            parent: parentInjector,
+            providers: [
+                { provide: KBQ_MODAL_DATA, useValue: options.data },
+                // The dialog reads these as the initial values of its inputs. A service-created
+                // dialog has no template bindings, so that is the only way in.
+                { provide: KBQ_MODAL_OPTIONS, useValue: options }
+            ]
         });
-        return new ModalBuilderForService(this.overlay, options, injector).getInstance();
+        // Read from the caller's injector, not the derived one: `Injector.create` provides a
+        // `DestroyRef` of its own, and nothing ever destroys that.
+        const openerDestroyRef = parentInjector.get(DestroyRef, null);
+        return new ModalBuilderForService(this.overlay, options, injector, openerDestroyRef).getInstance();
     }
     confirm(options = {}, confirmType = 'confirm') {
         if ('kbqFooter' in options && isDevMode()) {
             // eslint-disable-next-line no-console
             console.warn(`The Confirm-Modal doesn't support "kbqFooter", this property will be ignored.`);
         }
-        // NOTE: only support function currently by calling confirm()
-        if (typeof options.kbqOnOk !== 'function') {
-            // Leave an empty function to close this modal by default
-            options.kbqOnOk = () => { };
-        }
         options.kbqModalType = 'confirm';
         options.kbqClassName = `kbq-confirm kbq-confirm-${confirmType} ${options.kbqClassName || ''}`;
         return this.create(options);
@@ -1005,20 +1382,21 @@ class KbqModalService {
     success(options = {}) {
         return this.confirm(options, 'success');
     }
+    /** Opens a confirm dialog styled for a destructive action — the `warn` confirm type. */
     delete(options = {}) {
         return this.confirm(options, 'warn');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class KbqModalModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqModalModule, imports: [OverlayModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqModalModule, imports: [OverlayModule,
             A11yModule,
             KbqButtonModule,
             KbqIconModule,
@@ -1036,7 +1414,7 @@ class KbqModalModule {
             KbqModalBody,
             KbqModalFooter,
             KbqModalMainAction] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalModule, providers: [
             KbqModalControlService,
             KbqModalService,
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
@@ -1048,7 +1426,7 @@ class KbqModalModule {
             KbqModalComponent,
             KbqModalTitle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqModalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1086,5 +1464,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_MODAL_DATA, KbqModalBody, KbqModalCaption, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
+export { CssUnitPipe, KBQ_MODAL, KBQ_MODAL_DATA, KBQ_MODAL_OPTIONS, KbqModalBody, KbqModalCaption, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
 //# sourceMappingURL=koobiq-components-modal.mjs.map