npm - @evotor-dev/ui-kit - Versions diffs - 8.7.0 → 8.8.0 - Mend

@evotor-dev/ui-kit 8.7.0 → 8.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -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';
@@ -1622,11 +1621,11 @@ class EvoAutocompleteComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.NgControl }, { token: EvoIconService }, { token: i1$1.DomSanitizer }, { token: EVO_ICON_RESOLVER }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoAutocompleteComponent, isStandalone: true, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n    <ng-select\n        [items]=\"items\"\n        [bindLabel]=\"bindLabel\"\n        [bindValue]=\"bindValue\"\n        [markFirst]=\"markFirst\"\n        [placeholder]=\"placeholder\"\n        [notFoundText]=\"notFoundText\"\n        [typeToSearchText]=\"typeToSearchText\"\n        [addTagText]=\"addTagText\"\n        [loadingText]=\"loadingText\"\n        [clearAllText]=\"clearAllText\"\n        [dropdownPosition]=\"dropdownPosition\"\n        [appendTo]=\"appendTo\"\n        [loading]=\"loading\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [hideSelected]=\"hideSelected\"\n        [selectOnTab]=\"selectOnTab\"\n        [openOnEnter]=\"openOnEnter\"\n        [maxSelectedItems]=\"maxSelectedItems\"\n        [groupBy]=\"groupBy\"\n        [groupValue]=\"groupValue\"\n        [bufferAmount]=\"bufferAmount\"\n        [virtualScroll]=\"virtualScroll\"\n        [selectableGroup]=\"selectableGroup\"\n        [selectableGroupAsModel]=\"selectableGroupAsModel\"\n        [searchFn]=\"searchFn\"\n        [clearOnBackspace]=\"clearOnBackspace\"\n        [typeahead]=\"typeahead\"\n        [multiple]=\"multiple || multipleInline\"\n        [addTag]=\"addTag\"\n        [searchable]=\"searchable\"\n        [clearable]=\"clearable\"\n        [isOpen]=\"isOpen\"\n        [editableSearchTerm]=\"editQuery\"\n        [disabled]=\"control.disabled\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"value\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (change)=\"changeEvent.emit($event)\"\n        (open)=\"openEvent.emit($event)\"\n        (close)=\"closeEvent.emit($event)\"\n        (search)=\"searchEvent.emit($event)\"\n        (clear)=\"clearEvent.emit($event)\"\n        (add)=\"addEvent.emit($event)\"\n        (remove)=\"removeEvent.emit($event)\"\n        (scroll)=\"scrollEvent.emit($event)\"\n        (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n    >\n        <!-- Selected Item Template -->\n        @if (labelTemp) {\n            <ng-template ng-label-tmp let-item=\"item\">\n            <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"/>\n            </ng-template>\n        }\n\n        <!-- Overall Label For All Selected Items Template -->\n        @if (multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n                <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: {items: items, clear: clear}\" />\n            </ng-template>\n        }\n        @if (headerTemp) {\n            <!-- Options header template -->\n            <ng-template ng-header-tmp>\n                <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n\n        <!-- Option Template -->\n        @if (optionTemp) {\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-item$=\"item$\">\n                <ng-template\n                    *ngTemplateOutlet=\"\n                        optionTemp;\n                        context: {item: item, index: index, searchTerm: search, item$: item$}\n                    \"\n                />\n            </ng-template>\n        }\n\n        @if (multipleInline && !multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\">\n                <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n            </ng-template>\n        }\n\n        @if (optgroupTemp) {\n        <!-- Options group template -->\n        <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n            <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\" />\n        </ng-template>\n        }\n\n        <!-- Search Text Templates -->\n        <ng-template ng-typetosearch-tmp>\n            @if (typeToSearchText) {\n                <div class=\"ng-option disabled\">{{ typeToSearchText }}</div>\n            }\n        </ng-template>\n        <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n            <div class=\"ng-option disabled\">{{ loadingText }}</div>\n        </ng-template>\n\n        @if (notFoundTemp) {\n            <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n                <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\" />\n            </ng-template>\n        } @else {\n            <ng-template ng-notfound-tmp>\n                <div class=\"ng-option disabled\">{{ notFoundText }}</div>\n            </ng-template>\n        }\n\n        @if (footerTemp) {\n        <!-- Options footer template -->\n        <ng-template ng-footer-tmp>\n            <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\" />\n        </ng-template>\n        }\n    </ng-select>\n\n    @if (hasErrors && errorsMessages) {\n        <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n    }\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i4.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i4.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i4.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EvoControlErrorModule }, { kind: "component", type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoAutocompleteComponent, isStandalone: true, selector: "evo-autocomplete", inputs: { size: "size", isOpen: "isOpen", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", markFirst: "markFirst", placeholder: "placeholder", typeToSearchText: "typeToSearchText", addTagText: "addTagText", loadingText: "loadingText", clearAllText: "clearAllText", dropdownPosition: "dropdownPosition", appendTo: "appendTo", loading: "loading", closeOnSelect: "closeOnSelect", hideSelected: "hideSelected", selectOnTab: "selectOnTab", openOnEnter: "openOnEnter", maxSelectedItems: "maxSelectedItems", groupBy: "groupBy", groupValue: "groupValue", bufferAmount: "bufferAmount", virtualScroll: "virtualScroll", selectableGroup: "selectableGroup", selectableGroupAsModel: "selectableGroupAsModel", searchFn: "searchFn", clearOnBackspace: "clearOnBackspace", typeahead: "typeahead", multiple: "multiple", multipleInline: "multipleInline", addTag: "addTag", clearable: "clearable", errorsMessages: "errorsMessages", compareWith: "compareWith", _notFoundText: ["notFoundText", "_notFoundText"], editQuery: "editQuery", searchable: "searchable", setSelectbox: ["isSelectbox", "setSelectbox"], setTheme: ["theme", "setTheme"] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scrollEvent: "scroll", scrollToEndEvent: "scrollToEnd" }, queries: [{ propertyName: "labelTemp", first: true, predicate: ["labelTemp"], descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemp", first: true, predicate: ["multiLabelTemp"], descendants: true, read: TemplateRef }, { propertyName: "optionTemp", first: true, predicate: ["optionTemp"], descendants: true, read: TemplateRef }, { propertyName: "optgroupTemp", first: true, predicate: ["optgroupTemp"], descendants: true, read: TemplateRef }, { propertyName: "headerTemp", first: true, predicate: ["headerTemp"], descendants: true, read: TemplateRef }, { propertyName: "footerTemp", first: true, predicate: ["footerTemp"], descendants: true, read: TemplateRef }, { propertyName: "notFoundTemp", first: true, predicate: ["notFoundTemp"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n    <ng-select\n        [items]=\"items\"\n        [bindLabel]=\"bindLabel\"\n        [bindValue]=\"bindValue\"\n        [markFirst]=\"markFirst\"\n        [placeholder]=\"placeholder\"\n        [notFoundText]=\"notFoundText\"\n        [typeToSearchText]=\"typeToSearchText\"\n        [addTagText]=\"addTagText\"\n        [loadingText]=\"loadingText\"\n        [clearAllText]=\"clearAllText\"\n        [dropdownPosition]=\"dropdownPosition\"\n        [appendTo]=\"appendTo\"\n        [loading]=\"loading\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [hideSelected]=\"hideSelected\"\n        [selectOnTab]=\"selectOnTab\"\n        [openOnEnter]=\"openOnEnter\"\n        [maxSelectedItems]=\"maxSelectedItems\"\n        [groupBy]=\"groupBy\"\n        [groupValue]=\"groupValue\"\n        [bufferAmount]=\"bufferAmount\"\n        [virtualScroll]=\"virtualScroll\"\n        [selectableGroup]=\"selectableGroup\"\n        [selectableGroupAsModel]=\"selectableGroupAsModel\"\n        [searchFn]=\"searchFn\"\n        [clearOnBackspace]=\"clearOnBackspace\"\n        [typeahead]=\"typeahead\"\n        [multiple]=\"multiple || multipleInline\"\n        [addTag]=\"addTag\"\n        [searchable]=\"searchable\"\n        [clearable]=\"clearable\"\n        [isOpen]=\"isOpen\"\n        [editableSearchTerm]=\"editQuery\"\n        [disabled]=\"control.disabled\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"value\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (change)=\"changeEvent.emit($event)\"\n        (open)=\"openEvent.emit($event)\"\n        (close)=\"closeEvent.emit($event)\"\n        (search)=\"searchEvent.emit($event)\"\n        (clear)=\"clearEvent.emit($event)\"\n        (add)=\"addEvent.emit($event)\"\n        (remove)=\"removeEvent.emit($event)\"\n        (scroll)=\"scrollEvent.emit($event)\"\n        (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n    >\n        <!-- Selected Item Template -->\n        @if (labelTemp) {\n            <ng-template ng-label-tmp let-item=\"item\">\n                <ng-template *ngTemplateOutlet=\"labelTemp; context: {item: item}\" />\n            </ng-template>\n        }\n\n        <!-- Overall Label For All Selected Items Template -->\n        @if (multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n                <div class=\"evo-autocomplete__label\">\n                    <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: {items: items, clear: clear}\" />\n                </div>\n            </ng-template>\n        }\n        @if (headerTemp) {\n            <!-- Options header template -->\n            <ng-template ng-header-tmp>\n                <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n\n        <!-- Option Template -->\n        @if (optionTemp) {\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-item$=\"item$\">\n                <ng-template\n                    *ngTemplateOutlet=\"\n                        optionTemp;\n                        context: {item: item, index: index, searchTerm: search, item$: item$}\n                    \"\n                />\n            </ng-template>\n        }\n\n        @if (multipleInline && !multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\">\n                <div class=\"ng-value evo-autocomplete__label\">{{ getMultipleInlineItemsLabels(items) }}</div>\n            </ng-template>\n        }\n\n        @if (optgroupTemp) {\n            <!-- Options group template -->\n            <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n                <ng-template *ngTemplateOutlet=\"optgroupTemp; context: {item: item, index: index}\" />\n            </ng-template>\n        }\n\n        <!-- Search Text Templates -->\n        <ng-template ng-typetosearch-tmp>\n            @if (typeToSearchText) {\n                <div class=\"ng-option disabled\">{{ typeToSearchText }}</div>\n            }\n        </ng-template>\n        <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n            <div class=\"ng-option disabled\">{{ loadingText }}</div>\n        </ng-template>\n\n        @if (notFoundTemp) {\n            <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n                <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\" />\n            </ng-template>\n        } @else {\n            <ng-template ng-notfound-tmp>\n                <div class=\"ng-option disabled\">{{ notFoundText }}</div>\n            </ng-template>\n        }\n\n        @if (footerTemp) {\n            <!-- Options footer template -->\n            <ng-template ng-footer-tmp>\n                <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n    </ng-select>\n\n    @if (hasErrors && errorsMessages) {\n        <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n    }\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: normal;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected{--inner-option-background: #FFFFFF}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected.ng-option-marked{--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i4.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i4.NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: i4.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EvoControlErrorModule }, { kind: "component", type: EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'evo-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [EvoUiClassDirective, NgSelectModule, FormsModule, NgTemplateOutlet, NgIf, EvoControlErrorModule], template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n    <ng-select\n        [items]=\"items\"\n        [bindLabel]=\"bindLabel\"\n        [bindValue]=\"bindValue\"\n        [markFirst]=\"markFirst\"\n        [placeholder]=\"placeholder\"\n        [notFoundText]=\"notFoundText\"\n        [typeToSearchText]=\"typeToSearchText\"\n        [addTagText]=\"addTagText\"\n        [loadingText]=\"loadingText\"\n        [clearAllText]=\"clearAllText\"\n        [dropdownPosition]=\"dropdownPosition\"\n        [appendTo]=\"appendTo\"\n        [loading]=\"loading\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [hideSelected]=\"hideSelected\"\n        [selectOnTab]=\"selectOnTab\"\n        [openOnEnter]=\"openOnEnter\"\n        [maxSelectedItems]=\"maxSelectedItems\"\n        [groupBy]=\"groupBy\"\n        [groupValue]=\"groupValue\"\n        [bufferAmount]=\"bufferAmount\"\n        [virtualScroll]=\"virtualScroll\"\n        [selectableGroup]=\"selectableGroup\"\n        [selectableGroupAsModel]=\"selectableGroupAsModel\"\n        [searchFn]=\"searchFn\"\n        [clearOnBackspace]=\"clearOnBackspace\"\n        [typeahead]=\"typeahead\"\n        [multiple]=\"multiple || multipleInline\"\n        [addTag]=\"addTag\"\n        [searchable]=\"searchable\"\n        [clearable]=\"clearable\"\n        [isOpen]=\"isOpen\"\n        [editableSearchTerm]=\"editQuery\"\n        [disabled]=\"control.disabled\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"value\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (change)=\"changeEvent.emit($event)\"\n        (open)=\"openEvent.emit($event)\"\n        (close)=\"closeEvent.emit($event)\"\n        (search)=\"searchEvent.emit($event)\"\n        (clear)=\"clearEvent.emit($event)\"\n        (add)=\"addEvent.emit($event)\"\n        (remove)=\"removeEvent.emit($event)\"\n        (scroll)=\"scrollEvent.emit($event)\"\n        (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n    >\n        <!-- Selected Item Template -->\n        @if (labelTemp) {\n            <ng-template ng-label-tmp let-item=\"item\">\n            <ng-template *ngTemplateOutlet=\"labelTemp; context: { item: item }\"/>\n            </ng-template>\n        }\n\n        <!-- Overall Label For All Selected Items Template -->\n        @if (multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n                <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: {items: items, clear: clear}\" />\n            </ng-template>\n        }\n        @if (headerTemp) {\n            <!-- Options header template -->\n            <ng-template ng-header-tmp>\n                <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n\n        <!-- Option Template -->\n        @if (optionTemp) {\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-item$=\"item$\">\n                <ng-template\n                    *ngTemplateOutlet=\"\n                        optionTemp;\n                        context: {item: item, index: index, searchTerm: search, item$: item$}\n                    \"\n                />\n            </ng-template>\n        }\n\n        @if (multipleInline && !multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\">\n                <div class=\"ng-value\">{{ getMultipleInlineItemsLabels(items) }}</div>\n            </ng-template>\n        }\n\n        @if (optgroupTemp) {\n        <!-- Options group template -->\n        <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n            <ng-template *ngTemplateOutlet=\"optgroupTemp; context: { item: item, index: index }\" />\n        </ng-template>\n        }\n\n        <!-- Search Text Templates -->\n        <ng-template ng-typetosearch-tmp>\n            @if (typeToSearchText) {\n                <div class=\"ng-option disabled\">{{ typeToSearchText }}</div>\n            }\n        </ng-template>\n        <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n            <div class=\"ng-option disabled\">{{ loadingText }}</div>\n        </ng-template>\n\n        @if (notFoundTemp) {\n            <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n                <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\" />\n            </ng-template>\n        } @else {\n            <ng-template ng-notfound-tmp>\n                <div class=\"ng-option disabled\">{{ notFoundText }}</div>\n            </ng-template>\n        }\n\n        @if (footerTemp) {\n        <!-- Options footer template -->\n        <ng-template ng-footer-tmp>\n            <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\" />\n        </ng-template>\n        }\n    </ng-select>\n\n    @if (hasErrors && errorsMessages) {\n        <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n    }\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: nowrap;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete .ng-value{overflow:hidden;text-overflow:ellipsis}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"] }]
+            args: [{ selector: 'evo-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [EvoUiClassDirective, NgSelectModule, FormsModule, NgTemplateOutlet, NgIf, EvoControlErrorModule], template: "<div class=\"evo-autocomplete\" [evoUiClass]=\"classes\">\n    <ng-select\n        [items]=\"items\"\n        [bindLabel]=\"bindLabel\"\n        [bindValue]=\"bindValue\"\n        [markFirst]=\"markFirst\"\n        [placeholder]=\"placeholder\"\n        [notFoundText]=\"notFoundText\"\n        [typeToSearchText]=\"typeToSearchText\"\n        [addTagText]=\"addTagText\"\n        [loadingText]=\"loadingText\"\n        [clearAllText]=\"clearAllText\"\n        [dropdownPosition]=\"dropdownPosition\"\n        [appendTo]=\"appendTo\"\n        [loading]=\"loading\"\n        [closeOnSelect]=\"closeOnSelect\"\n        [hideSelected]=\"hideSelected\"\n        [selectOnTab]=\"selectOnTab\"\n        [openOnEnter]=\"openOnEnter\"\n        [maxSelectedItems]=\"maxSelectedItems\"\n        [groupBy]=\"groupBy\"\n        [groupValue]=\"groupValue\"\n        [bufferAmount]=\"bufferAmount\"\n        [virtualScroll]=\"virtualScroll\"\n        [selectableGroup]=\"selectableGroup\"\n        [selectableGroupAsModel]=\"selectableGroupAsModel\"\n        [searchFn]=\"searchFn\"\n        [clearOnBackspace]=\"clearOnBackspace\"\n        [typeahead]=\"typeahead\"\n        [multiple]=\"multiple || multipleInline\"\n        [addTag]=\"addTag\"\n        [searchable]=\"searchable\"\n        [clearable]=\"clearable\"\n        [isOpen]=\"isOpen\"\n        [editableSearchTerm]=\"editQuery\"\n        [disabled]=\"control.disabled\"\n        [compareWith]=\"compareWith\"\n        [(ngModel)]=\"value\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (change)=\"changeEvent.emit($event)\"\n        (open)=\"openEvent.emit($event)\"\n        (close)=\"closeEvent.emit($event)\"\n        (search)=\"searchEvent.emit($event)\"\n        (clear)=\"clearEvent.emit($event)\"\n        (add)=\"addEvent.emit($event)\"\n        (remove)=\"removeEvent.emit($event)\"\n        (scroll)=\"scrollEvent.emit($event)\"\n        (scrollToEnd)=\"scrollToEndEvent.emit($event)\"\n    >\n        <!-- Selected Item Template -->\n        @if (labelTemp) {\n            <ng-template ng-label-tmp let-item=\"item\">\n                <ng-template *ngTemplateOutlet=\"labelTemp; context: {item: item}\" />\n            </ng-template>\n        }\n\n        <!-- Overall Label For All Selected Items Template -->\n        @if (multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n                <div class=\"evo-autocomplete__label\">\n                    <ng-template *ngTemplateOutlet=\"multiLabelTemp; context: {items: items, clear: clear}\" />\n                </div>\n            </ng-template>\n        }\n        @if (headerTemp) {\n            <!-- Options header template -->\n            <ng-template ng-header-tmp>\n                <ng-template *ngTemplateOutlet=\"headerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n\n        <!-- Option Template -->\n        @if (optionTemp) {\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-item$=\"item$\">\n                <ng-template\n                    *ngTemplateOutlet=\"\n                        optionTemp;\n                        context: {item: item, index: index, searchTerm: search, item$: item$}\n                    \"\n                />\n            </ng-template>\n        }\n\n        @if (multipleInline && !multiLabelTemp) {\n            <ng-template ng-multi-label-tmp let-items=\"items\">\n                <div class=\"ng-value evo-autocomplete__label\">{{ getMultipleInlineItemsLabels(items) }}</div>\n            </ng-template>\n        }\n\n        @if (optgroupTemp) {\n            <!-- Options group template -->\n            <ng-template ng-optgroup-tmp let-item=\"item\" let-index=\"index\">\n                <ng-template *ngTemplateOutlet=\"optgroupTemp; context: {item: item, index: index}\" />\n            </ng-template>\n        }\n\n        <!-- Search Text Templates -->\n        <ng-template ng-typetosearch-tmp>\n            @if (typeToSearchText) {\n                <div class=\"ng-option disabled\">{{ typeToSearchText }}</div>\n            }\n        </ng-template>\n        <ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n            <div class=\"ng-option disabled\">{{ loadingText }}</div>\n        </ng-template>\n\n        @if (notFoundTemp) {\n            <ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n                <ng-template *ngTemplateOutlet=\"notFoundTemp; context: {searchTerm: searchTerm}\" />\n            </ng-template>\n        } @else {\n            <ng-template ng-notfound-tmp>\n                <div class=\"ng-option disabled\">{{ notFoundText }}</div>\n            </ng-template>\n        }\n\n        @if (footerTemp) {\n            <!-- Options footer template -->\n            <ng-template ng-footer-tmp>\n                <ng-template *ngTemplateOutlet=\"footerTemp; context: {items: items}\" />\n            </ng-template>\n        }\n    </ng-select>\n\n    @if (hasErrors && errorsMessages) {\n        <evo-control-error [errors]=\"control.errors\" [errorsMessages]=\"errorsMessages\" />\n    }\n</div>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}evo-autocomplete{--evo-dropdown-max-height: 310px;--evo-autocomplete-option-overflow: hidden;--evo-autocomplete-option-text-overflow: ellipsis;--evo-autocomplete-option-white-space: normal;--evo-autocomplete-optgroup-overflow: hidden;--evo-autocomplete-optgroup-text-overflow: ellipsis;--evo-autocomplete-optgroup-white-space: nowrap;--evo-autocomplete-arrow-icon-color: #212121;--evo-autocomplete-option-v-padding: 12px;--evo-autocomplete-option-h-padding: 16px;--evo-autocomplete-panel-border-radius: 8px;--evo-autocomplete-panel-shadow: 0px 8px 10px rgba(0, 0, 0, .14), 0px 3px 14px rgba(0, 0, 0, .12)}evo-autocomplete .evo-autocomplete{--inner-input-padding-right: 40px;position:relative;display:block}evo-autocomplete .evo-autocomplete ng-select[ng-reflect-clearable=false]{--inner-input-padding-right: 16px}evo-autocomplete .evo-autocomplete__icon{display:block;flex:0 0 24px;width:24px;height:24px}evo-autocomplete .evo-autocomplete__icon_clear{position:absolute;top:12px;right:12px;z-index:1001;cursor:pointer;transition:fill .3s;fill:#91b1b8}evo-autocomplete .evo-autocomplete__icon_clear:hover{fill:#a7c1c6}evo-autocomplete .evo-autocomplete__icon_clear:active{fill:#829fa6}evo-autocomplete .evo-autocomplete__icon_dropdown{fill:#212121}evo-autocomplete .evo-autocomplete .ng-input{padding:0 var(--inner-input-padding-right) 0 16px}evo-autocomplete .evo-autocomplete .ng-placeholder{color:#9b9b9b}evo-autocomplete .evo-autocomplete .ng-value-container{align-items:center;min-width:0;overflow:hidden}evo-autocomplete .evo-autocomplete__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}evo-autocomplete .evo-autocomplete .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s;position:relative;align-items:center;margin:0;padding:0 12px 0 16px;line-height:var(--evo-input-height)}evo-autocomplete .evo-autocomplete .ng-select-container.ng-has-value .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center;color:#91b1b8;transition:color .3s}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:hover{color:#a7c1c6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper:active{color:#829fa6}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear{display:none}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched{display:block;cursor:pointer}evo-autocomplete .evo-autocomplete .ng-select .ng-clear-wrapper .ng-clear_patched svg{display:block;fill:currentColor}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader{display:flex;justify-content:center;align-items:center;width:16px;height:100%;margin:0 0 0 8px;border:none;transform:none;animation:none}evo-autocomplete .evo-autocomplete .ng-select .ng-spinner-loader:before{content:\"\";display:block;flex:0 0 16px;width:16px;height:16px;border:2px solid #C6C6C6;border-top-color:#21c68b;border-radius:50%;animation:spin .8s linear infinite}evo-autocomplete .evo-autocomplete .ng-optgroup{font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}evo-autocomplete .evo-autocomplete .ng-optgroup evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-optgroup.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete .ng-option{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #FFFFFF;display:flex;align-items:center;min-height:48px;white-space:normal;color:var(--inner-option-text-color);background-color:var(--inner-option-background);padding:var(--evo-autocomplete-option-v-padding) var(--evo-autocomplete-option-h-padding);cursor:pointer}evo-autocomplete .evo-autocomplete .ng-option evo-autocomplete-default-option{--evo-autocomplete-default-option-background: var(--inner-option-background);--evo-autocomplete-default-option-text-color: var(--inner-option-text-color);--evo-autocomplete-default-option-description-color: var(--inner-option-description-color)}evo-autocomplete .evo-autocomplete .ng-option.ng-option-marked{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-option.ng-option-disabled{--inner-option-text-color: #C6C6C6;--inner-option-description-color: #C6C6C6;--inner-option-background: #FFFFFF;cursor:default}evo-autocomplete .evo-autocomplete .ng-option.ng-option-selected{--inner-option-text-color: #212121;--inner-option-description-color: #9B9B9B;--inner-option-background: #E1ECEF}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single:not(.ng-select-focused) .ng-select-container .ng-value-container .ng-value{visibility:visible}evo-autocomplete .evo-autocomplete_is-edit-query .ng-select.ng-select-single.ng-select-focused .ng-select-container .ng-value-container .ng-value{visibility:var(--evo-autocomplete-option-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel{z-index:3001;display:block;margin:4px 0;background-color:#fff;border-radius:var(--evo-autocomplete-panel-border-radius);box-shadow:var(--evo-autocomplete-panel-shadow);overflow:hidden}evo-autocomplete .evo-autocomplete .ng-dropdown-panel.ng-select-top{bottom:100%}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items{max-height:var(--evo-dropdown-max-height, 310px)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{overflow:var(--evo-autocomplete-option-overflow);white-space:var(--evo-autocomplete-option-white-space);text-overflow:var(--evo-autocomplete-option-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{overflow:var(--evo-autocomplete-optgroup-overflow);white-space:var(--evo-autocomplete-optgroup-white-space);text-overflow:var(--evo-autocomplete-optgroup-text-overflow)}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar{width:16px;background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-track{background-color:transparent}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-thumb{background-color:#c6c6c6;border:6px solid #FFFFFF;border-radius:16px}evo-autocomplete .evo-autocomplete .ng-dropdown-panel .ng-dropdown-panel-items::-webkit-scrollbar-button{display:none}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper{display:inline-flex;align-items:center;width:24px;height:100%;margin:0 0 0 16px;padding:0;text-align:center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-arrow-wrapper .ng-arrow{display:block;width:24px;height:24px;background-color:var(--evo-autocomplete-arrow-icon-color);-webkit-mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');mask-image:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path d=\"M8.81066 10C8.14248 10 7.80786 10.8079 8.28033 11.2803L11.4697 14.4697C11.7626 14.7626 12.2374 14.7626 12.5303 14.4697L15.7197 11.2803C16.1921 10.8079 15.8575 10 15.1893 10H8.81066Z\" />%0A</svg>%0A');background-position:center;transition:transform .25s}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select.ng-select-opened .ng-arrow{transform:rotate(180deg);transform-origin:center center}evo-autocomplete .evo-autocomplete_is-selectbox .ng-select .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused{z-index:11}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-placeholder{display:none}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-focused .ng-select-container{box-shadow:0 0 2px #91b1b8}evo-autocomplete .evo-autocomplete_is-selectbox.ng-select-clearable .ng-input{padding-right:32px}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-default.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-normal .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_theme-rounded.evo-autocomplete_size-small .ng-select-container{--evo-input-height: 48px;--evo-input-border-radius: 4px;--evo-input-font-size: 16px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-value-icon{display:none}evo-autocomplete .evo-autocomplete_is-multiple-inline .ng-select .ng-select-container .ng-input{display:none}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected{--inner-option-background: #FFFFFF}evo-autocomplete .evo-autocomplete .ng-select-multiple .ng-option-selected.ng-option-marked{--inner-option-background: #F4F6F8}evo-autocomplete .evo-autocomplete .ng-select.ng-select-focused .ng-select-container,evo-autocomplete .evo-autocomplete .ng-select.ng-select-opened .ng-select-container{border:solid 1px #74706F}evo-autocomplete .evo-autocomplete.evo-autocomplete_touched.evo-autocomplete_invalid .ng-select:not(.ng-select-opened) .ng-select-container{border-color:#ff1817!important}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}evo-autocomplete .evo-autocomplete.evo-autocomplete_disabled .ng-select-container .ng-arrow{opacity:.3}evo-autocomplete .evo-autocomplete .ng-input>input[readonly]{-webkit-user-select:auto!important;user-select:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.NgControl }, { type: EvoIconService }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EVO_ICON_RESOLVER]
@@ -1878,11 +1877,11 @@ class EvoAutocompleteDefaultOptionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoAutocompleteDefaultOptionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoAutocompleteDefaultOptionComponent, isStandalone: true, selector: "evo-autocomplete-default-option", inputs: { hasCheckbox: "hasCheckbox", label: "label", description: "description", isDisabled: "isDisabled", isSelected: "isSelected" }, host: { properties: { "class.has-checkbox": "this.hasCheckboxClass" } }, ngImport: i0, template: "@if (hasCheckbox) {\n    <div class=\"option option_has-checkbox\">\n        <evo-checkbox\n            [ngModel]=\"isSelected\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onCheckboxClick($event)\"\n            (change)=\"onCheckboxClick($event)\"\n            (ngModelChange)=\"onSelectedChange($event)\"\n        >\n            {{ label }}\n        </evo-checkbox>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n} @else {\n    <div class=\"option\">\n        <div class=\"option__label\">{{ label }}</div>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n}\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, nowrap);--evo-autocomplete-default-option-text-color: #212121;--evo-autocomplete-default-option-description-color: #9B9B9B;--evo-autocomplete-default-option-background: #FFFFFF}.option{position:relative;z-index:1;color:var(--evo-autocomplete-default-option-text-color);background:var(--evo-autocomplete-default-option-background)}.option__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-text-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{font-family:var(--evo-font);font-style:normal;font-size:12px;line-height:18px;font-weight:400;display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-description-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option evo-checkbox{color:var(--evo-autocomplete-default-option-text-color)}.option evo-checkbox+.option__description{padding-left:32px}\n"], dependencies: [{ kind: "ngmodule", type: EvoCheckboxModule }, { kind: "component", type: EvoCheckboxComponent, selector: "evo-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoAutocompleteDefaultOptionComponent, isStandalone: true, selector: "evo-autocomplete-default-option", inputs: { hasCheckbox: "hasCheckbox", label: "label", description: "description", isDisabled: "isDisabled", isSelected: "isSelected" }, host: { properties: { "class.has-checkbox": "this.hasCheckboxClass" } }, ngImport: i0, template: "@if (hasCheckbox) {\n    <div class=\"option option_has-checkbox\">\n        <evo-checkbox\n            [ngModel]=\"isSelected\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onCheckboxClick($event)\"\n            (change)=\"onCheckboxClick($event)\"\n            (ngModelChange)=\"onSelectedChange($event)\"\n        >\n            {{ label }}\n        </evo-checkbox>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n} @else {\n    <div class=\"option\">\n        <div class=\"option__label\">{{ label }}</div>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n}\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, normal);--evo-autocomplete-default-option-text-color: #212121;--evo-autocomplete-default-option-description-color: #9B9B9B;--evo-autocomplete-default-option-background: #FFFFFF}.option{position:relative;z-index:1;color:var(--evo-autocomplete-default-option-text-color);background:var(--evo-autocomplete-default-option-background)}.option__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-text-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{font-family:var(--evo-font);font-style:normal;font-size:12px;line-height:18px;font-weight:400;display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-description-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option evo-checkbox{color:var(--evo-autocomplete-default-option-text-color)}.option evo-checkbox+.option__description{padding-left:32px}\n"], dependencies: [{ kind: "ngmodule", type: EvoCheckboxModule }, { kind: "component", type: EvoCheckboxComponent, selector: "evo-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoAutocompleteDefaultOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'evo-autocomplete-default-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [EvoCheckboxModule, FormsModule], template: "@if (hasCheckbox) {\n    <div class=\"option option_has-checkbox\">\n        <evo-checkbox\n            [ngModel]=\"isSelected\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onCheckboxClick($event)\"\n            (change)=\"onCheckboxClick($event)\"\n            (ngModelChange)=\"onSelectedChange($event)\"\n        >\n            {{ label }}\n        </evo-checkbox>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n} @else {\n    <div class=\"option\">\n        <div class=\"option__label\">{{ label }}</div>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n}\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, nowrap);--evo-autocomplete-default-option-text-color: #212121;--evo-autocomplete-default-option-description-color: #9B9B9B;--evo-autocomplete-default-option-background: #FFFFFF}.option{position:relative;z-index:1;color:var(--evo-autocomplete-default-option-text-color);background:var(--evo-autocomplete-default-option-background)}.option__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-text-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{font-family:var(--evo-font);font-style:normal;font-size:12px;line-height:18px;font-weight:400;display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-description-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option evo-checkbox{color:var(--evo-autocomplete-default-option-text-color)}.option evo-checkbox+.option__description{padding-left:32px}\n"] }]
+            args: [{ selector: 'evo-autocomplete-default-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [EvoCheckboxModule, FormsModule], template: "@if (hasCheckbox) {\n    <div class=\"option option_has-checkbox\">\n        <evo-checkbox\n            [ngModel]=\"isSelected\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [disabled]=\"isDisabled\"\n            (click)=\"onCheckboxClick($event)\"\n            (change)=\"onCheckboxClick($event)\"\n            (ngModelChange)=\"onSelectedChange($event)\"\n        >\n            {{ label }}\n        </evo-checkbox>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n} @else {\n    <div class=\"option\">\n        <div class=\"option__label\">{{ label }}</div>\n\n        @if (description) {\n            <div class=\"option__description\">{{ description }}</div>\n        }\n    </div>\n}\n", styles: [":host{display:block;color:inherit;white-space:var(--evo-autocomplete-option-white-space, normal);--evo-autocomplete-default-option-text-color: #212121;--evo-autocomplete-default-option-description-color: #9B9B9B;--evo-autocomplete-default-option-background: #FFFFFF}.option{position:relative;z-index:1;color:var(--evo-autocomplete-default-option-text-color);background:var(--evo-autocomplete-default-option-background)}.option__label{font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:400;display:block;margin-bottom:0;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-text-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option__description{font-family:var(--evo-font);font-style:normal;font-size:12px;line-height:18px;font-weight:400;display:block;overflow:var(--evo-autocomplete-option-overflow, hidden);color:var(--evo-autocomplete-default-option-description-color);text-overflow:var(--evo-autocomplete-option-text-overflow, ellipsis)}.option evo-checkbox{color:var(--evo-autocomplete-default-option-text-color)}.option evo-checkbox+.option__description{padding-left:32px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { hasCheckbox: [{
                 type: Input
             }], label: [{
@@ -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