@evotor-dev/ui-kit 8.7.1 → 8.8.0

package/fesm2022/evotor-dev-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, PLATFORM_ID, ɵstringify as _stringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, inject, SecurityContext, Component, ChangeDetectionStrategy, HostBinding, Pipe, output, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, input, booleanAttribute, ComponentRef, computed, viewChild, signal, ChangeDetectorRef, DestroyRef, EnvironmentInjector, NgZone, createComponent, Injector, ApplicationRef, ComponentFactoryResolver, makeEnvironmentProviders, Host, ContentChildren, ViewChildren } from '@angular/core';
+import { InjectionToken, Injectable, PLATFORM_ID, ɵstringify as _stringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, inject, SecurityContext, Component, ChangeDetectionStrategy, HostBinding, Pipe, output, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, ComponentRef, input, model, viewChild, signal, computed, DestroyRef, EnvironmentInjector, createComponent, Injector, makeEnvironmentProviders, booleanAttribute, ChangeDetectorRef, NgZone, ApplicationRef, ComponentFactoryResolver, Host, ContentChildren, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule, AsyncPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle, Location, NgFor } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -8,7 +8,7 @@ import { NgxPageScrollModule } from 'ngx-page-scroll';
 import * as i3 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import * as i1$3 from 'rxjs';
-import { BehaviorSubject, Subject, Observable, shareReplay, fromEvent, merge, concat, of, asyncScheduler, scheduled } from 'rxjs';
+import { BehaviorSubject, Subject, Observable, shareReplay, fromEvent, merge, concat, of, finalize, filter as filter$1, asyncScheduler, scheduled } from 'rxjs';
 import { takeUntil, map, debounceTime, tap, delay, distinctUntilChanged, switchMap, filter, takeWhile, observeOn, take, mergeMap, throttleTime } from 'rxjs/operators';
 import { style, animate, trigger, state, transition } from '@angular/animations';
 import * as i1$1 from '@angular/platform-browser';
@@ -21,9 +21,8 @@ import { isNull, cloneDeep, isEqual, merge as merge$1, isUndefined } from 'lodas
 import * as IMask from 'imask';
 import flatpickr from 'flatpickr';
 import { IMaskDirective } from 'angular-imask';
-import { Key } from 'ts-keycode-enum';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createPopper } from '@popperjs/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { __decorate } from 'tslib';
 import autobind from 'autobind-decorator';
 import bytes from 'bytes';
@@ -3363,31 +3362,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }]
         }] });
 
