@koobiq/components 21.0.1 → 21.1.0

package/fesm2022/koobiq-components-modal.mjs

@@ -310,7 +310,7 @@ class KbqModalComponent extends KbqModalRef {
          * 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
+         * @docs-private
          */
         this.animationsDisabled = kbqAnimationsDisabled();
         /** Accessible name for the icon-only close button. */
@@ -1064,7 +1064,7 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /** @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 }); }
+    /** @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;overflow-wrap:break-word;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;overflow-wrap:break-word;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: "21.2.25", ngImport: i0, type: KbqModalComponent, decorators: [{
             type: Component,
@@ -1084,7 +1084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '(keydown)': 'onKeyDown($event)'
                     }, 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"] }]
+                    ], 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;overflow-wrap:break-word;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;overflow-wrap:break-word;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 &&