@koobiq/components 16.0.0-beta.2 → 16.0.0-beta.6

package/fesm2022/koobiq-components-loader-overlay.mjs

@@ -3,10 +3,9 @@ import { PlatformModule } from '@angular/cdk/platform';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Attribute, Input, ContentChild, NgModule } from '@angular/core';
+import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, NgModule } from '@angular/core';
 import * as i2 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 const mcLoaderOverlayParent = 'kbq-loader-overlay_parent';
 class KbqLoaderOverlayIndicator {
@@ -58,16 +57,17 @@ class KbqLoaderOverlay {
     get isExternalCaption() {
         return !!this.externalCaption;
     }
-    get isFixedTop() {
-        return coerceBooleanProperty(this.fixedTop);
-    }
     get isEmpty() {
         return !(!!this.text || this.isExternalText || !!this.caption || this.isExternalCaption);
     }
-    constructor(elementRef, renderer, fixedTop) {
+    get spinnerSize() {
+        return this.compact ? 'compact' : 'big';
+    }
+    constructor(elementRef, renderer) {
         this.elementRef = elementRef;
         this.renderer = renderer;
-        this.fixedTop = fixedTop;
+        this.compact = false;
+        this.transparent = false;
     }
     ngOnInit() {
         this.renderer.addClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);
@@ -75,26 +75,27 @@ class KbqLoaderOverlay {
     ngOnDestroy() {
         this.renderer.removeClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqLoaderOverlay, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'fixed-top', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: { text: "text", caption: "caption" }, host: { properties: { "class.kbq-loader-overlay_empty": "isEmpty", "class.kbq-loader-overlay_center": "!isFixedTop", "class.kbq-loader-overlay_fixed-top": "isFixedTop" }, classAttribute: "kbq-loader-overlay" }, queries: [{ propertyName: "externalIndicator", first: true, predicate: KbqLoaderOverlayIndicator, descendants: true }, { propertyName: "externalText", first: true, predicate: KbqLoaderOverlayText, descendants: true }, { propertyName: "externalCaption", first: true, predicate: KbqLoaderOverlayCaption, descendants: true }], ngImport: i0, template: "<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".kbq-loader-overlay_parent{position:relative}.kbq-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;inset:0}.kbq-loader-overlay .kbq-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.kbq-loader-overlay.kbq-loader-overlay_fixed-top{justify-content:unset}.kbq-loader-overlay.kbq-loader-overlay_fixed-top .kbq-loader-overlay__container{margin-top:72px}.kbq-loader-overlay.kbq-loader-overlay_center:not(.kbq-loader-overlay_empty) .kbq-loader-overlay__container{transform:translateY(-40%)}.kbq-loader-overlay-text{margin-top:8px;max-width:480px;text-align:center}.kbq-loader-overlay-caption{margin-top:2px;max-width:480px;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqLoaderOverlay, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: { text: "text", caption: "caption", compact: "compact", transparent: "transparent" }, host: { properties: { "class.kbq-loader-overlay_empty": "isEmpty", "class.kbq-loader-overlay_transparent": "transparent", "class.kbq-loader-overlay_filled": "!transparent", "class.kbq-loader-overlay_big": "!compact", "class.kbq-loader-overlay_compact": "compact" }, classAttribute: "kbq-loader-overlay" }, queries: [{ propertyName: "externalIndicator", first: true, predicate: KbqLoaderOverlayIndicator, descendants: true }, { propertyName: "externalText", first: true, predicate: KbqLoaderOverlayText, descendants: true }, { propertyName: "externalCaption", first: true, predicate: KbqLoaderOverlayCaption, descendants: true }], ngImport: i0, template: "<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [size]=\"spinnerSize\" [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".kbq-loader-overlay_parent{position:relative}.kbq-loader-overlay-text,.kbq-loader-overlay-caption{max-width:90%;text-align:center}.kbq-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;inset:0}.kbq-loader-overlay .kbq-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.kbq-loader-overlay.kbq-loader-overlay_big{padding-left:var(--kbq-loader-overlay-size-big-overlay-padding-horizontal, 32px);padding-right:var(--kbq-loader-overlay-size-big-overlay-padding-horizontal, 32px)}.kbq-loader-overlay.kbq-loader-overlay_big .kbq-progress-spinner{margin-bottom:var(--kbq-loader-overlay-size-big-loader-margin-bottom, 24px)}.kbq-loader-overlay.kbq-loader-overlay_big .kbq-loader-overlay-text{margin-bottom:var(--kbq-loader-overlay-size-big-content-content-gap-vertical, 4px)}.kbq-loader-overlay.kbq-loader-overlay_compact{padding-left:var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal, 32px);padding-right:var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal, 32px)}.kbq-loader-overlay.kbq-loader-overlay_compact .kbq-progress-spinner{margin-bottom:var(--kbq-loader-overlay-size-compact-loader-margin-bottom, 8px)}.kbq-loader-overlay.kbq-loader-overlay_compact .kbq-loader-overlay-text{margin-bottom:var(--kbq-loader-overlay-size-compact-content-content-gap-vertical, 2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqLoaderOverlay, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-loader-overlay', host: {
                         class: 'kbq-loader-overlay',
                         '[class.kbq-loader-overlay_empty]': 'isEmpty',
-                        '[class.kbq-loader-overlay_center]': '!isFixedTop',
-                        '[class.kbq-loader-overlay_fixed-top]': 'isFixedTop'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".kbq-loader-overlay_parent{position:relative}.kbq-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;inset:0}.kbq-loader-overlay .kbq-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.kbq-loader-overlay.kbq-loader-overlay_fixed-top{justify-content:unset}.kbq-loader-overlay.kbq-loader-overlay_fixed-top .kbq-loader-overlay__container{margin-top:72px}.kbq-loader-overlay.kbq-loader-overlay_center:not(.kbq-loader-overlay_empty) .kbq-loader-overlay__container{transform:translateY(-40%)}.kbq-loader-overlay-text{margin-top:8px;max-width:480px;text-align:center}.kbq-loader-overlay-caption{margin-top:2px;max-width:480px;text-align:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Attribute,
-                    args: ['fixed-top']
-                }] }]; }, propDecorators: { text: [{
+                        '[class.kbq-loader-overlay_transparent]': 'transparent',
+                        '[class.kbq-loader-overlay_filled]': '!transparent',
+                        '[class.kbq-loader-overlay_big]': '!compact',
+                        '[class.kbq-loader-overlay_compact]': 'compact'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [size]=\"spinnerSize\" [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n", styles: [".kbq-loader-overlay_parent{position:relative}.kbq-loader-overlay-text,.kbq-loader-overlay-caption{max-width:90%;text-align:center}.kbq-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;inset:0}.kbq-loader-overlay .kbq-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.kbq-loader-overlay.kbq-loader-overlay_big{padding-left:var(--kbq-loader-overlay-size-big-overlay-padding-horizontal, 32px);padding-right:var(--kbq-loader-overlay-size-big-overlay-padding-horizontal, 32px)}.kbq-loader-overlay.kbq-loader-overlay_big .kbq-progress-spinner{margin-bottom:var(--kbq-loader-overlay-size-big-loader-margin-bottom, 24px)}.kbq-loader-overlay.kbq-loader-overlay_big .kbq-loader-overlay-text{margin-bottom:var(--kbq-loader-overlay-size-big-content-content-gap-vertical, 4px)}.kbq-loader-overlay.kbq-loader-overlay_compact{padding-left:var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal, 32px);padding-right:var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal, 32px)}.kbq-loader-overlay.kbq-loader-overlay_compact .kbq-progress-spinner{margin-bottom:var(--kbq-loader-overlay-size-compact-loader-margin-bottom, 8px)}.kbq-loader-overlay.kbq-loader-overlay_compact .kbq-loader-overlay-text{margin-bottom:var(--kbq-loader-overlay-size-compact-content-content-gap-vertical, 2px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { text: [{
                 type: Input
             }], caption: [{
                 type: Input
+            }], compact: [{
+                type: Input
+            }], transparent: [{
+                type: Input
             }], externalIndicator: [{
                 type: ContentChild,
                 args: [KbqLoaderOverlayIndicator]

package/fesm2022/koobiq-components-loader-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-loader-overlay.mjs","sources":["../../../packages/components/loader-overlay/loader-overlay.component.ts","../../../packages/components/loader-overlay/loader-overlay.component.html","../../../packages/components/loader-overlay/loader-overlay.module.ts","../../../packages/components/loader-overlay/koobiq-components-loader-overlay.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n    Attribute,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    Directive,\n    ElementRef,\n    Input,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Renderer2,\n    ViewEncapsulation\n} from '@angular/core';\n\n\nconst mcLoaderOverlayParent = 'kbq-loader-overlay_parent';\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-indicator]',\n    host: {\n        class: 'kbq-loader-overlay-indicator'\n    }\n})\nexport class KbqLoaderOverlayIndicator {}\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-text]',\n    host: {\n        class: 'kbq-loader-overlay-text'\n    }\n})\nexport class KbqLoaderOverlayText {}\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-caption]',\n    host: {\n        class: 'kbq-loader-overlay-caption'\n    }\n})\nexport class KbqLoaderOverlayCaption {}\n\n\n@Component({\n    selector: 'kbq-loader-overlay',\n    templateUrl: './loader-overlay.component.html',\n    styleUrls: ['./loader-overlay.scss'],\n    host: {\n        class: 'kbq-loader-overlay',\n        '[class.kbq-loader-overlay_empty]': 'isEmpty',\n        '[class.kbq-loader-overlay_center]': '!isFixedTop',\n        '[class.kbq-loader-overlay_fixed-top]': 'isFixedTop'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqLoaderOverlay implements OnInit, OnDestroy {\n    @Input() text: string;\n\n    @Input() caption: string;\n\n    get isExternalIndicator(): boolean {\n        return !!this.externalIndicator;\n    }\n\n    get isExternalText(): boolean {\n        return !!this.externalText;\n    }\n\n    get isExternalCaption(): boolean {\n        return !!this.externalCaption;\n    }\n\n    get isFixedTop(): boolean {\n        return coerceBooleanProperty(this.fixedTop);\n    }\n\n    get isEmpty(): boolean {\n        return !(!!this.text || this.isExternalText || !!this.caption || this.isExternalCaption);\n    }\n\n    @ContentChild(KbqLoaderOverlayIndicator) externalIndicator: KbqLoaderOverlayIndicator | null;\n    @ContentChild(KbqLoaderOverlayText) externalText: KbqLoaderOverlayText | null;\n    @ContentChild(KbqLoaderOverlayCaption) externalCaption: KbqLoaderOverlayCaption | null;\n\n    constructor(\n        private elementRef: ElementRef,\n        private renderer: Renderer2,\n        @Optional() @Attribute('fixed-top') private fixedTop: string | null\n    ) {}\n\n    ngOnInit(): void {\n        this.renderer.addClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n    }\n\n    ngOnDestroy(): void {\n        this.renderer.removeClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n    }\n}\n\n","<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';\n\nimport {\n    KbqLoaderOverlay,\n    KbqLoaderOverlayCaption,\n    KbqLoaderOverlayIndicator,\n    KbqLoaderOverlayText\n} from './loader-overlay.component';\n\n\n@NgModule({\n    imports: [\n        CommonModule,\n        A11yModule,\n        PlatformModule,\n        KbqProgressSpinnerModule\n    ],\n    declarations: [\n        KbqLoaderOverlay,\n        KbqLoaderOverlayIndicator,\n        KbqLoaderOverlayText,\n        KbqLoaderOverlayCaption\n    ],\n    exports: [\n        KbqLoaderOverlay,\n        KbqLoaderOverlayIndicator,\n        KbqLoaderOverlayText,\n        KbqLoaderOverlayCaption\n    ]\n})\nexport class KbqLoaderOverlayModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-loader-overlay.mjs","sources":["../../../packages/components/loader-overlay/loader-overlay.component.ts","../../../packages/components/loader-overlay/loader-overlay.component.html","../../../packages/components/loader-overlay/loader-overlay.module.ts","../../../packages/components/loader-overlay/koobiq-components-loader-overlay.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    Directive,\n    ElementRef,\n    Input,\n    OnDestroy,\n    OnInit,\n    Renderer2,\n    ViewEncapsulation\n} from '@angular/core';\n\n\nconst mcLoaderOverlayParent = 'kbq-loader-overlay_parent';\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-indicator]',\n    host: {\n        class: 'kbq-loader-overlay-indicator'\n    }\n})\nexport class KbqLoaderOverlayIndicator {}\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-text]',\n    host: {\n        class: 'kbq-loader-overlay-text'\n    }\n})\nexport class KbqLoaderOverlayText {}\n\n\n@Directive({\n    selector: '[kbq-loader-overlay-caption]',\n    host: {\n        class: 'kbq-loader-overlay-caption'\n    }\n})\nexport class KbqLoaderOverlayCaption {}\n\n\n@Component({\n    selector: 'kbq-loader-overlay',\n    templateUrl: './loader-overlay.component.html',\n    styleUrls: ['./loader-overlay.scss'],\n    host: {\n        class: 'kbq-loader-overlay',\n        '[class.kbq-loader-overlay_empty]': 'isEmpty',\n        '[class.kbq-loader-overlay_transparent]': 'transparent',\n        '[class.kbq-loader-overlay_filled]': '!transparent',\n        '[class.kbq-loader-overlay_big]': '!compact',\n        '[class.kbq-loader-overlay_compact]': 'compact'\n    },\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class KbqLoaderOverlay implements OnInit, OnDestroy {\n    @Input() text: string;\n\n    @Input() caption: string;\n    @Input() compact: boolean = false;\n    @Input() transparent: boolean = false;\n\n    get isExternalIndicator(): boolean {\n        return !!this.externalIndicator;\n    }\n\n    get isExternalText(): boolean {\n        return !!this.externalText;\n    }\n\n    get isExternalCaption(): boolean {\n        return !!this.externalCaption;\n    }\n\n    get isEmpty(): boolean {\n        return !(!!this.text || this.isExternalText || !!this.caption || this.isExternalCaption);\n    }\n\n    get spinnerSize(): string {\n        return this.compact ? 'compact' : 'big';\n    }\n\n    @ContentChild(KbqLoaderOverlayIndicator) externalIndicator: KbqLoaderOverlayIndicator | null;\n    @ContentChild(KbqLoaderOverlayText) externalText: KbqLoaderOverlayText | null;\n    @ContentChild(KbqLoaderOverlayCaption) externalCaption: KbqLoaderOverlayCaption | null;\n\n    constructor(\n        private elementRef: ElementRef,\n        private renderer: Renderer2\n    ) {}\n\n    ngOnInit(): void {\n        this.renderer.addClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n    }\n\n    ngOnDestroy(): void {\n        this.renderer.removeClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n    }\n}\n\n","<div class=\"kbq-loader-overlay__container\">\n    <ng-container [ngSwitch]=\"isExternalIndicator\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-indicator]\"></ng-content>\n        <kbq-progress-spinner *ngSwitchDefault [size]=\"spinnerSize\" [mode]=\"'indeterminate'\"></kbq-progress-spinner>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalText\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-text]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-text\" *ngIf=\"text\">{{ text }}</div>\n        </ng-container>\n    </ng-container>\n\n    <ng-container [ngSwitch]=\"isExternalCaption\">\n        <ng-content *ngSwitchCase=\"true\" select=\"[kbq-loader-overlay-caption]\"></ng-content>\n        <ng-container *ngSwitchDefault>\n            <div class=\"kbq-loader-overlay-caption\" *ngIf=\"caption\">{{ caption }}</div>\n        </ng-container>\n    </ng-container>\n</div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';\n\nimport {\n    KbqLoaderOverlay,\n    KbqLoaderOverlayCaption,\n    KbqLoaderOverlayIndicator,\n    KbqLoaderOverlayText\n} from './loader-overlay.component';\n\n\n@NgModule({\n    imports: [\n        CommonModule,\n        A11yModule,\n        PlatformModule,\n        KbqProgressSpinnerModule\n    ],\n    declarations: [\n        KbqLoaderOverlay,\n        KbqLoaderOverlayIndicator,\n        KbqLoaderOverlayText,\n        KbqLoaderOverlayCaption\n    ],\n    exports: [\n        KbqLoaderOverlay,\n        KbqLoaderOverlayIndicator,\n        KbqLoaderOverlayText,\n        KbqLoaderOverlayCaption\n    ]\n})\nexport class KbqLoaderOverlayModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-modal.mjs

@@ -5,14 +5,16 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, Optional, SkipSelf, Pipe, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Input, Output, ViewChild, ViewChildren, Directive, NgModule } from '@angular/core';
 import { ESCAPE, ENTER } from '@koobiq/cdk/keycodes';
-import { ThemePalette } from '@koobiq/components/core';
+import { KbqComponentColors } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import * as i4 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { A11yModule, FocusTrapFactory, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import * as i5 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
 import * as i6 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
+import * as i7 from '@koobiq/components/title';
+import { KbqTitleModule } from '@koobiq/components/title';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { filter } from 'rxjs/operators';
 
@@ -190,7 +192,7 @@ class KbqModalComponent extends KbqModalRef {
         this.modalControl = modalControl;
         this.changeDetector = changeDetector;
         this.document = document;
-        this.themePalette = ThemePalette;
+        this.componentColors = KbqComponentColors;
         this.mcModalType = 'default';
         this._mcVisible = false;
         this.mcVisibleChange = new EventEmitter();
@@ -204,14 +206,12 @@ class KbqModalComponent extends KbqModalRef {
         this.mcAfterOpen = new EventEmitter();
         // Trigger when modal leave-animation over
         this.mcAfterClose = new EventEmitter();
-        this.mcOkType = 'primary';
+        this.mcOkType = KbqComponentColors.Contrast;
         this.mcRestoreFocus = true;
         this._mcOkLoading = false;
         this.mcOnOk = new EventEmitter();
         this._mcCancelLoading = false;
         this.mcOnCancel = new EventEmitter();
-        this.isTopOverflow = false;
-        this.isBottomOverflow = false;
         // The origin point that animation based on
         this.transformOrigin = '0px 0px 0px';
         this.mcGetContainer = () => this.overlay.create();
@@ -263,24 +263,12 @@ class KbqModalComponent extends KbqModalRef {
                 break;
             }
         }
-        this.checkOverflow();
     }
     ngOnDestroy() {
         if (this.container instanceof OverlayRef) {
             this.container.dispose();
         }
     }
-    checkOverflow() {
-        const nativeElement = this.modalBody?.nativeElement;
-        if (!nativeElement) {
-            return;
-        }
-        const scrollTop = nativeElement.scrollTop;
-        const offsetHeight = nativeElement.offsetHeight;
-        const scrollHeight = nativeElement.scrollHeight;
-        this.isTopOverflow = scrollTop > 0;
-        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
-    }
     open() {
         this.focusedElementBeforeOpen = this.document.activeElement;
         this.changeVisibleFromInside(true);
@@ -541,13 +529,13 @@ class KbqModalComponent extends KbqModalRef {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: KbqModalControlService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalComponent, selector: "kbq-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcRestoreFocus: "mcRestoreFocus", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        kbq-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"kbq-modal-close kbq-button_transparent\">\n                    <i kbq-icon=\"mc-close-L_16\" class=\"kbq-icon kbq-icon_light\" [color]=\"themePalette.Secondary\"></i>\n                </button>\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    kbq-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"kbq-confirm-body-wrapper\">\n            <div class=\"kbq-confirm-body\">\n                <div class=\"kbq-confirm-content\">\n                    <ng-container #bodyContainer>\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                                <div [innerHTML]=\"mcContent\"></div>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div> <!-- /.kbq-confirm-body-wrapper -->\n    </div>\n    <div class=\"kbq-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button [color]=\"themePalette.Secondary\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-header,.kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding:var(--kbq-modal-confirm-size-padding, 24px)}.kbq-confirm-body-wrapper{zoom:1}.kbq-confirm-body-wrapper:before,.kbq-confirm-body-wrapper:after{content:\"\";display:table}.kbq-confirm-body-wrapper:after{clear:both}.kbq-confirm-body .kbq-confirm-title{display:block;overflow:auto}.kbq-confirm .kbq-confirm-btns{border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);text-align:right}.kbq-confirm .kbq-confirm-btns button+button,.kbq-confirm .kbq-confirm-btns button:only-child{margin:16px}.kbq-modal{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large, 960px)}.kbq-modal .kbq-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--kbq-modal-size-close-width, 56px);height:var(--kbq-modal-size-close-width, 56px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-title{margin:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;height:var(--kbq-modal-header-size-height, 56px);border-radius:var(--kbq-modal-header-size-border-radius, 8px 8px 0 0);padding:var(--kbq-modal-header-size-padding, 0 16px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:var(--kbq-modal-body-size-max-height, calc(100vh - 260px));padding:var(--kbq-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--kbq-modal-footer-size-height, 64px);border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);padding:var(--kbq-modal-footer-size-padding, 0 16px)}.kbq-modal-footer button+button{margin-left:16px;margin-bottom:0}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqModalComponent, selector: "kbq-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcRestoreFocus: "mcRestoreFocus", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\">\n    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"mcRestoreFocus\">\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"kbq-modal-header\" kbq-title>\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button *ngIf=\"mcClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"kbq-modal-footer\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    kbq-button\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n            <ng-container #bodyContainer>\n                <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                  [ngTemplateOutlet]=\"$any(mcContent)\">\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                        <div [innerHTML]=\"mcContent\"></div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                </ng-container>\n            </ng-container>\n    </div>\n    <div class=\"kbq-confirm-footer\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i5.KbqButton, selector: "[kbq-button]", inputs: ["color", "tabIndex", "kbqStyle", "disabled"] }, { kind: "directive", type: i5.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "directive", type: i7.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["mcTitle"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '(keydown)': 'onKeyDown($event)'
-                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\"\n    ></div>\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus>\n                <button *ngIf=\"mcClosable\"\n                        kbq-button\n                        (click)=\"onClickCloseBtn()\"\n                        class=\"kbq-modal-close kbq-button_transparent\">\n                    <i kbq-icon=\"mc-close-L_16\" class=\"kbq-icon kbq-icon_light\" [color]=\"themePalette.Secondary\"></i>\n                </button>\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    kbq-button\n                    [color]=\"themePalette.Primary\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n        <div class=\"kbq-confirm-body-wrapper\">\n            <div class=\"kbq-confirm-body\">\n                <div class=\"kbq-confirm-content\">\n                    <ng-container #bodyContainer>\n                        <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                            <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                          [ngTemplateOutlet]=\"$any(mcContent)\">\n                            </ng-container>\n                            <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                                <div [innerHTML]=\"mcContent\"></div>\n                            </ng-container>\n                            <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </div> <!-- /.kbq-confirm-body-wrapper -->\n    </div>\n    <div class=\"kbq-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button [color]=\"themePalette.Secondary\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-header,.kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding:var(--kbq-modal-confirm-size-padding, 24px)}.kbq-confirm-body-wrapper{zoom:1}.kbq-confirm-body-wrapper:before,.kbq-confirm-body-wrapper:after{content:\"\";display:table}.kbq-confirm-body-wrapper:after{clear:both}.kbq-confirm-body .kbq-confirm-title{display:block;overflow:auto}.kbq-confirm .kbq-confirm-btns{border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);text-align:right}.kbq-confirm .kbq-confirm-btns button+button,.kbq-confirm .kbq-confirm-btns button:only-child{margin:16px}.kbq-modal{box-sizing:border-box;position:relative;top:var(--kbq-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large, 960px)}.kbq-modal .kbq-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--kbq-modal-size-close-width, 56px);height:var(--kbq-modal-size-close-width, 56px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-title{margin:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;height:var(--kbq-modal-header-size-height, 56px);border-radius:var(--kbq-modal-header-size-border-radius, 8px 8px 0 0);padding:var(--kbq-modal-header-size-padding, 0 16px)}.kbq-modal-body{display:block;overflow-y:auto;max-height:var(--kbq-modal-body-size-max-height, calc(100vh - 260px));padding:var(--kbq-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--kbq-modal-footer-size-height, 64px);border-radius:var(--kbq-modal-footer-size-border-radius, 0 0 8px 8px);padding:var(--kbq-modal-footer-size-padding, 0 16px)}.kbq-modal-footer button+button{margin-left:16px;margin-bottom:0}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
+                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content></ng-content>\n</ng-template>\n\n<div>\n    <div *ngIf=\"mcMask\"\n         class=\"kbq-modal-mask\"\n         [ngClass]=\"maskAnimationClassMap\"\n         [class.kbq-modal-mask-hidden]=\"hidden\"\n         [ngStyle]=\"mcMaskStyle\"\n         [style.zIndex]=\"mcZIndex\">\n    </div>\n\n    <div (mousedown)=\"onClickMask($event)\"\n         class=\"kbq-modal-wrap {{ mcWrapClassName }}\"\n         [style.zIndex]=\"mcZIndex\"\n         [style.display]=\"hidden ? 'none' : ''\"\n         tabindex=\"-1\">\n\n        <div #modalContainer\n             class=\"kbq-modal {{ mcClassName }} kbq-modal_{{ mcSize }}\"\n             [ngClass]=\"modalAnimationClassMap\"\n             [ngStyle]=\"mcStyle\"\n             [style.width]=\"mcWidth | toCssUnit\"\n             [style.transform-origin]=\"transformOrigin\">\n\n            <div class=\"kbq-modal-content\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"mcRestoreFocus\">\n                <ng-container [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isModalType('default')\"\n                                  [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n                                  [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n                    <ng-container *ngSwitchCase=\"isModalType('custom')\"\n                                  [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    <div *ngIf=\"mcTitle\" class=\"kbq-modal-header\" kbq-title>\n        <div class=\"kbq-modal-title\">\n            <ng-container [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n                    <div [innerHTML]=\"mcTitle\"></div>\n                </ng-container>\n            </ng-container>\n        </div>\n\n        <button *ngIf=\"mcClosable\"\n                kbq-button\n                [color]=\"'contrast'\"\n                (click)=\"onClickCloseBtn()\"\n                class=\"kbq-modal-close kbq-button_transparent\">\n            <i kbq-icon=\"mc-close-L_16\" [color]=\"componentColors.Contrast\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-modal-body kbq-scrollbar\" #modalBody [ngStyle]=\"mcBodyStyle\">\n        <ng-container #bodyContainer>\n            <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n                <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                    <div [innerHTML]=\"mcContent\"></div>\n                </ng-container>\n                <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n    <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"kbq-modal-footer\">\n        <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n            <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n                <div [innerHTML]=\"mcFooter\"></div>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n                <ng-container *ngFor=\"let button of $any(mcFooter)\">\n                    <button\n                        kbq-button\n                        #autoFocusedButton\n                        [attr.autofocus]=\"button.autoFocus\"\n                        [attr.kbq-modal-main-action]=\"button.mcModalMainAction\"\n                        *ngIf=\"getButtonCallableProp(button, 'show')\"\n                        [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                        [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                        (click)=\"onButtonClick(button)\"\n                        [color]=\"button.type\">\n                        {{ button.label }}\n                    </button>\n                </ng-container>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n                <button\n                    #autoFocusedButton\n                    [attr.autofocus]=\"true\"\n                    *ngIf=\"mcOkText\"\n                    kbq-button\n                    [color]=\"componentColors.Contrast\"\n                    (click)=\"onClickOkCancel('ok')\">\n\n                    {{ okText }}\n                </button>\n                <button *ngIf=\"mcCancelText\" kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"mcBodyStyle\">\n            <ng-container #bodyContainer>\n                <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n                    <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n                                  [ngTemplateOutlet]=\"$any(mcContent)\">\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n                        <div [innerHTML]=\"mcContent\"></div>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n                </ng-container>\n            </ng-container>\n    </div>\n    <div class=\"kbq-confirm-footer\" *ngIf=\"mcOkText || mcCancelText\">\n        <button\n            kbq-button\n            #autoFocusedButton\n            [color]=\"mcOkType\"\n            [attr.autofocus]=\"true\"\n            *ngIf=\"mcOkText\"\n            (click)=\"onClickOkCancel('ok')\">\n\n            {{ okText }}\n        </button>\n\n        <button kbq-button *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n            {{ cancelText }}\n        </button>\n    </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-modal-body{padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px)}.kbq-confirm .kbq-confirm-footer{display:flex;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal{box-sizing:border-box;position:relative;top:48px;border-radius:var(--kbq-modal-size-border-radius, 8px);width:auto;margin:0 auto;list-style:none}.kbq-modal.zoom-enter,.kbq-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal.kbq-modal_small{width:var(--kbq-modal-size-small-width, 400px)}.kbq-modal.kbq-modal_medium{width:var(--kbq-modal-size-medium-width, 640px)}.kbq-modal.kbq-modal_large{width:var(--kbq-modal-size-large-width, 960px)}.kbq-modal-wrap{position:fixed;z-index:1000;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius, 8px);background-clip:padding-box;background-color:#fff}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-right, 12px) var(--kbq-modal-size-header-padding-vertical, 16px) var(--kbq-modal-size-header-padding-left, 32px)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding-right:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-left:var(--kbq-modal-size-content-padding-horizontal, 32px);padding-bottom:var(--kbq-modal-size-content-padding-bottom, 24px);word-wrap:break-word}.kbq-modal-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-top, 8px) var(--kbq-modal-size-footer-padding-horizontal, ) var(--kbq-modal-size-footer-padding-bottom, 32px) var(--kbq-modal-size-footer-padding-horizontal, 32px);gap:var(--kbq-modal-size-footer-content-gap-horizontal, 16px)}.kbq-modal-mask{position:fixed;z-index:1000;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: KbqModalControlService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -814,19 +802,22 @@ class KbqModalModule {
             OverlayModule,
             A11yModule,
             KbqButtonModule,
-            KbqIconModule], exports: [KbqModalComponent,
+            KbqIconModule,
+            KbqTitleModule], exports: [KbqModalComponent,
             KbqModalTitle,
             KbqModalBody,
             KbqModalFooter,
             KbqModalMainAction] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, providers: [
             KbqModalControlService,
-            KbqModalService
+            KbqModalService,
+            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
         ], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             KbqButtonModule,
-            KbqIconModule] }); }
+            KbqIconModule,
+            KbqTitleModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqModalModule, decorators: [{
             type: NgModule,
@@ -836,7 +827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         OverlayModule,
                         A11yModule,
                         KbqButtonModule,
-                        KbqIconModule
+                        KbqIconModule,
+                        KbqTitleModule
                     ],
                     exports: [
                         KbqModalComponent,
@@ -855,7 +847,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     ],
                     providers: [
                         KbqModalControlService,
-                        KbqModalService
+                        KbqModalService,
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
                     ]
                 }]
         }] });