+const EVO_MODAL_CONFIG = new InjectionToken('EVO_MODAL_CONFIG');
+// Root ID
+const EVO_MODAL_DEFAULT_ROOT_ID = 'EVO_MODAL_ROOT_ID';
+const EVO_MODAL_ROOT_ID = new InjectionToken('EvoModal default root ID');
+// Config
+const EVO_MODAL_DEFAULT_CONFIG = {
+    host: 'body',
+};
+// Modal Data
+const EVO_MODAL_DATA = new InjectionToken('EVO_MODAL_DATA');
+
+class EvoPortalOutlet {
+    constructor(injector, viewContainerRef) {
+        this.injector = injector;
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+
+// eslint-disable-next-line:max-line-length
+class EvoAbstractPortal {
+}
+class EvoPortalService {
+    constructor(appRef, injector, cfr) {
+        this.appRef = appRef;
+        this.injector = injector;
+        this.cfr = cfr;
+    }
+    // eslint-disable-next-line
+    attachComponent(portal, host, injector) {
+        if (host instanceof EvoPortalOutlet) {
+            return this.attachToHost(portal, host, injector);
+        }
+        else {
+            return this.attachToDomElement(portal, host, injector);
+        }
+    }
+    // eslint-disable-next-line
+    attachToDomElement(portal, elementOrSelector, injector) {
+        let element;
+        if (this.isElementSelector(elementOrSelector)) {
+            element = document.querySelector(elementOrSelector);
+            if (!element) {
+                this.errNotFoundBySelector(elementOrSelector);
+            }
+        }
+        else if (this.isHTMLElement(elementOrSelector)) {
+            element = elementOrSelector;
+        }
+        // TODO: rewrite without deprecated ComponentFactoryResolver
+        const factory = this.cfr.resolveComponentFactory(portal);
+        const compRef = factory.create(injector || this.injector);
+        this.appRef.attachView(compRef.hostView);
+        element.appendChild(this.getRootNode(compRef));
+        return compRef;
+    }
+    // eslint-disable-next-line
+    attachToHost(portal, portalHost, injector) {
+        const factory = this.cfr.resolveComponentFactory(portal);
+        return portalHost.viewContainerRef.createComponent(factory, portalHost.viewContainerRef.length, injector || portalHost.injector);
+    }
+    // eslint-disable-next-line
+    attachTemplate(template, host, context) {
+        if (host instanceof EvoPortalOutlet) {
+            return host.viewContainerRef.createEmbeddedView(template, context, host.viewContainerRef.length);
+        }
+        else if (this.isHTMLElement(host)) {
+            return this.attachTemplateToElement(template, host, context);
+        }
+        else {
+            const hostEl = document.querySelector(host);
+            if (!hostEl) {
+                this.errNotFoundBySelector(host);
+                return;
+            }
+            return this.attachTemplateToElement(template, hostEl, context);
+        }
+    }
+    // eslint-disable-next-line
+    detach(portal) {
+        portal.destroy();
+    }
+    attachTemplateToElement(template, element, context) {
+        const viewRef = template.createEmbeddedView(context);
+        this.appRef.attachView(viewRef);
+        element.appendChild(viewRef.rootNodes[0]);
+        return viewRef;
+    }
+    // eslint-disable-next-line
+    getRootNode(ref) {
+        if (ref instanceof ComponentRef) {
+            // eslint-disable-next-line
+            return ref.hostView.rootNodes[0];
+        }
+        else {
+            return ref.rootNodes[0];
+        }
+    }
+    // eslint-disable-next-line
+    isElementSelector(selector) {
+        return selector && typeof selector === 'string' && !!selector.trim().length;
+    }
+    // eslint-disable-next-line
+    isHTMLElement(element) {
+        return element && (element instanceof Element || element instanceof HTMLDocument);
+    }
+    errNotFoundBySelector(selector) {
+        throw new Error(`Element with selector '${selector}' not found`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }] });
+
+class EvoPortalOutletDirective extends EvoPortalOutlet {
+    constructor(injector, viewContainerRef) {
+        super(injector, viewContainerRef);
+        this.injector = injector;
+        this.viewContainerRef = viewContainerRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalOutletDirective, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: EvoPortalOutletDirective, isStandalone: true, selector: "[evoPortalOutlet]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalOutletDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[evoPortalOutlet]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ViewContainerRef }] });
+
+class EvoPortalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, imports: [EvoPortalOutletDirective], exports: [EvoPortalOutletDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, providers: [EvoPortalService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [EvoPortalOutletDirective],
+                    providers: [EvoPortalService],
+                    exports: [EvoPortalOutletDirective],
+                }]
+        }] });
+
+class EvoModalPortal extends EvoPortalService {
+    constructor(appRef, injector, cfr) {
+        super(appRef, injector, cfr);
+        this.appRef = appRef;
+        this.injector = injector;
+        this.cfr = cfr;
+    }
+    attach(host) {
+        this.attachedPortal = this.attachComponent(EvoModalComponent, host, this.injector);
+        this.attachedPortal.changeDetectorRef.detectChanges();
+    }
+    detach() {
+        super.detach(this.attachedPortal);
+        this.attachedPortal = null;
+    }
+    hasAttachedPortal() {
+        return !!this.attachedPortal;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalPortal, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalPortal }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalPortal, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }] });
+
+function isDynamicModalParams(params) {
+    return params && !isConfiguredModalParams(params) && params?.hasOwnProperty('component');
+}
+function isConfiguredModalParams(params) {
+    return params &&
+        (params.hasOwnProperty('titleText') ||
+            params.hasOwnProperty('acceptText') ||
+            params.hasOwnProperty('declineText') ||
+            params.hasOwnProperty('acceptButtonColor') ||
+            params.hasOwnProperty('acceptButtonTheme') ||
+            params.hasOwnProperty('declineButtonColor') ||
+            params.hasOwnProperty('declineButtonTheme') ||
+            params.hasOwnProperty('asyncAccept'));
+}
+function isConfiguredTemplateModalParams(params) {
+    return params && isConfiguredModalParams(params) && params.hasOwnProperty('template');
+}
+function isConfiguredComponentModalParams(params) {
+    return params && isConfiguredModalParams(params) && params.hasOwnProperty('component');
+}
+
 class EvoModalService {
     constructor() {
+        this.portal = inject(EvoModalPortal);
+        this.config = inject(EVO_MODAL_CONFIG);
+        this.evoModalRootId = inject(EVO_MODAL_ROOT_ID);
         this.modalEvents$ = new Subject();
-        this.registeredModals = {};
+        this.registeredModals = new Map();
     }
     register(id) {
-        this.registeredModals[id] = { id, isOpen: false };
+        this.registeredModals.set(id, { id, isOpen: false });
     }
     unregister(id) {
-        delete this.registeredModals[id];
+        this.registeredModals.delete(id);
     }
-    open(id, params) {
-        this.modalEvents$.next({ id, isOpen: true, params });
+    open(idOrParams, params) {
+        if (typeof idOrParams === 'string') {
+            this.modalEvents$.next({ id: idOrParams, isOpen: true, params });
+        }
+        else if (isDynamicModalParams(idOrParams)) {
+            this.openDynamicModal(idOrParams);
+        }
+        else if (isConfiguredModalParams(idOrParams)) {
+            this.openConfiguredModal(idOrParams);
+        }
     }
-    close(id, agreement, params) {
+    close(id = this.evoModalRootId, agreement = false, params) {
         this.modalEvents$.next({ id, isOpen: false, agreement, params });
     }
     getEventsSubscription(id) {
-        return this.modalEvents$.pipe(filter((data) => data.id === id), distinctUntilChanged((a, b) => isEqual(a, b)), tap((evoModalState) => evoModalState[id]));
+        return this.modalEvents$.pipe(filter(({ id: currentId }) => currentId === id), distinctUntilChanged((a, b) => isEqual(a, b)));
+    }
+    openDynamicModal(params) {
+        this.attachPortal();
+        this.modalEvents$.next({ id: this.evoModalRootId, isOpen: true, params });
+    }
+    openConfiguredModal(idOrParams) {
+        this.attachPortal();
+        this.modalEvents$.next({ id: this.evoModalRootId, isOpen: true, params: idOrParams });
+    }
+    cleanupDefaultHost() {
+        if (!this.portal.hasAttachedPortal()) {
+            return;
+        }
+        this.portal.detach();
+    }
+    attachPortal() {
+        if (this.portal.hasAttachedPortal()) {
+            return;
+        }
+        this.portal.attach(this.config.host);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalService }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 var EvoModalCloseTargets;
@@ -3397,117 +3620,198 @@ var EvoModalCloseTargets;
     EvoModalCloseTargets["DEFAULT"] = "default";
     EvoModalCloseTargets["ESC"] = "escape";
 })(EvoModalCloseTargets || (EvoModalCloseTargets = {}));
-class EvoModalComponent {
-    get id() {
-        return this._id;
+
+class EvoModalDrawingStrategy {
+}
+
+class EvoDynamicModalDrawingStrategy extends EvoModalDrawingStrategy {
+    draw(params) {
+        this.isDynamicContent.set(true);
+        this.clearView();
+        this.insertComponent(params);
     }
-    set id(id) {
-        if (id) {
-            this._id = id;
-            this.modalService.register(id);
-        }
-        else {
-            throw new Error("EvoModal. Can't be registered, wrong id passed");
-        }
+}
+
+class EvoConfiguredModalDrawingStrategy extends EvoModalDrawingStrategy {
+    draw(params) {
+        this.titleText.set(params.titleText);
+        this.acceptText.set(params.acceptText);
+        this.declineText.set(params.declineText);
+        this.acceptButtonColor.update((color) => params.acceptButtonColor || color);
+        this.acceptButtonTheme.update((theme) => params.acceptButtonTheme || theme);
+        this.declineButtonColor.update((color) => params.acceptButtonColor || color);
+        this.declineButtonTheme.update((theme) => params.acceptButtonTheme || theme);
+        this.asyncAccept.set(params.asyncAccept);
     }
-    constructor(modalService, elRef) {
-        this.modalService = modalService;
-        this.elRef = elRef;
-        this.declineButtonColor = 'secondary';
-        this.declineButtonTheme = 'rounded-outline';
-        this.isAcceptLoading = false;
-        this.isDeclineDisabled = false;
-        this.isVisible = false;
+}
+
+class EvoConfiguredComponentModalDrawingStrategy extends EvoConfiguredModalDrawingStrategy {
+    draw(params) {
+        super.draw(params);
+        this.insertComponent(params, 'content');
+    }
+}
+
+class EvoConfiguredTemplateModalDrawingStrategy extends EvoConfiguredModalDrawingStrategy {
+    draw(params) {
+        super.draw(params);
+        this.modalContent.set({
+            template: params.template,
+            context: params.data,
+        });
+    }
+}
+
+class EvoModalButtonsComponent {
+    constructor() {
+        this.single = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.10", type: EvoModalButtonsComponent, isStandalone: true, selector: "evo-modal-buttons, [evo-modal-buttons]", inputs: { single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.evo-modal-buttons_single-btn": "single()" }, classAttribute: "evo-modal-buttons" }, ngImport: i0, template: '<ng-content select="[evoButton]"/>', isInline: true, styles: [".evo-modal-buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:32px;gap:16px}@media (min-width: 768px){.evo-modal-buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));gap:32px;margin:32px auto 0}.evo-modal-buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal-buttons button{display:block;width:100%}@media (min-width: 768px){.evo-modal-buttons button{width:auto}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'evo-modal-buttons, [evo-modal-buttons]', standalone: true, imports: [], template: '<ng-content select="[evoButton]"/>', host: {
+                        class: 'evo-modal-buttons',
+                        '[class.evo-modal-buttons_single-btn]': 'single()',
+                    }, encapsulation: ViewEncapsulation.None, styles: [".evo-modal-buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:32px;gap:16px}@media (min-width: 768px){.evo-modal-buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));gap:32px;margin:32px auto 0}.evo-modal-buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal-buttons button{display:block;width:100%}@media (min-width: 768px){.evo-modal-buttons button{width:auto}}\n"] }]
+        }] });
+
+class EvoModalComponent {
+    constructor() {
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.evoModalRootId = inject(EVO_MODAL_ROOT_ID);
+        this.acceptText = model('');
+        this.acceptButtonColor = model(`success`);
+        this.acceptButtonTheme = model(`rounded-solid`);
+        this.asyncAccept = model(null);
+        this.declineText = model('');
+        this.declineButtonColor = model('secondary');
+        this.declineButtonTheme = model('rounded-outline');
+        this.id = model(this.evoModalRootId);
+        this.titleText = model('');
+        this.contentContainer = viewChild('contentContainer', { read: ViewContainerRef });
+        this.contentContainer$ = toObservable(this.contentContainer);
+        this.drawingStrategy = signal(null);
+        this.isDynamicContent = signal(false);
+        this.isLoading = signal(false);
+        this.isVisible = computed(() => this.modalState()?.isOpen || false);
+        this.modalContainer = viewChild('modalContainer', { read: ViewContainerRef });
+        this.modalContainer$ = toObservable(this.modalContainer);
+        this.modalContent = signal(null);
+        this.modalElement = viewChild('modal', { read: ElementRef });
+        this.modalState = signal(null);
+        this.showButtons = computed(() => this.acceptText() || this.declineText());
         this.closeTargets = EvoModalCloseTargets;
-        this.closeTarget = EvoModalCloseTargets.DEFAULT;
+        this.destroyRef = inject(DestroyRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.evoModalService = inject(EvoModalService);
     }
     ngOnInit() {
+        this.evoModalService.register(this.id());
         this.subscribeModalEvents();
     }
     ngOnDestroy() {
-        this.modalService.unregister(this.id);
+        this.evoModalService.unregister(this.id());
     }
-    onBackgroundClick($event) {
-        if (this.declineText &&
-            $event &&
-            $event.target &&
-            !this.elRef.nativeElement.querySelector('.evo-modal').contains($event.target) &&
-            this.modalState.isOpen) {
-            this.handleOnClose(false, this.closeTargets.BACKGROUND);
+    onAcceptClick() {
+        const asyncAcceptAction = this.asyncAccept()?.();
+        if (!asyncAcceptAction) {
+            return this.close(true, EvoModalCloseTargets.BUTTON);
         }
+        this.isLoading.set(true);
+        asyncAcceptAction.pipe(finalize(() => this.isLoading.set(false)), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.close(true, EvoModalCloseTargets.BUTTON));
     }
-    handleOnClose(agreement, closeTarget) {
-        this.closeTarget = closeTarget;
-        if (agreement === false && this.isDeclineDisabled) {
-            return;
+    onBackgroundClick(event) {
+        if (this.canCloseByBackground(event)) {
+            this.close(false, EvoModalCloseTargets.BACKGROUND);
         }
-        if (agreement && typeof this.asyncAccept === 'function') {
-            const setAsyncStates = (isLoading = false) => {
-                this.isDeclineDisabled = isLoading;
-                this.isAcceptLoading = isLoading;
-            };
-            setAsyncStates(true);
-            return this.asyncAccept().subscribe(() => {
-                setAsyncStates(false);
-                this.modalService.close(this.id, agreement, {
-                    closeTarget: this.closeTarget,
-                });
-            }, () => {
-                setAsyncStates(false);
-            });
+    }
+    onDeclineClick() {
+        if (this.isLoading()) {
+            return;
         }
-        this.modalService.close(this.id, agreement, {
-            closeTarget: this.closeTarget,
-        });
+        this.close(false, EvoModalCloseTargets.BUTTON);
     }
-    subscribeModalEvents() {
-        this.modalService.getEventsSubscription(this.id).subscribe((modalState) => {
-            this.modalState = modalState;
-            // timeout for modal animation support
-            setTimeout(() => {
-                this.isVisible = modalState.isOpen;
-            });
-            if (modalState.isOpen) {
-                this.initKeyboardListener();
-            }
+    clearView() {
+        this.modalContainer()?.clear();
+    }
+    insertComponent({ data, injector, component }, target = 'modal') {
+        const dynamicComponentRef = createComponent(component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: Injector.create({
+                providers: [
+                    {
+                        provide: EVO_MODAL_DATA,
+                        useValue: data,
+                    },
+                ],
+                parent: injector,
+            }),
         });
+        this.getInsertionContainer(target).pipe(filter$1((container) => !!container), takeUntilDestroyed(this.destroyRef)).subscribe((container) => {
+            container.insert(dynamicComponentRef.hostView);
+            dynamicComponentRef.changeDetectorRef.markForCheck();
+        });
+    }
+    canCloseByBackground(event) {
+        return (this.declineText() || this.isDynamicContent()) &&
+            !this.isLoading() &&
+            this.modalState().isOpen &&
+            event?.target &&
+            !this.modalElement().nativeElement.contains(event.target);
+    }
+    close(agreement, closeTarget) {
+        this.evoModalService.close(this.id(), agreement, { closeTarget });
+        this.clearView();
+        if (this.id() !== this.evoModalRootId) {
+            return;
+        }
+        this.evoModalService.unregister(this.evoModalRootId);
+        this.evoModalService.cleanupDefaultHost();
+    }
+    getInsertionContainer(target) {
+        return target === 'modal' ? this.modalContainer$ : this.contentContainer$;
     }
     initKeyboardListener() {
-        return fromEvent(document.body, 'keydown')
-            .pipe(takeWhile(() => {
-            return this.modalState.isOpen;
-        }))
-            .subscribe((event) => {
-            if (this.declineText && event.keyCode === Key.Escape) {
-                this.handleOnClose(false, this.closeTargets.ESC);
+        fromEvent(document.body, 'keydown').pipe(takeWhile(() => this.modalState().isOpen), filter$1((event) => (this.declineText() || this.isDynamicContent()) && event.key === 'Escape'), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.close(false, this.closeTargets.ESC));
+    }
+    setDrawingStrategy(params) {
+        switch (true) {
+            case isDynamicModalParams(params):
+                return this.drawingStrategy.set(new EvoDynamicModalDrawingStrategy());
+            case isConfiguredComponentModalParams(params):
+                return this.drawingStrategy.set(new EvoConfiguredComponentModalDrawingStrategy());
+            case isConfiguredTemplateModalParams(params):
+                return this.drawingStrategy.set(new EvoConfiguredTemplateModalDrawingStrategy());
+            default:
+                return;
+        }
+    }
+    subscribeModalEvents() {
+        this.evoModalService.getEventsSubscription(this.id()).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((modalState) => {
+            this.modalState.set(modalState);
+            if (!modalState.isOpen) {
+                return;
             }
+            this.initKeyboardListener();
+            this.setDrawingStrategy(modalState.params);
+            this.drawingStrategy()?.draw.call(this, modalState.params);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalComponent, deps: [{ token: EvoModalService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoModalComponent, isStandalone: true, selector: "evo-modal", inputs: { id: "id", titleText: "titleText", acceptText: "acceptText", acceptButtonColor: "acceptButtonColor", acceptButtonTheme: "acceptButtonTheme", declineText: "declineText", declineButtonColor: "declineButtonColor", declineButtonTheme: "declineButtonTheme", asyncAccept: "asyncAccept" }, ngImport: i0, template: "@if (modalState?.isOpen) {\n    <div\n        class=\"evo-modal__background\"\n        [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n        (click)=\"onBackgroundClick($event)\"\n    ></div>\n\n    <div class=\"evo-modal__wrapper\" [ngClass]=\"{'evo-modal_visible': isVisible}\" (click)=\"onBackgroundClick($event)\">\n        <div class=\"evo-modal\">\n            <div class=\"evo-modal__icon\">\n                <ng-content select=\"evo-icon\" />\n            </div>\n\n            @if (titleText !== undefined) {\n                <h2 class=\"evo-modal__title\">{{ titleText }}</h2>\n            }\n\n            <div class=\"evo-modal__content\">\n                <ng-content />\n            </div>\n            <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n                @if (declineText) {\n                    <button\n                        evoButton\n                        class=\"evo-modal__button evo-modal__button_decline\"\n                        [color]=\"declineButtonColor\"\n                        [theme]=\"declineButtonTheme\"\n                        [disabled]=\"isDeclineDisabled\"\n                        (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n                    >\n                        {{ declineText }}\n                    </button>\n                }\n\n                @if (acceptText) {\n                    <button\n                        evoButton\n                        class=\"evo-modal__button evo-modal__button_accept\"\n                        [color]=\"acceptButtonColor\"\n                        [theme]=\"acceptButtonTheme\"\n                        [loading]=\"isAcceptLoading\"\n                        (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n                    >\n                        {{ acceptText }}\n                    </button>\n                }\n            </div>\n        </div>\n    </div>\n}\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:#00000080;opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoModalComponent, isStandalone: true, selector: "evo-modal", inputs: { acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonColor: { classPropertyName: "acceptButtonColor", publicName: "acceptButtonColor", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonTheme: { classPropertyName: "acceptButtonTheme", publicName: "acceptButtonTheme", isSignal: true, isRequired: false, transformFunction: null }, asyncAccept: { classPropertyName: "asyncAccept", publicName: "asyncAccept", isSignal: true, isRequired: false, transformFunction: null }, declineText: { classPropertyName: "declineText", publicName: "declineText", isSignal: true, isRequired: false, transformFunction: null }, declineButtonColor: { classPropertyName: "declineButtonColor", publicName: "declineButtonColor", isSignal: true, isRequired: false, transformFunction: null }, declineButtonTheme: { classPropertyName: "declineButtonTheme", publicName: "declineButtonTheme", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { acceptText: "acceptTextChange", acceptButtonColor: "acceptButtonColorChange", acceptButtonTheme: "acceptButtonThemeChange", asyncAccept: "asyncAcceptChange", declineText: "declineTextChange", declineButtonColor: "declineButtonColorChange", declineButtonTheme: "declineButtonThemeChange", id: "idChange", titleText: "titleTextChange" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "modalElement", first: true, predicate: ["modal"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (isVisible()) {\n    <div class=\"evo-modal__background\" (click)=\"onBackgroundClick($event)\"></div>\n\n    <div class=\"evo-modal__wrapper\" (click)=\"onBackgroundClick($event)\">\n        <div class=\"evo-modal\" #modal>\n            @if (isDynamicContent()) {\n                <ng-template #modalContainer/>\n            } @else {\n                <div class=\"evo-modal__icon\">\n                    <ng-content select=\"evo-icon\"/>\n                </div>\n\n                @if (titleText()) {\n                    <h2 class=\"evo-modal__title\">{{ titleText() }}</h2>\n                }\n\n                <div class=\"evo-modal__content\">\n                    <ng-content/>\n\n                    <ng-container *ngTemplateOutlet=\"modalContent()?.template; context: {data: modalContent()?.context}\"/>\n\n                    <ng-template #contentContainer/>\n                </div>\n\n                @if (showButtons()) {\n                    <evo-modal-buttons [single]=\"!declineText() || !acceptText()\">\n                        @if (declineText()) {\n                            <button\n                                class=\"evo-modal__button_decline\"\n                                evoButton\n                                [color]=\"declineButtonColor()\"\n                                [theme]=\"declineButtonTheme()\"\n                                [disabled]=\"isLoading()\"\n                                (click)=\"onDeclineClick()\"\n                            >{{ declineText() }}</button>\n                        }\n\n                        @if (acceptText()) {\n                            <button\n                                class=\"evo-modal__button_accept\"\n                                evoButton\n                                [color]=\"acceptButtonColor()\"\n                                [theme]=\"acceptButtonTheme()\"\n                                [loading]=\"isLoading()\"\n                                (click)=\"onAcceptClick()\"\n                            >{{ acceptText() }}</button>\n                        }\n                    </evo-modal-buttons>\n                }\n            }\n        </div>\n    </div>\n}\n", styles: ["@keyframes appearance{0%{opacity:0}to{opacity:1}}.evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:752px;height:auto;max-height:100%;padding:16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;animation:appearance .25s linear}@media (min-width: 768px){.evo-modal{width:752px;height:auto;padding:32px}}.evo-modal__title{margin-top:0;margin-bottom:0;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:#00000080}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}\n"], dependencies: [{ kind: "component", type: EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EvoModalButtonsComponent, selector: "evo-modal-buttons, [evo-modal-buttons]", inputs: ["single"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'evo-modal', standalone: true, imports: [NgClass, EvoButtonComponent], template: "@if (modalState?.isOpen) {\n    <div\n        class=\"evo-modal__background\"\n        [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n        (click)=\"onBackgroundClick($event)\"\n    ></div>\n\n    <div class=\"evo-modal__wrapper\" [ngClass]=\"{'evo-modal_visible': isVisible}\" (click)=\"onBackgroundClick($event)\">\n        <div class=\"evo-modal\">\n            <div class=\"evo-modal__icon\">\n                <ng-content select=\"evo-icon\" />\n            </div>\n\n            @if (titleText !== undefined) {\n                <h2 class=\"evo-modal__title\">{{ titleText }}</h2>\n            }\n\n            <div class=\"evo-modal__content\">\n                <ng-content />\n            </div>\n            <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n                @if (declineText) {\n                    <button\n                        evoButton\n                        class=\"evo-modal__button evo-modal__button_decline\"\n                        [color]=\"declineButtonColor\"\n                        [theme]=\"declineButtonTheme\"\n                        [disabled]=\"isDeclineDisabled\"\n                        (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n                    >\n                        {{ declineText }}\n                    </button>\n                }\n\n                @if (acceptText) {\n                    <button\n                        evoButton\n                        class=\"evo-modal__button evo-modal__button_accept\"\n                        [color]=\"acceptButtonColor\"\n                        [theme]=\"acceptButtonTheme\"\n                        [loading]=\"isAcceptLoading\"\n                        (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n                    >\n                        {{ acceptText }}\n                    </button>\n                }\n            </div>\n        </div>\n    </div>\n}\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:#00000080;opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"] }]
-        }], ctorParameters: () => [{ type: EvoModalService }, { type: i0.ElementRef }], propDecorators: { id: [{
-                type: Input
-            }], titleText: [{
-                type: Input
-            }], acceptText: [{
-                type: Input
-            }], acceptButtonColor: [{
-                type: Input
-            }], acceptButtonTheme: [{
-                type: Input
-            }], declineText: [{
-                type: Input
-            }], declineButtonColor: [{
-                type: Input
-            }], declineButtonTheme: [{
-                type: Input
-            }], asyncAccept: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'evo-modal', standalone: true, imports: [
+                        EvoButtonComponent,
+                        EvoUiClassDirective,
+                        NgIf,
+                        NgTemplateOutlet,
+                        EvoModalButtonsComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible()) {\n    <div class=\"evo-modal__background\" (click)=\"onBackgroundClick($event)\"></div>\n\n    <div class=\"evo-modal__wrapper\" (click)=\"onBackgroundClick($event)\">\n        <div class=\"evo-modal\" #modal>\n            @if (isDynamicContent()) {\n                <ng-template #modalContainer/>\n            } @else {\n                <div class=\"evo-modal__icon\">\n                    <ng-content select=\"evo-icon\"/>\n                </div>\n\n                @if (titleText()) {\n                    <h2 class=\"evo-modal__title\">{{ titleText() }}</h2>\n                }\n\n                <div class=\"evo-modal__content\">\n                    <ng-content/>\n\n                    <ng-container *ngTemplateOutlet=\"modalContent()?.template; context: {data: modalContent()?.context}\"/>\n\n                    <ng-template #contentContainer/>\n                </div>\n\n                @if (showButtons()) {\n                    <evo-modal-buttons [single]=\"!declineText() || !acceptText()\">\n                        @if (declineText()) {\n                            <button\n                                class=\"evo-modal__button_decline\"\n                                evoButton\n                                [color]=\"declineButtonColor()\"\n                                [theme]=\"declineButtonTheme()\"\n                                [disabled]=\"isLoading()\"\n                                (click)=\"onDeclineClick()\"\n                            >{{ declineText() }}</button>\n                        }\n\n                        @if (acceptText()) {\n                            <button\n                                class=\"evo-modal__button_accept\"\n                                evoButton\n                                [color]=\"acceptButtonColor()\"\n                                [theme]=\"acceptButtonTheme()\"\n                                [loading]=\"isLoading()\"\n                                (click)=\"onAcceptClick()\"\n                            >{{ acceptText() }}</button>\n                        }\n                    </evo-modal-buttons>\n                }\n            }\n        </div>\n    </div>\n}\n", styles: ["@keyframes appearance{0%{opacity:0}to{opacity:1}}.evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:752px;height:auto;max-height:100%;padding:16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;animation:appearance .25s linear}@media (min-width: 768px){.evo-modal{width:752px;height:auto;padding:32px}}.evo-modal__title{margin-top:0;margin-bottom:0;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:#00000080}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}\n"] }]
+        }] });
 
 class EvoModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3523,6 +3827,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }]
         }] });
 
+function provideModal(config = {}) {
+    return makeEnvironmentProviders([
+        EvoModalPortal,
+        {
+            provide: EVO_MODAL_ROOT_ID,
+            useValue: EVO_MODAL_DEFAULT_ROOT_ID,
+        },
+        {
+            provide: EVO_MODAL_CONFIG,
+            useValue: merge$1(EVO_MODAL_DEFAULT_CONFIG, config),
+        },
+    ]);
+}
+
 class EvoNoteComponent {
     constructor() {
         this.closable = input(false, { transform: booleanAttribute });
@@ -3871,141 +4189,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }]
         }] });
 
-class EvoPortalOutlet {
-    constructor(injector, viewContainerRef) {
-        this.injector = injector;
-        this.viewContainerRef = viewContainerRef;
-    }
-}
-
-// eslint-disable-next-line:max-line-length
-class EvoAbstractPortal {
-}
-class EvoPortalService {
-    constructor(appRef, injector, cfr) {
-        this.appRef = appRef;
-        this.injector = injector;
-        this.cfr = cfr;
-    }
-    // eslint-disable-next-line
-    attachComponent(portal, host, injector) {
-        if (host instanceof EvoPortalOutlet) {
-            return this.attachToHost(portal, host, injector);
-        }
-        else {
-            return this.attachToDomElement(portal, host, injector);
-        }
-    }
-    // eslint-disable-next-line
-    attachToDomElement(portal, elementOrSelector, injector) {
-        let element;
-        if (this.isElementSelector(elementOrSelector)) {
-            element = document.querySelector(elementOrSelector);
-            if (!element) {
-                this.errNotFoundBySelector(elementOrSelector);
-            }
-        }
-        else if (this.isHTMLElement(elementOrSelector)) {
-            element = elementOrSelector;
-        }
-        // TODO: rewrite without deprecated ComponentFactoryResolver
-        const factory = this.cfr.resolveComponentFactory(portal);
-        const compRef = factory.create(injector || this.injector);
-        this.appRef.attachView(compRef.hostView);
-        element.appendChild(this.getRootNode(compRef));
-        return compRef;
-    }
-    // eslint-disable-next-line
-    attachToHost(portal, portalHost, injector) {
-        const factory = this.cfr.resolveComponentFactory(portal);
-        return portalHost.viewContainerRef.createComponent(factory, portalHost.viewContainerRef.length, injector || portalHost.injector);
-    }
-    // eslint-disable-next-line
-    attachTemplate(template, host, context) {
-        if (host instanceof EvoPortalOutlet) {
-            return host.viewContainerRef.createEmbeddedView(template, context, host.viewContainerRef.length);
-        }
-        else if (this.isHTMLElement(host)) {
-            return this.attachTemplateToElement(template, host, context);
-        }
-        else {
-            const hostEl = document.querySelector(host);
-            if (!hostEl) {
-                this.errNotFoundBySelector(host);
-                return;
-            }
-            return this.attachTemplateToElement(template, hostEl, context);
-        }
-    }
-    // eslint-disable-next-line
-    detach(portal) {
-        portal.destroy();
-    }
-    attachTemplateToElement(template, element, context) {
-        const viewRef = template.createEmbeddedView(context);
-        this.appRef.attachView(viewRef);
-        element.appendChild(viewRef.rootNodes[0]);
-        return viewRef;
-    }
-    // eslint-disable-next-line
-    getRootNode(ref) {
-        if (ref instanceof ComponentRef) {
-            // eslint-disable-next-line
-            return ref.hostView.rootNodes[0];
-        }
-        else {
-            return ref.rootNodes[0];
-        }
-    }
-    // eslint-disable-next-line
-    isElementSelector(selector) {
-        return selector && typeof selector === 'string' && !!selector.trim().length;
-    }
-    // eslint-disable-next-line
-    isHTMLElement(element) {
-        return element && (element instanceof Element || element instanceof HTMLDocument);
-    }
-    errNotFoundBySelector(selector) {
-        throw new Error(`Element with selector '${selector}' not found`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }] });
-
-class EvoPortalOutletDirective extends EvoPortalOutlet {
-    constructor(injector, viewContainerRef) {
-        super(injector, viewContainerRef);
-        this.injector = injector;
-        this.viewContainerRef = viewContainerRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalOutletDirective, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: EvoPortalOutletDirective, isStandalone: true, selector: "[evoPortalOutlet]", usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalOutletDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[evoPortalOutlet]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ViewContainerRef }] });
-
-class EvoPortalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, imports: [EvoPortalOutletDirective], exports: [EvoPortalOutletDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, providers: [EvoPortalService] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoPortalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [EvoPortalOutletDirective],
-                    providers: [EvoPortalService],
-                    exports: [EvoPortalOutletDirective],
-                }]
-        }] });
-
 class EvoRadioComponent extends EvoBaseControl {
     constructor() {
         super(...arguments);
@@ -6161,5 +6344,5 @@ class Serializable {
  * Generated bundle index. Do not edit.
  */
 
-export { CSS_BREAKPOINTS, DESKTOP_SMALL_VIEW, DaDataEntityTypes, DaDataParty, DadataBankStatus, DadataBankType, DadataCompanyBranchType, DadataCompanyStatus, DadataCompanyType, DadataFounderShareType, DadataManagerType, DeclinationPipe, DeprecateMethod, DeprecateVariable, DesktopSmallViewProvider, EVO_ASSETS_PATH, EVO_DROPDOWN_POSITION_DESCRIPTION, EVO_ICON_RESOLVER, EVO_LOCAL_ASSETS_PATH, EVO_SIDEBAR_CONFIG, EVO_SIDEBAR_DATA, EVO_SIDEBAR_ROOT_ID, EvoAbstractPortal, EvoAccordionComponent, EvoAccordionContentComponent, EvoAccordionModule, EvoAccordionPanelComponent, EvoAccordionTitleComponent, EvoAutocompleteComponent, EvoAutocompleteDefaultOptionComponent, EvoAutocompleteFooterComponent, EvoAutocompleteHeaderComponent, EvoAutocompleteModule, EvoBadgeComponent, EvoBadgeModule, EvoBaseControl, EvoButtonComponent, EvoButtonModule, EvoCheckboxComponent, EvoCheckboxModule, EvoChipComponent, EvoChipModule, EvoChipTheme, EvoChipType, EvoCircularLoaderComponent, EvoClickOutsideDirective, EvoCollection, EvoCollectionFabric, EvoControlErrorComponent, EvoControlErrorModule, EvoControlLabelComponent, EvoControlLabelModule, EvoControlStateManager, EvoControlStates, EvoCounterComponent, EvoCounterModule, EvoCounterSize, EvoDatepickerComponent, EvoDatepickerModule, EvoDropdownComponent, EvoDropdownModule, EvoDropdownOriginDirective, EvoExpandedService, EvoIconButtonComponent, EvoIconButtonModule, EvoIconComponent, EvoIconNumberComponent, EvoIconNumberModule, EvoIconService, EvoInputComponent, EvoInputContenteditableComponent, EvoInputContenteditableModule, EvoInputIconDirective, EvoInputModule, EvoInputSizes, EvoInputTheme, EvoIsExpandedDirective, EvoLetContext, EvoLetDirective, EvoLoaderModule, EvoModalCloseTargets, EvoModalComponent, EvoModalModule, EvoModalService, EvoNavbarComponent, EvoNavbarItemComponent, EvoNavbarModule, EvoNavigationButtonComponent, EvoNavigationButtonModule, EvoNoteComponent, EvoNoteModule, EvoPaginatorComponent, EvoPaginatorModule, EvoPipesModule, EvoPopoverComponent, EvoPopoverModule, EvoPortalModule, EvoPortalOutlet, EvoPortalOutletDirective, EvoPortalService, EvoRadioComponent, EvoRadioModule, EvoRadioshapeComponent, EvoRadioshapeModule, EvoSidebarCloseTargets, EvoSidebarComponent, EvoSidebarContentComponent, EvoSidebarFooterComponent, EvoSidebarHeaderComponent, EvoSidebarService, EvoSidebarSizes, EvoSidebarStates, EvoStepperComponent, EvoStepperItemComponent, EvoStepperModule, EvoTabComponent, EvoTabContentComponent, EvoTabStateCollection, EvoTableColumnComponent, EvoTableComponent, EvoTableModule, EvoTableRowClickEvent, EvoTabsComponent, EvoTabsModule, EvoTabsService, EvoTabsSize, EvoTabsSizeService, EvoTextareaComponent, EvoTextareaModule, EvoToastComponent, EvoToastModule, EvoToastService, EvoToastTypes, EvoToggleComponent, EvoToggleModule, EvoUiClassDirective, EvoUiKitModule, EvoUploadComponent, EvoUploadModule, FormHelper, MOBILE_VIEW, MobileViewProvider, SafeHtmlPipe, Serializable, TABLET_VIEW, TabletViewProvider, VIEW_BREAKPOINTS_PROVIDERS, WINDOW_PROVIDERS, enterZone, evoAssetsPathProvider, evoCreateToken, evoCreateTokenFromFactory, evoIconResolverProvider, evoLocalAssetsPathProvider, evoSidebarAnimationDuration, evoSidebarDefaultConfig, evoSidebarRootId, expandAnimation, portalProvider, provideSidebar, sidebarAnimation, skipInitialRenderAnimation, switchQueryToList };
+export { CSS_BREAKPOINTS, DESKTOP_SMALL_VIEW, DaDataEntityTypes, DaDataParty, DadataBankStatus, DadataBankType, DadataCompanyBranchType, DadataCompanyStatus, DadataCompanyType, DadataFounderShareType, DadataManagerType, DeclinationPipe, DeprecateMethod, DeprecateVariable, DesktopSmallViewProvider, EVO_ASSETS_PATH, EVO_DROPDOWN_POSITION_DESCRIPTION, EVO_ICON_RESOLVER, EVO_LOCAL_ASSETS_PATH, EVO_MODAL_CONFIG, EVO_MODAL_DATA, EVO_MODAL_DEFAULT_CONFIG, EVO_MODAL_DEFAULT_ROOT_ID, EVO_MODAL_ROOT_ID, EVO_SIDEBAR_CONFIG, EVO_SIDEBAR_DATA, EVO_SIDEBAR_ROOT_ID, EvoAbstractPortal, EvoAccordionComponent, EvoAccordionContentComponent, EvoAccordionModule, EvoAccordionPanelComponent, EvoAccordionTitleComponent, EvoAutocompleteComponent, EvoAutocompleteDefaultOptionComponent, EvoAutocompleteFooterComponent, EvoAutocompleteHeaderComponent, EvoAutocompleteModule, EvoBadgeComponent, EvoBadgeModule, EvoBaseControl, EvoButtonComponent, EvoButtonModule, EvoCheckboxComponent, EvoCheckboxModule, EvoChipComponent, EvoChipModule, EvoChipTheme, EvoChipType, EvoCircularLoaderComponent, EvoClickOutsideDirective, EvoCollection, EvoCollectionFabric, EvoControlErrorComponent, EvoControlErrorModule, EvoControlLabelComponent, EvoControlLabelModule, EvoControlStateManager, EvoControlStates, EvoCounterComponent, EvoCounterModule, EvoCounterSize, EvoDatepickerComponent, EvoDatepickerModule, EvoDropdownComponent, EvoDropdownModule, EvoDropdownOriginDirective, EvoExpandedService, EvoIconButtonComponent, EvoIconButtonModule, EvoIconComponent, EvoIconNumberComponent, EvoIconNumberModule, EvoIconService, EvoInputComponent, EvoInputContenteditableComponent, EvoInputContenteditableModule, EvoInputIconDirective, EvoInputModule, EvoInputSizes, EvoInputTheme, EvoIsExpandedDirective, EvoLetContext, EvoLetDirective, EvoLoaderModule, EvoModalButtonsComponent, EvoModalCloseTargets, EvoModalComponent, EvoModalModule, EvoModalService, EvoNavbarComponent, EvoNavbarItemComponent, EvoNavbarModule, EvoNavigationButtonComponent, EvoNavigationButtonModule, EvoNoteComponent, EvoNoteModule, EvoPaginatorComponent, EvoPaginatorModule, EvoPipesModule, EvoPopoverComponent, EvoPopoverModule, EvoPortalModule, EvoPortalOutlet, EvoPortalOutletDirective, EvoPortalService, EvoRadioComponent, EvoRadioModule, EvoRadioshapeComponent, EvoRadioshapeModule, EvoSidebarCloseTargets, EvoSidebarComponent, EvoSidebarContentComponent, EvoSidebarFooterComponent, EvoSidebarHeaderComponent, EvoSidebarService, EvoSidebarSizes, EvoSidebarStates, EvoStepperComponent, EvoStepperItemComponent, EvoStepperModule, EvoTabComponent, EvoTabContentComponent, EvoTabStateCollection, EvoTableColumnComponent, EvoTableComponent, EvoTableModule, EvoTableRowClickEvent, EvoTabsComponent, EvoTabsModule, EvoTabsService, EvoTabsSize, EvoTabsSizeService, EvoTextareaComponent, EvoTextareaModule, EvoToastComponent, EvoToastModule, EvoToastService, EvoToastTypes, EvoToggleComponent, EvoToggleModule, EvoUiClassDirective, EvoUiKitModule, EvoUploadComponent, EvoUploadModule, FormHelper, MOBILE_VIEW, MobileViewProvider, SafeHtmlPipe, Serializable, TABLET_VIEW, TabletViewProvider, VIEW_BREAKPOINTS_PROVIDERS, WINDOW_PROVIDERS, enterZone, evoAssetsPathProvider, evoCreateToken, evoCreateTokenFromFactory, evoIconResolverProvider, evoLocalAssetsPathProvider, evoSidebarAnimationDuration, evoSidebarDefaultConfig, evoSidebarRootId, expandAnimation, isConfiguredComponentModalParams, isConfiguredModalParams, isConfiguredTemplateModalParams, isDynamicModalParams, portalProvider, provideModal, provideSidebar, sidebarAnimation, skipInitialRenderAnimation, switchQueryToList };
 //# sourceMappingURL=evotor-dev-ui-kit.mjs.map