@mediusinc/mng-commons 4.0.0 → 4.1.0-rc.0-4e19f910

package/fesm2022/mediusinc-mng-commons.mjs

@@ -1,5 +1,7 @@
 import * as i2$1 from '@angular/common';
 import { DatePipe, AsyncPipe, NgClass, DecimalPipe, CurrencyPipe, NgStyle, NgTemplateOutlet, JsonPipe, NgOptimizedImage } from '@angular/common';
+import * as i1$1 from '@angular/common/http';
+import { HttpErrorResponse, HttpClient, HttpBackend, HttpParams } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { booleanAttribute, numberAttribute, Pipe, InjectionToken, inject, Injectable, Injector, ElementRef, ApplicationRef, ViewContainerRef, EventEmitter, createComponent, Directive, Input, Output, TemplateRef, Component, ChangeDetectionStrategy, Optional, HostBinding, ViewChild, ContentChildren, forwardRef, DestroyRef, signal, effect, HostListener, Renderer2, ChangeDetectorRef, computed, ViewEncapsulation, ViewChildren, LOCALE_ID, Inject, APP_INITIALIZER, ErrorHandler, runInInjectionContext } from '@angular/core';
 import * as i2$2 from '@ngx-formly/core';
@@ -21,11 +23,9 @@ import * as i9 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import * as i4$1 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { isObservable, of, throwError, Subject, combineLatest, mergeMap as mergeMap$1, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, take, switchMap, from, timeout, Observable, debounceTime, merge } from 'rxjs';
+import { isObservable, of, throwError, Subject, mergeMap as mergeMap$1, combineLatest, tap, BehaviorSubject, ReplaySubject, distinctUntilChanged, take, switchMap, from, timeout, Observable, debounceTime, merge } from 'rxjs';
 import { map, mergeMap, catchError, filter, first, startWith, take as take$1 } from 'rxjs/operators';
 import 'reflect-metadata';
-import * as i1$1 from '@angular/common/http';
-import { HttpErrorResponse, HttpClient, HttpParams } from '@angular/common/http';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormGroup, FormArray, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, FormsModule } from '@angular/forms';
 import { Title, DomSanitizer } from '@angular/platform-browser';
@@ -51,7 +51,7 @@ import * as i4$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i1$5 from 'primeng/table';
 import { Table, TableModule } from 'primeng/table';
-import { style, animate, transition, trigger, state } from '@angular/animations';
+import { trigger, transition, style, animate, state } from '@angular/animations';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { FilterIcon } from 'primeng/icons/filter';
 import { FilterSlashIcon } from 'primeng/icons/filterslash';
