import * as i3 from '@angular/cdk/a11y';
import { A11yModule, FocusTrapFactory, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import * as i1 from '@angular/cdk/overlay';
import { OverlayRef, OverlayModule } from '@angular/cdk/overlay';
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
import * as i7 from '@angular/common';
import { DOCUMENT, NgTemplateOutlet, NgStyle, NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, Optional, SkipSelf, Pipe, inject, EventEmitter, TemplateRef, Type, Injector, ViewContainerRef, ElementRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, ViewChildren, Directive, InjectionToken, NgModule } from '@angular/core';
import { ESCAPE, ENTER } from '@koobiq/cdk/keycodes';
import { KbqComponentColors } from '@koobiq/components/core';
import { take, filter } from 'rxjs/operators';
import { Subject } from 'rxjs';
import * as i4 from '@koobiq/components/button';
import { KbqButtonModule } from '@koobiq/components/button';
import * as i5 from '@koobiq/components/icon';
import { KbqIconModule } from '@koobiq/components/icon';
import * as i6 from '@koobiq/components/title';
import { KbqTitleModule } from '@koobiq/components/title';
import { ComponentPortal } from '@angular/cdk/portal';

/**
 * API class that public to users to handle the modal instance.
 * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
 */
class KbqModalRef {
}

class KbqModalControlService {
    // Track singleton afterAllClose through over the injection tree
    get afterAllClose() {
        return this.parentService ? this.parentService.afterAllClose : this.rootAfterAllClose;
    }
    // Track singleton openModals array through over the injection tree
    get openModals() {
        return this.parentService ? this.parentService.openModals : this.rootOpenModals;
    }
    // Registered modal for later usage
    get registeredMetaMap() {
        return this.parentService ? this.parentService.registeredMetaMap : this.rootRegisteredMetaMap;
    }
    constructor(parentService) {
        this.parentService = parentService;
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this.rootOpenModals = this.parentService ? null : [];
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this.rootAfterAllClose = this.parentService ? null : new Subject();
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this.rootRegisteredMetaMap = this.parentService ? null : new Map();
    }
    // Register a modal to listen its open/close
    registerModal(modalRef) {
        if (!this.hasRegistered(modalRef)) {
            const afterOpenSubscription = modalRef.afterOpen.subscribe(() => this.openModals.push(modalRef));
            const afterCloseSubscription = modalRef.afterClose.subscribe(() => this.removeOpenModal(modalRef));
            this.registeredMetaMap.set(modalRef, { modalRef, afterOpenSubscription, afterCloseSubscription });
            this.handleMultipleMasks(modalRef);
        }
    }
    hasRegistered(modalRef) {
        return this.registeredMetaMap.has(modalRef);
    }
    // Close all registered opened modals
    closeAll() {
        let i = this.openModals.length;
        while (i--) {
            this.openModals[i].close();
        }
    }
    removeOpenModal(modalRef) {
        const index = this.openModals.indexOf(modalRef);
        if (index > -1) {
            this.openModals.splice(index, 1);
            if (!this.openModals.length) {
                this.afterAllClose.next();
            }
        }
    }
    handleMultipleMasks(modalRef) {
        const modals = Array.from(this.registeredMetaMap.values()).map((v) => v.modalRef);
        if (modals.filter((modal) => modal.kbqVisible).length > 1) {
            const otherModals = modals
                .splice(0, modals.length - 1)
                .filter((modal) => modal.kbqVisible && modal.kbqMask);
            // hide other masks
            setTimeout(() => {
                otherModals.forEach((modal) => {
                    modal.getInstance().kbqMask = false;
                    modal.markForCheck();
                });
            });
            // show other masks on close
            modalRef.afterClose.subscribe(() => {
                otherModals.forEach((modal) => {
                    modal.getInstance().kbqMask = true;
                    modal.markForCheck();
                });
            });
        }
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalControlService, deps: [{ token: KbqModalControlService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalControlService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalControlService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: KbqModalControlService, decorators: [{
                    type: Optional
                }, {
                    type: SkipSelf
                }] }] });

/** @docs-private */
class ModalUtil {
    constructor(document) {
        this.document = document;
        this.lastPosition = { x: -1, y: -1 };
        this.listenDocumentClick();
    }
    getLastClickPosition() {
        return this.lastPosition;
    }
    listenDocumentClick() {
        this.document?.addEventListener('click', (event) => {
            this.lastPosition = { x: event.clientX, y: event.clientY };
        });
    }
}
/** @docs-private */
const modalUtilObject = new ModalUtil(
// For SSR compatibility
// eslint-disable-next-line no-restricted-globals
typeof document === 'undefined' ? undefined : document);

var ModalSize;
(function (ModalSize) {
    ModalSize["Small"] = "small";
    ModalSize["Medium"] = "medium";
    ModalSize["Large"] = "large";
})(ModalSize || (ModalSize = {}));

class CssUnitPipe {
    transform(value, defaultUnit = 'px') {
        const formatted = +value;
        return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CssUnitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CssUnitPipe, name: "toCssUnit" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CssUnitPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'toCssUnit'
                }]
        }] });

/**
 * Duration when perform animations (ms)
 * @docs-private
 */
