@evotor-dev/ui-kit 8.0.0-beta.19 → 8.0.0-beta.20

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

@@ -1,7 +1,7 @@
 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, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, ComponentRef, Injector, ApplicationRef, ComponentFactoryResolver, 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, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, ComponentRef, input, output, computed, viewChild, signal, ChangeDetectorRef, DestroyRef, EnvironmentInjector, NgZone, createComponent, Injector, ApplicationRef, ComponentFactoryResolver, Host, ContentChildren, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, AsyncPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle, NgFor } from '@angular/common';
+import { isPlatformBrowser, CommonModule, AsyncPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle, Location, NgFor } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, UntypedFormArray, NgControl, COMPOSITION_BUFFER_MODE, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { NgxPageScrollModule } from 'ngx-page-scroll';
@@ -24,6 +24,7 @@ import flatpickr from 'flatpickr';
 import { IMaskDirective } from 'angular-imask';
 import { Key } from 'ts-keycode-enum';
 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';
@@ -4140,116 +4141,15 @@ const EVO_SIDEBAR_CONFIG = new InjectionToken('EVO_SIDEBAR_CONFIG');
 // Sidebar Data
 const EVO_SIDEBAR_DATA = new InjectionToken('EVO_SIDEBAR_DATA');
 
-var EvoSidebarCloseTargets;
-(function (EvoSidebarCloseTargets) {
-    EvoSidebarCloseTargets["BACKGROUND"] = "background";
-    EvoSidebarCloseTargets["BUTTON"] = "button";
-    EvoSidebarCloseTargets["DEFAULT"] = "default";
-    EvoSidebarCloseTargets["ESC"] = "escape";
-})(EvoSidebarCloseTargets || (EvoSidebarCloseTargets = {}));
-
-var EvoSidebarStates;
-(function (EvoSidebarStates) {
-    EvoSidebarStates["HIDDEN"] = "hidden";
-    EvoSidebarStates["VISIBLE"] = "visible";
-})(EvoSidebarStates || (EvoSidebarStates = {}));
-
-var EvoSidebarSizes;
-(function (EvoSidebarSizes) {
-    EvoSidebarSizes["NORMAL"] = "normal";
-    EvoSidebarSizes["MIDDLE"] = "middle";
-    EvoSidebarSizes["LARGE"] = "large";
-})(EvoSidebarSizes || (EvoSidebarSizes = {}));
-
-const SidebarInjectionToken = new InjectionToken('SidebarInjectionToken');
-
-class EvoSidebarFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EvoSidebarFooterComponent, isStandalone: true, selector: "evo-sidebar-footer, [evo-sidebar-footer]", host: { classAttribute: "evo-sidebar__footer-wrapper" }, ngImport: i0, template: "<div class=\"evo-sidebar__footer\"><ng-content /></div>\n<!--\u0447\u0442\u043E\u0431\u044B :empty \u0440\u0430\u0431\u043E\u0442\u0430\u043B, \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0432\u043D\u0443\u0442\u0440\u0438 evo-sidebar__footer \u0432\u043E\u043E\u0431\u0449\u0435 \u043D\u0438\u0447\u0435\u0433\u043E, \u0434\u0430\u0436\u0435 \u043F\u0440\u043E\u0431\u0435\u043B\u0430-->\n", styles: [":host{--evo-sidebar-footer-padding-desktop: 24px;--evo-sidebar-footer-padding-tablet: 16px;--evo-sidebar-footer-padding-mobile: 30px;flex-shrink:0;margin-top:-8px;padding-top:8px;overflow:hidden}.evo-sidebar__footer{display:flex;flex-shrink:0;flex-direction:column;margin:0 15px;padding:var(--evo-sidebar-footer-padding-mobile) 0;background-color:#fff;border-top:solid 1px #C6C6C6}.evo-sidebar__footer:empty{display:none}@media (min-width: 768px){.evo-sidebar__footer{flex-direction:row;justify-content:space-between;margin:0 15px;padding:var(--evo-sidebar-footer-padding-tablet) 0}}@media (min-width: 992px){.evo-sidebar__footer{margin:0 32px;padding:var(--evo-sidebar-footer-padding-desktop) 0}}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'evo-sidebar-footer, [evo-sidebar-footer]', host: {
-                        class: 'evo-sidebar__footer-wrapper',
-                    }, standalone: true, template: "<div class=\"evo-sidebar__footer\"><ng-content /></div>\n<!--\u0447\u0442\u043E\u0431\u044B :empty \u0440\u0430\u0431\u043E\u0442\u0430\u043B, \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0432\u043D\u0443\u0442\u0440\u0438 evo-sidebar__footer \u0432\u043E\u043E\u0431\u0449\u0435 \u043D\u0438\u0447\u0435\u0433\u043E, \u0434\u0430\u0436\u0435 \u043F\u0440\u043E\u0431\u0435\u043B\u0430-->\n", styles: [":host{--evo-sidebar-footer-padding-desktop: 24px;--evo-sidebar-footer-padding-tablet: 16px;--evo-sidebar-footer-padding-mobile: 30px;flex-shrink:0;margin-top:-8px;padding-top:8px;overflow:hidden}.evo-sidebar__footer{display:flex;flex-shrink:0;flex-direction:column;margin:0 15px;padding:var(--evo-sidebar-footer-padding-mobile) 0;background-color:#fff;border-top:solid 1px #C6C6C6}.evo-sidebar__footer:empty{display:none}@media (min-width: 768px){.evo-sidebar__footer{flex-direction:row;justify-content:space-between;margin:0 15px;padding:var(--evo-sidebar-footer-padding-tablet) 0}}@media (min-width: 992px){.evo-sidebar__footer{margin:0 32px;padding:var(--evo-sidebar-footer-padding-desktop) 0}}\n"] }]
-        }] });
-
-class EvoSidebarContentComponent {
-    // eslint-disable-next-line
-    constructor(sidebar) {
-        this.sidebar = sidebar;
-        this.hostClass = 'evo-sidebar__content';
-    }
-    ngOnInit() {
-        if (!this.sidebar) {
-            throw new Error(`EvoSidebarContentComponent must be used inside EvoSidebarComponent only!`);
-        }
-        this.relativeFooter = this.relativeFooter ?? this.sidebar.relativeFooter;
-    }
-    get hostClasses() {
-        return this.relativeFooter ? `${this.hostClass} evo-sidebar__content_relative-footer` : this.hostClass;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarContentComponent, deps: [{ token: SidebarInjectionToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EvoSidebarContentComponent, isStandalone: true, selector: "evo-sidebar-content, [evo-sidebar-content]", inputs: { relativeFooter: "relativeFooter" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;padding:24px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (min-width: 768px){:host{padding:40px 15px}}@media (min-width: 992px){:host{padding:40px 32px}}:host(.evo-sidebar__content_relative-footer){flex-grow:0}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'evo-sidebar-content, [evo-sidebar-content]', standalone: true, template: "<ng-content />\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;padding:24px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (min-width: 768px){:host{padding:40px 15px}}@media (min-width: 992px){:host{padding:40px 32px}}:host(.evo-sidebar__content_relative-footer){flex-grow:0}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SidebarInjectionToken]
-                }] }], propDecorators: { relativeFooter: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class EvoSidebarHeaderComponent {
-    // eslint-disable-next-line
-    constructor(sidebar) {
-        this.sidebar = sidebar;
-        this.back = new EventEmitter();
-    }
-    ngOnInit() {
-        if (!this.sidebar) {
-            throw new Error(`EvoSidebarHeaderComponent must be used inside EvoSidebarComponent only!`);
-        }
-        this.backButton = this.backButton ?? this.sidebar.backButton;
-    }
-    handleBackClick() {
-        this.back.emit();
-    }
-    closeSidebar() {
-        this.sidebar.closeSidebar(EvoSidebarCloseTargets.BUTTON);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarHeaderComponent, deps: [{ token: SidebarInjectionToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoSidebarHeaderComponent, isStandalone: true, selector: "evo-sidebar-header, [evo-sidebar-header]", inputs: { backButton: "backButton" }, outputs: { back: "back" }, host: { classAttribute: "evo-sidebar__header" }, ngImport: i0, template: "@if (backButton) {\n    <div class=\"evo-sidebar__back\" (click)=\"handleBackClick()\">\n        <evo-icon shape=\"chevron-left\" class=\"evo-sidebar__icon\" />\n    </div>\n}\n\n<div class=\"evo-sidebar__title\">\n    <ng-content />\n</div>\n\n<div class=\"evo-sidebar__close\" (click)=\"closeSidebar()\">\n    <evo-icon shape=\"close\" class=\"evo-sidebar__icon\" />\n</div>\n", styles: [":host{display:flex;flex-shrink:0;align-items:flex-start;margin:0 15px;padding:16px 0;border-bottom:solid 1px #C6C6C6}@media (min-width: 768px){:host{padding-top:32px;padding-bottom:16px}}@media (min-width: 992px){:host{margin:0 32px}}.evo-sidebar__title{flex:1;color:#212121;font-weight:700;font-size:24px;font-family:var(--evo-font-secondary);line-height:32px}@media (min-width: 768px){.evo-sidebar__title{font-size:30px;line-height:38px}}.evo-sidebar__close{flex-shrink:0;margin-left:8px;padding:0;color:#231f20;cursor:pointer;transition:opacity .3s}.evo-sidebar__close:hover{opacity:.8}.evo-sidebar__icon{display:block;width:32px;height:32px;vertical-align:bottom;fill:#91b1b8}@media (min-width: 768px){.evo-sidebar__icon{width:36px;height:36px}}.evo-sidebar__back{flex-shrink:0;margin-right:8px;color:#231f20;cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'evo-sidebar-header, [evo-sidebar-header]', host: {
-                        class: 'evo-sidebar__header',
-                    }, standalone: true, imports: [EvoIconComponent], template: "@if (backButton) {\n    <div class=\"evo-sidebar__back\" (click)=\"handleBackClick()\">\n        <evo-icon shape=\"chevron-left\" class=\"evo-sidebar__icon\" />\n    </div>\n}\n\n<div class=\"evo-sidebar__title\">\n    <ng-content />\n</div>\n\n<div class=\"evo-sidebar__close\" (click)=\"closeSidebar()\">\n    <evo-icon shape=\"close\" class=\"evo-sidebar__icon\" />\n</div>\n", styles: [":host{display:flex;flex-shrink:0;align-items:flex-start;margin:0 15px;padding:16px 0;border-bottom:solid 1px #C6C6C6}@media (min-width: 768px){:host{padding-top:32px;padding-bottom:16px}}@media (min-width: 992px){:host{margin:0 32px}}.evo-sidebar__title{flex:1;color:#212121;font-weight:700;font-size:24px;font-family:var(--evo-font-secondary);line-height:32px}@media (min-width: 768px){.evo-sidebar__title{font-size:30px;line-height:38px}}.evo-sidebar__close{flex-shrink:0;margin-left:8px;padding:0;color:#231f20;cursor:pointer;transition:opacity .3s}.evo-sidebar__close:hover{opacity:.8}.evo-sidebar__icon{display:block;width:32px;height:32px;vertical-align:bottom;fill:#91b1b8}@media (min-width: 768px){.evo-sidebar__icon{width:36px;height:36px}}.evo-sidebar__back{flex-shrink:0;margin-right:8px;color:#231f20;cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SidebarInjectionToken]
-                }] }], propDecorators: { backButton: [{
-                type: Input
-            }], back: [{
-                type: Output
-            }] } });
-
 class EvoSidebarService {
-    constructor(portal, // EvoSidebarPortal provided
-    _config) {
-        this.portal = portal;
-        this._config = _config;
+    constructor() {
+        this.portal = inject(EvoAbstractPortal); // EvoSidebarPortal provided
+        this._config = inject(EVO_SIDEBAR_CONFIG, { optional: true });
         this.sidebarEvents$ = new Subject();
         this.registeredSidebars = {};
         this.config = {
             ...evoSidebarDefaultConfig,
-            ..._config,
+            ...this._config,
         };
     }
     deregister(id) {
@@ -4326,96 +4226,186 @@ class EvoSidebarService {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarService, deps: [{ token: EvoAbstractPortal }, { token: EVO_SIDEBAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: EvoAbstractPortal }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
+        }] });
+
+var EvoSidebarCloseTargets;
+(function (EvoSidebarCloseTargets) {
+    EvoSidebarCloseTargets["BACKGROUND"] = "background";
+    EvoSidebarCloseTargets["BUTTON"] = "button";
+    EvoSidebarCloseTargets["DEFAULT"] = "default";
+    EvoSidebarCloseTargets["ESC"] = "escape";
+})(EvoSidebarCloseTargets || (EvoSidebarCloseTargets = {}));
+
+var EvoSidebarStates;
+(function (EvoSidebarStates) {
+    EvoSidebarStates["HIDDEN"] = "hidden";
+    EvoSidebarStates["VISIBLE"] = "visible";
+})(EvoSidebarStates || (EvoSidebarStates = {}));
+
+var EvoSidebarSizes;
+(function (EvoSidebarSizes) {
+    EvoSidebarSizes["NORMAL"] = "normal";
+    EvoSidebarSizes["MIDDLE"] = "middle";
+    EvoSidebarSizes["LARGE"] = "large";
+})(EvoSidebarSizes || (EvoSidebarSizes = {}));
+
+const SidebarInjectionToken = new InjectionToken('SidebarInjectionToken');
+
+class EvoSidebarFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EvoSidebarFooterComponent, isStandalone: true, selector: "evo-sidebar-footer, [evo-sidebar-footer]", host: { classAttribute: "evo-sidebar__footer-wrapper" }, ngImport: i0, template: "<div class=\"evo-sidebar__footer\"><ng-content /></div>\n<!--\u0447\u0442\u043E\u0431\u044B :empty \u0440\u0430\u0431\u043E\u0442\u0430\u043B, \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0432\u043D\u0443\u0442\u0440\u0438 evo-sidebar__footer \u0432\u043E\u043E\u0431\u0449\u0435 \u043D\u0438\u0447\u0435\u0433\u043E, \u0434\u0430\u0436\u0435 \u043F\u0440\u043E\u0431\u0435\u043B\u0430-->\n", styles: [":host{--evo-sidebar-footer-padding-desktop: 24px;--evo-sidebar-footer-padding-tablet: 16px;--evo-sidebar-footer-padding-mobile: 30px;flex-shrink:0;margin-top:-8px;padding-top:8px;overflow:hidden}.evo-sidebar__footer{display:flex;flex-shrink:0;flex-direction:column;margin:0 15px;padding:var(--evo-sidebar-footer-padding-mobile) 0;background-color:#fff;border-top:solid 1px #C6C6C6}.evo-sidebar__footer:empty{display:none}@media (min-width: 768px){.evo-sidebar__footer{flex-direction:row;justify-content:space-between;margin:0 15px;padding:var(--evo-sidebar-footer-padding-tablet) 0}}@media (min-width: 992px){.evo-sidebar__footer{margin:0 32px;padding:var(--evo-sidebar-footer-padding-desktop) 0}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'evo-sidebar-footer, [evo-sidebar-footer]', host: {
+                        class: 'evo-sidebar__footer-wrapper',
+                    }, standalone: true, template: "<div class=\"evo-sidebar__footer\"><ng-content /></div>\n<!--\u0447\u0442\u043E\u0431\u044B :empty \u0440\u0430\u0431\u043E\u0442\u0430\u043B, \u043D\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0432\u043D\u0443\u0442\u0440\u0438 evo-sidebar__footer \u0432\u043E\u043E\u0431\u0449\u0435 \u043D\u0438\u0447\u0435\u0433\u043E, \u0434\u0430\u0436\u0435 \u043F\u0440\u043E\u0431\u0435\u043B\u0430-->\n", styles: [":host{--evo-sidebar-footer-padding-desktop: 24px;--evo-sidebar-footer-padding-tablet: 16px;--evo-sidebar-footer-padding-mobile: 30px;flex-shrink:0;margin-top:-8px;padding-top:8px;overflow:hidden}.evo-sidebar__footer{display:flex;flex-shrink:0;flex-direction:column;margin:0 15px;padding:var(--evo-sidebar-footer-padding-mobile) 0;background-color:#fff;border-top:solid 1px #C6C6C6}.evo-sidebar__footer:empty{display:none}@media (min-width: 768px){.evo-sidebar__footer{flex-direction:row;justify-content:space-between;margin:0 15px;padding:var(--evo-sidebar-footer-padding-tablet) 0}}@media (min-width: 992px){.evo-sidebar__footer{margin:0 32px;padding:var(--evo-sidebar-footer-padding-desktop) 0}}\n"] }]
+        }] });
+
+class EvoSidebarContentComponent {
+    // eslint-disable-next-line
+    constructor(sidebar) {
+        this.sidebar = sidebar;
+        this.hostClass = 'evo-sidebar__content';
+    }
+    ngOnInit() {
+        if (!this.sidebar) {
+            throw new Error(`EvoSidebarContentComponent must be used inside EvoSidebarComponent only!`);
+        }
+        this.relativeFooter = this.relativeFooter ?? this.sidebar.relativeFooter;
+    }
+    get hostClasses() {
+        return this.relativeFooter ? `${this.hostClass} evo-sidebar__content_relative-footer` : this.hostClass;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarContentComponent, deps: [{ token: SidebarInjectionToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: EvoSidebarContentComponent, isStandalone: true, selector: "evo-sidebar-content, [evo-sidebar-content]", inputs: { relativeFooter: "relativeFooter" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;padding:24px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (min-width: 768px){:host{padding:40px 15px}}@media (min-width: 992px){:host{padding:40px 32px}}:host(.evo-sidebar__content_relative-footer){flex-grow:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'evo-sidebar-content, [evo-sidebar-content]', standalone: true, template: "<ng-content />\n", styles: [":host{display:flex;flex-grow:1;flex-direction:column;padding:24px 15px;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (min-width: 768px){:host{padding:40px 15px}}@media (min-width: 992px){:host{padding:40px 32px}}:host(.evo-sidebar__content_relative-footer){flex-grow:0}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [EVO_SIDEBAR_CONFIG]
-                }] }] });
+                    args: [SidebarInjectionToken]
+                }] }], propDecorators: { relativeFooter: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class EvoSidebarHeaderComponent {
+    constructor() {
+        this.backButton = input(false);
+        this.back = output();
+        this.computedBackButton = computed(() => this.backButton() || this.sidebar.backButton());
+        this.sidebar = inject(SidebarInjectionToken);
+    }
+    ngOnInit() {
+        if (!this.sidebar) {
+            throw new Error(`EvoSidebarHeaderComponent must be used inside EvoSidebarComponent only!`);
+        }
+    }
+    handleBackClick() {
+        this.back.emit();
+    }
+    closeSidebar() {
+        this.sidebar.closeSidebar(EvoSidebarCloseTargets.BUTTON);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoSidebarHeaderComponent, isStandalone: true, selector: "evo-sidebar-header, [evo-sidebar-header]", inputs: { backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "evo-sidebar__header" }, ngImport: i0, template: "@if (computedBackButton()) {\n    <div class=\"evo-sidebar__back\" (click)=\"handleBackClick()\">\n        <evo-icon shape=\"chevron-left\" class=\"evo-sidebar__icon\" />\n    </div>\n}\n\n<div class=\"evo-sidebar__title\">\n    <ng-content />\n</div>\n\n<div class=\"evo-sidebar__close\" (click)=\"closeSidebar()\">\n    <evo-icon shape=\"close\" class=\"evo-sidebar__icon\" />\n</div>\n", styles: [":host{display:flex;flex-shrink:0;align-items:flex-start;margin:0 15px;padding:16px 0;border-bottom:solid 1px #C6C6C6}@media (min-width: 768px){:host{padding-top:32px;padding-bottom:16px}}@media (min-width: 992px){:host{margin:0 32px}}.evo-sidebar__title{flex:1;color:#212121;font-weight:700;font-size:24px;font-family:var(--evo-font-secondary);line-height:32px}@media (min-width: 768px){.evo-sidebar__title{font-size:30px;line-height:38px}}.evo-sidebar__close{flex-shrink:0;margin-left:8px;padding:0;color:#231f20;cursor:pointer;transition:opacity .3s}.evo-sidebar__close:hover{opacity:.8}.evo-sidebar__icon{display:block;width:32px;height:32px;vertical-align:bottom;fill:#91b1b8}@media (min-width: 768px){.evo-sidebar__icon{width:36px;height:36px}}.evo-sidebar__back{flex-shrink:0;margin-right:8px;color:#231f20;cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'evo-sidebar-header, [evo-sidebar-header]', host: {
+                        class: 'evo-sidebar__header',
+                    }, standalone: true, imports: [EvoIconComponent], template: "@if (computedBackButton()) {\n    <div class=\"evo-sidebar__back\" (click)=\"handleBackClick()\">\n        <evo-icon shape=\"chevron-left\" class=\"evo-sidebar__icon\" />\n    </div>\n}\n\n<div class=\"evo-sidebar__title\">\n    <ng-content />\n</div>\n\n<div class=\"evo-sidebar__close\" (click)=\"closeSidebar()\">\n    <evo-icon shape=\"close\" class=\"evo-sidebar__icon\" />\n</div>\n", styles: [":host{display:flex;flex-shrink:0;align-items:flex-start;margin:0 15px;padding:16px 0;border-bottom:solid 1px #C6C6C6}@media (min-width: 768px){:host{padding-top:32px;padding-bottom:16px}}@media (min-width: 992px){:host{margin:0 32px}}.evo-sidebar__title{flex:1;color:#212121;font-weight:700;font-size:24px;font-family:var(--evo-font-secondary);line-height:32px}@media (min-width: 768px){.evo-sidebar__title{font-size:30px;line-height:38px}}.evo-sidebar__close{flex-shrink:0;margin-left:8px;padding:0;color:#231f20;cursor:pointer;transition:opacity .3s}.evo-sidebar__close:hover{opacity:.8}.evo-sidebar__icon{display:block;width:32px;height:32px;vertical-align:bottom;fill:#91b1b8}@media (min-width: 768px){.evo-sidebar__icon{width:36px;height:36px}}.evo-sidebar__back{flex-shrink:0;margin-right:8px;color:#231f20;cursor:pointer;-webkit-user-select:none;user-select:none}\n"] }]
+        }] });
 