@@ -6880,7 +6880,6 @@ class MngLogPublisherConsoleService {
 
 class MngCommonsInitService {
     constructor() {
-        this.httpClient = inject(HttpClient);
         this.logger = inject(MngLoggerService);
         this.logPublishers = inject(MNG_LOG_PUBLISHERS, { optional: true });
         this.config = inject(MngConfigurationService);
@@ -6898,7 +6897,7 @@ class MngCommonsInitService {
     get isInitialized$() {
         return this.isInitializedSubject.asObservable().pipe(take(1));
     }
-    initialize() {
+    initialize(handler) {
         if (this.isInitialized) {
             return of(void 0);
         }
@@ -6907,6 +6906,8 @@ class MngCommonsInitService {
         const ctxLogger = this.logger.create('MngCommonsInitService');
         ctxLogger.debug('Commons initialization is starting');
         this.commonsInitServiceEvents.next(MngCommonsInitEventEnum.CommonsInitStart);
+        // init http client
+        this.httpClient = new HttpClient(handler);
         // init router
         this.mngRouter.initialize();
         // init configurations with settings from module config
@@ -12018,6 +12019,10 @@ class MngAutocompleteComponent {
      */
     onSelect(event) {
         this.setValue(event.value, true);
+        this.isFocused = false;
+        if (this.openOnFocus) {
+            this.primeAutocomplete?.hide();
+        }
     }
     /**
      * Selects and sets new value
@@ -14489,8 +14494,8 @@ class MngErrorHandler {
     }
 }
 
-function mngCommonsInitializerProvider(mngCommonsInit) {
-    return () => mngCommonsInit.initialize();
+function mngCommonsInitializerProvider(handler, mngCommonsInit) {
+    return () => mngCommonsInit.initialize(handler);
 }
 
 class MngFormlyFieldAutocompleteComponent extends FieldType {
@@ -15827,7 +15832,7 @@ function provideMngCommons(config) {
         {
             provide: APP_INITIALIZER,
             useFactory: mngCommonsInitializerProvider,
-            deps: [MngCommonsInitService],
+            deps: [HttpBackend, MngCommonsInitService],
             multi: true
         },
         {
@@ -16841,17 +16846,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ standalone: true, selector: 'mng-breadcrumb-v2', imports: [NgClass, InputTextModule, ButtonModule, AsyncPipe, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n    <nav>\n        <ol class=\"relative z-2\">\n            @for (item of mappedBreadcrumbs$ | async; track item; let last = $last) {\n                <li>{{ item.label! | translate }}</li>\n                @if (!last) {\n                    <li class=\"layout-breadcrumb-chevron\">/</li>\n                }\n            }\n        </ol>\n    </nav>\n</div>\n" }]
         }] });
 
+class MngVersionV2Component {
+    constructor(jsonPathPipe, versionService) {
+        this.jsonPathPipe = jsonPathPipe;
+        this.versionService = versionService;
+        this.loadingSubject = new BehaviorSubject(false);
+        this.loading$ = this.loadingSubject.asObservable();
+    }
+    ngOnInit() {
+        if (Array.isArray(this.initVersion)) {
+            this.versions = this.initVersion;
+        }
+        else if (typeof this.initVersion === 'string') {
+            this.displayVersion = this.initVersion;
+        }
+        else if (typeof this.initVersion !== 'undefined') {
+            if (this.initVersion['info'] || this.initVersion['urlPath']) {
+                const config = this.initVersion;
+                this.displayName = config.displayName;
+                if (config.urlPath) {
+                    this.loadingSubject.next(true);
+                    this.versionService
+                        .loadVersion(config.urlPath, config.urlBaseConfigKey)
+                        .pipe(take(1))
+                        .subscribe({
+                        next: res => {
+                            this.displayVersion = this.jsonPathPipe.transform(res, config.infoJsonPath ?? '$');
+                            this.loadingSubject.next(false);
+                        },
+                        error: () => {
+                            this.displayVersion = '';
+                            this.loadingSubject.next(false);
+                        }
+                    });
+                }
+                else {
+                    this.displayVersion = this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
+                }
+            }
+            else {
+                const info = this.initVersion;
+                this.displayVersion = this.jsonPathPipe.transform(info, '$.raw');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngVersionV2Component, deps: [{ token: JsonPathPipe }, { token: MngVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: MngVersionV2Component, isStandalone: true, selector: "mng-version-v2", inputs: { initVersion: ["version", "initVersion"] }, ngImport: i0, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version-v2 [version]=\"v\"></mng-version-v2>\n        @if (!last) {\n            <br/>\n        }\n    }\n} @else {\n    @if(displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n", dependencies: [{ kind: "component", type: MngVersionV2Component, selector: "mng-version-v2", inputs: ["version"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngVersionV2Component, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-version-v2', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version-v2 [version]=\"v\"></mng-version-v2>\n        @if (!last) {\n            <br/>\n        }\n    }\n} @else {\n    @if(displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n" }]
+        }], ctorParameters: () => [{ type: JsonPathPipe }, { type: MngVersionService }], propDecorators: { initVersion: [{
+                type: Input,
+                args: ['version']
+            }] } });
+
 class MngFooterV2Component {
     constructor() {
+        this.config = inject(MNG_MODULE_CONFIG_IT);
         this.mngCommons = inject(MngCommonsService);
         this.currentYear = new Date().getFullYear();
+        this.versionComponent = MngVersionV2Component;
+    }
+    ngOnInit() {
+        if (this.config.layoutV2?.components?.version !== undefined) {
+            this.versionComponent = this.config.layoutV2?.components?.version;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngFooterV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: MngFooterV2Component, isStandalone: true, selector: "mng-footer-v2", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: MngFooterV2Component, isStandalone: true, selector: "mng-footer-v2", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <div class=\"flex flex-column\">\n        <div>\n            <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n        </div>\n        @if (versionComponent) {\n            <div class=\"version\" [mngComponent]=\"versionComponent\" [inputs]=\"{version: mngCommons.appVersion}\" [attachToHost]=\"true\"></div>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngFooterV2Component, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-footer-v2', imports: [TranslateModule, NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'mng-footer-v2', imports: [TranslateModule, NgOptimizedImage, MngVersionV2Component, MngComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ mngCommons.appName | translate }}</span>\n    </div>\n    <div class=\"flex flex-column\">\n        <div>\n            <span class=\"copyright\">&#169; {{ mngCommons.appOwner | translate }} - {{ currentYear }}</span>\n        </div>\n        @if (versionComponent) {\n            <div class=\"version\" [mngComponent]=\"versionComponent\" [inputs]=\"{version: mngCommons.appVersion}\" [attachToHost]=\"true\"></div>\n        }\n    </div>\n</div>\n" }]
         }] });
 
 class MngMainLayoutComponentV2Service {
@@ -17328,61 +17395,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ standalone: true, selector: 'mng-menu-v2', imports: [MngMenuItemV2Component], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"layout-menu\">\n    @for (item of menuItems; track item) {\n        @if (!item.separator) {\n            <li mng-menuitem-v2 [item]=\"item\" [root]=\"true\"></li>\n        }\n        @if (item.separator) {\n            <li class=\"menu-separator\"></li>\n        }\n    }\n</ul>\n" }]
         }] });
 
-class MngVersionV2Component {
-    constructor(jsonPathPipe, versionService) {
-        this.jsonPathPipe = jsonPathPipe;
-        this.versionService = versionService;
-        this.loadingSubject = new BehaviorSubject(false);
-        this.loading$ = this.loadingSubject.asObservable();
-    }
-    ngOnInit() {
-        if (Array.isArray(this.initVersion)) {
-            this.versions = this.initVersion;
-        }
-        else if (typeof this.initVersion === 'string') {
-            this.displayVersion = this.initVersion;
-        }
-        else if (typeof this.initVersion !== 'undefined') {
-            if (this.initVersion['info'] || this.initVersion['urlPath']) {
-                const config = this.initVersion;
-                this.displayName = config.displayName;
-                if (config.urlPath) {
-                    this.loadingSubject.next(true);
-                    this.versionService
-                        .loadVersion(config.urlPath, config.urlBaseConfigKey)
-                        .pipe(take(1))
-                        .subscribe({
-                        next: res => {
-                            this.displayVersion = this.jsonPathPipe.transform(res, config.infoJsonPath ?? '$');
-                            this.loadingSubject.next(false);
-                        },
-                        error: () => {
-                            this.displayVersion = '';
-                            this.loadingSubject.next(false);
-                        }
-                    });
-                }
-                else {
-                    this.displayVersion = this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
-                }
-            }
-            else {
-                const info = this.initVersion;
-                this.displayVersion = this.jsonPathPipe.transform(info, '$.raw');
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngVersionV2Component, deps: [{ token: JsonPathPipe }, { token: MngVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: MngVersionV2Component, isStandalone: true, selector: "mng-version-v2", inputs: { initVersion: ["version", "initVersion"] }, ngImport: i0, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version-v2 [version]=\"v\"></mng-version-v2>\n        @if (!last) {\n            <br/>\n        }\n    }\n} @else {\n    @if(displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n", dependencies: [{ kind: "component", type: MngVersionV2Component, selector: "mng-version-v2", inputs: ["version"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngVersionV2Component, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-version-v2', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version-v2 [version]=\"v\"></mng-version-v2>\n        @if (!last) {\n            <br/>\n        }\n    }\n} @else {\n    @if(displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n" }]
-        }], ctorParameters: () => [{ type: JsonPathPipe }, { type: MngVersionService }], propDecorators: { initVersion: [{
-                type: Input,
-                args: ['version']
-            }] } });
-
 class MngSidebarV2Component {
     constructor() {
         this.config = inject(MNG_MODULE_CONFIG_IT);
@@ -17426,11 +17438,11 @@ class MngSidebarV2Component {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngSidebarV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: MngSidebarV2Component, isStandalone: true, selector: "mng-sidebar-v2", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n\n    <div class=\"menu-version\">\n        <mng-version-v2 [version]=\"mngCommons.appVersion\"></mng-version-v2>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MngVersionV2Component, selector: "mng-version-v2", inputs: ["version"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: MngSidebarV2Component, isStandalone: true, selector: "mng-sidebar-v2", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MngComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: MngSidebarV2Component, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-sidebar-v2', imports: [RouterModule, MngMenuV2Component, MngVersionV2Component, MngComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n\n    <div class=\"menu-version\">\n        <mng-version-v2 [version]=\"mngCommons.appVersion\"></mng-version-v2>\n    </div>\n</div>\n" }]
+            args: [{ standalone: true, selector: 'mng-sidebar-v2', imports: [RouterModule, MngMenuV2Component, MngComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoDark : mngCommons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"mngCommons.colorSchemeIsLight ? mngCommons.appLogoNameDark : mngCommons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n</div>\n" }]
         }], propDecorators: { menuContainer: [{
                 type: ViewChild,
                 args: ['menuContainer']