const MODAL_ANIMATE_DURATION = 200;
class KbqModalComponent extends KbqModalRef {
    get kbqVisible() {
        return this._kbqVisible;
    }
    set kbqVisible(value) {
        this._kbqVisible = value;
    }
    get kbqClosable() {
        return this._kbqClosable;
    }
    set kbqClosable(value) {
        this._kbqClosable = value;
    }
    get kbqMask() {
        return this._kbqMask;
    }
    set kbqMask(value) {
        this._kbqMask = value;
    }
    get kbqMaskClosable() {
        return this._kbqMaskClosable;
    }
    set kbqMaskClosable(value) {
        this._kbqMaskClosable = value;
    }
    get kbqOkLoading() {
        return this._kbqOkLoading;
    }
    set kbqOkLoading(value) {
        this._kbqOkLoading = value;
    }
    get kbqCancelLoading() {
        return this._kbqCancelLoading;
    }
    set kbqCancelLoading(value) {
        this._kbqCancelLoading = value;
    }
    // Observable alias for kbqAfterOpen
    get afterOpen() {
        return this.kbqAfterOpen.asObservable();
    }
    // Observable alias for kbqAfterClose
    get afterClose() {
        return this.kbqAfterClose.asObservable();
    }
    get okText() {
        return this.kbqOkText;
    }
    get cancelText() {
        return this.kbqCancelText;
    }
    // Indicate whether this dialog should hidden
    get hidden() {
        return !this.kbqVisible && !this.animationState;
    }
    constructor(overlay, renderer, cfr, elementRef, viewContainer, modalControl, changeDetector, focusMonitor) {
        super();
        this.overlay = overlay;
        this.renderer = renderer;
        this.cfr = cfr;
        this.elementRef = elementRef;
        this.viewContainer = viewContainer;
        this.modalControl = modalControl;
        this.changeDetector = changeDetector;
        this.focusMonitor = focusMonitor;
        this.document = inject(DOCUMENT);
        this.componentColors = KbqComponentColors;
        this.kbqModalType = 'default';
        this._kbqVisible = false;
        this.kbqVisibleChange = new EventEmitter();
        this.kbqSize = ModalSize.Medium;
        this.kbqCloseByESC = true;
        this._kbqClosable = true;
        this._kbqMask = true;
        this._kbqMaskClosable = false;
        // Trigger when modal open(visible) after animations
        this.kbqAfterOpen = new EventEmitter();
        // Trigger when modal leave-animation over
        this.kbqAfterClose = new EventEmitter();
        this.kbqOkType = KbqComponentColors.Contrast;
        this.kbqRestoreFocus = true;
        this._kbqOkLoading = false;
        this.kbqOnOk = new EventEmitter();
        this._kbqCancelLoading = false;
        this.kbqOnCancel = new EventEmitter();
        this.isTopOverflow = false;
        this.isBottomOverflow = false;
        // The origin point that animation based on
        this.transformOrigin = '0px 0px 0px';
        this.kbqGetContainer = () => this.overlay.create();
    }
    // [NOTE] NOT available when using by service!
    // Because ngOnChanges never be called when using by service,
    // here we can't support "kbqContent"(Component) etc. as inputs that initialized dynamically.
    // BUT: User also can change "kbqContent" dynamically to trigger UI changes
    // (provided you don't use Component that needs initializations)
    ngOnChanges(changes) {
        if (changes.kbqVisible) {
            // Do not trigger animation while initializing
            this.handleVisibleStateChange(this.kbqVisible, !changes.kbqVisible.firstChange);
        }
    }
    ngOnInit() {
        // Create component along without View
        if (this.isComponent(this.kbqContent)) {
            this.createDynamicComponent(this.kbqContent);
        }
        // Setup default button options
        if (this.isModalButtons(this.kbqFooter)) {
            this.kbqFooter = this.formatModalButtons(this.kbqFooter);
        }
        if (this.isComponent(this.kbqComponent)) {
            this.createDynamicComponent(this.kbqComponent);
        }
        // Place the modal dom to elsewhere
        this.container = typeof this.kbqGetContainer === 'function' ? this.kbqGetContainer() : this.kbqGetContainer;
        if (this.container instanceof HTMLElement) {
            this.container.appendChild(this.elementRef.nativeElement);
        }
        else if (this.container instanceof OverlayRef) {
            // NOTE: only attach the dom to overlay, the view container is not changed actually
            this.container.overlayElement.appendChild(this.elementRef.nativeElement);
        }
        // Register modal when afterOpen/afterClose is stable
        this.modalControl.registerModal(this);
    }
    ngAfterViewInit() {
        // If using Component, it is the time to attach View while bodyContainer is ready
        if (this.contentComponentRef) {
            this.bodyContainer.insert(this.contentComponentRef.hostView);
        }
        this.getElement().getElementsByTagName('button')[0]?.focus();
        this.getElement().querySelector('button[autofocus]')?.focus();
        this.checkOverflow();
    }
    ngOnDestroy() {
        if (this.container instanceof OverlayRef) {
            this.container.dispose();
        }
    }
    checkOverflow() {
        const nativeElement = this.modalBody?.nativeElement;
        if (!nativeElement) {
            return;
        }
        const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
        this.isTopOverflow = scrollTop > 0;
        this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
    }
    open() {
        this.focusedElementBeforeOpen = _getFocusedElementPierceShadowDom();
        this.previouslyFocusedElementOrigin = this.focusMonitor['_lastFocusOrigin'];
        this.focusMonitor
            .monitor(this.modalContainer, true)
            .pipe(take(1))
            .subscribe(() => this.focusMonitor.stopMonitoring(this.modalContainer));
        this.changeVisibleFromInside(true);
    }
    close(result) {
        this.changeVisibleFromInside(false, result).then(() => {
            if (this.kbqRestoreFocus && this.focusedElementBeforeOpen) {
                this.focusMonitor.focusVia(this.focusedElementBeforeOpen, this.previouslyFocusedElementOrigin);
                this.focusedElementBeforeOpen = null;
            }
        });
    }
    // Destroy equals Close
    destroy(result) {
        this.close(result);
    }
    markForCheck() {
        this.changeDetector.markForCheck();
    }
    triggerOk() {
        this.onClickOkCancel('ok');
    }
    triggerCancel() {
        this.onClickOkCancel('cancel');
    }
    getInstance() {
        return this;
    }
    getContentComponentRef() {
        return this.contentComponentRef;
    }
    getContentComponent() {
        return this.contentComponentRef && this.contentComponentRef.instance;
    }
    getElement() {
        return this.elementRef && this.elementRef.nativeElement;
    }
    getKbqFooter() {
        return this.getElement().getElementsByClassName('kbq-modal-footer').item(0);
    }
    onClickMask($event) {
        if (this.kbqMask &&
            this.kbqMaskClosable &&
            $event.target.classList.contains('kbq-modal-wrap') &&
            this.kbqVisible) {
            this.onClickOkCancel('cancel');
        }
    }
    isModalType(type) {
        return this.kbqModalType === type;
    }
    onKeyDown(event) {
        if (event.keyCode === ESCAPE && this.container && this.container instanceof OverlayRef) {
            this.close();
            event.preventDefault();
        }
        if (event.ctrlKey && event.keyCode === ENTER) {
            if (this.kbqModalType === 'confirm') {
                this.triggerOk();
            }
            this.getElement().querySelector('[kbq-modal-main-action]')?.click();
            event.preventDefault();
        }
    }
    // AoT
    onClickCloseBtn() {
        if (this.kbqVisible) {
            this.onClickOkCancel('cancel');
        }
    }
    // AoT
    onClickOkCancel(type) {
        this.handleCloseResult(type, (doClose) => doClose !== false);
    }
    // eslint-disable-next-line @typescript-eslint/ban-types
    handleCloseResult(triggerType, canClose) {
        const trigger = { ok: this.kbqOnOk, cancel: this.kbqOnCancel }[triggerType];
        const loadingKey = { ok: 'kbqOkLoading', cancel: 'kbqCancelLoading' }[triggerType];
        if (trigger instanceof EventEmitter) {
            trigger.emit(this.getContentComponent());
        }
        else if (typeof trigger === 'function') {
            const result = trigger(this.getContentComponent());
            // Users can return "false" to prevent closing by default
            // eslint-disable-next-line @typescript-eslint/ban-types
            const caseClose = (doClose) => canClose(doClose) && this.close(doClose);
            if (isPromise(result)) {
                this[loadingKey] = true;
                const handleThen = (doClose) => {
                    this[loadingKey] = false;
                    caseClose(doClose);
                };
                result.then(handleThen).catch(handleThen);
            }
            else {
                caseClose(result);
            }
        }
    }
    // AoT
    // eslint-disable-next-line @typescript-eslint/ban-types
    isNonEmptyString(value) {
        return typeof value === 'string' && value !== '';
    }
    // AoT
    // eslint-disable-next-line @typescript-eslint/ban-types
    isTemplateRef(value) {
        return value instanceof TemplateRef;
    }
    // AoT
    // eslint-disable-next-line @typescript-eslint/ban-types
    isComponent(value) {
        return value instanceof Type;
    }
    // AoT
    // eslint-disable-next-line @typescript-eslint/ban-types
    isModalButtons(value) {
        return Array.isArray(value) && value.length > 0;
    }
    // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
    // AoT
    // eslint-disable-next-line @typescript-eslint/ban-types
    getButtonCallableProp(options, prop) {
        const value = options[prop];
        const args = [];
        if (this.contentComponentRef) {
            args.push(this.contentComponentRef.instance);
        }
        return typeof value === 'function' ? value.apply(options, args) : value;
    }
    // On kbqFooter's modal button click
    // AoT
    onButtonClick(button) {
        // Call onClick directly
        const result = this.getButtonCallableProp(button, 'onClick');
        if (isPromise(result)) {
            button.loading = true;
            // eslint-disable-next-line @typescript-eslint/ban-types
            result.then(() => (button.loading = false)).catch(() => (button.loading = false));
        }
    }
    // Do rest things when visible state changed
    handleVisibleStateChange(visible, animation = true, closeResult) {
        // Hide scrollbar at the first time when shown up
        if (visible) {
            this.changeBodyOverflow(1);
        }
        return (Promise.resolve(animation && this.animateTo(visible))
            // Emit open/close event after animations over
            .then(() => {
            if (visible) {
                this.kbqAfterOpen.emit();
            }
            else {
                this.kbqAfterClose.emit(closeResult);
                // Show/hide scrollbar when animation is over
                this.changeBodyOverflow();
            }
        }));
    }
    // Change kbqVisible from inside
    changeVisibleFromInside(visible, closeResult) {
        if (this.kbqVisible !== visible) {
            // Change kbqVisible value immediately
            this.kbqVisible = visible;
            this.kbqVisibleChange.emit(visible);
            return this.handleVisibleStateChange(visible, true, closeResult);
        }
        return Promise.resolve();
    }
    changeAnimationState(state) {
        this.animationState = state;
        if (state) {
            this.maskAnimationClassMap = {
                [`fade-${state}`]: true,
                [`fade-${state}-active`]: true
            };
            this.modalAnimationClassMap = {
                [`zoom-${state}`]: true,
                [`zoom-${state}-active`]: true
            };
        }
        else {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            this.maskAnimationClassMap = this.modalAnimationClassMap = null;
        }
        if (this.contentComponentRef) {
            this.contentComponentRef.changeDetectorRef.markForCheck();
        }
        else {
            this.changeDetector.markForCheck();
        }
    }
    animateTo(isVisible) {
        // Figure out the latest click position when shows up
        if (isVisible) {
            // [NOTE] Using timeout due to the document.click event is fired later than visible change,
            // so if not postponed to next event-loop, we can't get the latest click position
            setTimeout(() => this.updateTransformOrigin());
        }
        this.changeAnimationState(isVisible ? 'enter' : 'leave');
        // Return when animation is over
        return new Promise((resolve) => {
            return setTimeout(() => {
                this.changeAnimationState(null);
                resolve(null);
            }, MODAL_ANIMATE_DURATION);
        });
    }
    formatModalButtons(buttons) {
        return buttons.map((button) => {
            return {
                ...{
                    type: 'default',
                    size: 'default',
                    autoLoading: true,
                    show: true,
                    loading: false,
                    disabled: false
                },
                ...button
            };
        });
    }
    /**
     * Create a component dynamically but not attach to any View
     * (this action will be executed when bodyContainer is ready)
     * @param component Component class
     */
    createDynamicComponent(component) {
        const factory = this.cfr.resolveComponentFactory(component);
        const childInjector = Injector.create({
            providers: [{ provide: KbqModalRef, useValue: this }],
            parent: this.viewContainer.injector
        });
        this.contentComponentRef = factory.create(childInjector);
        if (this.kbqComponentParams) {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            Object.assign(this.contentComponentRef.instance, this.kbqComponentParams);
        }
        // Do the first change detection immediately
        // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
        this.contentComponentRef.changeDetectorRef.detectChanges();
    }
    // Update transform-origin to the last click position on document
    updateTransformOrigin() {
        const modalElement = this.modalContainer.nativeElement;
        const lastPosition = modalUtilObject.getLastClickPosition();
        if (lastPosition) {
            this.transformOrigin = `${lastPosition.x - modalElement.offsetLeft}px ${lastPosition.y - modalElement.offsetTop}px 0px`;
        }
    }
    /**
     * Take care of the body's overflow to decide the existence of scrollbar
     * @param plusNum The number that the openModals.length will increase soon
     */
    changeBodyOverflow(plusNum = 0) {
        const openModals = this.modalControl.openModals;
        if (openModals.length + plusNum > 0) {
            this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
        }
        else {
            this.renderer.removeStyle(this.document.body, 'overflow');
        }
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: KbqModalControlService }, { token: i0.ChangeDetectorRef }, { token: i3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqModalComponent, selector: "kbq-modal", inputs: { kbqModalType: "kbqModalType", kbqComponent: "kbqComponent", kbqContent: "kbqContent", kbqComponentParams: "kbqComponentParams", kbqFooter: "kbqFooter", kbqVisible: "kbqVisible", kbqWidth: "kbqWidth", kbqSize: "kbqSize", kbqWrapClassName: "kbqWrapClassName", kbqClassName: "kbqClassName", kbqStyle: "kbqStyle", kbqTitle: "kbqTitle", kbqCloseByESC: "kbqCloseByESC", kbqClosable: "kbqClosable", kbqMask: "kbqMask", kbqMaskClosable: "kbqMaskClosable", kbqMaskStyle: "kbqMaskStyle", kbqBodyStyle: "kbqBodyStyle", kbqOkText: "kbqOkText", kbqOkType: "kbqOkType", kbqRestoreFocus: "kbqRestoreFocus", kbqOkLoading: "kbqOkLoading", kbqOnOk: "kbqOnOk", kbqCancelText: "kbqCancelText", kbqCancelLoading: "kbqCancelLoading", kbqOnCancel: "kbqOnCancel", kbqGetContainer: "kbqGetContainer" }, outputs: { kbqVisibleChange: "kbqVisibleChange", kbqAfterOpen: "kbqAfterOpen", kbqAfterClose: "kbqAfterClose", kbqOnOk: "kbqOnOk", kbqOnCancel: "kbqOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" }, classAttribute: "kbq-modal" }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal-container {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div cdkTrapFocus class=\"kbq-modal-content\">\n                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div kbq-title class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    type=\"button\"\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i kbq-icon=\"kbq-xmark_16\" [color]=\"componentColors.Contrast\"></i>\n                </button>\n            }\n        </div>\n    }\n    <div #modalBody class=\"kbq-modal-body kbq-scrollbar\" [ngStyle]=\"kbqBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\n                                kbq-button\n                                [attr.autofocus]=\"button.autoFocus\"\n                                [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                                [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                                [color]=\"button.type\"\n                                [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                                (click)=\"onButtonClick(button)\"\n                            >\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"kbqBodyStyle\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button kbq-button [attr.autofocus]=\"true\" [color]=\"kbqOkType\" (click)=\"onClickOkCancel('ok')\">\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal-container .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-6xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 1px;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\n"], dependencies: [{ kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: CssUnitPipe, name: "toCssUnit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'kbq-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'kbq-modal',
                        '(keydown)': 'onKeyDown($event)'
                    }, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n    <ng-content />\n</ng-template>\n\n<div>\n    @if (kbqMask) {\n        <div\n            class=\"kbq-modal-mask\"\n            [class.kbq-modal-mask-hidden]=\"hidden\"\n            [ngClass]=\"maskAnimationClassMap\"\n            [ngStyle]=\"kbqMaskStyle\"\n        ></div>\n    }\n\n    <div\n        tabindex=\"-1\"\n        class=\"kbq-modal-wrap {{ kbqWrapClassName }}\"\n        [style.display]=\"hidden ? 'none' : ''\"\n        (mousedown)=\"onClickMask($event)\"\n    >\n        <div\n            #modalContainer\n            class=\"kbq-modal-container {{ kbqClassName }} kbq-modal_{{ kbqSize }}\"\n            [class.kbq-modal_no-footer]=\"!kbqFooter\"\n            [ngClass]=\"modalAnimationClassMap\"\n            [ngStyle]=\"kbqStyle\"\n            [style.transform-origin]=\"transformOrigin\"\n            [style.width]=\"kbqWidth | toCssUnit\"\n        >\n            <div cdkTrapFocus class=\"kbq-modal-content\">\n                @switch (true) {\n                    @case (isModalType('default')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentDefault\" />\n                    }\n                    @case (isModalType('confirm')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentConfirm\" />\n                    }\n                    @case (isModalType('custom')) {\n                        <ng-container [ngTemplateOutlet]=\"tplContentCustom\" />\n                    }\n                }\n            </div>\n        </div>\n    </div>\n</div>\n\n<ng-template #tplContentCustom>\n    <ng-container #bodyContainer />\n</ng-template>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n    @if (kbqTitle) {\n        <div kbq-title class=\"kbq-modal-header\" [class.kbq-modal-body_top-overflow]=\"isTopOverflow\">\n            <div class=\"kbq-modal-title\">\n                @switch (true) {\n                    @case (isTemplateRef(kbqTitle)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqTitle)\" />\n                    }\n                    @case (isNonEmptyString(kbqTitle)) {\n                        <div [innerHTML]=\"kbqTitle\"></div>\n                    }\n                }\n            </div>\n            @if (kbqClosable) {\n                <button\n                    kbq-button\n                    type=\"button\"\n                    class=\"kbq-modal-close kbq-button_transparent\"\n                    [color]=\"'contrast'\"\n                    (click)=\"onClickCloseBtn()\"\n                >\n                    <i kbq-icon=\"kbq-xmark_16\" [color]=\"componentColors.Contrast\"></i>\n                </button>\n            }\n        </div>\n    }\n    <div #modalBody class=\"kbq-modal-body kbq-scrollbar\" [ngStyle]=\"kbqBodyStyle\" (scroll)=\"checkOverflow()\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqFooter || kbqOkText || kbqCancelText) {\n        <div class=\"kbq-modal-footer\" [class.kbq-modal-body_bottom-overflow]=\"isBottomOverflow\">\n            @switch (true) {\n                @case (isTemplateRef(kbqFooter)) {\n                    <ng-container [ngTemplateOutlet]=\"$any(kbqFooter)\" />\n                }\n                @case (isNonEmptyString(kbqFooter)) {\n                    <div [innerHTML]=\"kbqFooter\"></div>\n                }\n                @case (isModalButtons(kbqFooter)) {\n                    @for (button of $any(kbqFooter); track button) {\n                        @if (getButtonCallableProp(button, 'show')) {\n                            <button\n                                kbq-button\n                                [attr.autofocus]=\"button.autoFocus\"\n                                [attr.kbq-modal-main-action]=\"button.kbqModalMainAction\"\n                                [class.kbq-progress]=\"getButtonCallableProp(button, 'loading')\"\n                                [color]=\"button.type\"\n                                [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n                                (click)=\"onButtonClick(button)\"\n                            >\n                                {{ button.label }}\n                            </button>\n                        }\n                    }\n                }\n                @default {\n                    @if (kbqOkText) {\n                        <button\n                            kbq-button\n                            [attr.autofocus]=\"true\"\n                            [color]=\"componentColors.Contrast\"\n                            (click)=\"onClickOkCancel('ok')\"\n                        >\n                            {{ okText }}\n                        </button>\n                    }\n                    @if (kbqCancelText) {\n                        <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                            {{ cancelText }}\n                        </button>\n                    }\n                }\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n    <div class=\"kbq-modal-body\" [ngStyle]=\"kbqBodyStyle\">\n        <ng-container #bodyContainer>\n            @if (!isComponent(kbqContent)) {\n                @switch (true) {\n                    @case (isTemplateRef(kbqContent)) {\n                        <ng-container [ngTemplateOutlet]=\"$any(kbqContent)\" />\n                    }\n                    @case (isNonEmptyString(kbqContent)) {\n                        <div [innerHTML]=\"kbqContent\"></div>\n                    }\n                    @default {\n                        <ng-container [ngTemplateOutlet]=\"tplOriginContent\" />\n                    }\n                }\n            }\n        </ng-container>\n    </div>\n    @if (kbqOkText || kbqCancelText) {\n        <div class=\"kbq-confirm-footer\">\n            @if (kbqOkText) {\n                <button kbq-button [attr.autofocus]=\"true\" [color]=\"kbqOkType\" (click)=\"onClickOkCancel('ok')\">\n                    {{ okText }}\n                </button>\n            }\n            @if (kbqCancelText) {\n                <button kbq-button (click)=\"onClickOkCancel('cancel')\">\n                    {{ cancelText }}\n                </button>\n            }\n        </div>\n    }\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".kbq-confirm .kbq-modal-close{display:none}.kbq-confirm .kbq-confirm-footer{display:flex;gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-container{box-sizing:border-box;position:relative;top:var(--kbq-size-5xl);border-radius:var(--kbq-modal-size-border-radius);width:auto;margin:0 auto;list-style:none}.kbq-modal-container.zoom-enter,.kbq-modal-container.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.kbq-modal-container.kbq-modal_small{width:var(--kbq-modal-size-small-width)}.kbq-modal-container.kbq-modal_medium{width:var(--kbq-modal-size-medium-width)}.kbq-modal-container.kbq-modal_large{width:var(--kbq-modal-size-large-width)}.kbq-modal-container .kbq-modal-close{position:absolute;top:var(--kbq-size-l);right:var(--kbq-size-l)}.kbq-modal-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.kbq-modal-content{position:relative;border-radius:var(--kbq-modal-size-border-radius);background-clip:padding-box}.kbq-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-right) var(--kbq-modal-size-header-padding-vertical) var(--kbq-modal-size-header-padding-left)}.kbq-modal-header+.kbq-modal-body{padding-top:var(--kbq-modal-size-content-padding-top)}.kbq-modal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-top:var(--kbq-size-3xs);padding-bottom:var(--kbq-size-3xs)}.kbq-modal-body{display:block;overflow-y:auto;max-height:calc(100vh - 260px);padding:var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal) var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);word-wrap:break-word}.kbq-modal-body>*{position:relative}.kbq-modal-footer,.kbq-confirm-footer{display:flex;align-items:center;padding:var(--kbq-modal-size-footer-padding-vertical) var(--kbq-modal-size-footer-padding-horizontal);gap:var(--kbq-modal-size-footer-content-gap-horizontal)}.kbq-modal-mask{position:fixed;inset:0;height:100%}.kbq-modal-mask.kbq-modal-mask-hidden{display:none}.kbq-modal-open{overflow:hidden}.kbq-modal-container{background:var(--kbq-modal-container-background);box-shadow:var(--kbq-modal-container-shadow)}.kbq-modal-container .kbq-modal-header .kbq-modal-title{color:var(--kbq-modal-header-text-color)}.kbq-modal-container .kbq-modal-header .kbq-modal-close{color:var(--kbq-modal-close-button-color)}.kbq-modal-container .kbq-modal-content{color:var(--kbq-modal-content-text-color)}.kbq-modal-container .kbq-modal-header.kbq-modal-body_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-modal-container .kbq-modal-footer.kbq-modal-body_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-top)}.kbq-modal-mask{background-color:var(--kbq-modal-overlay-background)}.kbq-modal-title{font-size:var(--kbq-typography-title-font-size);font-style:var(--kbq-typography-title-font-style);font-weight:var(--kbq-typography-title-font-weight);line-height:var(--kbq-typography-title-line-height);font-family:var(--kbq-typography-title-font-family);text-transform:var(--kbq-typography-title-text-transform);font-feature-settings:var(--kbq-typography-title-font-feature-settings);letter-spacing:var(--kbq-typography-title-letter-spacing)}.kbq-modal-body{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-modal{--kbq-modal-size-small-width: 400px;--kbq-modal-size-medium-width: 640px;--kbq-modal-size-large-width: 960px;--kbq-modal-size-border-radius: var(--kbq-size-s);--kbq-modal-size-header-padding-vertical: var(--kbq-size-l);--kbq-modal-size-header-padding-left: var(--kbq-size-xxl);--kbq-modal-size-header-padding-right: var(--kbq-size-6xl);--kbq-modal-size-close-button-margin-left: var(--kbq-size-s);--kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-content-padding-top: 1px;--kbq-modal-size-content-padding-bottom: var(--kbq-size-s);--kbq-modal-size-content-padding-top-without-header: var(--kbq-size-xxl);--kbq-modal-size-content-padding-bottom-without-footer: var(--kbq-size-4xl);--kbq-modal-size-footer-padding-horizontal: var(--kbq-size-xxl);--kbq-modal-size-footer-padding-vertical: var(--kbq-size-xl);--kbq-modal-size-footer-content-gap-horizontal: var(--kbq-size-l);--kbq-modal-overlay-background: var(--kbq-background-overlay);--kbq-modal-container-background: var(--kbq-background-card);--kbq-modal-container-shadow: var(--kbq-shadow-overlay);--kbq-modal-close-button-color: var(--kbq-icon-contrast);--kbq-modal-header-text-color: var(--kbq-foreground-contrast);--kbq-modal-content-text-color: var(--kbq-foreground-contrast)}\n"] }]
        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: KbqModalControlService }, { type: i0.ChangeDetectorRef }, { type: i3.FocusMonitor }], propDecorators: { kbqModalType: [{
                type: Input
            }], kbqComponent: [{
                type: Input
            }], kbqContent: [{
                type: Input
            }], kbqComponentParams: [{
                type: Input
            }], kbqFooter: [{
                type: Input
            }], kbqVisible: [{
                type: Input
            }], kbqVisibleChange: [{
                type: Output
            }], kbqWidth: [{
                type: Input
            }], kbqSize: [{
                type: Input
            }], kbqWrapClassName: [{
                type: Input
            }], kbqClassName: [{
                type: Input
            }], kbqStyle: [{
                type: Input
            }], kbqTitle: [{
                type: Input
            }], kbqCloseByESC: [{
                type: Input
            }], kbqClosable: [{
                type: Input
            }], kbqMask: [{
                type: Input
            }], kbqMaskClosable: [{
                type: Input
            }], kbqMaskStyle: [{
                type: Input
            }], kbqBodyStyle: [{
                type: Input
            }], kbqAfterOpen: [{
                type: Output
            }], kbqAfterClose: [{
                type: Output
            }], kbqOkText: [{
                type: Input
            }], kbqOkType: [{
                type: Input
            }], kbqRestoreFocus: [{
                type: Input
            }], kbqOkLoading: [{
                type: Input
            }], kbqOnOk: [{
                type: Input
            }, {
                type: Output
            }], kbqCancelText: [{
                type: Input
            }], kbqCancelLoading: [{
                type: Input
            }], kbqOnCancel: [{
                type: Input
            }, {
                type: Output
            }], modalContainer: [{
                type: ViewChild,
                args: ['modalContainer', { static: true }]
            }], bodyContainer: [{
                type: ViewChild,
                args: ['bodyContainer', { read: ViewContainerRef, static: false }]
            }], autoFocusedButtons: [{
                type: ViewChildren,
                args: ['autoFocusedButton', { read: ElementRef }]
            }], modalBody: [{
                type: ViewChild,
                args: ['modalBody']
            }], kbqGetContainer: [{
                type: Input
            }] } });