-// eslint-disable-next-line:max-line-length
 class EvoSidebarComponent {
-    constructor(zone, location, componentFactoryResolver, sidebarService, cdr) {
-        this.zone = zone;
-        this.location = location;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.sidebarService = sidebarService;
-        this.cdr = cdr;
-        this.size = EvoSidebarSizes.NORMAL;
-        this.back = new EventEmitter();
-        this.isVisible = false;
-        this.isDynamicContent = false;
+    constructor() {
+        this.contentContainer = viewChild.required('sidebarContentContainer', { read: ViewContainerRef });
+        this.backButton = input(false);
+        this.id = input(evoSidebarRootId);
+        this.header = input();
+        this.size = input(EvoSidebarSizes.NORMAL);
+        this.relativeFooter = input(false);
+        this.back = output();
         this.closeTargets = EvoSidebarCloseTargets;
-        this.closeTarget = EvoSidebarCloseTargets.DEFAULT;
-        this.destroy$ = new Subject();
+        this.computedSize = computed(() => this.localSize() || this.size());
+        this.isDynamicContent = signal(false);
+        this.isVisible = signal(false);
+        this.localSize = signal(null);
+        this.totalClasses = computed(() => {
+            const classes = [];
+            if (this.isVisible()) {
+                classes.push(EvoSidebarStates.VISIBLE);
+            }
+            classes.push(this.computedSize() ?? EvoSidebarSizes.NORMAL);
+            return classes;
+        });
+        this.closeTarget = signal(EvoSidebarCloseTargets.DEFAULT);
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.location = inject(Location);
+        this.sidebarService = inject(EvoSidebarService);
+        this.zone = inject(NgZone);
     }
     ngOnDestroy() {
         this.clearView();
-        this.sidebarService.deregister(this.id);
+        this.sidebarService.deregister(this.id());
         this.locationSubscription?.unsubscribe();
-        this.destroy$.next();
-        this.destroy$.complete();
     }
     ngOnInit() {
-        if (!this.id) {
-            this.id = evoSidebarRootId;
-        }
-        this.sidebarService.register(this.id);
+        this.sidebarService.register(this.id());
         this.sidebarService
-            .getEventsSubscription(this.id, true)
+            .getEventsSubscription(this.id(), true)
             .pipe(
         // async hack to avoid "Expression has changed after it was checked" error
-        delay(0), takeUntil(this.destroy$))
+        delay(0), takeUntilDestroyed(this.destroyRef))
             .subscribe((sidebarState) => {
             const { isOpen, params } = sidebarState;
             if (isOpen) {
                 this.subscribeToKeyEvent();
             }
             else {
-                this.closeTarget = EvoSidebarCloseTargets.DEFAULT;
+                this.closeTarget.set(EvoSidebarCloseTargets.DEFAULT);
             }
             // Dynamic content strategy
             if (isOpen && params?.component) {
-                const { component, closeOnNavigation, size, data } = params;
-                this.isDynamicContent = true;
-                this.insertComponent(component, data);
+                const { component, closeOnNavigation, size } = params;
+                this.isDynamicContent.set(true);
+                this.clearView();
+                this.insertComponent(component, params);
                 if (size) {
-                    this.size = size;
+                    this.localSize.set(size);
                 }
                 if (!this.locationSubscription && closeOnNavigation !== false) {
                     this.closeOnLocationUpdates();
                 }
             }
-            this.isVisible = isOpen;
+            this.isVisible.set(isOpen);
             this.cdr.markForCheck();
         });
     }
     get currentState() {
-        return this.isVisible ? EvoSidebarStates.VISIBLE : EvoSidebarStates.HIDDEN;
-    }
-    get totalClasses() {
-        const classes = [];
-        if (this.isVisible) {
-            classes.push(EvoSidebarStates.VISIBLE);
-        }
-        classes.push(this.size ?? EvoSidebarSizes.NORMAL);
-        return classes;
+        return this.isVisible() ? EvoSidebarStates.VISIBLE : EvoSidebarStates.HIDDEN;
     }
     closeSidebar(source) {
-        this.isVisible = false;
-        this.closeTarget = source;
+        this.isVisible.set(false);
+        this.closeTarget.set(source);
     }
     handleAnimationDone(event) {
         const isClosed = event.fromState === EvoSidebarStates.VISIBLE;
-        if (isClosed && !this.isVisible) {
-            this.sidebarService.close(this.id, { closeTarget: this.closeTarget });
+        if (isClosed && !this.isVisible()) {
+            this.sidebarService.close(this.id(), { closeTarget: this.closeTarget() });
             this.clearView();
-            if (this.id === evoSidebarRootId) {
+            if (this.id() === evoSidebarRootId) {
                 this.sidebarService.deregister(evoSidebarRootId);
                 this.sidebarService.cleanupDefaultHost();
             }
@@ -4427,42 +4417,38 @@ class EvoSidebarComponent {
     subscribeToKeyEvent() {
         this.zone.runOutsideAngular(() => {
             fromEvent(document.body, 'keyup')
-                .pipe(takeWhile(() => this.isVisible), filter((event) => event.code === 'Escape'), enterZone(this.zone), tap(() => this.closeSidebar(EvoSidebarCloseTargets.ESC)))
+                .pipe(takeWhile(() => this.isVisible()), filter((event) => event.code === 'Escape'), enterZone(this.zone), tap(() => this.closeSidebar(EvoSidebarCloseTargets.ESC)))
                 .subscribe();
         });
     }
     // eslint-disable-next-line
-    insertComponent(component, data) {
-        this.clearView();
-        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
-        const injector = Injector.create({
-            providers: [
-                {
-                    provide: EVO_SIDEBAR_DATA,
-                    useValue: data,
-                },
-                {
-                    provide: SidebarInjectionToken,
-                    useValue: this,
-                },
-            ],
+    insertComponent(component, { data, injector }) {
+        const dynamicComponentRef = createComponent(component, {
+            environmentInjector: this.environmentInjector,
+            elementInjector: Injector.create({
+                providers: [
+                    {
+                        provide: EVO_SIDEBAR_DATA,
+                        useValue: data,
+                    },
+                    {
+                        provide: SidebarInjectionToken,
+                        useValue: this,
+                    },
+                ],
+                parent: injector,
+            }),
         });
-        this.dynamicComponentRef = this.contentContainer.createComponent(componentFactory, 0, injector);
+        this.contentContainer().insert(dynamicComponentRef.hostView);
     }
     clearView() {
-        if (!this.dynamicComponentRef) {
-            return;
-        }
-        this.contentContainer.clear();
-        this.dynamicComponentRef = null;
+        this.contentContainer().clear();
     }
     closeOnLocationUpdates() {
-        this.locationSubscription = this.location.subscribe(() => {
-            this.closeSidebar(EvoSidebarCloseTargets.DEFAULT);
-        });
+        this.locationSubscription = this.location.subscribe(() => this.closeSidebar(EvoSidebarCloseTargets.DEFAULT));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarComponent, deps: [{ token: i0.NgZone }, { token: i1.Location }, { token: i0.ComponentFactoryResolver }, { token: EvoSidebarService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoSidebarComponent, isStandalone: true, selector: "evo-sidebar", inputs: { backButton: "backButton", id: "id", header: "header", size: "size", relativeFooter: "relativeFooter" }, outputs: { back: "back" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["sidebarContentContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (isVisible) {\n    <div class=\"evo-sidebar__background\" (click)=\"closeSidebar(closeTargets.BACKGROUND)\"></div>\n}\n\n<div class=\"evo-sidebar\" [@open]=\"currentState\" [evoUiClass]=\"totalClasses\" (@open.done)=\"handleAnimationDone($event)\">\n    <ng-template #sidebarContentContainer />\n\n    @if (!isDynamicContent) {\n        <div evo-sidebar-header [backButton]=\"backButton\" (back)=\"handleBackClick()\">\n            {{ header }}\n        </div>\n        <div evo-sidebar-content [relativeFooter]=\"relativeFooter\">\n            <ng-content select=\"[content]\" />\n        </div>\n        <div evo-sidebar-footer>\n            <ng-content select=\"[footer]\" />\n        </div>\n    }\n</div>\n", styles: [".evo-sidebar{position:fixed;top:0;right:0;z-index:3000;display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff;transform:translate(100vw);transition:box-shadow .1s .5s}.evo-sidebar_visible{box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f;transition-delay:unset}@media (min-width: 992px){.evo-sidebar_normal{width:674px;transform:translate(674px)}}@media (min-width: 992px){.evo-sidebar_middle{width:995px;transform:translate(100%)}}@media (min-width: 992px){.evo-sidebar_large{width:80%;transform:translate(100%)}}.evo-sidebar__background{position:fixed;inset:0;z-index:1000;background-color:#000;opacity:.3}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "component", type: EvoSidebarHeaderComponent, selector: "evo-sidebar-header, [evo-sidebar-header]", inputs: ["backButton"], outputs: ["back"] }, { kind: "component", type: EvoSidebarContentComponent, selector: "evo-sidebar-content, [evo-sidebar-content]", inputs: ["relativeFooter"] }, { kind: "component", type: EvoSidebarFooterComponent, selector: "evo-sidebar-footer, [evo-sidebar-footer]" }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: EvoSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: EvoSidebarComponent, isStandalone: true, selector: "evo-sidebar", inputs: { backButton: { classPropertyName: "backButton", publicName: "backButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, relativeFooter: { classPropertyName: "relativeFooter", publicName: "relativeFooter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["sidebarContentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (isVisible()) {\n    <div class=\"evo-sidebar__background\" (click)=\"closeSidebar(closeTargets.BACKGROUND)\"></div>\n}\n\n<div class=\"evo-sidebar\" [@open]=\"currentState\" [evoUiClass]=\"totalClasses()\" (@open.done)=\"handleAnimationDone($event)\">\n    <ng-template #sidebarContentContainer />\n    @if (!isDynamicContent()) {\n        <div evo-sidebar-header [backButton]=\"backButton()\" (back)=\"handleBackClick()\">\n            {{ header() }}\n        </div>\n        <div evo-sidebar-content [relativeFooter]=\"relativeFooter()\">\n            <ng-content select=\"[content]\" />\n        </div>\n        <div evo-sidebar-footer>\n            <ng-content select=\"[footer]\" />\n        </div>\n    }\n</div>\n", styles: [".evo-sidebar{position:fixed;top:0;right:0;z-index:3000;display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff;transform:translate(100vw);transition:box-shadow .1s .5s}.evo-sidebar_visible{box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f;transition-delay:unset}@media (min-width: 992px){.evo-sidebar_normal{width:674px;transform:translate(674px)}}@media (min-width: 992px){.evo-sidebar_middle{width:995px;transform:translate(100%)}}@media (min-width: 992px){.evo-sidebar_large{width:80%;transform:translate(100%)}}.evo-sidebar__background{position:fixed;inset:0;z-index:1000;background-color:#000;opacity:.3}\n"], dependencies: [{ kind: "directive", type: EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { kind: "component", type: EvoSidebarHeaderComponent, selector: "evo-sidebar-header, [evo-sidebar-header]", inputs: ["backButton"], outputs: ["back"] }, { kind: "component", type: EvoSidebarContentComponent, selector: "evo-sidebar-content, [evo-sidebar-content]", inputs: ["relativeFooter"] }, { kind: "component", type: EvoSidebarFooterComponent, selector: "evo-sidebar-footer, [evo-sidebar-footer]" }], viewProviders: [
             {
                 provide: SidebarInjectionToken,
                 useExisting: forwardRef(() => EvoSidebarComponent),
@@ -4476,23 +4462,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                             provide: SidebarInjectionToken,
                             useExisting: forwardRef(() => EvoSidebarComponent),
                         },
-                    ], standalone: true, imports: [EvoUiClassDirective, EvoSidebarHeaderComponent, EvoSidebarContentComponent, EvoSidebarFooterComponent], template: "@if (isVisible) {\n    <div class=\"evo-sidebar__background\" (click)=\"closeSidebar(closeTargets.BACKGROUND)\"></div>\n}\n\n<div class=\"evo-sidebar\" [@open]=\"currentState\" [evoUiClass]=\"totalClasses\" (@open.done)=\"handleAnimationDone($event)\">\n    <ng-template #sidebarContentContainer />\n\n    @if (!isDynamicContent) {\n        <div evo-sidebar-header [backButton]=\"backButton\" (back)=\"handleBackClick()\">\n            {{ header }}\n        </div>\n        <div evo-sidebar-content [relativeFooter]=\"relativeFooter\">\n            <ng-content select=\"[content]\" />\n        </div>\n        <div evo-sidebar-footer>\n            <ng-content select=\"[footer]\" />\n        </div>\n    }\n</div>\n", styles: [".evo-sidebar{position:fixed;top:0;right:0;z-index:3000;display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff;transform:translate(100vw);transition:box-shadow .1s .5s}.evo-sidebar_visible{box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f;transition-delay:unset}@media (min-width: 992px){.evo-sidebar_normal{width:674px;transform:translate(674px)}}@media (min-width: 992px){.evo-sidebar_middle{width:995px;transform:translate(100%)}}@media (min-width: 992px){.evo-sidebar_large{width:80%;transform:translate(100%)}}.evo-sidebar__background{position:fixed;inset:0;z-index:1000;background-color:#000;opacity:.3}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Location }, { type: i0.ComponentFactoryResolver }, { type: EvoSidebarService }, { type: i0.ChangeDetectorRef }], propDecorators: { contentContainer: [{
-                type: ViewChild,
-                args: ['sidebarContentContainer', { read: ViewContainerRef }]
-            }], backButton: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], relativeFooter: [{
-                type: Input
-            }], back: [{
-                type: Output
-            }] } });
+                    ], standalone: true, imports: [
+                        EvoUiClassDirective,
+                        EvoSidebarHeaderComponent,
+                        EvoSidebarContentComponent,
+                        EvoSidebarFooterComponent,
+                    ], template: "@if (isVisible()) {\n    <div class=\"evo-sidebar__background\" (click)=\"closeSidebar(closeTargets.BACKGROUND)\"></div>\n}\n\n<div class=\"evo-sidebar\" [@open]=\"currentState\" [evoUiClass]=\"totalClasses()\" (@open.done)=\"handleAnimationDone($event)\">\n    <ng-template #sidebarContentContainer />\n    @if (!isDynamicContent()) {\n        <div evo-sidebar-header [backButton]=\"backButton()\" (back)=\"handleBackClick()\">\n            {{ header() }}\n        </div>\n        <div evo-sidebar-content [relativeFooter]=\"relativeFooter()\">\n            <ng-content select=\"[content]\" />\n        </div>\n        <div evo-sidebar-footer>\n            <ng-content select=\"[footer]\" />\n        </div>\n    }\n</div>\n", styles: [".evo-sidebar{position:fixed;top:0;right:0;z-index:3000;display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff;transform:translate(100vw);transition:box-shadow .1s .5s}.evo-sidebar_visible{box-shadow:0 8px 10px #00000024,0 3px 14px #0000001f;transition-delay:unset}@media (min-width: 992px){.evo-sidebar_normal{width:674px;transform:translate(674px)}}@media (min-width: 992px){.evo-sidebar_middle{width:995px;transform:translate(100%)}}@media (min-width: 992px){.evo-sidebar_large{width:80%;transform:translate(100%)}}.evo-sidebar__background{position:fixed;inset:0;z-index:1000;background-color:#000;opacity:.3}\n"] }]
+        }] });
 
 class EvoSidebarPortal extends EvoPortalService {
     constructor(appRef, injector, cfr) {