function isPromise(obj) {
    return (!!obj &&
        (typeof obj === 'object' || typeof obj === 'function') &&
        typeof obj.then === 'function' &&
        typeof obj.catch === 'function');
}

class KbqModalTitle {
    constructor(modal) {
        this.modal = modal;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalTitle, deps: [{ token: KbqModalComponent }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqModalTitle, selector: "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", host: { properties: { "class.kbq-modal-header_closable": "modal.kbqClosable" }, classAttribute: "kbq-modal-header" }, ngImport: i0, template: `
        <div class="kbq-modal-title" kbq-title>
            <ng-content />
        </div>

        @if (modal.kbqClosable) {
            <button
                class="kbq-modal-close kbq-button_transparent"
                type="button"
                kbq-button
                [color]="'contrast'"
                (click)="modal.onClickCloseBtn()"
            >
                <i kbq-icon="kbq-xmark_16" [color]="modal.componentColors.Contrast"></i>
            </button>
        }
    `, isInline: true, dependencies: [{ kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i5.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalTitle, decorators: [{
            type: Component,
            args: [{
                    selector: `[kbq-modal-title], kbq-modal-title, [kbqModalTitle]`,
                    template: `
        <div class="kbq-modal-title" kbq-title>
            <ng-content />
        </div>

        @if (modal.kbqClosable) {
            <button
                class="kbq-modal-close kbq-button_transparent"
                type="button"
                kbq-button
                [color]="'contrast'"
                (click)="modal.onClickCloseBtn()"
            >
                <i kbq-icon="kbq-xmark_16" [color]="modal.componentColors.Contrast"></i>
            </button>
        }
    `,
                    host: {
                        class: 'kbq-modal-header',
                        '[class.kbq-modal-header_closable]': 'modal.kbqClosable'
                    }
                }]
        }], ctorParameters: () => [{ type: KbqModalComponent }] });
class KbqModalBody {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalBody, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqModalBody, selector: "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", host: { classAttribute: "kbq-modal-body" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalBody, decorators: [{
            type: Directive,
            args: [{
                    selector: `[kbq-modal-body], kbq-modal-body, [kbqModalBody]`,
                    host: {
                        class: 'kbq-modal-body'
                    }
                }]
        }] });
class KbqModalFooter {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqModalFooter, selector: "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", host: { classAttribute: "kbq-modal-footer" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalFooter, decorators: [{
            type: Directive,
            args: [{
                    selector: `[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]`,
                    host: {
                        class: 'kbq-modal-footer'
                    }
                }]
        }] });
class KbqModalMainAction {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalMainAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqModalMainAction, selector: "[kbq-modal-main-action]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalMainAction, decorators: [{
            type: Directive,
            args: [{
                    selector: `[kbq-modal-main-action]`
                }]
        }] });

/** Injection token that can be used to access the data that was passed in to a modal. */
const KBQ_MODAL_DATA = new InjectionToken('KbqModalData');
/**
 * A builder used for managing service creating modals
 * @docs-private
 */
class ModalBuilderForService {
    constructor(overlay, options = {}, injector) {
        this.overlay = overlay;
        this.options = options;
        this.injector = injector;
        this.createModal();
        if (!('kbqGetContainer' in options)) {
            options.kbqGetContainer = undefined;
        }
        this.changeProps(options);
        this.modalRef.instance.open();
        this.modalRef.instance.kbqAfterClose.subscribe(() => this.destroyModal());
        this.overlayRef
            .keydownEvents()
            .pipe(filter((event) => {
            return !!(event.keyCode === ESCAPE && options.kbqCloseByESC);
        }))
            .subscribe(() => this.getInstance()?.handleCloseResult('cancel', () => true));
    }
    getInstance() {
        return this.modalRef && this.modalRef.instance;
    }
    destroyModal() {
        if (this.modalRef) {
            this.overlayRef.dispose();
            this.modalRef = null;
        }
    }
    changeProps(options) {
        if (this.modalRef) {
            // here not limit user's inputs at runtime
            Object.assign(this.modalRef.instance, options);
        }
    }
    // Create component to ApplicationRef
    createModal() {
        this.overlayRef = this.overlay.create();
        this.overlayRef.hostElement.classList.add('kbq-modal-overlay');
        this.modalRef = this.overlayRef.attach(new ComponentPortal(KbqModalComponent, undefined, this.injector));
    }
}
class KbqModalService {
    // Track of the current close modals (we assume invisible is close this time)
    get openModals() {
        return this.modalControl.openModals;
    }
    get afterAllClose() {
        return this.modalControl.afterAllClose.asObservable();
    }
    constructor(overlay, modalControl, injector) {
        this.overlay = overlay;
        this.modalControl = modalControl;
        this.injector = injector;
    }
    // Closes all of the currently-open dialogs
    closeAll() {
        this.modalControl.closeAll();
    }
    create(options = {}) {
        if (typeof options.kbqOnCancel !== 'function') {
            // Leave an empty function to close this modal by default
            options.kbqOnCancel = () => { };
        }
        if (typeof options.kbqOnOk !== 'function') {
            // Leave an empty function to close this modal by default
            options.kbqOnOk = () => { };
        }
        if (!('kbqCloseByESC' in options)) {
            options.kbqCloseByESC = true;
        }
        // Remove the Cancel button if the user not specify a Cancel button
        if (!('kbqCancelText' in options)) {
            options.kbqCancelText = undefined;
        }
        // Remove the Ok button if the user not specify an Ok button
        if (!('kbqOkText' in options)) {
            options.kbqOkText = undefined;
        }
        // Remove the footer if the user not specify a footer
        if (!('kbqFooter' in options)) {
            options.kbqFooter = undefined;
        }
        const injector = Injector.create({
            parent: options.injector || this.injector,
            providers: [{ provide: KBQ_MODAL_DATA, useValue: options.data }]
        });
        return new ModalBuilderForService(this.overlay, options, injector).getInstance();
    }
    confirm(options = {}, confirmType = 'confirm') {
        if ('kbqFooter' in options) {
            // eslint-disable-next-line no-console
            console.warn(`The Confirm-Modal doesn't support "kbqFooter", this property will be ignored.`);
        }
        // NOTE: only support function currently by calling confirm()
        if (typeof options.kbqOnOk !== 'function') {
            // Leave an empty function to close this modal by default
            options.kbqOnOk = () => { };
        }
        options.kbqModalType = 'confirm';
        options.kbqClassName = `kbq-confirm kbq-confirm-${confirmType} ${options.kbqClassName || ''}`;
        return this.create(options);
    }
    open(options = {}) {
        options.kbqModalType = 'custom';
        return this.create(options);
    }
    success(options = {}) {
        return this.confirm(options, 'success');
    }
    delete(options = {}) {
        return this.confirm(options, 'warn');
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalService, deps: [{ token: i1.Overlay }, { token: KbqModalControlService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i1.Overlay }, { type: KbqModalControlService }, { type: i0.Injector }] });

class KbqModalModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqModalModule, declarations: [KbqModalComponent,
            KbqModalTitle,
            KbqModalBody,
            KbqModalFooter,
            CssUnitPipe,
            KbqModalMainAction], imports: [OverlayModule,
            A11yModule,
            KbqButtonModule,
            KbqIconModule,
            KbqTitleModule,
            NgTemplateOutlet,
            NgStyle,
            NgClass], exports: [KbqModalComponent,
            KbqModalTitle,
            KbqModalBody,
            KbqModalFooter,
            KbqModalMainAction] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalModule, providers: [
            KbqModalControlService,
            KbqModalService,
            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
        ], imports: [OverlayModule,
            A11yModule,
            KbqButtonModule,
            KbqIconModule,
            KbqTitleModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqModalModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        OverlayModule,
                        A11yModule,
                        KbqButtonModule,
                        KbqIconModule,
                        KbqTitleModule,
                        NgTemplateOutlet,
                        NgStyle,
                        NgClass
                    ],
                    exports: [
                        KbqModalComponent,
                        KbqModalTitle,
                        KbqModalBody,
                        KbqModalFooter,
                        KbqModalMainAction
                    ],
                    declarations: [
                        KbqModalComponent,
                        KbqModalTitle,
                        KbqModalBody,
                        KbqModalFooter,
                        CssUnitPipe,
                        KbqModalMainAction
                    ],
                    providers: [
                        KbqModalControlService,
                        KbqModalService,
                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory }
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { KBQ_MODAL_DATA, KbqModalBody, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
//# sourceMappingURL=koobiq-components-modal.mjs.map
