ngx-histaff-alpha 6.3.7 → 6.3.9

package/fesm2022/{ngx-histaff-alpha-ngx-histaff-alpha-CrtUN9ex.mjs → ngx-histaff-alpha-ngx-histaff-alpha-ByIs02SI.mjs}

@@ -3881,11 +3881,12 @@ class AppInitializationService {
             if (window.opener && window.opener.globalPopupId) {
                 //alert(window.opener.globalPopupId);
             }
-            fetch('../../assets/app.config.json').then(res => res.json()).then(({ APP_TYPE, APP_UIID, ALLOW_IN_APP_NOTIFICATION, SHOW_LOGIN_NOTIFICATION, IGNORE_PARTIAL_URL_MATCH_FOR_FUNCTION, IGNORE_PARTIAL_URL_MATCH_FOR_PROFILE_CENTER, USE_BUILTIN_OTP, USE_CAPTCHA, BASE_URL, BASE_URL_FOR_STATISTIC, GOLIVE_URL, DEBUG_ENABLED, USE_DEMO_AVATAR, LOGO_LOGIN, LOGO_HEADER, HOME_BACKGROUND_IMAGE, FORM_CONTROL_REQUIRED_HIGHLIGHT_COLOR, OAUTH2_OIDC_ENABLED, OAUTH2_OIDC_CLIENT_ID, OAUTH2_OIDC_LOGIN_URI, OAUTH2_OIDC_REDIRECT_URI, OAUTH2_OIDC_SCOPE, OFFICE365_DEV, OFFICE365_PROD, SAML2ADFS_ENABLED, SAML2ADFS_IDP, SAML2ADFS_IDENTIFIER, SAML2ADFS_WA_SIGNIN, SAML2ADFS_WA_SIGNOUT, SAML2ADFS_WREPLY, HANGFIRE_PATH, STATIC_FOLDER, WORKFLOW_ENABLE_DEBUG_MODE, }) => {
+            fetch('../../assets/app.config.json').then(res => res.json()).then(({ APP_TYPE, APP_UIID, ALLOW_IN_APP_NOTIFICATION, SHOW_LOGIN_NOTIFICATION, FEDERATION_COM_PARTY_ENABLED, IGNORE_PARTIAL_URL_MATCH_FOR_FUNCTION, IGNORE_PARTIAL_URL_MATCH_FOR_PROFILE_CENTER, USE_BUILTIN_OTP, USE_CAPTCHA, BASE_URL, BASE_URL_FOR_STATISTIC, GOLIVE_URL, DEBUG_ENABLED, USE_DEMO_AVATAR, LOGO_LOGIN, LOGO_HEADER, HOME_BACKGROUND_IMAGE, FORM_CONTROL_REQUIRED_HIGHLIGHT_COLOR, OAUTH2_OIDC_ENABLED, OAUTH2_OIDC_CLIENT_ID, OAUTH2_OIDC_LOGIN_URI, OAUTH2_OIDC_REDIRECT_URI, OAUTH2_OIDC_SCOPE, OFFICE365_DEV, OFFICE365_PROD, SAML2ADFS_ENABLED, SAML2ADFS_IDP, SAML2ADFS_IDENTIFIER, SAML2ADFS_WA_SIGNIN, SAML2ADFS_WA_SIGNOUT, SAML2ADFS_WREPLY, HANGFIRE_PATH, STATIC_FOLDER, WORKFLOW_ENABLE_DEBUG_MODE, }) => {
                 this.appConfigService.APP_TYPE = APP_TYPE;
                 this.appConfigService.APP_UIID = APP_UIID;
                 this.appConfigService.ALLOW_IN_APP_NOTIFICATION = ALLOW_IN_APP_NOTIFICATION;
                 this.appConfigService.SHOW_LOGIN_NOTIFICATION = SHOW_LOGIN_NOTIFICATION;
+                this.appConfigService.FEDERATION_COM_PARTY_ENABLED = FEDERATION_COM_PARTY_ENABLED;
                 this.appConfigService.IGNORE_PARTIAL_URL_MATCH_FOR_FUNCTION = IGNORE_PARTIAL_URL_MATCH_FOR_FUNCTION;
                 this.appConfigService.IGNORE_PARTIAL_URL_MATCH_FOR_PROFILE_CENTER = IGNORE_PARTIAL_URL_MATCH_FOR_PROFILE_CENTER;
                 this.appConfigService.USE_BUILTIN_OTP = USE_BUILTIN_OTP;
@@ -4924,8 +4925,14 @@ class LangInterceptor {
         this.mls = mls;
     }
     intercept(req, next) {
+        // const modifiedReq = req.clone({
+        //     headers: req.headers.set('Client-Languague', this.mls.lang$.value),
+        // });
         const modifiedReq = req.clone({
-            headers: req.headers.set('Client-Languague', this.mls.lang$.value),
+            setHeaders: {
+                'Client-Languague': this.mls.lang$.value, // giữ
+                'Client-Language': this.mls.lang$.value // mới
+            }
         });
         return next.handle(modifiedReq);
     }
@@ -4938,8 +4945,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 // Fn style
 function langInterceptor(req, next) {
     const mls = inject(MultiLanguageService);
+    // const modifiedReq = req.clone({
+    //     headers: req.headers.set('Client-Languague', mls.lang$.value),
+    // });
     const modifiedReq = req.clone({
-        headers: req.headers.set('Client-Languague', mls.lang$.value),
+        setHeaders: {
+            'Client-Languague': mls.lang$.value, // giữ
+            'Client-Language': mls.lang$.value // mới
+        }
     });
     return next(modifiedReq);
 }
@@ -9176,7 +9189,7 @@ class SocketService {
             .withUrl(this.appConfigService.BASE_URL + '/hubs/signal', {
             accessTokenFactory: () => token,
             skipNegotiation: true,
-            transport: HttpTransportType.WebSockets
+            transport: HttpTransportType.WebSockets || HttpTransportType.ServerSentEvents || HttpTransportType.LongPolling
         })
             .configureLogging(LogLevel.Information)
             .build();
@@ -31585,7 +31598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const hrmSchemaRoutes = [
     {
         path: '',
-        loadComponent: () => import('./ngx-histaff-alpha-hrm-schema.component-O8f-QHVW.mjs').then(m => m.HrmSchemaComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-hrm-schema.component-C4FXeBSE.mjs').then(m => m.HrmSchemaComponent)
     }
 ];
 
@@ -33758,7 +33771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const simpleChatRoutes = [
     {
         path: '',
-        loadComponent: () => import('./ngx-histaff-alpha-simple-chat.component-DtlcUxIS.mjs').then(m => m.SimpleChatComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-simple-chat.component-DQJmpxIo.mjs').then(m => m.SimpleChatComponent)
     }
 ];
 
@@ -36197,335 +36210,1044 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                     ], template: "<div class=\"modal-container\">\r\n    <div class=\"modal-container-root\">\r\n        <div class=\"edit-container\">\r\n\r\n            <core-page-header [title]=\"'EDIT_ACTION_SVG_ICON'\" [hideButtonGroup]=\"true\"></core-page-header>\r\n\r\n            <div class=\"object-property w-100 fw700 color-gray\">\r\n                <div>{{ id }} <span> \u2022 </span> {{ code }} <span> \u2022 </span> {{ (code || '') | translate: lang }} </div>\r\n            </div>\r\n\r\n            <div class=\"h15\"></div>\r\n\r\n            <div class=\"d-flex d-flex-between\">\r\n\r\n                <div class=\"entry\">\r\n                    <div class=\"label\">Enter Svg element here:</div>\r\n                    <textarea class=\"form-control\" [(ngModel)]=\"svg\" [rows]=\"'10'\"\r\n                        [ngStyle]=\"{ height: 'unset'}\"></textarea>\r\n                </div>\r\n                <div class=\"preview d-flex d-flex-v d-flex-between\">\r\n                    <div class=\"label\">Preview:</div>\r\n                    <div class=\"preview-icon\" [innerHtml]=\"svg | stringHtml\">\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div class=\"h15\"></div>\r\n            <div class=\"d-flex d-flex-end\">\r\n                <core-button-group-vns [showCaption]=\"true\" [forHeader]=\"false\" (buttonClick)=\"onButtonClick($event)\"\r\n                    [shownItems]=\"buttonItems\" class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".edit-container{width:800px;height:400px;padding:0 15px 15px;background-color:#fff}.edit-container .entry{width:655px}.edit-container .preview{width:100px;height:100px}\n"] }]
         }], ctorParameters: () => [{ type: MultiLanguageService }, { type: ActionService }, { type: AppService }, { type: AlertService }] });
 
-class CorePaginationComponent {
-    constructor() {
-        this.$currentPage = input.required();
-        this.$height = input.required();
-        this.$pageCount = input.required();
-        this.$loading = input.required();
-        this.$suspendCurrentPageSubscription = input();
-        this.$showAdd = input();
-        this.$background = input();
-        this.$fixedPageSize = input();
-        this.$onClickAdd = output();
-        this.$container = viewChild('container');
-        this.$current = viewChild('current');
-        this.$aperture = viewChild('aperture');
-        this.$currentButtonContent = signal('1');
-        this.$suspendCurrentPage = signal(true);
-        this.$navigationDirection = signal(1);
-        this.subscriptions = [];
-    }
-    ngOnInit() { }
-    goFirst() {
-        this.$navigationDirection.set(-1);
-        this.$suspendCurrentPage.set(false);
-        setTimeout(() => {
-            if (!!this.$pageCount())
-                this.$currentPage().next(1);
-            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotatebackwards');
-        });
-    }
-    goLast() {
-        this.$navigationDirection.set(1);
-        this.$suspendCurrentPage.set(false);
-        setTimeout(() => {
-            if (!!this.$pageCount())
-                this.$currentPage().next(this.$pageCount());
-            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotateforwards');
-        });
-    }
-    goPrevious() {
-        this.$navigationDirection.set(-1);
-        this.$suspendCurrentPage.set(false);
-        setTimeout(() => {
-            if (!!this.$pageCount())
-                this.$currentPage().next(this.$currentPage().value - 1);
-            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotatebackwards');
+class ComPartyService {
+    constructor(recursiveService, alertService) {
+        this.recursiveService = recursiveService;
+        this.alertService = alertService;
+        this.instances = [];
+        this.loading = true;
+        this.comTreeData$ = new BehaviorSubject([]);
+        this.comTreeDataWithPeople$ = new BehaviorSubject([]);
+        this.linerData$ = new BehaviorSubject([]);
+        this.buildTreeFlag$ = new BehaviorSubject(false);
+        this.status$ = new BehaviorSubject({
+            selectedKey: undefined,
+            activeKeys: [],
+            checkedKeys: [],
+            expandedKeys: [],
+            checkInheritance: true
         });
-    }
-    goNext() {
-        this.$navigationDirection.set(1);
-        this.$suspendCurrentPage.set(false);
-        setTimeout(() => {
-            if (!!this.$pageCount())
-                this.$currentPage().next(this.$currentPage().value + 1);
-            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotateforwards');
+        this.appService = inject(AppService);
+        this.linerData$.subscribe(xs => {
+            const idCountMap = new Map();
+            xs.forEach(item => {
+                const id = item.id;
+                idCountMap.set(id, (idCountMap.get(id) ?? 0) + 1);
+            });
+            const duplicates = Array.from(idCountMap.entries())
+                .filter(([_, count]) => count > 1)
+                .map(([id]) => id);
+            if (!!duplicates.length) {
+                if (isDevMode()) {
+                    alertService.error('🔁 Duplicate IDs: ' + duplicates.reduce((a, c) => a + ";" + c, ''), alertOptions);
+                }
+            }
         });
     }
-    onClickAddLocal() {
-        this.$onClickAdd.emit();
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.subscriptions.push(this.$currentPage().subscribe(x => this.$currentButtonContent.set(x.toString())));
-            this.mouseDownStream$ = fromEvent(this.$current().nativeElement, 'mousedown', _ => {
-                this.$currentButtonContent.set(`${this.$currentPage().value}/${this.$pageCount()}`);
-            });
-            this.touchStartStream$ = fromEvent(this.$current().nativeElement, 'touchstart', _ => {
-                this.$currentButtonContent.set(`${this.$currentPage().value}/${this.$pageCount()}`);
+    buildComTreeData(status = {
+        selectedKey: undefined,
+        activeKeys: [],
+        checkedKeys: [],
+        expandedKeys: [],
+        checkInheritance: true
+    }) {
+        this.loading = true;
+        const cloneCopy = JSON.parse(JSON.stringify(this.linerData$.value));
+        if (typeof Worker !== 'undefined') {
+            // Create a new
+            console.log("🟢🟢 Worker works");
+            const worker = new Worker(liner_to_nested_array_script);
+            worker.addEventListener('message', ({ data }) => {
+                const newData = data.list;
+                this.comTreeData$.next(newData);
+                this.loading = false;
             });
-            this.mouseUpStream$ = fromEvent(this.$current().nativeElement, 'mouseup', _ => {
-                this.$currentButtonContent.set(`${this.$currentPage().value}`);
+            worker.postMessage({
+                list: cloneCopy,
+                keyField: 'id',
+                titleField: 'name',
+                parentField: 'parentId',
+                activeField: 'active',
+                checkedField: 'checked',
+                expandedField: 'expand',
+                status
             });
-            this.touchEndStream$ = fromEvent(this.$current().nativeElement, 'touchend', _ => {
-                this.$currentButtonContent.set(`${this.$currentPage().value}`);
+        }
+        else {
+            // Web workers are not supported in this environment.
+            // You should add a fallback so that your program still executes correctly.
+            this.recursiveService
+                .linerArrayToNestedArray(cloneCopy, 'id', 'name', 'parentId', 'active', 'checked', 'expand', status)
+                .subscribe((obj) => {
+                const newData = obj.list;
+                this.comTreeData$.next(newData);
+                this.loading = false;
             });
-            this.mouseDownSubscription$ = this.mouseDownStream$.subscribe();
-            this.touchStartSubscription$ = this.touchStartStream$.subscribe();
-            this.mouseUpSubscription$ = this.mouseUpStream$.subscribe();
-            this.touchEndSubscription$ = this.touchEndStream$.subscribe();
-            if (this.$background())
-                setTimeout(() => this.$container().nativeElement.style.setProperty('--bg', this.$background()));
-            if (this.$height())
-                this.$container()?.nativeElement.style.setProperty('--height', this.$height() + 'px');
-        });
+        }
     }
-    ngOnDestroy() {
-        if (this.mouseDownSubscription$)
-            this.mouseDownSubscription$.unsubscribe();
-        if (this.touchStartSubscription$)
-            this.touchStartSubscription$.unsubscribe();
-        if (this.mouseUpSubscription$)
-            this.mouseUpSubscription$.unsubscribe();
-        if (this.touchEndSubscription$)
-            this.touchEndSubscription$.unsubscribe();
+    getComLinearData(userId) {
+        return this.appService.getFullUrl("/api/ComUnit/GetAll");
+        // return of(
+        //   {
+        //     ok: true,
+        //     status: 200,
+        //     body: {
+        //       statusCode: 200,
+        //       innerBody: COM_MOKEUP_DATA
+        //     } as IFormatedResponse
+        //   }
+        // )
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CorePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CorePaginationComponent, isStandalone: true, selector: "core-pagination", inputs: { $currentPage: { classPropertyName: "$currentPage", publicName: "$currentPage", isSignal: true, isRequired: true, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "$height", isSignal: true, isRequired: true, transformFunction: null }, $pageCount: { classPropertyName: "$pageCount", publicName: "$pageCount", isSignal: true, isRequired: true, transformFunction: null }, $loading: { classPropertyName: "$loading", publicName: "$loading", isSignal: true, isRequired: true, transformFunction: null }, $suspendCurrentPageSubscription: { classPropertyName: "$suspendCurrentPageSubscription", publicName: "$suspendCurrentPageSubscription", isSignal: true, isRequired: false, transformFunction: null }, $showAdd: { classPropertyName: "$showAdd", publicName: "$showAdd", isSignal: true, isRequired: false, transformFunction: null }, $background: { classPropertyName: "$background", publicName: "$background", isSignal: true, isRequired: false, transformFunction: null }, $fixedPageSize: { classPropertyName: "$fixedPageSize", publicName: "$fixedPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $onClickAdd: "$onClickAdd" }, viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "$current", first: true, predicate: ["current"], descendants: true, isSignal: true }, { propertyName: "$aperture", first: true, predicate: ["aperture"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"pagination-container d-flex-between\">\r\n    <div class=\"pagination-container\">\r\n        <div class=\"first\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goFirst()\"></div>\r\n        <div class=\"previous\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goPrevious()\"></div>\r\n        <div #current class=\"current\">\r\n            <div class=\"d-flex-center\">\r\n                <i #aperture class=\"feather-aperture aperture \" [class.visible]=\"$loading()\"></i>\r\n                @if (!$loading()) {\r\n                    <span class=\"current-text\">{{ $currentButtonContent() }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div class=\"next\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goNext()\"></div>\r\n        <div class=\"last\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goLast()\"></div>\r\n    </div>\r\n    @if ($showAdd()) {\r\n        <a (click)=\"onClickAddLocal()\">\r\n            <div class=\"add\"></div>\r\n        </a>\r\n    }\r\n</div>", styles: [".pagination-container{--bg: #848484;--color: white;--height: 38px;--button-size: 50px;--font-size: 18px;--aperture-size: 30px}@keyframes rotateforwards{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotatebackwards{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.pagination-container .add:before{font-family:feather;content:\"\\e9b1\";font-weight:700;font-size:var(--font-size);color:#fff;background:var(--bg);width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center;border-top-right-radius:50%;border-bottom-right-radius:50%}.pagination-container .pagination-container{height:var(--height);display:flex}.pagination-container .pagination-container>div{display:inline-block;cursor:pointer;margin-right:2px}.pagination-container .pagination-container .disable{cursor:default;opacity:.5!important}.pagination-container .pagination-container .current{border-radius:50%;margin:0 5px;opacity:1;transition:2s}.pagination-container .pagination-container .aperture{width:var(--aperture-size);height:var(--aperture-size);opacity:0;transition:.25s ease-out;animation:rotateforwards 1s linear infinite}.pagination-container .pagination-container .aperture:before{font-size:var(--aperture-size)}.pagination-container .pagination-container .visible{opacity:1;transition:.25s ease-out}.pagination-container .pagination-container .current,.pagination-container .pagination-container .loading{width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color)}.pagination-container .pagination-container .current-text{position:absolute}.pagination-container .pagination-container .current>div{width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container div:before{font-family:feather;font-size:var(--font-size);width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container .first:before{content:\"\\e933\"}.pagination-container .pagination-container .previous:before{content:\"\\e92f\"}.pagination-container .pagination-container .next:before{content:\"\\e930\"}.pagination-container .pagination-container .last:before{content:\"\\e934\"}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, deps: [{ token: RecursiveService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CorePaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgStyle,
-                        AsyncPipe,
-                    ], template: "<div #container class=\"pagination-container d-flex-between\">\r\n    <div class=\"pagination-container\">\r\n        <div class=\"first\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goFirst()\"></div>\r\n        <div class=\"previous\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goPrevious()\"></div>\r\n        <div #current class=\"current\">\r\n            <div class=\"d-flex-center\">\r\n                <i #aperture class=\"feather-aperture aperture \" [class.visible]=\"$loading()\"></i>\r\n                @if (!$loading()) {\r\n                    <span class=\"current-text\">{{ $currentButtonContent() }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div class=\"next\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goNext()\"></div>\r\n        <div class=\"last\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goLast()\"></div>\r\n    </div>\r\n    @if ($showAdd()) {\r\n        <a (click)=\"onClickAddLocal()\">\r\n            <div class=\"add\"></div>\r\n        </a>\r\n    }\r\n</div>", styles: [".pagination-container{--bg: #848484;--color: white;--height: 38px;--button-size: 50px;--font-size: 18px;--aperture-size: 30px}@keyframes rotateforwards{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotatebackwards{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.pagination-container .add:before{font-family:feather;content:\"\\e9b1\";font-weight:700;font-size:var(--font-size);color:#fff;background:var(--bg);width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center;border-top-right-radius:50%;border-bottom-right-radius:50%}.pagination-container .pagination-container{height:var(--height);display:flex}.pagination-container .pagination-container>div{display:inline-block;cursor:pointer;margin-right:2px}.pagination-container .pagination-container .disable{cursor:default;opacity:.5!important}.pagination-container .pagination-container .current{border-radius:50%;margin:0 5px;opacity:1;transition:2s}.pagination-container .pagination-container .aperture{width:var(--aperture-size);height:var(--aperture-size);opacity:0;transition:.25s ease-out;animation:rotateforwards 1s linear infinite}.pagination-container .pagination-container .aperture:before{font-size:var(--aperture-size)}.pagination-container .pagination-container .visible{opacity:1;transition:.25s ease-out}.pagination-container .pagination-container .current,.pagination-container .pagination-container .loading{width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color)}.pagination-container .pagination-container .current-text{position:absolute}.pagination-container .pagination-container .current>div{width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container div:before{font-family:feather;font-size:var(--font-size);width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container .first:before{content:\"\\e933\"}.pagination-container .pagination-container .previous:before{content:\"\\e92f\"}.pagination-container .pagination-container .next:before{content:\"\\e930\"}.pagination-container .pagination-container .last:before{content:\"\\e934\"}\n"] }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: RecursiveService }, { type: AlertService }] });
 
-class CoreCompareDbPipelineComponent extends BaseComponent {
-    constructor(mls, appService) {
-        super(mls);
+class CoreComTreeComponent extends CoreFormControlBaseComponent {
+    writeValue(obj) {
+        this.value = obj;
+        switch (this.accessorMode) {
+            case EnumCoreOrgTreeaAccessorMode.CHECKED:
+                if (!!obj) {
+                    const checkedKeys = [];
+                    this.checkedIds = obj; // <=== 24/10/2023
+                    obj.map(x => checkedKeys.push(x.toString()));
+                    this.loading = true;
+                    this.recursiveService.writeValueChecked(checkedKeys, this.data, this.disabledLoopExpand).subscribe(_ => {
+                        this.loading = false;
+                        if (!!this.data && !!this.data?.length)
+                            this.data[0].tree$Expanded = true;
+                    });
+                }
+                break;
+            case EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE:
+            case EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE:
+                if (!!obj) {
+                    const activatedKeys = [];
+                    obj.map(x => activatedKeys.push(x.toString()));
+                    this.loading = true;
+                    this.recursiveService.writeValueActivated(activatedKeys, this.data, this.disabledLoopExpand).subscribe(_ => {
+                        this.loading = false;
+                        if (!!this.data && !!this.data?.length)
+                            this.data[0].tree$Expanded = true;
+                    });
+                }
+                break;
+            default:
+                break;
+        }
+        if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED) {
+        }
+        else /* EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE or EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE */ {
+        }
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    constructor(
+    //public override injector: Injector,
+    authService, recursiveService, mls, layoutService, coreOrgTreeService, 
+    // private coreOrgTreeState: CoreOrgTreeState,
+    alertService, comPartyService) {
+        super( /*injector*/);
+        this.authService = authService;
+        this.recursiveService = recursiveService;
         this.mls = mls;
-        this.appService = appService;
-        this.data = [];
-        this.tabHeaders = ["Dev-Test-Live", "Dev-Extended"];
-        this.activeTabIndex = 0;
-        this.columns = [
-            {
-                field: 'id',
-                type: 'string',
-                caption: 'id',
-                align: 'left',
-                hidden: true,
-                width: 0
-            },
-            {
-                field: 'difference',
-                type: 'string',
-                caption: 'Problem',
-                align: 'left',
-                sortDisabled: true,
-                width: 300
-            },
-            {
-                field: 'conflictType',
-                type: 'string',
-                caption: 'Marker',
-                align: 'center',
-                width: 50
-            },
-            {
-                field: 'sourceAlias',
-                type: 'string',
-                caption: 'Source',
-                align: 'left',
-                sortDisabled: true,
-                width: 60
-            },
-            {
-                field: 'targetAlias',
-                type: 'string',
-                caption: 'Target',
-                align: 'left',
-                sortDisabled: true,
-                width: 200
-            },
-            {
-                field: 'tableName',
-                type: 'string',
-                caption: 'Table',
-                align: 'left',
-                sortDisabled: true,
-                width: 200
-            },
-            {
-                field: 'columnName',
-                type: 'string',
-                caption: 'Column',
-                align: 'left',
-                sortDisabled: true,
-                width: 200
-            },
-            {
-                field: 'sourceType',
-                type: 'string',
-                caption: 'Source type',
-                align: 'left',
-                sortDisabled: true,
-                width: 100
-            },
-            {
-                field: 'sourceIsPrimaryKey',
-                type: 'boolean',
-                caption: 'Source is PK',
-                align: 'center',
-                sortDisabled: true,
-                width: 60
-            },
-            {
-                field: 'sourceIsIdentityColumn',
-                type: 'boolean',
-                caption: 'Source is Identity',
-                align: 'center',
-                sortDisabled: true,
-                width: 60
-            },
-            {
-                field: 'sourceNullability',
-                type: 'boolean',
-                caption: 'Source nullability',
-                align: 'center',
-                sortDisabled: true,
-                width: 70
-            },
-            {
-                field: 'sourceSize',
-                type: 'string',
-                caption: 'Source size',
-                align: 'right',
-                sortDisabled: true,
-                width: 100
-            },
-            {
-                field: 'sourcePrecision',
-                type: 'string',
-                caption: 'Source precision',
-                align: 'right',
-                sortDisabled: true,
-                width: 50
-            },
-            {
-                field: 'sourceScale',
-                type: 'string',
-                caption: 'Source scale',
-                align: 'right',
-                sortDisabled: true,
-                width: 50
-            },
-            {
-                field: 'targetType',
-                type: 'string',
-                caption: 'Target type',
-                align: 'left',
-                sortDisabled: true,
-                width: 100
-            },
-            {
-                field: 'targetIsPrimaryKey',
-                type: 'boolean',
-                caption: 'Target is PK',
-                align: 'center',
-                sortDisabled: true,
-                width: 60
-            },
-            {
-                field: 'targetIsIdentityColumn',
-                type: 'boolean',
-                caption: 'Target is Identity',
-                align: 'center',
-                sortDisabled: true,
-                width: 60
-            },
-            {
-                field: 'targetNullability',
-                type: 'boolean',
-                caption: 'Target nullability',
-                align: 'center',
-                sortDisabled: true,
-                width: 70
-            },
-            {
-                field: 'targetSize',
-                type: 'string',
-                caption: 'Targer size',
-                align: 'right',
-                sortDisabled: true,
-                width: 100
-            },
-            {
-                field: 'targetPrecision',
-                type: 'string',
-                caption: 'Target precision',
-                align: 'right',
-                sortDisabled: true,
-                width: 50
-            },
-            {
-                field: 'targetScale',
-                type: 'string',
-                caption: 'Target scale',
-                align: 'right',
-                sortDisabled: true,
-                width: 50
-            },
-        ];
-        this.tableHeight = 500;
-        this.longApiRunning = false;
-        this.defaultRequest = {
-            pageNumber: 1,
-            pageSize: 50
-        };
-        this.request$ = new BehaviorSubject(this.defaultRequest);
-        this.currentPage$ = new BehaviorSubject(1);
-        this.pageSize$ = new BehaviorSubject(50);
-        this.pageCount = 0;
-        this.suspendCurrentPageSubscription$ = new BehaviorSubject(false);
-        this.sqlCommand = '';
-        this.resolverSessionId = '';
-        this.conflictTotal = 0;
-        this.controller = null;
+        this.layoutService = layoutService;
+        this.coreOrgTreeService = coreOrgTreeService;
+        this.alertService = alertService;
+        this.comPartyService = comPartyService;
+        this.lineColor = 'transparent';
+        this.accessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
+        //TO BE NEW
+        this.searchMode = EnumCoreOrgTreeaSearchMode.REDUCE;
+        this.excludedIds$ = new BehaviorSubject([]); // 2024-05-10: to be implemented
+        this.stateIsolated$ = new BehaviorSubject(false);
+        this.itemDoubleClick = new EventEmitter();
+        this.itemClick = new EventEmitter();
+        this.showSearch = false;
+        this.hiddenToolClickStream$ = new BehaviorSubject('');
+        this.value = [];
+        this.appConfigService = inject(AppConfigService);
+        this.activeIds = [];
+        this.checkedIds = [];
+        this.subscriptions = [];
+        this.search$ = new Subject();
+        this.searchPlaceholder = "Tìm kiếm...";
+        this.checkInheritance = true; // default value is true
+        this.showDissolved = false; // default value is false
+        this.initializing = true;
+        // this.reduced$ = this.coreOrgTreeState.coreOrgTreeReduced$;
+        this.initializing = false;
     }
-    refreshList() {
-        this.controller = new AbortController();
-        this.longApiRunning = true;
-        this.subscriptions.push(this.appService.post('/api/SqlServerPipeline/CompareDbStructure?usehub=true', this.request$.value, this.controller.signal)
-            .subscribe(x => {
-            this.longApiRunning = false;
-            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
-                this.data = x.body.innerBody.data;
-                this.pageCount = Math.ceil(x.body.innerBody.count / this.pageSize$.value);
-                this.currentPage$.next(x.body.innerBody.pageNumber);
-                this.conflictTotal = x.body.innerBody.count || 0;
-            }
-        }));
+    ngOnChanges(changes) {
+        if (changes['height']) {
+            this.resizeHeight();
+        }
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            const tryFilterConflictType = this.columns.filter(x => x.field === 'conflictType');
-            if (!!tryFilterConflictType.length) {
-                tryFilterConflictType[0].templateRef = this.conflictType;
-            }
-            const tryFilterDifference = this.columns.filter(x => x.field === 'difference');
-            if (!!tryFilterDifference.length) {
-                tryFilterDifference[0].templateRef = this.toolBlock;
+    ngOnInit() {
+        super.register();
+        //this.layoutService.leftbarOpen$.next(false);
+        this.instanceNumber = new Date().getTime();
+        const newInstance = {
+            instanceNumber: this.instanceNumber,
+            selectedKey$: new BehaviorSubject(undefined),
+            activeKeys$: new BehaviorSubject([]),
+            checkedKeys$: new BehaviorSubject([]),
+            expandedKeys$: new BehaviorSubject([]),
+            checkInheritance$: new BehaviorSubject(true)
+        };
+        this.comPartyService.instances.push(newInstance);
+        // Check xem chiều cao height có được truyền vào hay không
+        if (this.height === undefined) {
+            if (isDevMode()) {
+                //this.alertService.warn("CoreOrgTree không nhận được chiều cao (height) truyền vào từ lớp ngoài. Chiều cao mặc định sẽ được tính toán dựa vào bố cục chính.", alertOptions);
             }
-            const tryFilterSourceIsPrimaryKey = this.columns.filter(x => x.field === 'sourceIsPrimaryKey');
-            if (!!tryFilterSourceIsPrimaryKey.length) {
-                tryFilterSourceIsPrimaryKey[0].templateRef = this.sourceIsPrimaryKey;
+            this.subscriptions.push(this.layoutService.contentContainerHeight$.subscribe(x => {
+                // basicSpacing là paddingBottom của lớp content-container
+                this.height = x - this.layoutService.corePageHeaderHeight - this.layoutService.basicSpacing;
+            }));
+        }
+        this.subscriptions.push(this.comPartyService.linerData$.subscribe((x) => this.linearComArray = x));
+        this.subscriptions.push(this.comPartyService.buildTreeFlag$.pipe(skip(1)).subscribe(_ => {
+            this.buildComTreeData();
+        }));
+        this.subscriptions.push(this.stateIsolated$.subscribe(x => {
+            if (x) {
+                if (!!this.statusSubscription) {
+                    this.statusSubscription.unsubscribe();
+                }
             }
-            const tryFilterTargetIsPrimaryKey = this.columns.filter(x => x.field === 'targetIsPrimaryKey');
-            if (!!tryFilterTargetIsPrimaryKey.length) {
-                tryFilterTargetIsPrimaryKey[0].templateRef = this.targetIsPrimaryKey;
+            else {
+                if (!this.statusSubscription) {
+                    this.statusSubscription = this.comPartyService.status$.subscribe((x) => {
+                        console.log("this.organizationService.status$ changes", x);
+                        const newActiveIds = [];
+                        x.activeKeys.map((k) => {
+                            newActiveIds.push(Number(k));
+                        });
+                        this.activeIds = newActiveIds;
+                        if (this.accessorMode !== EnumCoreOrgTreeaAccessorMode.CHECKED) {
+                            this.value = this.activeIds;
+                            this.onChange(this.activeIds);
+                        }
+                        this.selectedKey = x.selectedKey;
+                    });
+                }
+            }
+        }));
+        this.subscriptions.push(this.coreOrgTreeService.showSearch$.subscribe(x => this.showSearch = x));
+        this.subscriptions.push(this.hiddenToolClickStream$.pipe(buffer(this.hiddenToolClickStream$.pipe(debounceTime(250))), map$1(clicks => clicks.length), filter(clicksLength => clicksLength >= 5))
+            .subscribe(_ => {
+            this.coreOrgTreeService.showSearch$.next(!this.coreOrgTreeService.showSearch$.value);
+        }));
+        this.subscriptions.push(this.search$
+            .pipe(filter((x) => x !== null), debounceTime(500), distinctUntilChanged(), switchMap((text) => {
+            console.log('switchMap works');
+            this.loading = true;
+            // AUG 2024 NEW : MUST BE TESTED
+            if (this.searchMode === EnumCoreOrgTreeaSearchMode.HIGHLIGHT) {
+                return this.recursiveService.findItem(text, this.data);
+            }
+            else {
+                return of(this.recursiveService.reducingFilter(this.scrollContainer, text));
+            }
+        }))
+            .subscribe((x) => {
+            this.loading = false;
+            // if (this.searchMode === EnumCoreOrgTreeaSearchMode.REDUCE) {
+            //   this.dataFiltered = x as IOrgTreeItem[];
+            // }
+        }));
+        this.subscriptions.push(this.comPartyService.status$
+            .pipe(filter((value) => !!!this.initializing && !!value))
+            .subscribe((x) => {
+            if (!!localStorage) {
+                localStorage.setItem('coreOrgTreeStatus', JSON.stringify(x));
+            }
+        }));
+        this.subscriptions.push(this.mls.lang$.subscribe((x) => (this.lang = x)));
+    }
+    buildComTree(comLinerData) {
+        if (!this.appConfigService.FEDERATION_COM_PARTY_ENABLED)
+            return;
+        this.comPartyService.linerData$.next(comLinerData);
+        const cloneCopy = JSON.parse(JSON.stringify(comLinerData));
+        console.group("comLinerData...", comLinerData);
+        if (!!comLinerData) {
+            if (typeof Worker !== 'undefined') {
+                console.log('🟢 Worker works');
+                // Create a new
+                const worker = new Worker(liner_to_nested_array_script);
+                worker.addEventListener("message", ({ data }) => {
+                    console.log("ComTreeData calculation finished!", new Date().getTime());
+                    this.comPartyService.loading = false;
+                    this.comPartyService.comTreeData$.next(data.list);
+                    this.comPartyService.linerData$.next(data.rawList);
+                });
+                console.log("ComTreeData is being calculated by Worker...");
+                console.log("this.comPartyService.status$.value", this.comPartyService.status$.value);
+                worker.postMessage({
+                    list: cloneCopy,
+                    keyField: 'id',
+                    titleField: 'name',
+                    parentField: 'parentId',
+                    activeField: 'active',
+                    checkedField: 'checked',
+                    expandedField: 'expanded',
+                    status: this.comPartyService.status$.value, // <=== this had been already retrieved on app-initialization
+                    orderBy: 'orderNum'
+                });
+            }
+            else {
+                // Web workers are not supported in this environment.
+                // You should add a fallback so that your program still executes correctly.
+                console.log("this.comPartyService.status$.value", this.comPartyService.status$.value);
+                this.subscriptions.push(this.recursiveService.linerArrayToNestedArray(cloneCopy, 'id', 'name', 'parentId', 'active', 'checked', 'expand', this.comPartyService.status$.value // <=== this had been already retrieved on app-initialization
+                )
+                    .subscribe(data => {
+                    console.log("data", data);
+                    this.comPartyService.comTreeData$.next(data.list);
+                    this.comPartyService.linerData$.next(data.rawList);
+                }));
+            }
+        }
+    }
+    resizeHeight() {
+        // height is not given and the tree resize as standard
+        if (!!!this.height) {
+            const sizeHeaderHeight = Number(getComputedStyle(document.documentElement)
+                .getPropertyValue('--size-header-height')
+                .replace('px', ''));
+            const sizeCorePageHeaderHeight = Number(getComputedStyle(document.documentElement)
+                .getPropertyValue('--size-core-page-header-height')
+                .replace('px', ''));
+            const containerHeight = window.innerHeight - sizeHeaderHeight - sizeCorePageHeaderHeight;
+            const pageHeaderHeight = Number(getComputedStyle(document.documentElement)
+                .getPropertyValue('--size-core-page-header-height')
+                .replace('px', ''));
+            const paginationHeight = Number(getComputedStyle(document.documentElement)
+                .getPropertyValue('--size-core-pagination-height')
+                .replace('px', ''));
+            const sizeMarginCorePaginationFull = Number(getComputedStyle(document.documentElement)
+                .getPropertyValue('--size-margin-core-pagination')
+                .replace('px', ''));
+            const height = containerHeight - pageHeaderHeight - paginationHeight + sizeMarginCorePaginationFull;
+            console.log(height);
+            this.container?.nativeElement.style.setProperty('--height', height + 'px');
+        }
+        else {
+            this.container?.nativeElement.style.setProperty('--height', this.height + 'px');
+        }
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (!!this.authService.data$.value?.id && (!this.comPartyService.linerData$?.value || (!!this.comPartyService.linerData$?.value && !this.comPartyService.linerData$?.value.length))) {
+                this.comPartyService.getComLinearData(this.authService.data$.value.id).pipe(tap$1(_ => this.loading = true), finalize$1(() => this.loading = false)).subscribe(x => {
+                    if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                        this.comPartyService.linerData$.next(x.body.innerBody.map(i => ({
+                            ...i,
+                            active: i.isActive
+                        })));
+                        this.comPartyService.buildTreeFlag$.next(!this.comPartyService.buildTreeFlag$.value);
+                    }
+                });
+            }
+            this.subscriptions.push(this.comPartyService.comTreeData$.subscribe((x) => {
+                this.data = x;
+                //this.dataFiltered = JSON.parse(JSON.stringify(x));
+                console.log("new comtree Data coming", this.data, new Date().getTime());
+                if (!!this.data) {
+                    if (!!this.data.length)
+                        this.data[0].tree$Expanded = true;
+                }
+            }));
+            this.subscriptions.push(this.coreOrgTreeService.arrowFontSize$.subscribe(x => {
+                this.container?.nativeElement.style.setProperty('--arrow-font-size', x + 'px');
+            }));
+            this.subscriptions.push(this.coreOrgTreeService.titleWrapperMaxWidth$.pipe(filter(x => !!x)).subscribe(x => {
+                this.container?.nativeElement.style.setProperty('--title-wrapper-max-width', x + 'px');
+            }));
+            this.subscriptions.push(this.comPartyService.status$.subscribe(x => {
+                if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE && !!x.activeKeys) {
+                    this.onChange(x.activeKeys.map(i => Number(i)));
+                }
+                else if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE) {
+                    // tạm thời bỏ qua
+                }
+                else if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED && !!x.checkedKeys) {
+                    this.onChange(x.checkedKeys.map(i => Number(i)));
+                }
+            }));
+        });
+    }
+    // onItemClickLocal(e: IComTreeItem): void {
+    //   this.linnerOrgArray.map((x) => (x.active = false));
+    //   setTimeout(() => this.buildTreeData());
+    // }
+    onToggleItem(e) {
+        const cloneCopy = JSON.parse(JSON.stringify(this.linearComArray));
+        const filter = cloneCopy.filter((x) => x.id === e.id);
+        if (filter.length === 1) {
+            filter[0].expand = !!!e.expand;
+        }
+        this.linearComArray = cloneCopy;
+        setTimeout(() => this.buildComTreeData());
+    }
+    // buildTreeData(): void {
+    //   this.loading = true;
+    //   const cloneCopy = JSON.parse(JSON.stringify(this.linnerOrgArray));
+    //   if (typeof Worker !== 'undefined') {
+    //     // Create a new
+    //     console.log("🟢🟢 Worker works");
+    //     this.worker = new Worker(liner_to_nested_array_script);
+    //     this.worker.addEventListener('message', ({ data }) => {
+    //       this.data = data.list;
+    //       //this.dataFiltered = JSON.parse(JSON.stringify(data.list));
+    //       if (!!this.data && !!this.data?.length) this.data[0].tree$Expanded = true;
+    //       this.loading = false;
+    //     });
+    //     this.worker.postMessage({
+    //       list: cloneCopy,
+    //       keyField: 'id',
+    //       titleField: 'name',
+    //       parentField: 'parentId',
+    //       activeField: 'active',
+    //       //inheritantActiveField: 'inheritantActive',
+    //       checkedField: 'checked',
+    //       expandedField: 'expand',
+    //     });
+    //   } else {
+    //     // Web workers are not supported in this environment.
+    //     // You should add a fallback so that your program still executes correctly.
+    //     const status = this.organizationService.status$.value;
+    //     this.subscriptions.push(
+    //       this.recursiveService
+    //         .linerArrayToNestedArray(
+    //           cloneCopy,
+    //           'id',
+    //           'name',
+    //           'parentId',
+    //           'active',
+    //           'checked',
+    //           'expand',
+    //           //status
+    //         )
+    //         .subscribe((obj) => {
+    //           this.data = obj.list;
+    //           //this.dataFiltered = JSON.parse(JSON.stringify(obj.list));
+    //           if (!!this.data && !!this.data?.length) this.data[0].tree$Expanded = true;
+    //           this.loading = false;
+    //         })
+    //     );
+    //   }
+    // }
+    buildComTreeData() {
+        this.loading = true;
+        const cloneCopy = JSON.parse(JSON.stringify(this.linearComArray));
+        // ✅ ADD THIS FILTER
+        const filteredList = !this.showDissolved
+            ? cloneCopy.filter(x => x.active === true)
+            : cloneCopy;
+        if (typeof Worker !== 'undefined') {
+            this.worker = new Worker(liner_to_nested_array_script);
+            this.worker.addEventListener('message', ({ data }) => {
+                this.data = data.list;
+                if (!!this.data?.length)
+                    this.data[0].tree$Expanded = true;
+                this.loading = false;
+            });
+            // ✅ USE filteredList INSTEAD OF cloneCopy
+            this.worker.postMessage({
+                list: filteredList,
+                keyField: 'id',
+                titleField: 'name',
+                parentField: 'parentId',
+                activeField: 'active',
+                checkedField: 'checked',
+                expandedField: 'expand',
+            });
+        }
+        else {
+            this.subscriptions.push(this.recursiveService
+                .linerArrayToNestedArray(filteredList, // ✅ use filteredList
+            'id', 'name', 'parentId', 'active', 'checked', 'expand')
+                .subscribe((obj) => {
+                this.data = obj.list;
+                if (!!this.data?.length)
+                    this.data[0].tree$Expanded = true;
+                this.loading = false;
+            }));
+        }
+    }
+    onExpandTogglerClick(e, event) {
+        event.stopPropagation();
+        const newValue = !e.tree$Expanded;
+        e.tree$Expanded = newValue;
+        // updating status with newValue
+        const currentExpandedIds = this.comPartyService.status$.value?.expandedKeys;
+        let newExpandedIds = currentExpandedIds?.filter((_) => !!!currentExpandedIds.includes(e.id.toString()));
+        if (newValue) {
+            newExpandedIds?.push(e.id.toString());
+        }
+        newExpandedIds?.sort();
+        const newExpandedKeys = [];
+        newExpandedIds.map((x) => newExpandedKeys.push(x.toString()));
+        this.comPartyService.status$.next({
+            ...this.comPartyService.status$.value,
+            expandedKeys: newExpandedKeys,
+        });
+    }
+    onItemCheck(e, newValue) {
+        this.itemClick?.emit(e);
+        if (this.accessorMode !== EnumCoreOrgTreeaAccessorMode.CHECKED)
+            return;
+        // We have this var to hold nodes that are being changed
+        let toggledIds;
+        // We should calculate a new state into this var: 
+        const newCheckedIds = JSON.parse(JSON.stringify(this.checkedIds));
+        // We will call this function after toggledIds changed
+        const changeValue = () => {
+            // If newValue === true, we will disctintly push changed ids to the state
+            // Otherwise we will remove them from the state
+            if (!!newValue) {
+                toggledIds.map(x => {
+                    if (!!!newCheckedIds.includes(x)) {
+                        newCheckedIds.push(x);
+                    }
+                });
+                // Then asign the state to the newCheckedIds
+                this.checkedIds = newCheckedIds;
+            }
+            else {
+                const filter = newCheckedIds.filter(x => !!!toggledIds.includes(x));
+                // Then asign the state to the filter
+                this.checkedIds = filter;
+            }
+            // After the cases of if/else, make the control change with onChange
+            this.value = this.checkedIds;
+            this.onChange(this.checkedIds);
+            this.markAsTouched();
+        };
+        /* start: THIS CODE SCOPE calculates toggledIds */
+        if (this.checkInheritance) {
+            // If true, all the nested items will be checked/unchecked
+            this.recursiveService
+                .nestedToggleCheck(e, newValue, this.showDissolved)
+                .then((x) => {
+                let currentCheckedKeys = this.comPartyService.status$.value.checkedKeys || [];
+                if (!!newValue) {
+                    x.map(item => {
+                        if (currentCheckedKeys.filter(i => i === item.toString()).length === 0) {
+                            currentCheckedKeys.push(item.toString());
+                        }
+                    });
+                }
+                else {
+                    currentCheckedKeys = currentCheckedKeys.filter(i => !x.includes(Number(i)));
+                }
+                this.comPartyService.status$.next({
+                    ...this.comPartyService.status$.value,
+                    checkedKeys: currentCheckedKeys //x.map(item => item.toString())
+                });
+                // The ids have been changed
+                toggledIds = x;
+                // Now toggledIds were set. We call the function we declared
+                changeValue();
+            })
+                .catch((x) => {
+                console.error(x);
+            });
+        }
+        else {
+            // Otherwise we simply toggle check for current item only
+            toggledIds = [e.id];
+            // Now toggledIds were set. We call the function we declared
+            changeValue();
+        }
+        /* end: THIS CODE SCOPE calculates toggledIds */
+        // That is. Happy debugging!
+    }
+    onCheckIncludeDissolvedChange(value) {
+        console.log("onCheckIncludeDissolvedChange", value);
+    }
+    onCheckInheritanceChange(value) {
+        this.comPartyService.status$.next({
+            ...this.comPartyService.status$.value,
+            checkInheritance: value,
+        });
+    }
+    onObjectClick(e, event) {
+        // remove highlight class
+        // TO DO
+        if (!!e.protected)
+            return;
+        this.itemClick?.emit(e);
+        if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED)
+            return;
+        let activeIds = [];
+        this.data.map((item) => (item.active = false));
+        if (this.accessorMode ===
+            EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE ||
+            !!!this.accessorMode) {
+            // If true, all the nested items will be active, the others are inactive
+            this.recursiveService
+                .nestedResetActive(e, true)
+                .then((x) => {
+                activeIds = x;
+                activeIds.sort();
+                const newActiveKeys = [];
+                activeIds.map((x) => newActiveKeys.push(x.toString()));
+                this.comPartyService.status$.next({
+                    ...this.comPartyService.status$.value,
+                    activeKeys: newActiveKeys,
+                    selectedKey: e.id.toString()
+                });
+                this.activeIds = activeIds;
+                console.log(this.activeIds);
+                this.onChange(activeIds);
+            })
+                .catch((x) => {
+                console.error(x);
+            });
+        }
+        else {
+            // ACTIVATED_SINGLE
+            // Otherwise we simply set current item to be active only
+            activeIds = [e.id];
+            this.activeIds = activeIds;
+            this.comPartyService.status$.next({
+                ...this.comPartyService.status$.value,
+                activeKeys: [e.id.toString()],
+                selectedKey: e.id.toString(),
+            });
+            this.onChange(activeIds);
+        }
+        const { detail } = event;
+        if (detail === 2) {
+            console.log('This was a dblclick');
+            this.itemDoubleClick.emit(e);
+        }
+        this.selectedItem = e;
+    }
+    onSearchChange(text) {
+        this.search$.next(text);
+    }
+    onHiddenToolClick(e) {
+        e.stopPropagation();
+        this.hiddenToolClickStream$.next(crypto.randomUUID());
+    }
+    ngOnDestroy() {
+        if (this.worker) {
+            this.worker.terminate();
+        }
+        this.subscriptions.map((x) => x?.unsubscribe());
+        if (!!this.instanceNumber) {
+            const tryToFind = this.comPartyService.instances.filter((x) => x.instanceNumber === this.instanceNumber);
+            if (!!tryToFind.length) {
+                const newInstances = this.comPartyService.instances.filter((x) => x.instanceNumber !== this.instanceNumber);
+                this.comPartyService.instances = newInstances;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreComTreeComponent, deps: [{ token: AuthService }, { token: RecursiveService }, { token: MultiLanguageService }, { token: LayoutService }, { token: CoreOrgTreeService }, { token: AlertService }, { token: ComPartyService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreComTreeComponent, isStandalone: true, selector: "core-com-tree", inputs: { lineColor: "lineColor", fullWidthMode: "fullWidthMode", accessorMode: "accessorMode", searchMode: "searchMode", fullRendering: "fullRendering", height: "height", disabledLoopExpand: "disabledLoopExpand", showCheckInheritance: "showCheckInheritance", excludedIds$: "excludedIds$", stateIsolated$: "stateIsolated$" }, outputs: { itemDoubleClick: "itemDoubleClick", itemClick: "itemClick" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CoreComTreeComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "displayContent", first: true, predicate: ["displayContent"], descendants: true }, { propertyName: "reducedIconWrapper", first: true, predicate: ["reducedIconWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-org-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\" \r\n    [style.position]=\"'relative'\"\r\n    [style.width]=\"'100%'\"\r\n    [style.minWidth]=\"'310px'\"\r\n    [style.height]=\"height + 'px'\"\r\n    >\r\n    <div #displayContent class=\"custom-org-tree\">\r\n        @if (showSearch) {\r\n        <div class=\"core-org-tree-header d-flex-between\">\r\n            <div class=\"m5\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\r\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\r\n            </div>\r\n        </div>\r\n        }\r\n        <ng-container>\r\n\r\n            <div #scrollContainer class=\"scroll-container\" \r\n                [style.height]=\"height - layoutService.coreOrgTreeTopHeight * (showSearch ? 1 : 0) - layoutService.coreOrgTreeBottomHeight + 'px'\" \r\n                [style.overflow]=\"'scroll'\" \r\n            >\r\n                <div class=\"hidden-tool\" (click)=\"onHiddenToolClick($event)\"></div>\r\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\r\n                <!-- @for (root of dataFiltered; track root) { -->\r\n                @if (!!data && !!data.length) {\r\n                    @for (root of data; track $index) {\r\n                        @defer(on viewport(scrollContainer)) {\r\n                        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n                            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n                        </ul>\r\n                        } @placeholder() {\r\n                            Placeholder...\r\n                        } @loading() {\r\n                            Loading...\r\n                        } @error() {\r\n                            Error...\r\n                        }\r\n                    }\r\n                } @else {\r\n                    No items\r\n                }\r\n            </div>\r\n            <div \r\n                [style.display]=\"'block'\"\r\n                [style.position]=\"'absolute'\"\r\n                [style.bottom]=\"'0px'\"\r\n                [style.left]=\"'0px'\"\r\n                [style.right]=\"'0px'\"\r\n                [style.height]=\"layoutService.corePaginationHeight + 'px'\"\r\n                [style.paddingLeft]=\"layoutService.basicSpacing + 'px'\"\r\n                [style.paddingRight]=\"layoutService.basicSpacing + 'px'\"\r\n                [style.lineHeight]=\"layoutService.corePaginationHeight + 'px'\"\r\n                [style.overflow]=\"'hidden'\"\r\n            >\r\n                <div \r\n                    [style.height]=\"layoutService.corePaginationHeight + 'px'\"\r\n                    [style.position]=\"'relative'\"\r\n                    [style.display]=\"'flex'\"\r\n                    [style.alignItems]=\"'center'\"\r\n                    [style.justifyContent]=\"'space-between'\"\r\n                >\r\n                    <div>\r\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\r\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\r\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\r\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\r\n                    </div>\r\n                    @if (accessorMode === 'CHECKED') {\r\n                        <div class=\"check-inheritance-wrapper\">\r\n                            @if (showCheckInheritance) {\r\n                                <core-checkbox [(ngModel)]=\"checkInheritance\"\r\n                                    (ngModelChange)=\"onCheckInheritanceChange($event)\"\r\n                                    [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\r\n                                }\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\r\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\r\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\r\n\r\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\r\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\r\n                    <!-- (click)=\"accessorMode !== 'CHECKED' ? onObjectClick(context, $event) : $event.preventDefault()\" -->\r\n                    <span (click)=\"onObjectClick(context, $event)\">\r\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\r\n                            <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context, $event)\"></i>\r\n                        }\r\n\r\n                        @if (accessorMode === 'CHECKED' && !protected) {\r\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\r\n                            [disabled]=\"disabled\"></core-checkbox>\r\n                        }\r\n                        <object [class.active]=\"accessorMode != 'CHECKED' && selectedKey===id.toString()\"\r\n                            [class.highlighted]=\"highlighted\" [class.dissolved]=\"!isActive\"\r\n                            [class.protected]=\"protected\" [appTooltip]=\"title\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </span>\r\n                    @if (!!children.length) {\r\n                    <ul [class.collapsed]=\" !!!expanded\">\r\n                        @for (child of children; track $index) {\r\n                        @if (!!expanded || !!fullRendering) {\r\n\r\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n\r\n                        }\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ng-template>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".core-org-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;--item-height: 35px;--arrow-font-size: 18px;--ul-padding: 20px;--display: \"block\";--square-color: black;--square-size: 9px;--line-color: \"transparent\";--title-wrapper-max-width: 250px;--active-item-color: #F37540;--size-scrollbar-width: 10px;--line-size: 1px;--reduced-icon-wrapper-height: 50px;--reduced-panel-height: calc(var(--height) - var(--reduced-icon-wrapper-height));--scroll-container-height: calc(var(--height) - var(--size-core-reducer-icon-wrapper-height) - var(--size-pagination-height));color:#000;background-color:var(--color-bg-core-org-tree)!important;height:var(--height);background:var(--background);width:var(--size-core-org-tree-width);transition:width .5s ease-out}.core-org-tree-container .hidden-tool{display:block;position:absolute;background-color:transparent;width:var(--ul-padding);height:var(--ul-padding);top:0;left:0}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-org-tree-container .custom-org-tree{display:var(--display)}.core-org-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-org-tree-container .core-org-tree-header input{width:calc(var(--size-core-org-tree-width) - var(--size-layout-block-cell-spacing) * 2 - var(--size-scrollbar-width) + 6px);max-width:100%;transform:translate(14px,8px);border:1px solid #E6EBED}.core-org-tree-container .core-org-tree-header input.full-width{width:calc(var(--size-core-org-tree-width) - var(--size-layout-block-cell-spacing) * 2)}.core-org-tree-container .check-inheritance-wrapper{padding:15px}.core-org-tree-container .m5>input{color:gray}.core-org-tree-container .form-control{border:none}.core-org-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-org-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow:auto;position:relative;width:100%}.core-org-tree-container .scroll-container::-webkit-scrollbar-corner{background-color:transparent}.core-org-tree-container .scroll-container::-webkit-scrollbar{width:8px;height:8px}.core-org-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}.core-org-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-org-tree-container .scroll-container ul>li>span:hover{height:35px;background-color:#fff;border-top-left-radius:20px;border-bottom-left-radius:20px;width:100%}.core-org-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1;height:35px;border-radius:20px}.core-org-tree-container .scroll-container ul>li>span>object{user-select:none;max-width:var(--title-wrapper-max-width);overflow-x:hidden;text-overflow:ellipsis;-webkit-user-select:none}.core-org-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-org-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-org-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-org-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-org-tree-container .scroll-container ul>li{display:block;position:relative}.core-org-tree-container .scroll-container ul>li:before{content:\"\";display:block;position:absolute;width:var(--ul-padding);left:calc(var(--ul-padding) * -1);top:calc(var(--item-height) / 2);height:calc(var(--item-height) / 2);border-top:solid var(--line-size) var(--line-color);border-right:none;border-bottom:none;border-left:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;font-size:13px;padding-left:8px;transform:translate(10px);cursor:pointer}.core-org-tree-container .scroll-container ul>li>span>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-org-tree-container .scroll-container ul>li>span>.expand-toggler{font-size:var(--arrow-font-size);width:24px;height:24px;position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-org-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-org-tree-container .scroll-container ul>li>ul>li>span:before{content:\"\";display:block;position:absolute;width:var(--ul-padding);left:calc(var(--ul-padding) * -2);top:calc(var(--item-height) / 2);height:var(--line-size);border-top:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-org-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-org-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-org-tree-container .scroll-container ul:not(.root):before{content:\"\";display:block;position:absolute;width:var(--line-size);left:calc(var(--ul-padding) * -1);height:calc(100% - var(--item-height) * 1.5);border-left:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul:not(.root)>li:last-child:not(.collapsed).has-children:after{content:\"\";display:block;position:absolute;height:calc(100% - var(--item-height));width:calc(var(--ul-padding) / 2);left:calc(var(--ul-padding) * -2);top:calc(var(--item-height) / 2);border-left:solid var(--line-size) var(--background);z-index:0}.core-org-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-org-tree-container .collapsed>li:before{display:none!important}.core-org-tree-container.full-width .scroll-container{width:auto}.core-org-tree-container.reduced{width:50px;padding:0;transition:width .5s ease-out}.core-org-tree-container.reduced .scroll-container{overflow:hidden}.core-org-tree-container.reduced .scroll-container>ul.root{display:none}.core-org-tree-container.reduced .scroll-container>.reduced-panel{color:var(--active-item-color);width:50px;height:var(--reduced-panel-height);writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-weight:700;animation:reducedPanelOn .5s ease-out}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreLoadingSurfaceComponent, selector: "core-loading-surface", inputs: ["loading", "height"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }], deferBlockDependencies: [() => [NgTemplateOutlet]] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreComTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-com-tree', imports: [
+                        FormsModule,
+                        NgIf,
+                        NgTemplateOutlet,
+                        CoreCheckboxComponent,
+                        CoreLoadingSurfaceComponent,
+                        TranslatePipe,
+                        TooltipDirective,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CoreComTreeComponent),
+                            multi: true
+                        }
+                    ], template: "<div #container class=\"core-org-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\" \r\n    [style.position]=\"'relative'\"\r\n    [style.width]=\"'100%'\"\r\n    [style.minWidth]=\"'310px'\"\r\n    [style.height]=\"height + 'px'\"\r\n    >\r\n    <div #displayContent class=\"custom-org-tree\">\r\n        @if (showSearch) {\r\n        <div class=\"core-org-tree-header d-flex-between\">\r\n            <div class=\"m5\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\r\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\r\n            </div>\r\n        </div>\r\n        }\r\n        <ng-container>\r\n\r\n            <div #scrollContainer class=\"scroll-container\" \r\n                [style.height]=\"height - layoutService.coreOrgTreeTopHeight * (showSearch ? 1 : 0) - layoutService.coreOrgTreeBottomHeight + 'px'\" \r\n                [style.overflow]=\"'scroll'\" \r\n            >\r\n                <div class=\"hidden-tool\" (click)=\"onHiddenToolClick($event)\"></div>\r\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\r\n                <!-- @for (root of dataFiltered; track root) { -->\r\n                @if (!!data && !!data.length) {\r\n                    @for (root of data; track $index) {\r\n                        @defer(on viewport(scrollContainer)) {\r\n                        <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n                            <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n                        </ul>\r\n                        } @placeholder() {\r\n                            Placeholder...\r\n                        } @loading() {\r\n                            Loading...\r\n                        } @error() {\r\n                            Error...\r\n                        }\r\n                    }\r\n                } @else {\r\n                    No items\r\n                }\r\n            </div>\r\n            <div \r\n                [style.display]=\"'block'\"\r\n                [style.position]=\"'absolute'\"\r\n                [style.bottom]=\"'0px'\"\r\n                [style.left]=\"'0px'\"\r\n                [style.right]=\"'0px'\"\r\n                [style.height]=\"layoutService.corePaginationHeight + 'px'\"\r\n                [style.paddingLeft]=\"layoutService.basicSpacing + 'px'\"\r\n                [style.paddingRight]=\"layoutService.basicSpacing + 'px'\"\r\n                [style.lineHeight]=\"layoutService.corePaginationHeight + 'px'\"\r\n                [style.overflow]=\"'hidden'\"\r\n            >\r\n                <div \r\n                    [style.height]=\"layoutService.corePaginationHeight + 'px'\"\r\n                    [style.position]=\"'relative'\"\r\n                    [style.display]=\"'flex'\"\r\n                    [style.alignItems]=\"'center'\"\r\n                    [style.justifyContent]=\"'space-between'\"\r\n                >\r\n                    <div>\r\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\r\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\r\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\r\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\r\n                    </div>\r\n                    @if (accessorMode === 'CHECKED') {\r\n                        <div class=\"check-inheritance-wrapper\">\r\n                            @if (showCheckInheritance) {\r\n                                <core-checkbox [(ngModel)]=\"checkInheritance\"\r\n                                    (ngModelChange)=\"onCheckInheritanceChange($event)\"\r\n                                    [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\r\n                                }\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\r\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\r\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\r\n\r\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\r\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\r\n                    <!-- (click)=\"accessorMode !== 'CHECKED' ? onObjectClick(context, $event) : $event.preventDefault()\" -->\r\n                    <span (click)=\"onObjectClick(context, $event)\">\r\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\r\n                            <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context, $event)\"></i>\r\n                        }\r\n\r\n                        @if (accessorMode === 'CHECKED' && !protected) {\r\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\r\n                            [disabled]=\"disabled\"></core-checkbox>\r\n                        }\r\n                        <object [class.active]=\"accessorMode != 'CHECKED' && selectedKey===id.toString()\"\r\n                            [class.highlighted]=\"highlighted\" [class.dissolved]=\"!isActive\"\r\n                            [class.protected]=\"protected\" [appTooltip]=\"title\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </span>\r\n                    @if (!!children.length) {\r\n                    <ul [class.collapsed]=\" !!!expanded\">\r\n                        @for (child of children; track $index) {\r\n                        @if (!!expanded || !!fullRendering) {\r\n\r\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n\r\n                        }\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ng-template>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".core-org-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;--item-height: 35px;--arrow-font-size: 18px;--ul-padding: 20px;--display: \"block\";--square-color: black;--square-size: 9px;--line-color: \"transparent\";--title-wrapper-max-width: 250px;--active-item-color: #F37540;--size-scrollbar-width: 10px;--line-size: 1px;--reduced-icon-wrapper-height: 50px;--reduced-panel-height: calc(var(--height) - var(--reduced-icon-wrapper-height));--scroll-container-height: calc(var(--height) - var(--size-core-reducer-icon-wrapper-height) - var(--size-pagination-height));color:#000;background-color:var(--color-bg-core-org-tree)!important;height:var(--height);background:var(--background);width:var(--size-core-org-tree-width);transition:width .5s ease-out}.core-org-tree-container .hidden-tool{display:block;position:absolute;background-color:transparent;width:var(--ul-padding);height:var(--ul-padding);top:0;left:0}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-org-tree-container .custom-org-tree{display:var(--display)}.core-org-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-org-tree-container .core-org-tree-header input{width:calc(var(--size-core-org-tree-width) - var(--size-layout-block-cell-spacing) * 2 - var(--size-scrollbar-width) + 6px);max-width:100%;transform:translate(14px,8px);border:1px solid #E6EBED}.core-org-tree-container .core-org-tree-header input.full-width{width:calc(var(--size-core-org-tree-width) - var(--size-layout-block-cell-spacing) * 2)}.core-org-tree-container .check-inheritance-wrapper{padding:15px}.core-org-tree-container .m5>input{color:gray}.core-org-tree-container .form-control{border:none}.core-org-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-org-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow:auto;position:relative;width:100%}.core-org-tree-container .scroll-container::-webkit-scrollbar-corner{background-color:transparent}.core-org-tree-container .scroll-container::-webkit-scrollbar{width:8px;height:8px}.core-org-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}.core-org-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-org-tree-container .scroll-container ul>li>span:hover{height:35px;background-color:#fff;border-top-left-radius:20px;border-bottom-left-radius:20px;width:100%}.core-org-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1;height:35px;border-radius:20px}.core-org-tree-container .scroll-container ul>li>span>object{user-select:none;max-width:var(--title-wrapper-max-width);overflow-x:hidden;text-overflow:ellipsis;-webkit-user-select:none}.core-org-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-org-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-org-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-org-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-org-tree-container .scroll-container ul>li{display:block;position:relative}.core-org-tree-container .scroll-container ul>li:before{content:\"\";display:block;position:absolute;width:var(--ul-padding);left:calc(var(--ul-padding) * -1);top:calc(var(--item-height) / 2);height:calc(var(--item-height) / 2);border-top:solid var(--line-size) var(--line-color);border-right:none;border-bottom:none;border-left:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;font-size:13px;padding-left:8px;transform:translate(10px);cursor:pointer}.core-org-tree-container .scroll-container ul>li>span>i{color:var(--square-color);cursor:pointer;font-size:var(--square-size);width:var(--square-size);height:var(--square-size)}.core-org-tree-container .scroll-container ul>li>span>.expand-toggler{font-size:var(--arrow-font-size);width:24px;height:24px;position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-org-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-org-tree-container .scroll-container ul>li>ul>li>span:before{content:\"\";display:block;position:absolute;width:var(--ul-padding);left:calc(var(--ul-padding) * -2);top:calc(var(--item-height) / 2);height:var(--line-size);border-top:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-org-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-org-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-org-tree-container .scroll-container ul:not(.root):before{content:\"\";display:block;position:absolute;width:var(--line-size);left:calc(var(--ul-padding) * -1);height:calc(100% - var(--item-height) * 1.5);border-left:solid var(--line-size) var(--line-color);z-index:0}.core-org-tree-container .scroll-container ul:not(.root)>li:last-child:not(.collapsed).has-children:after{content:\"\";display:block;position:absolute;height:calc(100% - var(--item-height));width:calc(var(--ul-padding) / 2);left:calc(var(--ul-padding) * -2);top:calc(var(--item-height) / 2);border-left:solid var(--line-size) var(--background);z-index:0}.core-org-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-org-tree-container .collapsed>li:before{display:none!important}.core-org-tree-container.full-width .scroll-container{width:auto}.core-org-tree-container.reduced{width:50px;padding:0;transition:width .5s ease-out}.core-org-tree-container.reduced .scroll-container{overflow:hidden}.core-org-tree-container.reduced .scroll-container>ul.root{display:none}.core-org-tree-container.reduced .scroll-container>.reduced-panel{color:var(--active-item-color);width:50px;height:var(--reduced-panel-height);writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-weight:700;animation:reducedPanelOn .5s ease-out}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: LayoutService }, { type: CoreOrgTreeService }, { type: AlertService }, { type: ComPartyService }], propDecorators: { lineColor: [{
+                type: Input
+            }], fullWidthMode: [{
+                type: Input
+            }], accessorMode: [{
+                type: Input
+            }], searchMode: [{
+                type: Input
+            }], fullRendering: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], disabledLoopExpand: [{
+                type: Input
+            }], showCheckInheritance: [{
+                type: Input
+            }], excludedIds$: [{
+                type: Input
+            }], stateIsolated$: [{
+                type: Input
+            }], itemDoubleClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], scrollContainer: [{
+                type: ViewChild,
+                args: ['scrollContainer']
+            }], displayContent: [{
+                type: ViewChild,
+                args: ['displayContent']
+            }], reducedIconWrapper: [{
+                type: ViewChild,
+                args: ['reducedIconWrapper']
+            }] } });
+
+class CorePaginationComponent {
+    constructor() {
+        this.$currentPage = input.required();
+        this.$height = input.required();
+        this.$pageCount = input.required();
+        this.$loading = input.required();
+        this.$suspendCurrentPageSubscription = input();
+        this.$showAdd = input();
+        this.$background = input();
+        this.$fixedPageSize = input();
+        this.$onClickAdd = output();
+        this.$container = viewChild('container');
+        this.$current = viewChild('current');
+        this.$aperture = viewChild('aperture');
+        this.$currentButtonContent = signal('1');
+        this.$suspendCurrentPage = signal(true);
+        this.$navigationDirection = signal(1);
+        this.subscriptions = [];
+    }
+    ngOnInit() { }
+    goFirst() {
+        this.$navigationDirection.set(-1);
+        this.$suspendCurrentPage.set(false);
+        setTimeout(() => {
+            if (!!this.$pageCount())
+                this.$currentPage().next(1);
+            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotatebackwards');
+        });
+    }
+    goLast() {
+        this.$navigationDirection.set(1);
+        this.$suspendCurrentPage.set(false);
+        setTimeout(() => {
+            if (!!this.$pageCount())
+                this.$currentPage().next(this.$pageCount());
+            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotateforwards');
+        });
+    }
+    goPrevious() {
+        this.$navigationDirection.set(-1);
+        this.$suspendCurrentPage.set(false);
+        setTimeout(() => {
+            if (!!this.$pageCount())
+                this.$currentPage().next(this.$currentPage().value - 1);
+            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotatebackwards');
+        });
+    }
+    goNext() {
+        this.$navigationDirection.set(1);
+        this.$suspendCurrentPage.set(false);
+        setTimeout(() => {
+            if (!!this.$pageCount())
+                this.$currentPage().next(this.$currentPage().value + 1);
+            this.$aperture()?.nativeElement.style.setProperty('animation-name', 'rotateforwards');
+        });
+    }
+    onClickAddLocal() {
+        this.$onClickAdd.emit();
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.subscriptions.push(this.$currentPage().subscribe(x => this.$currentButtonContent.set(x.toString())));
+            this.mouseDownStream$ = fromEvent(this.$current().nativeElement, 'mousedown', _ => {
+                this.$currentButtonContent.set(`${this.$currentPage().value}/${this.$pageCount()}`);
+            });
+            this.touchStartStream$ = fromEvent(this.$current().nativeElement, 'touchstart', _ => {
+                this.$currentButtonContent.set(`${this.$currentPage().value}/${this.$pageCount()}`);
+            });
+            this.mouseUpStream$ = fromEvent(this.$current().nativeElement, 'mouseup', _ => {
+                this.$currentButtonContent.set(`${this.$currentPage().value}`);
+            });
+            this.touchEndStream$ = fromEvent(this.$current().nativeElement, 'touchend', _ => {
+                this.$currentButtonContent.set(`${this.$currentPage().value}`);
+            });
+            this.mouseDownSubscription$ = this.mouseDownStream$.subscribe();
+            this.touchStartSubscription$ = this.touchStartStream$.subscribe();
+            this.mouseUpSubscription$ = this.mouseUpStream$.subscribe();
+            this.touchEndSubscription$ = this.touchEndStream$.subscribe();
+            if (this.$background())
+                setTimeout(() => this.$container().nativeElement.style.setProperty('--bg', this.$background()));
+            if (this.$height())
+                this.$container()?.nativeElement.style.setProperty('--height', this.$height() + 'px');
+        });
+    }
+    ngOnDestroy() {
+        if (this.mouseDownSubscription$)
+            this.mouseDownSubscription$.unsubscribe();
+        if (this.touchStartSubscription$)
+            this.touchStartSubscription$.unsubscribe();
+        if (this.mouseUpSubscription$)
+            this.mouseUpSubscription$.unsubscribe();
+        if (this.touchEndSubscription$)
+            this.touchEndSubscription$.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CorePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CorePaginationComponent, isStandalone: true, selector: "core-pagination", inputs: { $currentPage: { classPropertyName: "$currentPage", publicName: "$currentPage", isSignal: true, isRequired: true, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "$height", isSignal: true, isRequired: true, transformFunction: null }, $pageCount: { classPropertyName: "$pageCount", publicName: "$pageCount", isSignal: true, isRequired: true, transformFunction: null }, $loading: { classPropertyName: "$loading", publicName: "$loading", isSignal: true, isRequired: true, transformFunction: null }, $suspendCurrentPageSubscription: { classPropertyName: "$suspendCurrentPageSubscription", publicName: "$suspendCurrentPageSubscription", isSignal: true, isRequired: false, transformFunction: null }, $showAdd: { classPropertyName: "$showAdd", publicName: "$showAdd", isSignal: true, isRequired: false, transformFunction: null }, $background: { classPropertyName: "$background", publicName: "$background", isSignal: true, isRequired: false, transformFunction: null }, $fixedPageSize: { classPropertyName: "$fixedPageSize", publicName: "$fixedPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { $onClickAdd: "$onClickAdd" }, viewQueries: [{ propertyName: "$container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "$current", first: true, predicate: ["current"], descendants: true, isSignal: true }, { propertyName: "$aperture", first: true, predicate: ["aperture"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #container class=\"pagination-container d-flex-between\">\r\n    <div class=\"pagination-container\">\r\n        <div class=\"first\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goFirst()\"></div>\r\n        <div class=\"previous\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goPrevious()\"></div>\r\n        <div #current class=\"current\">\r\n            <div class=\"d-flex-center\">\r\n                <i #aperture class=\"feather-aperture aperture \" [class.visible]=\"$loading()\"></i>\r\n                @if (!$loading()) {\r\n                    <span class=\"current-text\">{{ $currentButtonContent() }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div class=\"next\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goNext()\"></div>\r\n        <div class=\"last\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goLast()\"></div>\r\n    </div>\r\n    @if ($showAdd()) {\r\n        <a (click)=\"onClickAddLocal()\">\r\n            <div class=\"add\"></div>\r\n        </a>\r\n    }\r\n</div>", styles: [".pagination-container{--bg: #848484;--color: white;--height: 38px;--button-size: 50px;--font-size: 18px;--aperture-size: 30px}@keyframes rotateforwards{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotatebackwards{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.pagination-container .add:before{font-family:feather;content:\"\\e9b1\";font-weight:700;font-size:var(--font-size);color:#fff;background:var(--bg);width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center;border-top-right-radius:50%;border-bottom-right-radius:50%}.pagination-container .pagination-container{height:var(--height);display:flex}.pagination-container .pagination-container>div{display:inline-block;cursor:pointer;margin-right:2px}.pagination-container .pagination-container .disable{cursor:default;opacity:.5!important}.pagination-container .pagination-container .current{border-radius:50%;margin:0 5px;opacity:1;transition:2s}.pagination-container .pagination-container .aperture{width:var(--aperture-size);height:var(--aperture-size);opacity:0;transition:.25s ease-out;animation:rotateforwards 1s linear infinite}.pagination-container .pagination-container .aperture:before{font-size:var(--aperture-size)}.pagination-container .pagination-container .visible{opacity:1;transition:.25s ease-out}.pagination-container .pagination-container .current,.pagination-container .pagination-container .loading{width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color)}.pagination-container .pagination-container .current-text{position:absolute}.pagination-container .pagination-container .current>div{width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container div:before{font-family:feather;font-size:var(--font-size);width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container .first:before{content:\"\\e933\"}.pagination-container .pagination-container .previous:before{content:\"\\e92f\"}.pagination-container .pagination-container .next:before{content:\"\\e930\"}.pagination-container .pagination-container .last:before{content:\"\\e934\"}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CorePaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        AsyncPipe,
+                    ], template: "<div #container class=\"pagination-container d-flex-between\">\r\n    <div class=\"pagination-container\">\r\n        <div class=\"first\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goFirst()\"></div>\r\n        <div class=\"previous\" [class.disable]=\"!$pageCount() || $currentPage().value===1\" (click)=\"goPrevious()\"></div>\r\n        <div #current class=\"current\">\r\n            <div class=\"d-flex-center\">\r\n                <i #aperture class=\"feather-aperture aperture \" [class.visible]=\"$loading()\"></i>\r\n                @if (!$loading()) {\r\n                    <span class=\"current-text\">{{ $currentButtonContent() }}</span>\r\n                }\r\n            </div>\r\n        </div>\r\n        <div class=\"next\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goNext()\"></div>\r\n        <div class=\"last\" [class.disable]=\"!$pageCount() || ($currentPage() | async)===$pageCount()\" (click)=\"goLast()\"></div>\r\n    </div>\r\n    @if ($showAdd()) {\r\n        <a (click)=\"onClickAddLocal()\">\r\n            <div class=\"add\"></div>\r\n        </a>\r\n    }\r\n</div>", styles: [".pagination-container{--bg: #848484;--color: white;--height: 38px;--button-size: 50px;--font-size: 18px;--aperture-size: 30px}@keyframes rotateforwards{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotatebackwards{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.pagination-container .add:before{font-family:feather;content:\"\\e9b1\";font-weight:700;font-size:var(--font-size);color:#fff;background:var(--bg);width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center;border-top-right-radius:50%;border-bottom-right-radius:50%}.pagination-container .pagination-container{height:var(--height);display:flex}.pagination-container .pagination-container>div{display:inline-block;cursor:pointer;margin-right:2px}.pagination-container .pagination-container .disable{cursor:default;opacity:.5!important}.pagination-container .pagination-container .current{border-radius:50%;margin:0 5px;opacity:1;transition:2s}.pagination-container .pagination-container .aperture{width:var(--aperture-size);height:var(--aperture-size);opacity:0;transition:.25s ease-out;animation:rotateforwards 1s linear infinite}.pagination-container .pagination-container .aperture:before{font-size:var(--aperture-size)}.pagination-container .pagination-container .visible{opacity:1;transition:.25s ease-out}.pagination-container .pagination-container .current,.pagination-container .pagination-container .loading{width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color)}.pagination-container .pagination-container .current-text{position:absolute}.pagination-container .pagination-container .current>div{width:var(--button-size);height:var(--button-size);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container div:before{font-family:feather;font-size:var(--font-size);width:var(--button-size);height:var(--button-size);background:var(--bg);color:var(--color);display:flex;align-items:center;justify-content:center}.pagination-container .pagination-container .first:before{content:\"\\e933\"}.pagination-container .pagination-container .previous:before{content:\"\\e92f\"}.pagination-container .pagination-container .next:before{content:\"\\e930\"}.pagination-container .pagination-container .last:before{content:\"\\e934\"}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CoreCompareDbPipelineComponent extends BaseComponent {
+    constructor(mls, appService) {
+        super(mls);
+        this.mls = mls;
+        this.appService = appService;
+        this.data = [];
+        this.tabHeaders = ["Dev-Test-Live", "Dev-Extended"];
+        this.activeTabIndex = 0;
+        this.columns = [
+            {
+                field: 'id',
+                type: 'string',
+                caption: 'id',
+                align: 'left',
+                hidden: true,
+                width: 0
+            },
+            {
+                field: 'difference',
+                type: 'string',
+                caption: 'Problem',
+                align: 'left',
+                sortDisabled: true,
+                width: 300
+            },
+            {
+                field: 'conflictType',
+                type: 'string',
+                caption: 'Marker',
+                align: 'center',
+                width: 50
+            },
+            {
+                field: 'sourceAlias',
+                type: 'string',
+                caption: 'Source',
+                align: 'left',
+                sortDisabled: true,
+                width: 60
+            },
+            {
+                field: 'targetAlias',
+                type: 'string',
+                caption: 'Target',
+                align: 'left',
+                sortDisabled: true,
+                width: 200
+            },
+            {
+                field: 'tableName',
+                type: 'string',
+                caption: 'Table',
+                align: 'left',
+                sortDisabled: true,
+                width: 200
+            },
+            {
+                field: 'columnName',
+                type: 'string',
+                caption: 'Column',
+                align: 'left',
+                sortDisabled: true,
+                width: 200
+            },
+            {
+                field: 'sourceType',
+                type: 'string',
+                caption: 'Source type',
+                align: 'left',
+                sortDisabled: true,
+                width: 100
+            },
+            {
+                field: 'sourceIsPrimaryKey',
+                type: 'boolean',
+                caption: 'Source is PK',
+                align: 'center',
+                sortDisabled: true,
+                width: 60
+            },
+            {
+                field: 'sourceIsIdentityColumn',
+                type: 'boolean',
+                caption: 'Source is Identity',
+                align: 'center',
+                sortDisabled: true,
+                width: 60
+            },
+            {
+                field: 'sourceNullability',
+                type: 'boolean',
+                caption: 'Source nullability',
+                align: 'center',
+                sortDisabled: true,
+                width: 70
+            },
+            {
+                field: 'sourceSize',
+                type: 'string',
+                caption: 'Source size',
+                align: 'right',
+                sortDisabled: true,
+                width: 100
+            },
+            {
+                field: 'sourcePrecision',
+                type: 'string',
+                caption: 'Source precision',
+                align: 'right',
+                sortDisabled: true,
+                width: 50
+            },
+            {
+                field: 'sourceScale',
+                type: 'string',
+                caption: 'Source scale',
+                align: 'right',
+                sortDisabled: true,
+                width: 50
+            },
+            {
+                field: 'targetType',
+                type: 'string',
+                caption: 'Target type',
+                align: 'left',
+                sortDisabled: true,
+                width: 100
+            },
+            {
+                field: 'targetIsPrimaryKey',
+                type: 'boolean',
+                caption: 'Target is PK',
+                align: 'center',
+                sortDisabled: true,
+                width: 60
+            },
+            {
+                field: 'targetIsIdentityColumn',
+                type: 'boolean',
+                caption: 'Target is Identity',
+                align: 'center',
+                sortDisabled: true,
+                width: 60
+            },
+            {
+                field: 'targetNullability',
+                type: 'boolean',
+                caption: 'Target nullability',
+                align: 'center',
+                sortDisabled: true,
+                width: 70
+            },
+            {
+                field: 'targetSize',
+                type: 'string',
+                caption: 'Targer size',
+                align: 'right',
+                sortDisabled: true,
+                width: 100
+            },
+            {
+                field: 'targetPrecision',
+                type: 'string',
+                caption: 'Target precision',
+                align: 'right',
+                sortDisabled: true,
+                width: 50
+            },
+            {
+                field: 'targetScale',
+                type: 'string',
+                caption: 'Target scale',
+                align: 'right',
+                sortDisabled: true,
+                width: 50
+            },
+        ];
+        this.tableHeight = 500;
+        this.longApiRunning = false;
+        this.defaultRequest = {
+            pageNumber: 1,
+            pageSize: 50
+        };
+        this.request$ = new BehaviorSubject(this.defaultRequest);
+        this.currentPage$ = new BehaviorSubject(1);
+        this.pageSize$ = new BehaviorSubject(50);
+        this.pageCount = 0;
+        this.suspendCurrentPageSubscription$ = new BehaviorSubject(false);
+        this.sqlCommand = '';
+        this.resolverSessionId = '';
+        this.conflictTotal = 0;
+        this.controller = null;
+    }
+    refreshList() {
+        this.controller = new AbortController();
+        this.longApiRunning = true;
+        this.subscriptions.push(this.appService.post('/api/SqlServerPipeline/CompareDbStructure?usehub=true', this.request$.value, this.controller.signal)
+            .subscribe(x => {
+            this.longApiRunning = false;
+            if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                this.data = x.body.innerBody.data;
+                this.pageCount = Math.ceil(x.body.innerBody.count / this.pageSize$.value);
+                this.currentPage$.next(x.body.innerBody.pageNumber);
+                this.conflictTotal = x.body.innerBody.count || 0;
+            }
+        }));
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const tryFilterConflictType = this.columns.filter(x => x.field === 'conflictType');
+            if (!!tryFilterConflictType.length) {
+                tryFilterConflictType[0].templateRef = this.conflictType;
+            }
+            const tryFilterDifference = this.columns.filter(x => x.field === 'difference');
+            if (!!tryFilterDifference.length) {
+                tryFilterDifference[0].templateRef = this.toolBlock;
+            }
+            const tryFilterSourceIsPrimaryKey = this.columns.filter(x => x.field === 'sourceIsPrimaryKey');
+            if (!!tryFilterSourceIsPrimaryKey.length) {
+                tryFilterSourceIsPrimaryKey[0].templateRef = this.sourceIsPrimaryKey;
+            }
+            const tryFilterTargetIsPrimaryKey = this.columns.filter(x => x.field === 'targetIsPrimaryKey');
+            if (!!tryFilterTargetIsPrimaryKey.length) {
+                tryFilterTargetIsPrimaryKey[0].templateRef = this.targetIsPrimaryKey;
             }
             const tryFilterSourceIsIdentityColumn = this.columns.filter(x => x.field === 'sourceIsIdentityColumn');
             if (!!tryFilterSourceIsIdentityColumn.length) {
@@ -36754,860 +37476,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{ selector: 'confirm-dialog-state', standalone: false, template: "<div class=\"confirm-dialog-state-container\">\r\n    <div class=\"container container-fluid\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4 label\">busy</div>\r\n            <div class=\"col-md-8 font-bold\">{{ ds.busy }}</div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4 label\">showConfirmDialog</div>\r\n            <div class=\"col-md-8 font-bold\">{{ ds.showConfirmDialog$.value }}</div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4 label\">dialogConfirmed</div>\r\n            <div class=\"col-md-8 font-bold\">{{ ds.dialogConfirmed$.value }}</div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4 label\">title</div>\r\n            <div class=\"col-md-8 font-bold\">{{ ds.title$.value }}</div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4 label\">body</div>\r\n            <div class=\"col-md-8 font-bold\">{{ ds.body$.value }}</div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!--\r\n\r\n      busy!: boolean;\r\n\r\n  showConfirmDialog$ = new BehaviorSubject<boolean | undefined>(undefined);\r\n  canDeactivate$ = new Subject<boolean>;\r\n  dialogConfirmed$ = new BehaviorSubject<IDialogConfirmModel | undefined>(undefined);\r\n\r\n  title$ = new Subject<EnumTranslateKey>;\r\n  body$ = new Subject<EnumTranslateKey>;\r\n  okButtonText$ = new Subject<EnumTranslateKey>;\r\n  cancelButtonText$ = new Subject<EnumTranslateKey>;\r\n  showCancelOnly$ = new Subject<boolean>;\r\n  informationLines$ = new Subject<string[]>;\r\n-->", styles: [".confirm-dialog-state-container{position:fixed;display:block;top:calc(var(--size-header-height) + var(--size-layout-block-cell-spacing));left:var(--size-layout-block-cell-spacing);z-index:9999999;width:320px;height:320px}\n"] }]
         }], ctorParameters: () => [{ type: DialogService }] });
 
-class CoreLazyMountComponent {
-    constructor() {
-        this.vcRef = inject(ViewContainerRef);
-    }
-    set props(value) {
-        this._props = value;
-        this.assignInputs();
-    }
-    async ngOnInit() {
-        if (this.loadComponent) {
-            const componentType = await this.loadComponent();
-            this.componentRef = this.vcRef.createComponent(componentType);
-            this.assignInputs();
-        }
-    }
-    assignInputs() {
-        if (this.componentRef && this._props) {
-            Object.assign(this.componentRef.instance, this._props);
-            this.componentRef.changeDetectorRef.markForCheck();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreLazyMountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: CoreLazyMountComponent, isStandalone: true, selector: "core-lazy-mount", inputs: { loadComponent: "loadComponent", props: "props" }, ngImport: i0, template: "", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreLazyMountComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-lazy-mount', imports: [], template: "" }]
-        }], propDecorators: { loadComponent: [{
-                type: Input
-            }], props: [{
-                type: Input
-            }] } });
-
-class ModuleItemComponent extends BaseComponent {
-    constructor(mls, navigatorService, cdr, menuService) {
-        super(mls);
-        this.mls = mls;
-        this.navigatorService = navigatorService;
-        this.cdr = cdr;
-        this.menuService = menuService;
-        this.$item = input.required();
-        this.$itemPadding = input(5);
-        this.$width = input.required();
-        this.$height = input.required();
-        this.$iconTextVerticalMargin = input(25);
-        this.$active = signal(false);
-        this.iconClickStream$ = new BehaviorSubject('');
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.mls.lang$.subscribe(x => {
-            this.lang = x;
-            this.cdr.markForCheck();
-        }));
-        if (!!localStorage) {
-            const activeRootMenuItemId = Number(localStorage.getItem('activeRootMenuItemId') || '0');
-            const active = activeRootMenuItemId === this.$item()?.id;
-            this.$active.set(active);
-        }
-    }
-    onClick(e, item) {
-        this.iconClickStream$.next(crypto.randomUUID());
-        if (!!item) {
-            this.navigatorService.clickedItem$.next(item);
-        }
-        if (localStorage.getItem('moduleDesignMode') === 'on')
-            return;
-        this.navigatorService.activeRootMenuItemId$.next(item?.id);
-        if (!!localStorage) {
-            localStorage.setItem('activeRootMenuItemId', (item?.id || 0).toString());
-        }
-        this.menuService.isOpen$.next(true); // trigger the LeftBar to be opened at the first time
-    }
-    ngAfterViewInit() {
-        this.subscriptions.push(this.navigatorService.activeRootMenuItemId$.subscribe(x => {
-            const active = x === this.$item()?.id;
-            this.$active.set(active);
-        }));
-        this.subscriptions.push(this.iconClickStream$.pipe(buffer(this.iconClickStream$.pipe(debounceTime(250))), map$1(clicks => clicks.length), filter(clicksLength => clicksLength >= 5))
-            .subscribe(_ => {
-            this.navigatorService.showEditSvg$.next(true);
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ModuleItemComponent, deps: [{ token: MultiLanguageService }, { token: NavigatorService }, { token: i0.ChangeDetectorRef }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ModuleItemComponent, isStandalone: true, selector: "app-module-item", inputs: { $item: { classPropertyName: "$item", publicName: "$item", isSignal: true, isRequired: true, transformFunction: null }, $itemPadding: { classPropertyName: "$itemPadding", publicName: "$itemPadding", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "$width", isSignal: true, isRequired: true, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "$height", isSignal: true, isRequired: true, transformFunction: null }, $iconTextVerticalMargin: { classPropertyName: "$iconTextVerticalMargin", publicName: "$iconTextVerticalMargin", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-item-wrapper\" \r\n    [class.active] = \"$active()\"\r\n    (click)=\"onClick($event, $item())\" [ngStyle]=\"{\r\n    width: $width() + 'px',\r\n    height: $height() + 'px',\r\n    padding: $itemPadding() + 'px',\r\n    visibility: !!$item() ? 'visible' : 'hidden'\r\n}\">\r\n    @if (!!$item()) {\r\n    <div class=\"d-flex d-flex-v d-flex-center\">\r\n        @if ($item()!.iconSvg) {\r\n        <div class=\"d-block\">\r\n            <i class=\"module-icon\">\r\n                <span [innerHtml]=\"$item()!.iconSvg! | stringHtml\"></span>\r\n            </i>\r\n        </div>\r\n        } @else if ($item()!.iconClass) {\r\n        <div>\r\n            <i [class]=\"$item()!.iconClass + ' module-icon'\"></i>\r\n        </div>\r\n        }\r\n        <div [ngStyle]=\"{\r\n            height: $iconTextVerticalMargin() + 'px'\r\n        }\"></div>\r\n        <div class=\"module-code\" [appTooltip]=\"$item()!.code! | translate: lang\" [ngStyle]=\"{\r\n            width: $width() - $itemPadding() * 2 + 'px'\r\n        }\">{{ $item()!.code! | translate: lang}}</div>\r\n    </div>\r\n    }\r\n</div>", styles: [".menu-item-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.menu-item-wrapper:not(.active){cursor:pointer}.menu-item-wrapper:not(.active):hover{background-color:var(--color-bg-main)}.menu-item-wrapper.active{color:var(--color-basic-orange)}.module-code{font-size:var(--typo-basic-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }, { kind: "pipe", type: StringHtmlPipe, name: "stringHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ModuleItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-module-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgStyle,
-                        TooltipDirective,
-                        StringHtmlPipe,
-                        TranslatePipe,
-                    ], template: "<div class=\"menu-item-wrapper\" \r\n    [class.active] = \"$active()\"\r\n    (click)=\"onClick($event, $item())\" [ngStyle]=\"{\r\n    width: $width() + 'px',\r\n    height: $height() + 'px',\r\n    padding: $itemPadding() + 'px',\r\n    visibility: !!$item() ? 'visible' : 'hidden'\r\n}\">\r\n    @if (!!$item()) {\r\n    <div class=\"d-flex d-flex-v d-flex-center\">\r\n        @if ($item()!.iconSvg) {\r\n        <div class=\"d-block\">\r\n            <i class=\"module-icon\">\r\n                <span [innerHtml]=\"$item()!.iconSvg! | stringHtml\"></span>\r\n            </i>\r\n        </div>\r\n        } @else if ($item()!.iconClass) {\r\n        <div>\r\n            <i [class]=\"$item()!.iconClass + ' module-icon'\"></i>\r\n        </div>\r\n        }\r\n        <div [ngStyle]=\"{\r\n            height: $iconTextVerticalMargin() + 'px'\r\n        }\"></div>\r\n        <div class=\"module-code\" [appTooltip]=\"$item()!.code! | translate: lang\" [ngStyle]=\"{\r\n            width: $width() - $itemPadding() * 2 + 'px'\r\n        }\">{{ $item()!.code! | translate: lang}}</div>\r\n    </div>\r\n    }\r\n</div>", styles: [".menu-item-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.menu-item-wrapper:not(.active){cursor:pointer}.menu-item-wrapper:not(.active):hover{background-color:var(--color-bg-main)}.menu-item-wrapper.active{color:var(--color-basic-orange)}.module-code{font-size:var(--typo-basic-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}\n"] }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: NavigatorService }, { type: i0.ChangeDetectorRef }, { type: MenuService }] });
-
-class CoreRootMenuItemPickerComponent extends BaseComponent {
-    constructor(mls, ahs, renderer, navigatorService, layoutService, domService, menuService, sysMenuService, authService, appConfigService) {
-        super(mls);
-        this.mls = mls;
-        this.ahs = ahs;
-        this.renderer = renderer;
-        this.navigatorService = navigatorService;
-        this.layoutService = layoutService;
-        this.domService = domService;
-        this.menuService = menuService;
-        this.sysMenuService = sysMenuService;
-        this.authService = authService;
-        this.appConfigService = appConfigService;
-        this.logoPath = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE1IiBoZWlnaHQ9IjI5IiB2aWV3Qm94PSIwIDAgMTE1IDI5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDI4LjU1MjhWOC41NzY4NkgyLjU2MzI5VjE2LjgxMzRIMTIuNTIzNVY4LjU3Njg2SDE1LjA4NjhWMjguNTMzOUgxMi41MjM1VjE5LjE0MjNIMi41ODE2VjI4LjUzMzlIMFYyOC41NTI4Wk0xOS4wNzgyIDExLjM2MDJWOC41NzY4NkgyMS40NTg0VjExLjM2MDJIMTkuMDc4MlpNMTkuMDc4MiAyOC41NTI4VjE0LjA4NjhIMjEuNDU4NFYyOC41NTI4SDE5LjA3ODJaTTI0LjIyMzEgMjIuMDc3MkwyOC4wMzE1IDIxLjY3OTZDMjguMjUxMiAyMi45ODYxIDI4LjcyNzIgMjMuOTUxNyAyOS40MjMgMjQuNTc2NkMzMC4xMTg3IDI1LjIwMTQgMzEuMDcwOCAyNS41MDQ0IDMyLjI0MjYgMjUuNTA0NEMzMy40ODc2IDI1LjUwNDQgMzQuNDIxNCAyNS4yMjAzIDM1LjA2MjIgMjQuNjcxMkMzNS43MDMgMjQuMTIyMSAzNi4wMTQzIDIzLjQ5NzMgMzYuMDE0MyAyMi43NTg5QzM2LjAxNDMgMjIuMjg1NSAzNS44ODYxIDIxLjg2ODkgMzUuNjExNSAyMS41NDdDMzUuMzM2OCAyMS4yMjUyIDM0Ljg3OTEgMjAuOTIyMiAzNC4yMiAyMC42NzYxQzMzLjc2MjIgMjAuNTI0NiAzMi43MzY5IDIwLjIyMTYgMzEuMTI1NyAxOS44MDUxQzI5LjAzODUgMTkuMjc0OSAyNy41NzM3IDE4LjYxMjIgMjYuNzQ5OCAxNy44MTY5QzI1LjU1OTcgMTYuNzE4NyAyNC45OTIxIDE1LjM3NDQgMjQuOTkyMSAxMy44MDI4QzI0Ljk5MjEgMTIuNzgwMyAyNS4yNjY4IDExLjgxNDcgMjUuODE2IDEwLjk0MzdDMjYuMzgzNiAxMC4wNTM4IDI3LjE3MDkgOS4zNzIxMSAyOC4yMTQ1IDguOTE3NjhDMjkuMjc2NSA4LjQ0NDMyIDMwLjUyMTUgOC4yMTcxIDMyLjAwNDYgOC4yMTcxQzM0LjQyMTQgOC4yMTcxIDM2LjIzNCA4Ljc2NjIgMzcuNDYwNyA5Ljg2NDQxQzM4LjY4NzQgMTAuOTgxNSAzOS4zMDk5IDEyLjQ1ODQgMzkuMzgzMiAxNC4zMTRMMzUuNDgzMyAxNC40NjU1QzM1LjMxODUgMTMuNDI0MSAzNC45NzA3IDEyLjY4NTcgMzQuNDIxNCAxMi4yNTAyQzMzLjg3MjEgMTEuODE0NyAzMy4wNjY1IDExLjU2ODUgMzEuOTY3OSAxMS41Njg1QzMwLjg1MTEgMTEuNTY4NSAyOS45NzIyIDExLjgxNDcgMjkuMzMxNCAxMi4yODhDMjguOTI4NiAxMi42MDk5IDI4LjcwODkgMTMuMDI2NSAyOC43MDg5IDEzLjUzNzdDMjguNzA4OSAxNC4wMTExIDI4LjkxMDMgMTQuNDI3NiAyOS4yOTQ4IDE0Ljc0OTVDMjkuNzcwOCAxNS4xODUgMzAuOTc5MiAxNS42Mzk1IDMyLjg2NTEgMTYuMTEyOEMzNC43NTA5IDE2LjU2NzIgMzYuMTYwOCAxNy4wNDA2IDM3LjA1NzkgMTcuNTUxOEMzNy45NTUxIDE4LjA0NDEgMzguNjY5MSAxOC43MjU4IDM5LjE4MTggMTkuNTc3OEMzOS42OTQ0IDIwLjQ0ODggMzkuOTUwOCAyMS40OTAyIDM5Ljk1MDggMjIuNzU4OUMzOS45NTA4IDIzLjg5NDkgMzkuNjM5NSAyNC45NzQyIDM5LjAxNyAyNS45Nzc3QzM4LjQxMjggMjYuOTgxMyAzNy41MzQgMjcuNzE5NyAzNi40MTcxIDI4LjE5MzFDMzUuMzAwMiAyOC42ODU0IDMzLjkwODcgMjguOTEyNiAzMi4yMjQzIDI4LjkxMjZDMjkuNzg5MSAyOC45MTI2IDI3LjkwMzMgMjguMzI1NiAyNi42MDMzIDI3LjE3MDZDMjUuMjY2OCAyNS45OTY3IDI0LjQ3OTUgMjQuMjkyNiAyNC4yMjMxIDIyLjA3NzJaTTQ5LjU4MTQgMTQuMDY3OVYxNy4wOTc0SDQ3LjA1NDhWMjIuOTY3MUM0Ny4wNTQ4IDI0LjE0MTEgNDcuMDczMSAyNC44NDE3IDQ3LjEwOTcgMjUuMDQ5OUM0Ny4xNjQ2IDI1LjIzOTMgNDcuMjc0NSAyNS40MDk3IDQ3LjQ1NzYgMjUuNTQyMkM0Ny42MjIzIDI1LjY3NDggNDcuODIzNyAyNS43MzE2IDQ4LjA4MDEgMjUuNzMxNkM0OC40MjggMjUuNzMxNiA0OC45MjIzIDI1LjU5OSA0OS41NjMxIDI1LjM3MThMNDkuODc0NCAyOC4zNDQ2QzQ5LjAxMzkgMjguNzIzMiA0OC4wNjE4IDI4LjkxMjYgNDYuOTYzMiAyOC45MTI2QzQ2LjMwNDEgMjguOTEyNiA0NS42OTk5IDI4Ljc5OSA0NS4xNjg5IDI4LjU3MThDNDQuNjM3OSAyOC4zNDQ2IDQ0LjIzNTEgMjguMDQxNiA0My45Nzg4IDI3LjY2MjlDNDMuNzQwOCAyNy4zMDMyIDQzLjU1NzcgMjYuNzkxOSA0My40NjYxIDI2LjE2NzFDNDMuMzkyOSAyNS43MTI2IDQzLjM1NjMgMjQuODIyNyA0My4zNTYzIDIzLjQ1OTRWMTcuMTE2NEg0MS42NzE4VjE0LjA4NjhINDMuMzU2M1YxMS4yMDg4TDQ3LjA1NDggOC45NTU1NVYxNC4wODY4SDQ5LjU4MTRWMTQuMDY3OVpNNTQuOTI3NyAxOC41MzY0TDUxLjU3NzEgMTcuOTMwNUM1MS45NjE2IDE2LjUxMDQgNTIuNjAyNSAxNS40NjkgNTMuNTE3OSAxNC43ODc0QzU0LjQ1MTcgMTQuMTI0NyA1NS44MjQ5IDEzLjc4MzkgNTcuNjM3NSAxMy43ODM5QzU5LjI4NTMgMTMuNzgzOSA2MC41MTIxIDEzLjk3MzIgNjEuMzE3NyAxNC4zODk4QzYyLjEyMzMgMTQuNzg3NCA2Mi42OTA5IDE1LjI5ODYgNjMuMDIwNCAxNS45MjM1QzYzLjM1IDE2LjU0ODMgNjMuNTE0OCAxNy42ODQ0IDYzLjUxNDggMTkuMzMxN0w2My40NTk4IDIzLjgwMDNDNjMuNDU5OCAyNS4wNjg5IDYzLjUxNDggMjUuOTk2NyA2My42NDI5IDI2LjYwMjZDNjMuNzUyOCAyNy4yMDg1IDYzLjk5MDggMjcuODcxMiA2NC4zMDIxIDI4LjU1MjhINjAuNjQwMkM2MC41MzA0IDI4LjMwNjcgNjAuNDIwNSAyNy45MjggNjAuMjkyMyAyNy40MzU3QzYwLjIzNzQgMjcuMjA4NSA2MC4xODI1IDI3LjA1NyA2MC4xNDU5IDI2Ljk4MTNDNTkuNTIzNCAyNy42MjUgNTguODQ1OSAyOC4wOTg0IDU4LjEzMTkgMjguNDIwM0M1Ny40MTc4IDI4Ljc0MjIgNTYuNjQ4OCAyOC44OTM3IDU1Ljg0MzIgMjguODkzN0M1NC40MTUxIDI4Ljg5MzcgNTMuMjc5OSAyOC40OTYgNTIuNDU2IDI3LjY4MThDNTEuNjMyMSAyNi44ODY2IDUxLjIxMSAyNS44NjQxIDUxLjIxMSAyNC42MTQ0QzUxLjIxMSAyMy44MDAzIDUxLjM5NDEgMjMuMDgwNyA1MS43Nzg1IDIyLjQzN0M1Mi4xNjMgMjEuODEyMSA1Mi42NzU3IDIxLjMwMDkgNTMuMzcxNCAyMC45NjAxQzU0LjA0ODkgMjAuNjM4MiA1NS4wMTkzIDIwLjMzNTIgNTYuMzAwOSAyMC4wNzAxQzU4LjAyMiAxOS43NDgzIDU5LjIzMDQgMTkuNDI2NCA1OS44ODk1IDE5LjE0MjNWMTguNzYzN0M1OS44ODk1IDE4LjAwNjMgNTkuNzA2NSAxNy40OTUgNTkuMzc2OSAxNy4xNzMyQzU5LjAyOSAxNi44NTEzIDU4LjM1MTYgMTYuNjgwOSA1Ny4zODEyIDE2LjY4MDlDNTYuNzIyIDE2LjY4MDkgNTYuMjA5NCAxNi44MzIzIDU1Ljg0MzIgMTcuMDk3NEM1NS40NDA0IDE3LjM4MTQgNTUuMTQ3NCAxNy44NTQ4IDU0LjkyNzcgMTguNTM2NFpNNTkuODg5NSAyMS42NDE3QzU5LjQxMzUgMjEuNzkzMiA1OC42NjI4IDIyLjAwMTUgNTcuNjM3NSAyMi4yMjg3QzU2LjYxMjIgMjIuNDU1OSA1NS45NTMxIDIyLjY4MzEgNTUuNjIzNSAyMi44OTE0QzU1LjE0NzQgMjMuMjUxMiA1NC44OTExIDIzLjY4NjYgNTQuODkxMSAyNC4yMzU3QzU0Ljg5MTEgMjQuNzg0OSA1NS4wNzQyIDI1LjIzOTMgNTUuNDc3IDI1LjYzNjlDNTUuODYxNSAyNi4wMzQ1IDU2LjMzNzUgMjYuMjIzOSA1Ni45NDE3IDI2LjIyMzlDNTcuNjE5MiAyNi4yMjM5IDU4LjI2IDI1Ljk5NjcgNTguODY0MiAyNS41NDIyQzU5LjMwMzYgMjUuMjAxNCA1OS41OTY2IDI0Ljc4NDkgNTkuNzQzMSAyNC4yNzM2QzU5LjgzNDYgMjMuOTUxNyA1OS44ODk1IDIzLjMwOCA1OS44ODk1IDIyLjM5OTFWMjEuNjQxN1pNNjUuNTQ3MSAxNC4wNjc5SDY3LjU5NzdWMTIuOTg4NkM2Ny41OTc3IDExLjc1NzkgNjcuNzI1OSAxMC44Njc5IDY3Ljk4MjIgMTAuMjYyQzY4LjIzODYgOS42NTYxMyA2OC42OTYzIDkuMTYzODMgNjkuMzczNyA4Ljc4NTE0QzcwLjA1MTIgOC40MDY0NSA3MC45MTE3IDguMjE3MSA3MS45MzcgOC4yMTcxQzcyLjk5OSA4LjIxNzEgNzQuMDQyNiA4LjM2ODU4IDc1LjA0OTYgOC43MDk0TDc0LjU3MzYgMTEuMzYwMkM3My45Njk0IDExLjIwODggNzMuMzgzNSAxMS4xMzMgNzIuODUyNSAxMS4xMzNDNzIuMzAzMiAxMS4xMzMgNzEuOTE4NyAxMS4yNjU2IDcxLjY2MjQgMTEuNTMwN0M3MS40MDYxIDExLjc5NTcgNzEuMzE0NSAxMi4yODggNzEuMzE0NSAxMy4wNDU0VjE0LjA2NzlINzQuMDc5MlYxNy4wNzg1SDcxLjMxNDVWMjguNTMzOUg2Ny42MTZWMTcuMDc4NUg2NS41NjU0VjE0LjA2NzlINjUuNTQ3MVpNNzQuNTE4NiAxNC4wNjc5SDc2LjU2OTNWMTIuOTg4NkM3Ni41NjkzIDExLjc1NzkgNzYuNjk3NCAxMC44Njc5IDc2Ljk1MzggMTAuMjYyQzc3LjIxMDEgOS42NTYxMyA3Ny42Njc4IDkuMTYzODMgNzguMzQ1MyA4Ljc4NTE0Qzc5LjAyMjcgOC40MDY0NSA3OS44ODMyIDguMjE3MSA4MC45MDg2IDguMjE3MUM4MS45NzA1IDguMjE3MSA4My4wMTQxIDguMzY4NTggODQuMDIxMSA4LjcwOTRMODMuNTQ1MSAxMS4zNjAyQzgyLjk0MDkgMTEuMjA4OCA4Mi4zNTUgMTEuMTMzIDgxLjgwNTcgMTEuMTMzQzgxLjI1NjQgMTEuMTMzIDgwLjg3MTkgMTEuMjY1NiA4MC42MTU2IDExLjUzMDdDODAuMzk1OSAxMS43OTU3IDgwLjI2NzcgMTIuMjg4IDgwLjI2NzcgMTMuMDQ1NFYxNC4wNjc5SDgzLjAzMjRWMTcuMDc4NUg4MC4yNjc3VjI4LjUzMzlINzYuNTY5M1YxNy4wNzg1SDc0LjUxODZWMTQuMDY3OVoiIGZpbGw9ImJsYWNrIi8+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTk4LjY0OTggNS4yNDQ3N0M5Ny45NTQgMi43ODMyOCA5NS42NDcxIDIuNDA0NTkgOTMuNzI0NiAzLjc2Nzg4QzkxLjc0NzIgNS4xNjkwMyA5MC40Mjg5IDguMTk4NTcgOTEuMTA2NCAxMC42MjIyQzkxLjgwMjEgMTMuMDgzNyA5NC4xMDkxIDEzLjQ2MjQgOTYuMDMxNiAxMi4xMThDOTguMDA5IDEwLjcxNjkgOTkuMzI3MiA3LjY2ODQgOTguNjQ5OCA1LjI0NDc3WiIgZmlsbD0iI0YzNzU0MCIvPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05MS4xNDI4IDI3LjgxNDlDOTEuOTMwMSAyNy4xMTQzIDkyLjk3MzggMjYuNDUxNiA5My44MTYgMjUuODgzNkw5NS40NjM4IDI0LjgyMzJDOTcuODQ0IDIwLjAzMjggMTAxLjA0OCAxNS41NDUzIDEwNC40MTcgMTEuNDU1NEMxMDcuNDkzIDcuNjg3NDQgMTExLjA4MiAzLjc0OTA1IDExNSAwLjkwODg2TDExNC4zNDEgMEMxMTAuMTQ4IDIuMjkxMDggMTA2LjMwMyA1LjQxNTI5IDEwMi44NDIgOC43NjY3MUM5OS4xOTg5IDEyLjMwNzUgOTUuODQ4MyAxNi4yMjY5IDkzLjE1NjggMjAuNTgxOUw5My4wNDcgMjAuNzMzNEw5Mi4yNzggMTkuMDY3MUM5MS43MTA0IDE3Ljg1NTMgOTAuMTM1OCAxNC42NTU0IDg4LjU0MjkgMTQuNjU1NEM4Ni45NSAxNC42NTU0IDg1LjQzMDMgMTUuODI5MyA4NC4zMTM1IDE2Ljk0NjRDODUuMzAyMiAxNy4zMDYyIDg2LjEyNjEgMTcuOTg3OCA4Ni43ODUyIDE4LjgyMUM4Ny44MTA1IDIwLjA3MDYgODguNjM0NSAyMS43NzQ4IDg5LjI5MzYgMjMuMjcwNkw4OS45MTYxIDI0LjY3MTdDOTAuMzE4OSAyNS42NzUzIDkwLjgxMzMgMjYuNzkyNCA5MS4xNDI4IDI3LjgxNDlaIiBmaWxsPSIjRjM3NTQwIi8+DQo8L3N2Zz4NCg==';
-        this.itemsPerRow = 4;
-        this.iconTextVerticalMargin = 25;
-        this.items = [[]];
-        this.zIndex = 1;
-        this.imageErrorResolverType = EnumImageResolverType.LOGO;
-        this.headerHeight = 0;
-        this.width = 400;
-        this.layoutService.modulePanelWidth$.subscribe(x => this.width = x);
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
-        this.subscriptions.push(this.authService.data$.subscribe(x => this.isRoot = !!x?.isRoot));
-        this.scrollWidth = this.layoutService.modulePanelWidth$.value - this.layoutService.basicSpacing * 2;
-        this.scrollHeight = window.innerHeight - this.layoutService.headerHeight$.value - this.layoutService.basicSpacing * 2;
-        this.itemWidth = this.scrollWidth / 4;
-    }
-    transformTo2DArray(flatList) {
-        const result = [];
-        for (let i = 0; i < flatList.length; i += this.itemsPerRow) {
-            const row = flatList.slice(i, i + this.itemsPerRow);
-            // If the last row has fewer than itemsPerRow, pad it with undefineds
-            while (row.length < this.itemsPerRow) {
-                row.push(undefined);
-            }
-            result.push(row);
-        }
-        return result;
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.designMode = localStorage.getItem('moduleDesignMode') === 'on';
-            this.zIndex = this.domService.getMaxZIndex() + 1;
-            // this.listenerFn = this.renderer.listen('window', 'click', (e: Event) => {
-            //   if (!this.designMode) {
-            //     if (this.container && !!!this.container.nativeElement.contains(e.target)) {
-            //       this.ahs.activeKey$.next(undefined);
-            //     }
-            //   }
-            // });
-            this.subscriptions.push(this.navigatorService.rootNavigatorItems$.subscribe(x => {
-                // Transform the flat list into a 2D array
-                this.items = this.transformTo2DArray(x);
-            }));
-            this.subscriptions.push(this.layoutService.headerHeight$.subscribe(x => {
-                this.headerHeight = x;
-            }));
-            if (!!localStorage) {
-                const activeRootMenuItemId = Number(localStorage.getItem('activeRootMenuItemId') || '0');
-                this.navigatorService.activeRootMenuItemId$.next(activeRootMenuItemId);
-            }
-            if (window.innerWidth < this.layoutService.modulePanelWidth$.value) {
-                this.layoutService.modulePanelWidth$.next(window.innerWidth);
-            }
-        });
-    }
-    onDesignModeClick(e) {
-        e.stopPropagation();
-        if (localStorage.getItem('moduleDesignMode') === 'on') {
-            localStorage.setItem('moduleDesignMode', 'off');
-            this.designMode = false;
-        }
-        else {
-            localStorage.setItem('moduleDesignMode', 'on');
-            this.designMode = true;
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.map(x => x?.unsubscribe());
-        if (this.listenerFn)
-            this.listenerFn();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerComponent, deps: [{ token: MultiLanguageService }, { token: ApplicationHelpService }, { token: i0.Renderer2 }, { token: NavigatorService }, { token: LayoutService }, { token: DomService }, { token: MenuService }, { token: SysMenuService }, { token: AuthService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreRootMenuItemPickerComponent, isStandalone: true, selector: "core-root-menu-item-picker", inputs: { logoPath: "logoPath", itemsPerRow: "itemsPerRow", iconTextVerticalMargin: "iconTextVerticalMargin" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-root-menu-item-picker-container\" [ngStyle]=\"{\r\n    zIndex: zIndex,\r\n}\">\r\n    <div class=\"mudule-picker-header d-flex d-flex-between\" [ngStyle]=\"{\r\n        height: 59 + 'px'\r\n    }\">\r\n        <div class=\"HEADER_LOGO\">\r\n            <div class=\"logo-wrapper d-flex\">\r\n                <img src=\"logoPath\" class=\"lg\" [ngStyle]=\"{\r\n                    width: '130px',\r\n                    height: '59px',\r\n                    transform: 'translate(0, -5px)'\r\n                }\" appImageErrorResolver [type]=\"imageErrorResolverType\">\r\n            </div>\r\n        </div>\r\n        @if (!!isRoot) {\r\n            <i \r\n                [class.feather-square]=\"!designMode\" \r\n                [class.feather-play]=\"!!designMode\" \r\n                class=\"stop-mode-icon\" \r\n                (click)=\"onDesignModeClick($event)\"\r\n                [appTooltip]=\"!designMode ? 'Chuy\u1EC3n sang ch\u1EBF \u0111\u1ED9 thi\u1EBFt k\u1EBF' : 'Chuy\u1EC3n v\u1EC1 ch\u1EBF \u0111\u1ED9 b\u00ECnh th\u01B0\u1EDDng'\"\r\n            ></i>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-bottom\" [ngStyle]=\"{\r\n        width: width + 'px'\r\n    }\">\r\n        <core-line></core-line>\r\n    </div>\r\n\r\n    <div class=\"h15\"></div>\r\n\r\n    <div class=\"scroll\" [ngStyle]=\"{\r\n        width: width + 'px',\r\n        height: scrollHeight + 'px'\r\n    }\">\r\n        @for (row of items; track $index) {\r\n            <div class=\"menu-row\">\r\n                @for (item of row; track $index) {\r\n                    <app-module-item [$item]=\"item\" [$width]=\"itemWidth\" [$height]=\"100\" [$iconTextVerticalMargin]=\"iconTextVerticalMargin\"></app-module-item>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".core-root-menu-item-picker-container .header-bottom{position:absolute;top:59px;left:0}.core-root-menu-item-picker-container .scroll{overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;-ms-overflow-style:none}.core-root-menu-item-picker-container .scroll::-webkit-scrollbar{display:none}.core-root-menu-item-picker-container .menu-row{display:flex;flex-wrap:nowrap;justify-content:space-between}.core-root-menu-item-picker-container .stop-mode-icon{cursor:pointer;width:24px;height:24px;font-size:24px}\n"], dependencies: [{ kind: "component", type: CoreLineComponent, selector: "core-line" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ModuleItemComponent, selector: "app-module-item", inputs: ["$item", "$itemPadding", "$width", "$height", "$iconTextVerticalMargin"] }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-root-menu-item-picker', imports: [
-                        CoreLineComponent,
-                        NgStyle,
-                        ModuleItemComponent,
-                        ImageErrorResolverDirective,
-                        TooltipDirective,
-                    ], template: "<div #container class=\"core-root-menu-item-picker-container\" [ngStyle]=\"{\r\n    zIndex: zIndex,\r\n}\">\r\n    <div class=\"mudule-picker-header d-flex d-flex-between\" [ngStyle]=\"{\r\n        height: 59 + 'px'\r\n    }\">\r\n        <div class=\"HEADER_LOGO\">\r\n            <div class=\"logo-wrapper d-flex\">\r\n                <img src=\"logoPath\" class=\"lg\" [ngStyle]=\"{\r\n                    width: '130px',\r\n                    height: '59px',\r\n                    transform: 'translate(0, -5px)'\r\n                }\" appImageErrorResolver [type]=\"imageErrorResolverType\">\r\n            </div>\r\n        </div>\r\n        @if (!!isRoot) {\r\n            <i \r\n                [class.feather-square]=\"!designMode\" \r\n                [class.feather-play]=\"!!designMode\" \r\n                class=\"stop-mode-icon\" \r\n                (click)=\"onDesignModeClick($event)\"\r\n                [appTooltip]=\"!designMode ? 'Chuy\u1EC3n sang ch\u1EBF \u0111\u1ED9 thi\u1EBFt k\u1EBF' : 'Chuy\u1EC3n v\u1EC1 ch\u1EBF \u0111\u1ED9 b\u00ECnh th\u01B0\u1EDDng'\"\r\n            ></i>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-bottom\" [ngStyle]=\"{\r\n        width: width + 'px'\r\n    }\">\r\n        <core-line></core-line>\r\n    </div>\r\n\r\n    <div class=\"h15\"></div>\r\n\r\n    <div class=\"scroll\" [ngStyle]=\"{\r\n        width: width + 'px',\r\n        height: scrollHeight + 'px'\r\n    }\">\r\n        @for (row of items; track $index) {\r\n            <div class=\"menu-row\">\r\n                @for (item of row; track $index) {\r\n                    <app-module-item [$item]=\"item\" [$width]=\"itemWidth\" [$height]=\"100\" [$iconTextVerticalMargin]=\"iconTextVerticalMargin\"></app-module-item>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".core-root-menu-item-picker-container .header-bottom{position:absolute;top:59px;left:0}.core-root-menu-item-picker-container .scroll{overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;-ms-overflow-style:none}.core-root-menu-item-picker-container .scroll::-webkit-scrollbar{display:none}.core-root-menu-item-picker-container .menu-row{display:flex;flex-wrap:nowrap;justify-content:space-between}.core-root-menu-item-picker-container .stop-mode-icon{cursor:pointer;width:24px;height:24px;font-size:24px}\n"] }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: ApplicationHelpService }, { type: i0.Renderer2 }, { type: NavigatorService }, { type: LayoutService }, { type: DomService }, { type: MenuService }, { type: SysMenuService }, { type: AuthService }, { type: AppConfigService }], propDecorators: { logoPath: [{
-                type: Input
-            }], itemsPerRow: [{
-                type: Input
-            }], iconTextVerticalMargin: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container']
-            }] } });
-
-class CoreRootMenuItemPickerService {
-    constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class ComPartyService {
-    constructor(recursiveService, alertService) {
-        this.recursiveService = recursiveService;
-        this.alertService = alertService;
-        this.instances = [];
-        this.loading = true;
-        this.comTreeData$ = new BehaviorSubject([]);
-        this.comTreeDataWithPeople$ = new BehaviorSubject([]);
-        this.linerData$ = new BehaviorSubject([]);
-        this.buildTreeFlag$ = new BehaviorSubject(false);
-        this.status$ = new BehaviorSubject({
-            selectedKey: undefined,
-            activeKeys: [],
-            checkedKeys: [],
-            expandedKeys: [],
-            checkInheritance: true
-        });
-        this.linerData$.subscribe(xs => {
-            const idCountMap = new Map();
-            xs.forEach(item => {
-                const id = item.id;
-                idCountMap.set(id, (idCountMap.get(id) ?? 0) + 1);
-            });
-            const duplicates = Array.from(idCountMap.entries())
-                .filter(([_, count]) => count > 1)
-                .map(([id]) => id);
-            if (!!duplicates.length) {
-                if (isDevMode()) {
-                    alertService.error('🔁 Duplicate IDs: ' + duplicates.reduce((a, c) => a + ";" + c, ''), alertOptions);
-                }
-            }
-        });
-    }
-    buildTreeData(status = {
-        selectedKey: undefined,
-        activeKeys: [],
-        checkedKeys: [],
-        expandedKeys: [],
-        checkInheritance: true
-    }) {
-        this.loading = true;
-        const cloneCopy = JSON.parse(JSON.stringify(this.linerData$.value));
-        if (typeof Worker !== 'undefined') {
-            // Create a new
-            console.log("🟢🟢 Worker works");
-            const worker = new Worker(liner_to_nested_array_script);
-            worker.addEventListener('message', ({ data }) => {
-                const newData = data.list;
-                this.comTreeData$.next(newData);
-                this.loading = false;
-            });
-            worker.postMessage({
-                list: cloneCopy,
-                keyField: 'id',
-                titleField: 'name',
-                parentField: 'parentId',
-                activeField: 'active',
-                checkedField: 'checked',
-                expandedField: 'expand',
-                status
-            });
-        }
-        else {
-            // Web workers are not supported in this environment.
-            // You should add a fallback so that your program still executes correctly.
-            this.recursiveService
-                .linerArrayToNestedArray(cloneCopy, 'id', 'name', 'parentId', 'active', 'checked', 'expand', status)
-                .subscribe((obj) => {
-                const newData = obj.list;
-                this.comTreeData$.next(newData);
-                this.loading = false;
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, deps: [{ token: RecursiveService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ComPartyService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: RecursiveService }, { type: AlertService }] });
-
-class CoreComTreeComponent extends CoreFormControlBaseComponent {
-    writeValue(obj) {
-        this.value = obj;
-        switch (this.accessorMode) {
-            case EnumCoreOrgTreeaAccessorMode.CHECKED:
-                if (!!obj) {
-                    const checkedKeys = [];
-                    this.checkedIds = obj; // <=== 24/10/2023
-                    obj.map(x => checkedKeys.push(x.toString()));
-                    this.loading = true;
-                    this.recursiveService.writeValueChecked(checkedKeys, this.data, this.disabledLoopExpand).subscribe(_ => {
-                        this.loading = false;
-                        if (!!this.data && !!this.data?.length)
-                            this.data[0].tree$Expanded = true;
-                    });
-                }
-                break;
-            case EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE:
-            case EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE:
-                if (!!obj) {
-                    const activatedKeys = [];
-                    obj.map(x => activatedKeys.push(x.toString()));
-                    this.loading = true;
-                    this.recursiveService.writeValueActivated(activatedKeys, this.data, this.disabledLoopExpand).subscribe(_ => {
-                        this.loading = false;
-                        if (!!this.data && !!this.data?.length)
-                            this.data[0].tree$Expanded = true;
-                    });
-                }
-                break;
-            default:
-                break;
-        }
-        if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED) {
-        }
-        else /* EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE or EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE */ {
-        }
-    }
-    setDisabledState(disabled) {
-        this.disabled = disabled;
-    }
-    constructor(
-    //public override injector: Injector,
-    authService, recursiveService, mls, layoutService, coreOrgTreeService, 
-    // private coreOrgTreeState: CoreOrgTreeState,
-    alertService, organizationService) {
-        super( /*injector*/);
-        this.authService = authService;
-        this.recursiveService = recursiveService;
-        this.mls = mls;
-        this.layoutService = layoutService;
-        this.coreOrgTreeService = coreOrgTreeService;
-        this.alertService = alertService;
-        this.organizationService = organizationService;
-        this.lineColor = 'transparent';
-        this.accessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
-        //TO BE NEW
-        this.searchMode = EnumCoreOrgTreeaSearchMode.REDUCE;
-        this.excludedIds$ = new BehaviorSubject([]); // 2024-05-10: to be implemented
-        this.stateIsolated$ = new BehaviorSubject(false);
-        this.itemDoubleClick = new EventEmitter();
-        this.itemClick = new EventEmitter();
-        this.showSearch = false;
-        this.hiddenToolClickStream$ = new BehaviorSubject('');
-        this.value = [];
-        this.activeIds = [];
-        this.checkedIds = [];
-        this.subscriptions = [];
-        this.search$ = new Subject();
-        this.searchPlaceholder = "Tìm kiếm...";
-        this.checkInheritance = true; // default value is true
-        this.showDissolved = false; // default value is false
-        this.initializing = true;
-        // this.reduced$ = this.coreOrgTreeState.coreOrgTreeReduced$;
-        this.initializing = false;
-    }
-    ngOnChanges(changes) {
-        if (changes['height']) {
-            this.resizeHeight();
-        }
-    }
-    ngOnInit() {
-        super.register();
-        //this.layoutService.leftbarOpen$.next(false);
-        this.instanceNumber = new Date().getTime();
-        const newInstance = {
-            instanceNumber: this.instanceNumber,
-            selectedKey$: new BehaviorSubject(undefined),
-            activeKeys$: new BehaviorSubject([]),
-            checkedKeys$: new BehaviorSubject([]),
-            expandedKeys$: new BehaviorSubject([]),
-            checkInheritance$: new BehaviorSubject(true)
-        };
-        this.organizationService.instances.push(newInstance);
-        // Check xem chiều cao height có được truyền vào hay không
-        if (this.height === undefined) {
-            if (isDevMode()) {
-                //this.alertService.warn("CoreOrgTree không nhận được chiều cao (height) truyền vào từ lớp ngoài. Chiều cao mặc định sẽ được tính toán dựa vào bố cục chính.", alertOptions);
-            }
-            this.subscriptions.push(this.layoutService.contentContainerHeight$.subscribe(x => {
-                // basicSpacing là paddingBottom của lớp content-container
-                this.height = x - this.layoutService.corePageHeaderHeight - this.layoutService.basicSpacing;
-            }));
-        }
-        this.subscriptions.push(this.organizationService.linerData$.subscribe((x) => {
-            this.linnerOrgArray = x;
-        }));
-        this.subscriptions.push(this.organizationService.buildTreeFlag$.pipe(skip(1)).subscribe(_ => {
-            this.buildTreeData();
-        }));
-        this.subscriptions.push(this.stateIsolated$.subscribe(x => {
-            if (x) {
-                if (!!this.statusSubscription) {
-                    this.statusSubscription.unsubscribe();
-                }
-            }
-            else {
-                if (!this.statusSubscription) {
-                    this.statusSubscription = this.organizationService.status$.subscribe((x) => {
-                        console.log("this.organizationService.status$ changes", x);
-                        const newActiveIds = [];
-                        x.activeKeys.map((k) => {
-                            newActiveIds.push(Number(k));
-                        });
-                        this.activeIds = newActiveIds;
-                        if (this.accessorMode !== EnumCoreOrgTreeaAccessorMode.CHECKED) {
-                            this.value = this.activeIds;
-                            this.onChange(this.activeIds);
-                        }
-                        this.selectedKey = x.selectedKey;
-                    });
-                }
-            }
-        }));
-        this.subscriptions.push(this.coreOrgTreeService.showSearch$.subscribe(x => this.showSearch = x));
-        this.subscriptions.push(this.hiddenToolClickStream$.pipe(buffer(this.hiddenToolClickStream$.pipe(debounceTime(250))), map$1(clicks => clicks.length), filter(clicksLength => clicksLength >= 5))
-            .subscribe(_ => {
-            this.coreOrgTreeService.showSearch$.next(!this.coreOrgTreeService.showSearch$.value);
-        }));
-        this.subscriptions.push(this.search$
-            .pipe(filter((x) => x !== null), debounceTime(500), distinctUntilChanged(), switchMap((text) => {
-            console.log('switchMap works');
-            this.loading = true;
-            // AUG 2024 NEW : MUST BE TESTED
-            if (this.searchMode === EnumCoreOrgTreeaSearchMode.HIGHLIGHT) {
-                return this.recursiveService.findItem(text, this.data);
-            }
-            else {
-                return of(this.recursiveService.reducingFilter(this.scrollContainer, text));
-            }
-        }))
-            .subscribe((x) => {
-            this.loading = false;
-            // if (this.searchMode === EnumCoreOrgTreeaSearchMode.REDUCE) {
-            //   this.dataFiltered = x as IOrgTreeItem[];
-            // }
-        }));
-        this.subscriptions.push(this.organizationService.status$
-            .pipe(filter((value) => !!!this.initializing && !!value))
-            .subscribe((x) => {
-            if (!!localStorage) {
-                localStorage.setItem('coreOrgTreeStatus', JSON.stringify(x));
-            }
-        }));
-        this.subscriptions.push(this.mls.lang$.subscribe((x) => (this.lang = x)));
-    }
-    resizeHeight() {
-        // height is not given and the tree resize as standard
-        if (!!!this.height) {
-            const sizeHeaderHeight = Number(getComputedStyle(document.documentElement)
-                .getPropertyValue('--size-header-height')
-                .replace('px', ''));
-            const sizeCorePageHeaderHeight = Number(getComputedStyle(document.documentElement)
-                .getPropertyValue('--size-core-page-header-height')
-                .replace('px', ''));
-            const containerHeight = window.innerHeight - sizeHeaderHeight - sizeCorePageHeaderHeight;
-            const pageHeaderHeight = Number(getComputedStyle(document.documentElement)
-                .getPropertyValue('--size-core-page-header-height')
-                .replace('px', ''));
-            const paginationHeight = Number(getComputedStyle(document.documentElement)
-                .getPropertyValue('--size-core-pagination-height')
-                .replace('px', ''));
-            const sizeMarginCorePaginationFull = Number(getComputedStyle(document.documentElement)
-                .getPropertyValue('--size-margin-core-pagination')
-                .replace('px', ''));
-            const height = containerHeight - pageHeaderHeight - paginationHeight + sizeMarginCorePaginationFull;
-            console.log(height);
-            this.container?.nativeElement.style.setProperty('--height', height + 'px');
-        }
-        else {
-            this.container?.nativeElement.style.setProperty('--height', this.height + 'px');
+class CoreLazyMountComponent {
+    constructor() {
+        this.vcRef = inject(ViewContainerRef);
+    }
+    set props(value) {
+        this._props = value;
+        this.assignInputs();
+    }
+    async ngOnInit() {
+        if (this.loadComponent) {
+            const componentType = await this.loadComponent();
+            this.componentRef = this.vcRef.createComponent(componentType);
+            this.assignInputs();
         }
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.subscriptions.push(this.organizationService.comTreeData$.subscribe((x) => {
-                this.data = x;
-                //this.dataFiltered = JSON.parse(JSON.stringify(x));
-                console.log("new Data coming", this.data, new Date().getTime());
-                if (!!this.data) {
-                    if (!!this.data.length)
-                        this.data[0].tree$Expanded = true;
-                }
-            }));
-            this.subscriptions.push(this.coreOrgTreeService.arrowFontSize$.subscribe(x => {
-                this.container?.nativeElement.style.setProperty('--arrow-font-size', x + 'px');
-            }));
-            this.subscriptions.push(this.coreOrgTreeService.titleWrapperMaxWidth$.pipe(filter(x => !!x)).subscribe(x => {
-                this.container?.nativeElement.style.setProperty('--title-wrapper-max-width', x + 'px');
-            }));
-            this.subscriptions.push(this.organizationService.status$.subscribe(x => {
-                if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE && !!x.activeKeys) {
-                    this.onChange(x.activeKeys.map(i => Number(i)));
-                }
-                else if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE) {
-                    // tạm thời bỏ qua
-                }
-                else if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED && !!x.checkedKeys) {
-                    this.onChange(x.checkedKeys.map(i => Number(i)));
-                }
-            }));
-        });
+    assignInputs() {
+        if (this.componentRef && this._props) {
+            Object.assign(this.componentRef.instance, this._props);
+            this.componentRef.changeDetectorRef.markForCheck();
+        }
     }
-    onItemClickLocal(e) {
-        this.linnerOrgArray.map((x) => (x.active = false));
-        setTimeout(() => this.buildTreeData());
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreLazyMountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: CoreLazyMountComponent, isStandalone: true, selector: "core-lazy-mount", inputs: { loadComponent: "loadComponent", props: "props" }, ngImport: i0, template: "", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreLazyMountComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-lazy-mount', imports: [], template: "" }]
+        }], propDecorators: { loadComponent: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }] } });
+
+class ModuleItemComponent extends BaseComponent {
+    constructor(mls, navigatorService, cdr, menuService) {
+        super(mls);
+        this.mls = mls;
+        this.navigatorService = navigatorService;
+        this.cdr = cdr;
+        this.menuService = menuService;
+        this.$item = input.required();
+        this.$itemPadding = input(5);
+        this.$width = input.required();
+        this.$height = input.required();
+        this.$iconTextVerticalMargin = input(25);
+        this.$active = signal(false);
+        this.iconClickStream$ = new BehaviorSubject('');
     }
-    onToggleItem(e) {
-        const cloneCopy = JSON.parse(JSON.stringify(this.linnerOrgArray));
-        const filter = cloneCopy.filter((x) => x.id === e.id);
-        if (filter.length === 1) {
-            filter[0].expand = !!!e.expand;
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => {
+            this.lang = x;
+            this.cdr.markForCheck();
+        }));
+        if (!!localStorage) {
+            const activeRootMenuItemId = Number(localStorage.getItem('activeRootMenuItemId') || '0');
+            const active = activeRootMenuItemId === this.$item()?.id;
+            this.$active.set(active);
         }
-        this.linnerOrgArray = cloneCopy;
-        setTimeout(() => this.buildTreeData());
     }
-    // buildTreeData(): void {
-    //   this.loading = true;
-    //   const cloneCopy = JSON.parse(JSON.stringify(this.linnerOrgArray));
-    //   if (typeof Worker !== 'undefined') {
-    //     // Create a new
-    //     console.log("🟢🟢 Worker works");
-    //     this.worker = new Worker(liner_to_nested_array_script);
-    //     this.worker.addEventListener('message', ({ data }) => {
-    //       this.data = data.list;
-    //       //this.dataFiltered = JSON.parse(JSON.stringify(data.list));
-    //       if (!!this.data && !!this.data?.length) this.data[0].tree$Expanded = true;
-    //       this.loading = false;
-    //     });
-    //     this.worker.postMessage({
-    //       list: cloneCopy,
-    //       keyField: 'id',
-    //       titleField: 'name',
-    //       parentField: 'parentId',
-    //       activeField: 'active',
-    //       //inheritantActiveField: 'inheritantActive',
-    //       checkedField: 'checked',
-    //       expandedField: 'expand',
-    //     });
-    //   } else {
-    //     // Web workers are not supported in this environment.
-    //     // You should add a fallback so that your program still executes correctly.
-    //     const status = this.organizationService.status$.value;
-    //     this.subscriptions.push(
-    //       this.recursiveService
-    //         .linerArrayToNestedArray(
-    //           cloneCopy,
-    //           'id',
-    //           'name',
-    //           'parentId',
-    //           'active',
-    //           'checked',
-    //           'expand',
-    //           //status
-    //         )
-    //         .subscribe((obj) => {
-    //           this.data = obj.list;
-    //           //this.dataFiltered = JSON.parse(JSON.stringify(obj.list));
-    //           if (!!this.data && !!this.data?.length) this.data[0].tree$Expanded = true;
-    //           this.loading = false;
-    //         })
-    //     );
-    //   }
-    // }
-    buildTreeData() {
-        this.loading = true;
-        const cloneCopy = JSON.parse(JSON.stringify(this.linnerOrgArray));
-        // ✅ ADD THIS FILTER
-        const filteredList = !this.showDissolved
-            ? cloneCopy.filter(x => x.active === true)
-            : cloneCopy;
-        if (typeof Worker !== 'undefined') {
-            this.worker = new Worker(liner_to_nested_array_script);
-            this.worker.addEventListener('message', ({ data }) => {
-                this.data = data.list;
-                if (!!this.data?.length)
-                    this.data[0].tree$Expanded = true;
-                this.loading = false;
-            });
-            // ✅ USE filteredList INSTEAD OF cloneCopy
-            this.worker.postMessage({
-                list: filteredList,
-                keyField: 'id',
-                titleField: 'name',
-                parentField: 'parentId',
-                activeField: 'active',
-                checkedField: 'checked',
-                expandedField: 'expand',
-            });
+    onClick(e, item) {
+        this.iconClickStream$.next(crypto.randomUUID());
+        if (!!item) {
+            this.navigatorService.clickedItem$.next(item);
         }
-        else {
-            this.subscriptions.push(this.recursiveService
-                .linerArrayToNestedArray(filteredList, // ✅ use filteredList
-            'id', 'name', 'parentId', 'active', 'checked', 'expand')
-                .subscribe((obj) => {
-                this.data = obj.list;
-                if (!!this.data?.length)
-                    this.data[0].tree$Expanded = true;
-                this.loading = false;
-            }));
+        if (localStorage.getItem('moduleDesignMode') === 'on')
+            return;
+        this.navigatorService.activeRootMenuItemId$.next(item?.id);
+        if (!!localStorage) {
+            localStorage.setItem('activeRootMenuItemId', (item?.id || 0).toString());
         }
+        this.menuService.isOpen$.next(true); // trigger the LeftBar to be opened at the first time
     }
-    onExpandTogglerClick(e, event) {
-        event.stopPropagation();
-        const newValue = !e.tree$Expanded;
-        e.tree$Expanded = newValue;
-        // updating status with newValue
-        const currentExpandedIds = this.organizationService.status$.value?.expandedKeys;
-        let newExpandedIds = currentExpandedIds?.filter((_) => !!!currentExpandedIds.includes(e.id.toString()));
-        if (newValue) {
-            newExpandedIds?.push(e.id.toString());
-        }
-        newExpandedIds?.sort();
-        const newExpandedKeys = [];
-        newExpandedIds.map((x) => newExpandedKeys.push(x.toString()));
-        this.organizationService.status$.next({
-            ...this.organizationService.status$.value,
-            expandedKeys: newExpandedKeys,
-        });
+    ngAfterViewInit() {
+        this.subscriptions.push(this.navigatorService.activeRootMenuItemId$.subscribe(x => {
+            const active = x === this.$item()?.id;
+            this.$active.set(active);
+        }));
+        this.subscriptions.push(this.iconClickStream$.pipe(buffer(this.iconClickStream$.pipe(debounceTime(250))), map$1(clicks => clicks.length), filter(clicksLength => clicksLength >= 5))
+            .subscribe(_ => {
+            this.navigatorService.showEditSvg$.next(true);
+        }));
     }
-    onItemCheck(e, newValue) {
-        this.itemClick?.emit(e);
-        if (this.accessorMode !== EnumCoreOrgTreeaAccessorMode.CHECKED)
-            return;
-        // We have this var to hold nodes that are being changed
-        let toggledIds;
-        // We should calculate a new state into this var: 
-        const newCheckedIds = JSON.parse(JSON.stringify(this.checkedIds));
-        // We will call this function after toggledIds changed
-        const changeValue = () => {
-            // If newValue === true, we will disctintly push changed ids to the state
-            // Otherwise we will remove them from the state
-            if (!!newValue) {
-                toggledIds.map(x => {
-                    if (!!!newCheckedIds.includes(x)) {
-                        newCheckedIds.push(x);
-                    }
-                });
-                // Then asign the state to the newCheckedIds
-                this.checkedIds = newCheckedIds;
-            }
-            else {
-                const filter = newCheckedIds.filter(x => !!!toggledIds.includes(x));
-                // Then asign the state to the filter
-                this.checkedIds = filter;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ModuleItemComponent, deps: [{ token: MultiLanguageService }, { token: NavigatorService }, { token: i0.ChangeDetectorRef }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ModuleItemComponent, isStandalone: true, selector: "app-module-item", inputs: { $item: { classPropertyName: "$item", publicName: "$item", isSignal: true, isRequired: true, transformFunction: null }, $itemPadding: { classPropertyName: "$itemPadding", publicName: "$itemPadding", isSignal: true, isRequired: false, transformFunction: null }, $width: { classPropertyName: "$width", publicName: "$width", isSignal: true, isRequired: true, transformFunction: null }, $height: { classPropertyName: "$height", publicName: "$height", isSignal: true, isRequired: true, transformFunction: null }, $iconTextVerticalMargin: { classPropertyName: "$iconTextVerticalMargin", publicName: "$iconTextVerticalMargin", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-item-wrapper\" \r\n    [class.active] = \"$active()\"\r\n    (click)=\"onClick($event, $item())\" [ngStyle]=\"{\r\n    width: $width() + 'px',\r\n    height: $height() + 'px',\r\n    padding: $itemPadding() + 'px',\r\n    visibility: !!$item() ? 'visible' : 'hidden'\r\n}\">\r\n    @if (!!$item()) {\r\n    <div class=\"d-flex d-flex-v d-flex-center\">\r\n        @if ($item()!.iconSvg) {\r\n        <div class=\"d-block\">\r\n            <i class=\"module-icon\">\r\n                <span [innerHtml]=\"$item()!.iconSvg! | stringHtml\"></span>\r\n            </i>\r\n        </div>\r\n        } @else if ($item()!.iconClass) {\r\n        <div>\r\n            <i [class]=\"$item()!.iconClass + ' module-icon'\"></i>\r\n        </div>\r\n        }\r\n        <div [ngStyle]=\"{\r\n            height: $iconTextVerticalMargin() + 'px'\r\n        }\"></div>\r\n        <div class=\"module-code\" [appTooltip]=\"$item()!.code! | translate: lang\" [ngStyle]=\"{\r\n            width: $width() - $itemPadding() * 2 + 'px'\r\n        }\">{{ $item()!.code! | translate: lang}}</div>\r\n    </div>\r\n    }\r\n</div>", styles: [".menu-item-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.menu-item-wrapper:not(.active){cursor:pointer}.menu-item-wrapper:not(.active):hover{background-color:var(--color-bg-main)}.menu-item-wrapper.active{color:var(--color-basic-orange)}.module-code{font-size:var(--typo-basic-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }, { kind: "pipe", type: StringHtmlPipe, name: "stringHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ModuleItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-module-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgStyle,
+                        TooltipDirective,
+                        StringHtmlPipe,
+                        TranslatePipe,
+                    ], template: "<div class=\"menu-item-wrapper\" \r\n    [class.active] = \"$active()\"\r\n    (click)=\"onClick($event, $item())\" [ngStyle]=\"{\r\n    width: $width() + 'px',\r\n    height: $height() + 'px',\r\n    padding: $itemPadding() + 'px',\r\n    visibility: !!$item() ? 'visible' : 'hidden'\r\n}\">\r\n    @if (!!$item()) {\r\n    <div class=\"d-flex d-flex-v d-flex-center\">\r\n        @if ($item()!.iconSvg) {\r\n        <div class=\"d-block\">\r\n            <i class=\"module-icon\">\r\n                <span [innerHtml]=\"$item()!.iconSvg! | stringHtml\"></span>\r\n            </i>\r\n        </div>\r\n        } @else if ($item()!.iconClass) {\r\n        <div>\r\n            <i [class]=\"$item()!.iconClass + ' module-icon'\"></i>\r\n        </div>\r\n        }\r\n        <div [ngStyle]=\"{\r\n            height: $iconTextVerticalMargin() + 'px'\r\n        }\"></div>\r\n        <div class=\"module-code\" [appTooltip]=\"$item()!.code! | translate: lang\" [ngStyle]=\"{\r\n            width: $width() - $itemPadding() * 2 + 'px'\r\n        }\">{{ $item()!.code! | translate: lang}}</div>\r\n    </div>\r\n    }\r\n</div>", styles: [".menu-item-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-user-select:none;user-select:none}.menu-item-wrapper:not(.active){cursor:pointer}.menu-item-wrapper:not(.active):hover{background-color:var(--color-bg-main)}.menu-item-wrapper.active{color:var(--color-basic-orange)}.module-code{font-size:var(--typo-basic-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: NavigatorService }, { type: i0.ChangeDetectorRef }, { type: MenuService }] });
+
+class CoreRootMenuItemPickerComponent extends BaseComponent {
+    constructor(mls, ahs, renderer, navigatorService, layoutService, domService, menuService, sysMenuService, authService, appConfigService) {
+        super(mls);
+        this.mls = mls;
+        this.ahs = ahs;
+        this.renderer = renderer;
+        this.navigatorService = navigatorService;
+        this.layoutService = layoutService;
+        this.domService = domService;
+        this.menuService = menuService;
+        this.sysMenuService = sysMenuService;
+        this.authService = authService;
+        this.appConfigService = appConfigService;
+        this.logoPath = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE1IiBoZWlnaHQ9IjI5IiB2aWV3Qm94PSIwIDAgMTE1IDI5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDI4LjU1MjhWOC41NzY4NkgyLjU2MzI5VjE2LjgxMzRIMTIuNTIzNVY4LjU3Njg2SDE1LjA4NjhWMjguNTMzOUgxMi41MjM1VjE5LjE0MjNIMi41ODE2VjI4LjUzMzlIMFYyOC41NTI4Wk0xOS4wNzgyIDExLjM2MDJWOC41NzY4NkgyMS40NTg0VjExLjM2MDJIMTkuMDc4MlpNMTkuMDc4MiAyOC41NTI4VjE0LjA4NjhIMjEuNDU4NFYyOC41NTI4SDE5LjA3ODJaTTI0LjIyMzEgMjIuMDc3MkwyOC4wMzE1IDIxLjY3OTZDMjguMjUxMiAyMi45ODYxIDI4LjcyNzIgMjMuOTUxNyAyOS40MjMgMjQuNTc2NkMzMC4xMTg3IDI1LjIwMTQgMzEuMDcwOCAyNS41MDQ0IDMyLjI0MjYgMjUuNTA0NEMzMy40ODc2IDI1LjUwNDQgMzQuNDIxNCAyNS4yMjAzIDM1LjA2MjIgMjQuNjcxMkMzNS43MDMgMjQuMTIyMSAzNi4wMTQzIDIzLjQ5NzMgMzYuMDE0MyAyMi43NTg5QzM2LjAxNDMgMjIuMjg1NSAzNS44ODYxIDIxLjg2ODkgMzUuNjExNSAyMS41NDdDMzUuMzM2OCAyMS4yMjUyIDM0Ljg3OTEgMjAuOTIyMiAzNC4yMiAyMC42NzYxQzMzLjc2MjIgMjAuNTI0NiAzMi43MzY5IDIwLjIyMTYgMzEuMTI1NyAxOS44MDUxQzI5LjAzODUgMTkuMjc0OSAyNy41NzM3IDE4LjYxMjIgMjYuNzQ5OCAxNy44MTY5QzI1LjU1OTcgMTYuNzE4NyAyNC45OTIxIDE1LjM3NDQgMjQuOTkyMSAxMy44MDI4QzI0Ljk5MjEgMTIuNzgwMyAyNS4yNjY4IDExLjgxNDcgMjUuODE2IDEwLjk0MzdDMjYuMzgzNiAxMC4wNTM4IDI3LjE3MDkgOS4zNzIxMSAyOC4yMTQ1IDguOTE3NjhDMjkuMjc2NSA4LjQ0NDMyIDMwLjUyMTUgOC4yMTcxIDMyLjAwNDYgOC4yMTcxQzM0LjQyMTQgOC4yMTcxIDM2LjIzNCA4Ljc2NjIgMzcuNDYwNyA5Ljg2NDQxQzM4LjY4NzQgMTAuOTgxNSAzOS4zMDk5IDEyLjQ1ODQgMzkuMzgzMiAxNC4zMTRMMzUuNDgzMyAxNC40NjU1QzM1LjMxODUgMTMuNDI0MSAzNC45NzA3IDEyLjY4NTcgMzQuNDIxNCAxMi4yNTAyQzMzLjg3MjEgMTEuODE0NyAzMy4wNjY1IDExLjU2ODUgMzEuOTY3OSAxMS41Njg1QzMwLjg1MTEgMTEuNTY4NSAyOS45NzIyIDExLjgxNDcgMjkuMzMxNCAxMi4yODhDMjguOTI4NiAxMi42MDk5IDI4LjcwODkgMTMuMDI2NSAyOC43MDg5IDEzLjUzNzdDMjguNzA4OSAxNC4wMTExIDI4LjkxMDMgMTQuNDI3NiAyOS4yOTQ4IDE0Ljc0OTVDMjkuNzcwOCAxNS4xODUgMzAuOTc5MiAxNS42Mzk1IDMyLjg2NTEgMTYuMTEyOEMzNC43NTA5IDE2LjU2NzIgMzYuMTYwOCAxNy4wNDA2IDM3LjA1NzkgMTcuNTUxOEMzNy45NTUxIDE4LjA0NDEgMzguNjY5MSAxOC43MjU4IDM5LjE4MTggMTkuNTc3OEMzOS42OTQ0IDIwLjQ0ODggMzkuOTUwOCAyMS40OTAyIDM5Ljk1MDggMjIuNzU4OUMzOS45NTA4IDIzLjg5NDkgMzkuNjM5NSAyNC45NzQyIDM5LjAxNyAyNS45Nzc3QzM4LjQxMjggMjYuOTgxMyAzNy41MzQgMjcuNzE5NyAzNi40MTcxIDI4LjE5MzFDMzUuMzAwMiAyOC42ODU0IDMzLjkwODcgMjguOTEyNiAzMi4yMjQzIDI4LjkxMjZDMjkuNzg5MSAyOC45MTI2IDI3LjkwMzMgMjguMzI1NiAyNi42MDMzIDI3LjE3MDZDMjUuMjY2OCAyNS45OTY3IDI0LjQ3OTUgMjQuMjkyNiAyNC4yMjMxIDIyLjA3NzJaTTQ5LjU4MTQgMTQuMDY3OVYxNy4wOTc0SDQ3LjA1NDhWMjIuOTY3MUM0Ny4wNTQ4IDI0LjE0MTEgNDcuMDczMSAyNC44NDE3IDQ3LjEwOTcgMjUuMDQ5OUM0Ny4xNjQ2IDI1LjIzOTMgNDcuMjc0NSAyNS40MDk3IDQ3LjQ1NzYgMjUuNTQyMkM0Ny42MjIzIDI1LjY3NDggNDcuODIzNyAyNS43MzE2IDQ4LjA4MDEgMjUuNzMxNkM0OC40MjggMjUuNzMxNiA0OC45MjIzIDI1LjU5OSA0OS41NjMxIDI1LjM3MThMNDkuODc0NCAyOC4zNDQ2QzQ5LjAxMzkgMjguNzIzMiA0OC4wNjE4IDI4LjkxMjYgNDYuOTYzMiAyOC45MTI2QzQ2LjMwNDEgMjguOTEyNiA0NS42OTk5IDI4Ljc5OSA0NS4xNjg5IDI4LjU3MThDNDQuNjM3OSAyOC4zNDQ2IDQ0LjIzNTEgMjguMDQxNiA0My45Nzg4IDI3LjY2MjlDNDMuNzQwOCAyNy4zMDMyIDQzLjU1NzcgMjYuNzkxOSA0My40NjYxIDI2LjE2NzFDNDMuMzkyOSAyNS43MTI2IDQzLjM1NjMgMjQuODIyNyA0My4zNTYzIDIzLjQ1OTRWMTcuMTE2NEg0MS42NzE4VjE0LjA4NjhINDMuMzU2M1YxMS4yMDg4TDQ3LjA1NDggOC45NTU1NVYxNC4wODY4SDQ5LjU4MTRWMTQuMDY3OVpNNTQuOTI3NyAxOC41MzY0TDUxLjU3NzEgMTcuOTMwNUM1MS45NjE2IDE2LjUxMDQgNTIuNjAyNSAxNS40NjkgNTMuNTE3OSAxNC43ODc0QzU0LjQ1MTcgMTQuMTI0NyA1NS44MjQ5IDEzLjc4MzkgNTcuNjM3NSAxMy43ODM5QzU5LjI4NTMgMTMuNzgzOSA2MC41MTIxIDEzLjk3MzIgNjEuMzE3NyAxNC4zODk4QzYyLjEyMzMgMTQuNzg3NCA2Mi42OTA5IDE1LjI5ODYgNjMuMDIwNCAxNS45MjM1QzYzLjM1IDE2LjU0ODMgNjMuNTE0OCAxNy42ODQ0IDYzLjUxNDggMTkuMzMxN0w2My40NTk4IDIzLjgwMDNDNjMuNDU5OCAyNS4wNjg5IDYzLjUxNDggMjUuOTk2NyA2My42NDI5IDI2LjYwMjZDNjMuNzUyOCAyNy4yMDg1IDYzLjk5MDggMjcuODcxMiA2NC4zMDIxIDI4LjU1MjhINjAuNjQwMkM2MC41MzA0IDI4LjMwNjcgNjAuNDIwNSAyNy45MjggNjAuMjkyMyAyNy40MzU3QzYwLjIzNzQgMjcuMjA4NSA2MC4xODI1IDI3LjA1NyA2MC4xNDU5IDI2Ljk4MTNDNTkuNTIzNCAyNy42MjUgNTguODQ1OSAyOC4wOTg0IDU4LjEzMTkgMjguNDIwM0M1Ny40MTc4IDI4Ljc0MjIgNTYuNjQ4OCAyOC44OTM3IDU1Ljg0MzIgMjguODkzN0M1NC40MTUxIDI4Ljg5MzcgNTMuMjc5OSAyOC40OTYgNTIuNDU2IDI3LjY4MThDNTEuNjMyMSAyNi44ODY2IDUxLjIxMSAyNS44NjQxIDUxLjIxMSAyNC42MTQ0QzUxLjIxMSAyMy44MDAzIDUxLjM5NDEgMjMuMDgwNyA1MS43Nzg1IDIyLjQzN0M1Mi4xNjMgMjEuODEyMSA1Mi42NzU3IDIxLjMwMDkgNTMuMzcxNCAyMC45NjAxQzU0LjA0ODkgMjAuNjM4MiA1NS4wMTkzIDIwLjMzNTIgNTYuMzAwOSAyMC4wNzAxQzU4LjAyMiAxOS43NDgzIDU5LjIzMDQgMTkuNDI2NCA1OS44ODk1IDE5LjE0MjNWMTguNzYzN0M1OS44ODk1IDE4LjAwNjMgNTkuNzA2NSAxNy40OTUgNTkuMzc2OSAxNy4xNzMyQzU5LjAyOSAxNi44NTEzIDU4LjM1MTYgMTYuNjgwOSA1Ny4zODEyIDE2LjY4MDlDNTYuNzIyIDE2LjY4MDkgNTYuMjA5NCAxNi44MzIzIDU1Ljg0MzIgMTcuMDk3NEM1NS40NDA0IDE3LjM4MTQgNTUuMTQ3NCAxNy44NTQ4IDU0LjkyNzcgMTguNTM2NFpNNTkuODg5NSAyMS42NDE3QzU5LjQxMzUgMjEuNzkzMiA1OC42NjI4IDIyLjAwMTUgNTcuNjM3NSAyMi4yMjg3QzU2LjYxMjIgMjIuNDU1OSA1NS45NTMxIDIyLjY4MzEgNTUuNjIzNSAyMi44OTE0QzU1LjE0NzQgMjMuMjUxMiA1NC44OTExIDIzLjY4NjYgNTQuODkxMSAyNC4yMzU3QzU0Ljg5MTEgMjQuNzg0OSA1NS4wNzQyIDI1LjIzOTMgNTUuNDc3IDI1LjYzNjlDNTUuODYxNSAyNi4wMzQ1IDU2LjMzNzUgMjYuMjIzOSA1Ni45NDE3IDI2LjIyMzlDNTcuNjE5MiAyNi4yMjM5IDU4LjI2IDI1Ljk5NjcgNTguODY0MiAyNS41NDIyQzU5LjMwMzYgMjUuMjAxNCA1OS41OTY2IDI0Ljc4NDkgNTkuNzQzMSAyNC4yNzM2QzU5LjgzNDYgMjMuOTUxNyA1OS44ODk1IDIzLjMwOCA1OS44ODk1IDIyLjM5OTFWMjEuNjQxN1pNNjUuNTQ3MSAxNC4wNjc5SDY3LjU5NzdWMTIuOTg4NkM2Ny41OTc3IDExLjc1NzkgNjcuNzI1OSAxMC44Njc5IDY3Ljk4MjIgMTAuMjYyQzY4LjIzODYgOS42NTYxMyA2OC42OTYzIDkuMTYzODMgNjkuMzczNyA4Ljc4NTE0QzcwLjA1MTIgOC40MDY0NSA3MC45MTE3IDguMjE3MSA3MS45MzcgOC4yMTcxQzcyLjk5OSA4LjIxNzEgNzQuMDQyNiA4LjM2ODU4IDc1LjA0OTYgOC43MDk0TDc0LjU3MzYgMTEuMzYwMkM3My45Njk0IDExLjIwODggNzMuMzgzNSAxMS4xMzMgNzIuODUyNSAxMS4xMzNDNzIuMzAzMiAxMS4xMzMgNzEuOTE4NyAxMS4yNjU2IDcxLjY2MjQgMTEuNTMwN0M3MS40MDYxIDExLjc5NTcgNzEuMzE0NSAxMi4yODggNzEuMzE0NSAxMy4wNDU0VjE0LjA2NzlINzQuMDc5MlYxNy4wNzg1SDcxLjMxNDVWMjguNTMzOUg2Ny42MTZWMTcuMDc4NUg2NS41NjU0VjE0LjA2NzlINjUuNTQ3MVpNNzQuNTE4NiAxNC4wNjc5SDc2LjU2OTNWMTIuOTg4NkM3Ni41NjkzIDExLjc1NzkgNzYuNjk3NCAxMC44Njc5IDc2Ljk1MzggMTAuMjYyQzc3LjIxMDEgOS42NTYxMyA3Ny42Njc4IDkuMTYzODMgNzguMzQ1MyA4Ljc4NTE0Qzc5LjAyMjcgOC40MDY0NSA3OS44ODMyIDguMjE3MSA4MC45MDg2IDguMjE3MUM4MS45NzA1IDguMjE3MSA4My4wMTQxIDguMzY4NTggODQuMDIxMSA4LjcwOTRMODMuNTQ1MSAxMS4zNjAyQzgyLjk0MDkgMTEuMjA4OCA4Mi4zNTUgMTEuMTMzIDgxLjgwNTcgMTEuMTMzQzgxLjI1NjQgMTEuMTMzIDgwLjg3MTkgMTEuMjY1NiA4MC42MTU2IDExLjUzMDdDODAuMzk1OSAxMS43OTU3IDgwLjI2NzcgMTIuMjg4IDgwLjI2NzcgMTMuMDQ1NFYxNC4wNjc5SDgzLjAzMjRWMTcuMDc4NUg4MC4yNjc3VjI4LjUzMzlINzYuNTY5M1YxNy4wNzg1SDc0LjUxODZWMTQuMDY3OVoiIGZpbGw9ImJsYWNrIi8+DQo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTk4LjY0OTggNS4yNDQ3N0M5Ny45NTQgMi43ODMyOCA5NS42NDcxIDIuNDA0NTkgOTMuNzI0NiAzLjc2Nzg4QzkxLjc0NzIgNS4xNjkwMyA5MC40Mjg5IDguMTk4NTcgOTEuMTA2NCAxMC42MjIyQzkxLjgwMjEgMTMuMDgzNyA5NC4xMDkxIDEzLjQ2MjQgOTYuMDMxNiAxMi4xMThDOTguMDA5IDEwLjcxNjkgOTkuMzI3MiA3LjY2ODQgOTguNjQ5OCA1LjI0NDc3WiIgZmlsbD0iI0YzNzU0MCIvPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05MS4xNDI4IDI3LjgxNDlDOTEuOTMwMSAyNy4xMTQzIDkyLjk3MzggMjYuNDUxNiA5My44MTYgMjUuODgzNkw5NS40NjM4IDI0LjgyMzJDOTcuODQ0IDIwLjAzMjggMTAxLjA0OCAxNS41NDUzIDEwNC40MTcgMTEuNDU1NEMxMDcuNDkzIDcuNjg3NDQgMTExLjA4MiAzLjc0OTA1IDExNSAwLjkwODg2TDExNC4zNDEgMEMxMTAuMTQ4IDIuMjkxMDggMTA2LjMwMyA1LjQxNTI5IDEwMi44NDIgOC43NjY3MUM5OS4xOTg5IDEyLjMwNzUgOTUuODQ4MyAxNi4yMjY5IDkzLjE1NjggMjAuNTgxOUw5My4wNDcgMjAuNzMzNEw5Mi4yNzggMTkuMDY3MUM5MS43MTA0IDE3Ljg1NTMgOTAuMTM1OCAxNC42NTU0IDg4LjU0MjkgMTQuNjU1NEM4Ni45NSAxNC42NTU0IDg1LjQzMDMgMTUuODI5MyA4NC4zMTM1IDE2Ljk0NjRDODUuMzAyMiAxNy4zMDYyIDg2LjEyNjEgMTcuOTg3OCA4Ni43ODUyIDE4LjgyMUM4Ny44MTA1IDIwLjA3MDYgODguNjM0NSAyMS43NzQ4IDg5LjI5MzYgMjMuMjcwNkw4OS45MTYxIDI0LjY3MTdDOTAuMzE4OSAyNS42NzUzIDkwLjgxMzMgMjYuNzkyNCA5MS4xNDI4IDI3LjgxNDlaIiBmaWxsPSIjRjM3NTQwIi8+DQo8L3N2Zz4NCg==';
+        this.itemsPerRow = 4;
+        this.iconTextVerticalMargin = 25;
+        this.items = [[]];
+        this.zIndex = 1;
+        this.imageErrorResolverType = EnumImageResolverType.LOGO;
+        this.headerHeight = 0;
+        this.width = 400;
+        this.layoutService.modulePanelWidth$.subscribe(x => this.width = x);
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        this.subscriptions.push(this.authService.data$.subscribe(x => this.isRoot = !!x?.isRoot));
+        this.scrollWidth = this.layoutService.modulePanelWidth$.value - this.layoutService.basicSpacing * 2;
+        this.scrollHeight = window.innerHeight - this.layoutService.headerHeight$.value - this.layoutService.basicSpacing * 2;
+        this.itemWidth = this.scrollWidth / 4;
+    }
+    transformTo2DArray(flatList) {
+        const result = [];
+        for (let i = 0; i < flatList.length; i += this.itemsPerRow) {
+            const row = flatList.slice(i, i + this.itemsPerRow);
+            // If the last row has fewer than itemsPerRow, pad it with undefineds
+            while (row.length < this.itemsPerRow) {
+                row.push(undefined);
             }
-            // After the cases of if/else, make the control change with onChange
-            this.value = this.checkedIds;
-            this.onChange(this.checkedIds);
-            this.markAsTouched();
-        };
-        /* start: THIS CODE SCOPE calculates toggledIds */
-        if (this.checkInheritance) {
-            // If true, all the nested items will be checked/unchecked
-            this.recursiveService
-                .nestedToggleCheck(e, newValue, this.showDissolved)
-                .then((x) => {
-                let currentCheckedKeys = this.organizationService.status$.value.checkedKeys || [];
-                if (!!newValue) {
-                    x.map(item => {
-                        if (currentCheckedKeys.filter(i => i === item.toString()).length === 0) {
-                            currentCheckedKeys.push(item.toString());
-                        }
-                    });
-                }
-                else {
-                    currentCheckedKeys = currentCheckedKeys.filter(i => !x.includes(Number(i)));
-                }
-                this.organizationService.status$.next({
-                    ...this.organizationService.status$.value,
-                    checkedKeys: currentCheckedKeys //x.map(item => item.toString())
-                });
-                // The ids have been changed
-                toggledIds = x;
-                // Now toggledIds were set. We call the function we declared
-                changeValue();
-            })
-                .catch((x) => {
-                console.error(x);
-            });
-        }
-        else {
-            // Otherwise we simply toggle check for current item only
-            toggledIds = [e.id];
-            // Now toggledIds were set. We call the function we declared
-            changeValue();
+            result.push(row);
         }
-        /* end: THIS CODE SCOPE calculates toggledIds */
-        // That is. Happy debugging!
-    }
-    onCheckIncludeDissolvedChange(value) {
-        console.log("onCheckIncludeDissolvedChange", value);
+        return result;
     }
-    onCheckInheritanceChange(value) {
-        this.organizationService.status$.next({
-            ...this.organizationService.status$.value,
-            checkInheritance: value,
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.designMode = localStorage.getItem('moduleDesignMode') === 'on';
+            this.zIndex = this.domService.getMaxZIndex() + 1;
+            // this.listenerFn = this.renderer.listen('window', 'click', (e: Event) => {
+            //   if (!this.designMode) {
+            //     if (this.container && !!!this.container.nativeElement.contains(e.target)) {
+            //       this.ahs.activeKey$.next(undefined);
+            //     }
+            //   }
+            // });
+            this.subscriptions.push(this.navigatorService.rootNavigatorItems$.subscribe(x => {
+                // Transform the flat list into a 2D array
+                this.items = this.transformTo2DArray(x);
+            }));
+            this.subscriptions.push(this.layoutService.headerHeight$.subscribe(x => {
+                this.headerHeight = x;
+            }));
+            if (!!localStorage) {
+                const activeRootMenuItemId = Number(localStorage.getItem('activeRootMenuItemId') || '0');
+                this.navigatorService.activeRootMenuItemId$.next(activeRootMenuItemId);
+            }
+            if (window.innerWidth < this.layoutService.modulePanelWidth$.value) {
+                this.layoutService.modulePanelWidth$.next(window.innerWidth);
+            }
         });
     }
-    onObjectClick(e, event) {
-        // remove highlight class
-        // TO DO
-        if (!!e.protected)
-            return;
-        this.itemClick?.emit(e);
-        if (this.accessorMode === EnumCoreOrgTreeaAccessorMode.CHECKED)
-            return;
-        let activeIds = [];
-        this.data.map((item) => (item.active = false));
-        if (this.accessorMode ===
-            EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE ||
-            !!!this.accessorMode) {
-            // If true, all the nested items will be active, the others are inactive
-            this.recursiveService
-                .nestedResetActive(e, true)
-                .then((x) => {
-                activeIds = x;
-                activeIds.sort();
-                const newActiveKeys = [];
-                activeIds.map((x) => newActiveKeys.push(x.toString()));
-                this.organizationService.status$.next({
-                    ...this.organizationService.status$.value,
-                    activeKeys: newActiveKeys,
-                    selectedKey: e.id.toString()
-                });
-                this.activeIds = activeIds;
-                console.log(this.activeIds);
-                this.onChange(activeIds);
-            })
-                .catch((x) => {
-                console.error(x);
-            });
+    onDesignModeClick(e) {
+        e.stopPropagation();
+        if (localStorage.getItem('moduleDesignMode') === 'on') {
+            localStorage.setItem('moduleDesignMode', 'off');
+            this.designMode = false;
         }
         else {
-            // ACTIVATED_SINGLE
-            // Otherwise we simply set current item to be active only
-            activeIds = [e.id];
-            this.activeIds = activeIds;
-            this.organizationService.status$.next({
-                ...this.organizationService.status$.value,
-                activeKeys: [e.id.toString()],
-                selectedKey: e.id.toString(),
-            });
-            this.onChange(activeIds);
-        }
-        const { detail } = event;
-        if (detail === 2) {
-            console.log('This was a dblclick');
-            this.itemDoubleClick.emit(e);
+            localStorage.setItem('moduleDesignMode', 'on');
+            this.designMode = true;
         }
-        this.selectedItem = e;
-    }
-    onSearchChange(text) {
-        this.search$.next(text);
-    }
-    onHiddenToolClick(e) {
-        e.stopPropagation();
-        this.hiddenToolClickStream$.next(crypto.randomUUID());
     }
     ngOnDestroy() {
-        if (this.worker) {
-            this.worker.terminate();
-        }
-        this.subscriptions.map((x) => x?.unsubscribe());
-        if (!!this.instanceNumber) {
-            const tryToFind = this.organizationService.instances.filter((x) => x.instanceNumber === this.instanceNumber);
-            if (!!tryToFind.length) {
-                const newInstances = this.organizationService.instances.filter((x) => x.instanceNumber !== this.instanceNumber);
-                this.organizationService.instances = newInstances;
-            }
-        }
+        this.subscriptions.map(x => x?.unsubscribe());
+        if (this.listenerFn)
+            this.listenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreComTreeComponent, deps: [{ token: AuthService }, { token: RecursiveService }, { token: MultiLanguageService }, { token: LayoutService }, { token: CoreOrgTreeService }, { token: AlertService }, { token: ComPartyService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreComTreeComponent, isStandalone: true, selector: "core-com-tree", inputs: { lineColor: "lineColor", fullWidthMode: "fullWidthMode", accessorMode: "accessorMode", searchMode: "searchMode", fullRendering: "fullRendering", height: "height", disabledLoopExpand: "disabledLoopExpand", showCheckInheritance: "showCheckInheritance", excludedIds$: "excludedIds$", stateIsolated$: "stateIsolated$" }, outputs: { itemDoubleClick: "itemDoubleClick", itemClick: "itemClick" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => CoreComTreeComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "displayContent", first: true, predicate: ["displayContent"], descendants: true }, { propertyName: "reducedIconWrapper", first: true, predicate: ["reducedIconWrapper"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #container class=\"core-org-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\" [ngStyle]=\"{\r\n        position : 'relative',\r\n        width: '100%',\r\n        minWidth: '310px',\r\n        height: height + 'px'\r\n    }\">\r\n    <div #displayContent class=\"custom-org-tree\">\r\n        @if (showSearch) {\r\n        <div class=\"core-org-tree-header d-flex-between\">\r\n            <div class=\"m5\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\r\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\r\n            </div>\r\n        </div>\r\n        }\r\n        <ng-container>\r\n\r\n            <div #scrollContainer class=\"scroll-container\" [ngStyle]=\"{\r\n                height: height - layoutService.coreOrgTreeTopHeight * (showSearch ? 1 : 0) - layoutService.coreOrgTreeBottomHeight + 'px',\r\n                overflow: 'scroll'\r\n                }\">\r\n                <div class=\"hidden-tool\" (click)=\"onHiddenToolClick($event)\"></div>\r\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\r\n                <!-- @for (root of dataFiltered; track root) { -->\r\n                @for (root of data; track $index) {\r\n                @defer(on viewport(scrollContainer)) {\r\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n                </ul>\r\n                } @placeholder() {\r\n                Placeholder...\r\n                } @loading() {\r\n                Loading...\r\n                } @error() {\r\n                Error...\r\n                }\r\n\r\n                }\r\n            </div>\r\n            <div [ngStyle]=\"{\r\n                display: 'block',\r\n                position: 'absolute',\r\n                bottom: '0px',\r\n                left: '0px',\r\n                right: '0px',\r\n                height: layoutService.corePaginationHeight + 'px',\r\n                paddingLeft: layoutService.basicSpacing + 'px',\r\n                paddingRight: layoutService.basicSpacing + 'px',\r\n                lineHeight: layoutService.corePaginationHeight + 'px',\r\n                overflow: 'hidden'\r\n            }\">\r\n                <div [ngStyle]=\"{\r\n                    height: layoutService.corePaginationHeight + 'px',\r\n                    position: 'relative',\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    justifyContent: 'space-between'\r\n                }\">\r\n                    <div>\r\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\r\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\r\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\r\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\r\n                    </div>\r\n                    @if (accessorMode === 'CHECKED') {\r\n                        <div class=\"check-inheritance-wrapper\">\r\n                            @if (showCheckInheritance) {\r\n                                <core-checkbox [(ngModel)]=\"checkInheritance\"\r\n                                    (ngModelChange)=\"onCheckInheritanceChange($event)\"\r\n                                    [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\r\n                                }\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\r\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\r\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\r\n\r\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\r\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\r\n                    <!-- (click)=\"accessorMode !== 'CHECKED' ? onObjectClick(context, $event) : $event.preventDefault()\" -->\r\n                    <span (click)=\"onObjectClick(context, $event)\">\r\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\r\n                            <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context, $event)\"></i>\r\n                        }\r\n\r\n                        @if (accessorMode === 'CHECKED' && !protected) {\r\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\r\n                            [disabled]=\"disabled\"></core-checkbox>\r\n                        }\r\n                        <object [class.active]=\"accessorMode != 'CHECKED' && selectedKey===id.toString()\"\r\n                            [class.highlighted]=\"highlighted\" [class.dissolved]=\"!isActive\"\r\n                            [class.protected]=\"protected\" [appTooltip]=\"title\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </span>\r\n                    @if (!!children.length) {\r\n                    <ul [class.collapsed]=\" !!!expanded\">\r\n                        @for (child of children; track $index) {\r\n                        @if (!!expanded || !!fullRendering) {\r\n\r\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n\r\n                        }\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ng-template>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreLoadingSurfaceComponent, selector: "core-loading-surface", inputs: ["loading", "height"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerComponent, deps: [{ token: MultiLanguageService }, { token: ApplicationHelpService }, { token: i0.Renderer2 }, { token: NavigatorService }, { token: LayoutService }, { token: DomService }, { token: MenuService }, { token: SysMenuService }, { token: AuthService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: CoreRootMenuItemPickerComponent, isStandalone: true, selector: "core-root-menu-item-picker", inputs: { logoPath: "logoPath", itemsPerRow: "itemsPerRow", iconTextVerticalMargin: "iconTextVerticalMargin" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"core-root-menu-item-picker-container\" [ngStyle]=\"{\r\n    zIndex: zIndex,\r\n}\">\r\n    <div class=\"mudule-picker-header d-flex d-flex-between\" [ngStyle]=\"{\r\n        height: 59 + 'px'\r\n    }\">\r\n        <div class=\"HEADER_LOGO\">\r\n            <div class=\"logo-wrapper d-flex\">\r\n                <img src=\"logoPath\" class=\"lg\" [ngStyle]=\"{\r\n                    width: '130px',\r\n                    height: '59px',\r\n                    transform: 'translate(0, -5px)'\r\n                }\" appImageErrorResolver [type]=\"imageErrorResolverType\">\r\n            </div>\r\n        </div>\r\n        @if (!!isRoot) {\r\n            <i \r\n                [class.feather-square]=\"!designMode\" \r\n                [class.feather-play]=\"!!designMode\" \r\n                class=\"stop-mode-icon\" \r\n                (click)=\"onDesignModeClick($event)\"\r\n                [appTooltip]=\"!designMode ? 'Chuy\u1EC3n sang ch\u1EBF \u0111\u1ED9 thi\u1EBFt k\u1EBF' : 'Chuy\u1EC3n v\u1EC1 ch\u1EBF \u0111\u1ED9 b\u00ECnh th\u01B0\u1EDDng'\"\r\n            ></i>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-bottom\" [ngStyle]=\"{\r\n        width: width + 'px'\r\n    }\">\r\n        <core-line></core-line>\r\n    </div>\r\n\r\n    <div class=\"h15\"></div>\r\n\r\n    <div class=\"scroll\" [ngStyle]=\"{\r\n        width: width + 'px',\r\n        height: scrollHeight + 'px'\r\n    }\">\r\n        @for (row of items; track $index) {\r\n            <div class=\"menu-row\">\r\n                @for (item of row; track $index) {\r\n                    <app-module-item [$item]=\"item\" [$width]=\"itemWidth\" [$height]=\"100\" [$iconTextVerticalMargin]=\"iconTextVerticalMargin\"></app-module-item>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".core-root-menu-item-picker-container .header-bottom{position:absolute;top:59px;left:0}.core-root-menu-item-picker-container .scroll{overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;-ms-overflow-style:none}.core-root-menu-item-picker-container .scroll::-webkit-scrollbar{display:none}.core-root-menu-item-picker-container .menu-row{display:flex;flex-wrap:nowrap;justify-content:space-between}.core-root-menu-item-picker-container .stop-mode-icon{cursor:pointer;width:24px;height:24px;font-size:24px}\n"], dependencies: [{ kind: "component", type: CoreLineComponent, selector: "core-line" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ModuleItemComponent, selector: "app-module-item", inputs: ["$item", "$itemPadding", "$width", "$height", "$iconTextVerticalMargin"] }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "showAnyway", "color", "backgroundColor", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreComTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-com-tree', imports: [
-                        FormsModule,
+            args: [{ selector: 'core-root-menu-item-picker', imports: [
+                        CoreLineComponent,
                         NgStyle,
-                        CoreCheckboxComponent,
-                        CoreLoadingSurfaceComponent,
-                        TranslatePipe,
+                        ModuleItemComponent,
+                        ImageErrorResolverDirective,
                         TooltipDirective,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CoreComTreeComponent),
-                            multi: true
-                        }
-                    ], template: "<div #container class=\"core-org-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\" [ngStyle]=\"{\r\n        position : 'relative',\r\n        width: '100%',\r\n        minWidth: '310px',\r\n        height: height + 'px'\r\n    }\">\r\n    <div #displayContent class=\"custom-org-tree\">\r\n        @if (showSearch) {\r\n        <div class=\"core-org-tree-header d-flex-between\">\r\n            <div class=\"m5\">\r\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\r\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\r\n            </div>\r\n        </div>\r\n        }\r\n        <ng-container>\r\n\r\n            <div #scrollContainer class=\"scroll-container\" [ngStyle]=\"{\r\n                height: height - layoutService.coreOrgTreeTopHeight * (showSearch ? 1 : 0) - layoutService.coreOrgTreeBottomHeight + 'px',\r\n                overflow: 'scroll'\r\n                }\">\r\n                <div class=\"hidden-tool\" (click)=\"onHiddenToolClick($event)\"></div>\r\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\r\n                <!-- @for (root of dataFiltered; track root) { -->\r\n                @for (root of data; track $index) {\r\n                @defer(on viewport(scrollContainer)) {\r\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\r\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\r\n                </ul>\r\n                } @placeholder() {\r\n                Placeholder...\r\n                } @loading() {\r\n                Loading...\r\n                } @error() {\r\n                Error...\r\n                }\r\n\r\n                }\r\n            </div>\r\n            <div [ngStyle]=\"{\r\n                display: 'block',\r\n                position: 'absolute',\r\n                bottom: '0px',\r\n                left: '0px',\r\n                right: '0px',\r\n                height: layoutService.corePaginationHeight + 'px',\r\n                paddingLeft: layoutService.basicSpacing + 'px',\r\n                paddingRight: layoutService.basicSpacing + 'px',\r\n                lineHeight: layoutService.corePaginationHeight + 'px',\r\n                overflow: 'hidden'\r\n            }\">\r\n                <div [ngStyle]=\"{\r\n                    height: layoutService.corePaginationHeight + 'px',\r\n                    position: 'relative',\r\n                    display: 'flex',\r\n                    alignItems: 'center',\r\n                    justifyContent: 'space-between'\r\n                }\">\r\n                    <div>\r\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\r\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\r\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\r\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\r\n                    </div>\r\n                    @if (accessorMode === 'CHECKED') {\r\n                        <div class=\"check-inheritance-wrapper\">\r\n                            @if (showCheckInheritance) {\r\n                                <core-checkbox [(ngModel)]=\"checkInheritance\"\r\n                                    (ngModelChange)=\"onCheckInheritanceChange($event)\"\r\n                                    [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\r\n                                }\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\r\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\r\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\r\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\r\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\r\n\r\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\r\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\r\n                    <!-- (click)=\"accessorMode !== 'CHECKED' ? onObjectClick(context, $event) : $event.preventDefault()\" -->\r\n                    <span (click)=\"onObjectClick(context, $event)\">\r\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\r\n                            <i class=\"expand-toggler feather-chevron-down\" (click)=\"onExpandTogglerClick(context, $event)\"></i>\r\n                        }\r\n\r\n                        @if (accessorMode === 'CHECKED' && !protected) {\r\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\r\n                            [disabled]=\"disabled\"></core-checkbox>\r\n                        }\r\n                        <object [class.active]=\"accessorMode != 'CHECKED' && selectedKey===id.toString()\"\r\n                            [class.highlighted]=\"highlighted\" [class.dissolved]=\"!isActive\"\r\n                            [class.protected]=\"protected\" [appTooltip]=\"title\">\r\n                            {{ title }}\r\n                        </object>\r\n                    </span>\r\n                    @if (!!children.length) {\r\n                    <ul [class.collapsed]=\" !!!expanded\">\r\n                        @for (child of children; track $index) {\r\n                        @if (!!expanded || !!fullRendering) {\r\n\r\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\r\n\r\n                        }\r\n                        }\r\n                    </ul>\r\n                    }\r\n                </li>\r\n                }\r\n            </ng-template>\r\n        </ng-container>\r\n    </div>\r\n</div>" }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: RecursiveService }, { type: MultiLanguageService }, { type: LayoutService }, { type: CoreOrgTreeService }, { type: AlertService }, { type: ComPartyService }], propDecorators: { lineColor: [{
-                type: Input
-            }], fullWidthMode: [{
-                type: Input
-            }], accessorMode: [{
-                type: Input
-            }], searchMode: [{
-                type: Input
-            }], fullRendering: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], disabledLoopExpand: [{
-                type: Input
-            }], showCheckInheritance: [{
+                    ], template: "<div #container class=\"core-root-menu-item-picker-container\" [ngStyle]=\"{\r\n    zIndex: zIndex,\r\n}\">\r\n    <div class=\"mudule-picker-header d-flex d-flex-between\" [ngStyle]=\"{\r\n        height: 59 + 'px'\r\n    }\">\r\n        <div class=\"HEADER_LOGO\">\r\n            <div class=\"logo-wrapper d-flex\">\r\n                <img src=\"logoPath\" class=\"lg\" [ngStyle]=\"{\r\n                    width: '130px',\r\n                    height: '59px',\r\n                    transform: 'translate(0, -5px)'\r\n                }\" appImageErrorResolver [type]=\"imageErrorResolverType\">\r\n            </div>\r\n        </div>\r\n        @if (!!isRoot) {\r\n            <i \r\n                [class.feather-square]=\"!designMode\" \r\n                [class.feather-play]=\"!!designMode\" \r\n                class=\"stop-mode-icon\" \r\n                (click)=\"onDesignModeClick($event)\"\r\n                [appTooltip]=\"!designMode ? 'Chuy\u1EC3n sang ch\u1EBF \u0111\u1ED9 thi\u1EBFt k\u1EBF' : 'Chuy\u1EC3n v\u1EC1 ch\u1EBF \u0111\u1ED9 b\u00ECnh th\u01B0\u1EDDng'\"\r\n            ></i>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"header-bottom\" [ngStyle]=\"{\r\n        width: width + 'px'\r\n    }\">\r\n        <core-line></core-line>\r\n    </div>\r\n\r\n    <div class=\"h15\"></div>\r\n\r\n    <div class=\"scroll\" [ngStyle]=\"{\r\n        width: width + 'px',\r\n        height: scrollHeight + 'px'\r\n    }\">\r\n        @for (row of items; track $index) {\r\n            <div class=\"menu-row\">\r\n                @for (item of row; track $index) {\r\n                    <app-module-item [$item]=\"item\" [$width]=\"itemWidth\" [$height]=\"100\" [$iconTextVerticalMargin]=\"iconTextVerticalMargin\"></app-module-item>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".core-root-menu-item-picker-container .header-bottom{position:absolute;top:59px;left:0}.core-root-menu-item-picker-container .scroll{overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;-ms-overflow-style:none}.core-root-menu-item-picker-container .scroll::-webkit-scrollbar{display:none}.core-root-menu-item-picker-container .menu-row{display:flex;flex-wrap:nowrap;justify-content:space-between}.core-root-menu-item-picker-container .stop-mode-icon{cursor:pointer;width:24px;height:24px;font-size:24px}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: ApplicationHelpService }, { type: i0.Renderer2 }, { type: NavigatorService }, { type: LayoutService }, { type: DomService }, { type: MenuService }, { type: SysMenuService }, { type: AuthService }, { type: AppConfigService }], propDecorators: { logoPath: [{
                 type: Input
-            }], excludedIds$: [{
+            }], itemsPerRow: [{
                 type: Input
-            }], stateIsolated$: [{
+            }], iconTextVerticalMargin: [{
                 type: Input
-            }], itemDoubleClick: [{
-                type: Output
-            }], itemClick: [{
-                type: Output
             }], container: [{
                 type: ViewChild,
                 args: ['container']
-            }], scrollContainer: [{
-                type: ViewChild,
-                args: ['scrollContainer']
-            }], displayContent: [{
-                type: ViewChild,
-                args: ['displayContent']
-            }], reducedIconWrapper: [{
-                type: ViewChild,
-                args: ['reducedIconWrapper']
             }] } });
 
+class CoreRootMenuItemPickerService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: CoreRootMenuItemPickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class CoreComProfileComponent extends BaseComponent {
     ngOnChanges(changes) {
         this.cdr.markForCheck();
@@ -38037,11 +38120,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const coreDocGenRoutes = [
     {
         path: 'template-list',
-        loadComponent: () => import('./ngx-histaff-alpha-template-list.component-BXyP9Vki.mjs').then(m => m.TemplateListComponent),
+        loadComponent: () => import('./ngx-histaff-alpha-template-list.component-B8DQ5E2P.mjs').then(m => m.TemplateListComponent),
     },
     {
         path: ":id",
-        loadComponent: () => import('./ngx-histaff-alpha-core-template-editor.component-F2nV8jgm.mjs').then(m => m.CoreTemplateEditorComponent),
+        loadComponent: () => import('./ngx-histaff-alpha-core-template-editor.component-DOZibiVG.mjs').then(m => m.CoreTemplateEditorComponent),
         canDeactivate: [CanDeactivateGuard]
     },
     {
@@ -38070,7 +38153,7 @@ const coreFormDesignRoutes = [
     },
     {
         path: ':id',
-        loadComponent: () => import('./ngx-histaff-alpha-core-form-design.component-DLEZuLXO.mjs').then(function (n) { return n.c; }).then(m => m.CoreFormDesignComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-core-form-design.component-DQUPb25c.mjs').then(function (n) { return n.c; }).then(m => m.CoreFormDesignComponent)
     }
 ];
 
@@ -38963,7 +39046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 const coreNavigationTrackerRoutes = [
     {
         path: '',
-        loadComponent: () => import('./ngx-histaff-alpha-tracker-studio.component-ySy7DIdC.mjs').then(m => m.TrackerStudioComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-tracker-studio.component-cnxgZ6An.mjs').then(m => m.TrackerStudioComponent)
     }
 ];
 
@@ -41552,33 +41635,33 @@ const coreWorkflowRoutes = [
                     {
                         path: 'form-assign/:id',
                         outlet: "formAssignAux",
-                        loadComponent: () => import('./ngx-histaff-alpha-wf-form-assign.component-qxz8Ozah.mjs').then(m => m.WfFormAssignComponent),
+                        loadComponent: () => import('./ngx-histaff-alpha-wf-form-assign.component-BfZAeogE.mjs').then(m => m.WfFormAssignComponent),
                         canDeactivate: [CanDeactivateGuard]
                     }
                 ]
             },
             {
                 path: 'global-config',
-                loadComponent: () => import('./ngx-histaff-alpha-wf-global-config.component-DbZq1DK-.mjs').then(m => m.WfGlobalConfigComponent)
+                loadComponent: () => import('./ngx-histaff-alpha-wf-global-config.component-BmZ9RmJD.mjs').then(m => m.WfGlobalConfigComponent)
             },
             {
                 path: 'db-settings',
-                loadComponent: () => import('./ngx-histaff-alpha-db-settings.component-DB6XegRZ.mjs').then(m => m.DbSettingsComponent)
+                loadComponent: () => import('./ngx-histaff-alpha-db-settings.component-CQc3XpNh.mjs').then(m => m.DbSettingsComponent)
             },
             {
                 path: 'workflow-consume',
-                loadComponent: () => import('./ngx-histaff-alpha-core-workflow-consume.component-D2txp5DP.mjs').then(m => m.CoreWorkflowConsumeComponent),
+                loadComponent: () => import('./ngx-histaff-alpha-core-workflow-consume.component-DJN5n0Y-.mjs').then(m => m.CoreWorkflowConsumeComponent),
                 children: [
                     {
                         path: ':id',
                         outlet: "workflowConsume",
-                        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-Dt0rgzHG.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent),
+                        loadComponent: () => import('./ngx-histaff-alpha-live-form.component-2kAqtlyo.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent),
                     }
                 ]
             },
             {
                 path: 'workflow-consume/:id',
-                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-Dt0rgzHG.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent),
+                loadComponent: () => import('./ngx-histaff-alpha-live-form.component-2kAqtlyo.mjs').then(function (n) { return n.l; }).then(m => m.LiveFormComponent),
             },
             {
                 path: 'workflow-group-edit/:id',
@@ -41588,17 +41671,17 @@ const coreWorkflowRoutes = [
             },
             {
                 path: 'design/:id',
-                loadChildren: () => import('./ngx-histaff-alpha-design-wrapper.route-CdPC_FcN.mjs').then(m => m.wfDesignWrapperRoutes),
+                loadChildren: () => import('./ngx-histaff-alpha-design-wrapper.route-COZXQaNQ.mjs').then(m => m.wfDesignWrapperRoutes),
             },
         ]
     },
     {
         path: 'react/:id',
-        loadComponent: () => import('./ngx-histaff-alpha-wf-instance-step-react.component-eT3UGhUM.mjs').then(m => m.WfInstanceStepReactComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-wf-instance-step-react.component-BsBX4QJV.mjs').then(m => m.WfInstanceStepReactComponent)
     },
     {
         path: 'status/:id',
-        loadComponent: () => import('./ngx-histaff-alpha-wf-instance-status.component-DjFOVp06.mjs').then(m => m.WfInstanceStatusComponent)
+        loadComponent: () => import('./ngx-histaff-alpha-wf-instance-status.component-DeRlJp4L.mjs').then(m => m.WfInstanceStatusComponent)
     }
 ];
 
@@ -43459,7 +43542,11 @@ class NavigatorComponent {
                     else if (this.menuClickedItem?.tree$Tier == 3) { //nếu là 3 cấp
                         array = x.filter(y => y.id == this.menuClickedItem.id);
                         arrayParrent = x.filter(y => y.id == this.menuClickedItem.tree$Parent);
+                        if (!arrayParrent.length)
+                            return;
                         let arrayGrandParrent = x.filter(z => z.id == arrayParrent[0].parent);
+                        if (!arrayGrandParrent.length)
+                            return;
                         let element = document.getElementById('main-menu-' + arrayParrent[0].id);
                         let element2 = document.getElementById('main-menu-' + arrayGrandParrent[0].id);
                         array[0].tree$Selected = true;
@@ -44219,5 +44306,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CoreButtonGroupVnsComponent as $, AppService as A, BaseComponent as B, ChatService as C, DialogService as D, EnumCoreTablePipeType as E, FullscreenModalLoaderComponent as F, CoreDatePickerComponent as G, CoreFormControlSeekerComponent as H, ImageErrorResolverDirective as I, CoreCurrencyInputComponent as J, EnumActorSourceType as K, CoreParamControlComponent as L, MultiLanguageService as M, CoreRadioGroupComponent as N, GptService as O, ApplicationHelpService as P, HotKeysDirective as Q, EnumCorePageEditMode as R, SocketService as S, TranslatePipe as T, CoreFormComponent as U, NavigatorService as V, JsonService as W, AppConfigService as X, EnumCoreButtonVNSCode as Y, READONLY_WORKFLOW_FIELDS as Z, noneAutoClosedAlertOptions as _, CorePageListComponent as a, CommonHttpRequestService as a$, CoreStickerCollectionComponent as a0, HtmlTooltipDirective as a1, CoreControlNoFormArrayComponent as a2, EnumFormDesignMode as a3, CoreControlComponent as a4, JsonSafePipe as a5, CoreAttachmentComponent as a6, CoreMonthSelectorComponent as a7, EnumImageResolverType as a8, NormalizeHumanNamePipe as a9, EnumStyleButtonClass as aA, CanActivateFunctionUrlMapperGuard as aB, InitializationCanActivateFn as aC, InitializationCanMatchFn as aD, httpInterceptorProviders as aE, InterceptorSkipHeader as aF, appTypeInterceptor as aG, baseUrlInterceptor as aH, authInterceptor as aI, graphInterceptor as aJ, tokenInterceptor as aK, responseInterceptor as aL, timeZoneInterceptor as aM, cachingInterceptor as aN, langInterceptor as aO, EnumFilterOperator as aP, OnlineUsersComponent as aQ, ActionService as aR, AppInitializationService as aS, AuthService as aT, CacheService as aU, EnumSwUpdateVersionUpdatesEventType as aV, CheckForUpdateService as aW, EnumDeviceType as aX, EnumBrowserType as aY, EnumOsType as aZ, ClientService as a_, CoreIosSwitcherComponent as aa, SunnyRotatingComponent as ab, MapAppdemoToServerPipePipe as ac, MapAttachmentToServerPipe as ad, MapNewsfeedMediaToServerPipe as ae, StringHtmlPipe as af, UploadedFilenameCutoffPipe as ag, DialogStateComponent as ah, FooterComponent as ai, RightchatComponent as aj, WaittingScreenComponent as ak, longAlertOptions as al, attachmentOptions as am, CORE_VNS_BUTTONS as an, defaultPaging as ao, DESKTOP_SCREEN_HEDER_HEIGHT as ap, MOBILE_SCREEN_HEDER_HEIGHT as aq, themeBlue as ar, DATE_VALUE_ACCESSOR as as, DateValueAccessor as at, EnumDragType as au, EnumErrorType as av, EnumIconClass as aw, EnumProfileInfoSector as ax, EnumSignalRType as ay, EnumSortDirection as az, CoreCheckboxComponent as b, MutationViewComponent as b$, TLA_CONFIG as b0, ConfigService as b1, CoreTableService as b2, DndService as b3, DocxMergeService as b4, FilterKitService as b5, GrpcService as b6, HeaderService as b7, HistoryService as b8, HttpErrorHandler as b9, TopicPermissionService as bA, TopicTreeService as bB, UploadedFileService as bC, UrlService as bD, UserActivityService as bE, EvaluateDialogService as bF, EnumWorkScheduleViewMode as bG, WorkShiftDndService as bH, AtShiftPatternComponent as bI, AtShiftPatternApplyComponent as bJ, AtShiftPatternEditComponent as bK, AtWorksignComponent as bL, AtWorksignService as bM, FunctionComponent as bN, IndividualScheduleApplyComponent as bO, FunctionEditComponent as bP, FunctionIgnoreComponent as bQ, FunctionIgnoreEditComponent as bR, GroupFunctionComponent as bS, GroupFunctionEditComponent as bT, hrmSchemaRoutes as bU, InMemoryComponent as bV, LanguageComponent as bW, LanguageEditComponent as bX, MenuComponent as bY, MenuEditComponent as bZ, MutationLogComponent as b_, HubConnectionService as ba, IpServiceService as bb, LayoutService as bc, LiquidJsService as bd, MapService as be, MenuService as bf, MessageService as bg, ModalService as bh, OrganizationService as bi, PkceService as bj, PositionTransferService as bk, EnumNotificationDir as bl, NotificationActionType as bm, PushNotificationService as bn, RandomAvatarService as bo, RequestCache as bp, RequestCacheWithMap as bq, ResponseService as br, RoutingService as bs, EnumSsrsExpressFileExtension as bt, EnumSsrsExpressExportFormat as bu, SsrsExpressService as bv, StatisticService as bw, StatisticAuthService as bx, SysMenuService as by, TimeSheetService as bz, BaseEditComponent as c, CoreEmployeeSeekerComponent as c$, PaSalaryPolicyComponent as c0, PaSalaryPolicyEditComponent as c1, PortalRouteComponent as c2, ScheduleOverviewComponent as c3, simpleChatRoutes as c4, PortalRouteEditComponent as c5, SysOtherListComponent as c6, SysOtherListEditComponent as c7, SysOtherListTypeComponent as c8, SysOtherListTypeEditComponent as c9, NewlyCreatedTokenService as cA, CoreApiProgressComponent as cB, CoreButtonGroupComponent as cC, EnumCoreButtonCode as cD, ActionSvgEditComponent as cE, CoreButtonGroupService as cF, CoreButtonVnsComponent as cG, CoreCommonParamKitComponent as cH, CoreCompareDbPipelineComponent as cI, CoreCompositionState as cJ, CoreCompositionService as cK, CoreCompositionComponent as cL, CoreConfirmDialogComponent as cM, ConfirmDialogStateComponent as cN, CoreLazyMountComponent as cO, CoreRootMenuItemPickerComponent as cP, CoreRootMenuItemPickerService as cQ, ECoreTableToolCode as cR, ECoreTableToolClass as cS, CoreTableComponent as cT, CoreComProfileComponent as cU, CoreContractSeekerComponent as cV, CoreControlNoGridBufferComponent as cW, CoreControlNoSeekerComponent as cX, coreDocGenRoutes as cY, CoreDocgenToolbarComponent as cZ, CoreEmployeeScheduleComponent as c_, SysActionComponent as ca, SysActionEditComponent as cb, SysFunctionActionComponent as cc, SysFunctionActionEditComponent as cd, SysFunctionActionMapperComponent as ce, SysFunctionUrlMapperComponent as cf, FunctionEditService as cg, SysModuleComponent as ch, SysModuleEditComponent as ci, SysRouteAccessComponent as cj, liner_to_nested_array_script as ck, blob_to_base64_script as cl, AlertComponent as cm, EnumAlertType as cn, IAlertOptions as co, AnimatedTextService as cp, AnimatedTextComponent as cq, BaseDropdownComponent as cr, ButtonGroupModule as cs, ButtonGroupService as ct, ButtonGroupComponent as cu, EnumButtonCaptionCode as cv, CoreButtonComponent as cw, CoreAccordionComponent as cx, CoreAccordionService as cy, CoreActiveUserCountComponent as cz, EnumFormBaseContolType as d, CorePermissionActionsComponent as d$, EnumCoreFileUploaderType as d0, CoreFileUploaderComponent as d1, CoreFilterHubComponent as d2, CoreFilterHubService as d3, ControlBase as d4, Textbox as d5, CoreControlService as d6, CustomValidators as d7, URL_PATTERN as d8, coreFormDesignRoutes as d9, CoreOauthCallbackOffice365Component as dA, EnumCoreOrgTreeaAccessorMode as dB, EnumCoreOrgTreeaSearchMode as dC, CoreOrgTreeComponent as dD, CoreOrgTreeState as dE, CoreOrgTreeService as dF, CoreOrgUnitSeekerComponent as dG, CoreOrgchartflexComponent as dH, CoreOrgParamComponent as dI, EnumCorePageEditBootstrapClass as dJ, EnumCorePageEditFieldType as dK, CorePageEditService as dL, CorePageEditLiteComponent as dM, CorePageEditTabComponent as dN, EnumExType as dO, CorePageListService as dP, CorePageListState as dQ, CorePageListContentComponent as dR, EnumCoreViewItemType as dS, CorePageViewComponent as dT, CorePaginationComponent as dU, CorePaginationFullComponent as dV, CorePaginationFullService as dW, CoreFileFormatPickerComponent as dX, CorePermissionService as dY, EnumPermissionObjectType as dZ, CorePermissionComponent as d_, CoreFormTabComponent as da, CoreFormLiteComponent as db, CoreFormControlBaseComponent as dc, EnumCoreSeekerColumnJob as dd, EnumCoreSeekerColumnStaffProfile as de, EnumCoreSeekerColumnContract as df, EnumCoreSeekerColumnWorking as dg, EnumCoreSeekerColumnWage as dh, EnumCoreSeekerColumnPosition as di, EnumCoreSeekerColumnPositionConcurrent as dj, EnumCoreSeekerColumnAutoForm as dk, SeekerService as dl, CoreGridBufferComponent as dm, CoreHeaderParamsComponent as dn, CoreHelperComponent as dp, CoreLineComponent as dq, CoreLiquidWysiwygComponent as dr, CoreListComponent as ds, CoreListLazyComponent as dt, CoreLoadingSurfaceComponent as du, CoreMccComponent as dv, CoreMonthPickerComponent as dw, CoreNavigationTrackerComponent as dx, coreNavigationTrackerRoutes as dy, CoreOauthCallbackComponent as dz, CorePageEditComponent as e, StringService as e$, CorePositionConcurrentSeekerComponent as e0, CorePositionSeekerComponent as e1, CoreQrcodeComponent as e2, EnumOparator as e3, CoreQueryBuilderComponent as e4, CoreReducerIconComponent as e5, CoreRotatingTextComponent as e6, CoreRouteAccumulatorComponent as e7, CoreRoutingHistoryComponent as e8, CoreSalaryPolicyPickerComponent as e9, CoreD3Service as eA, CorePieComponent as eB, CoreScatterPlotComponent as eC, EnumHrComparisonCode as eD, EnumICoreStatisticWidgetDataType as eE, CoreStatisticWidgetComponent as eF, DecisionComponent as eG, EvaluateDialogComponent as eH, HuconcurrentlyComponent as eI, JobComponent as eJ, LanguageChangerComponent as eK, DEFAULT_SVG as eL, ItemComponent as eM, NavigatorComponent as eN, OtpInputComponent as eO, OtpInputService as eP, PageTitleComponent as eQ, PaginationComponent as eR, FilterPipe as eS, normalizeHumanName as eT, PositionComponent as eU, PositionEditService as eV, CoreDatetimeService as eW, FileService as eX, LongTaskService as eY, EnumRecursiveFields as eZ, RecursiveService as e_, CoreScrollComponent as ea, CoreScrollLazyComponent as eb, CoreSeenByComponent as ec, CoreShiftCardComponent as ed, CoreShiftCellComponent as ee, CoreShiftCollectionComponent as ef, CoreShiftStickerComponent as eg, STICKER_COLOR_SCHEMA as eh, CoreStatusStickerComponent as ei, CoreSubFormGroupComponent as ej, CoreTabListComponent as ek, CoreTagsComponent as el, CoreTopicPickerComponent as em, EnumCoreArticleCategoryTreeaAccessorMode as en, CoreTopicTreeComponent as eo, CoreTreeComponent as ep, EnumCoreTreeGridEditMode as eq, CoreTreeGridComponent as er, CoreWageSeekerComponent as es, CoreWorkingSeekerComponent as et, coreWorkflowRoutes as eu, CoreWorkflowBuilderComponent as ev, CoreWorkflowGroupEditComponent as ew, CoreYearPickerComponent as ex, CoreYearSelectorComponent as ey, EnumCoreD3ScaleType as ez, CorePageHeaderComponent as f, UnicodeService as f0, StaffProfileComponent as f1, ThreedotsComponent as f2, TooltipComponent as f3, UserActivityComponent as f4, WageComponent as f5, tooltip_directive as f6, coreStickerCollection_component as f7, dragReorder_directive as f8, CoreTabsComponent as g, CoreWorkflowService as h, EnumCoreFormControlSeekerSourceType as i, AlertService as j, CoreFormService as k, DbService as l, AiHintForColumnComponent as m, CoreWorkflowListComponent as n, TooltipDirective as o, DragReorderDirective as p, CanDeactivateGuard as q, TableCellPipe as r, MapAvatarToServerPipe as s, alertOptions as t, CoreTerminalSpinnerComponent as u, CoreFormDesignService as v, EnumWorkflowStepType as w, DomService as x, CoreDropdownComponent as y, CoreChecklistComponent as z };
-//# sourceMappingURL=ngx-histaff-alpha-ngx-histaff-alpha-CrtUN9ex.mjs.map
+export { CoreButtonGroupVnsComponent as $, AppService as A, BaseComponent as B, ChatService as C, DialogService as D, EnumCoreTablePipeType as E, FullscreenModalLoaderComponent as F, CoreDatePickerComponent as G, CoreFormControlSeekerComponent as H, ImageErrorResolverDirective as I, CoreCurrencyInputComponent as J, EnumActorSourceType as K, CoreParamControlComponent as L, MultiLanguageService as M, CoreRadioGroupComponent as N, GptService as O, ApplicationHelpService as P, HotKeysDirective as Q, EnumCorePageEditMode as R, SocketService as S, TranslatePipe as T, CoreFormComponent as U, NavigatorService as V, JsonService as W, AppConfigService as X, EnumCoreButtonVNSCode as Y, READONLY_WORKFLOW_FIELDS as Z, noneAutoClosedAlertOptions as _, CorePageListComponent as a, CommonHttpRequestService as a$, CoreStickerCollectionComponent as a0, HtmlTooltipDirective as a1, CoreControlNoFormArrayComponent as a2, EnumFormDesignMode as a3, CoreControlComponent as a4, JsonSafePipe as a5, CoreAttachmentComponent as a6, CoreMonthSelectorComponent as a7, EnumImageResolverType as a8, NormalizeHumanNamePipe as a9, EnumStyleButtonClass as aA, CanActivateFunctionUrlMapperGuard as aB, InitializationCanActivateFn as aC, InitializationCanMatchFn as aD, httpInterceptorProviders as aE, InterceptorSkipHeader as aF, appTypeInterceptor as aG, baseUrlInterceptor as aH, authInterceptor as aI, graphInterceptor as aJ, tokenInterceptor as aK, responseInterceptor as aL, timeZoneInterceptor as aM, cachingInterceptor as aN, langInterceptor as aO, EnumFilterOperator as aP, OnlineUsersComponent as aQ, ActionService as aR, AppInitializationService as aS, AuthService as aT, CacheService as aU, EnumSwUpdateVersionUpdatesEventType as aV, CheckForUpdateService as aW, EnumDeviceType as aX, EnumBrowserType as aY, EnumOsType as aZ, ClientService as a_, CoreIosSwitcherComponent as aa, SunnyRotatingComponent as ab, MapAppdemoToServerPipePipe as ac, MapAttachmentToServerPipe as ad, MapNewsfeedMediaToServerPipe as ae, StringHtmlPipe as af, UploadedFilenameCutoffPipe as ag, DialogStateComponent as ah, FooterComponent as ai, RightchatComponent as aj, WaittingScreenComponent as ak, longAlertOptions as al, attachmentOptions as am, CORE_VNS_BUTTONS as an, defaultPaging as ao, DESKTOP_SCREEN_HEDER_HEIGHT as ap, MOBILE_SCREEN_HEDER_HEIGHT as aq, themeBlue as ar, DATE_VALUE_ACCESSOR as as, DateValueAccessor as at, EnumDragType as au, EnumErrorType as av, EnumIconClass as aw, EnumProfileInfoSector as ax, EnumSignalRType as ay, EnumSortDirection as az, CoreCheckboxComponent as b, MutationViewComponent as b$, TLA_CONFIG as b0, ConfigService as b1, CoreTableService as b2, DndService as b3, DocxMergeService as b4, FilterKitService as b5, GrpcService as b6, HeaderService as b7, HistoryService as b8, HttpErrorHandler as b9, TopicPermissionService as bA, TopicTreeService as bB, UploadedFileService as bC, UrlService as bD, UserActivityService as bE, EvaluateDialogService as bF, EnumWorkScheduleViewMode as bG, WorkShiftDndService as bH, AtShiftPatternComponent as bI, AtShiftPatternApplyComponent as bJ, AtShiftPatternEditComponent as bK, AtWorksignComponent as bL, AtWorksignService as bM, FunctionComponent as bN, IndividualScheduleApplyComponent as bO, FunctionEditComponent as bP, FunctionIgnoreComponent as bQ, FunctionIgnoreEditComponent as bR, GroupFunctionComponent as bS, GroupFunctionEditComponent as bT, hrmSchemaRoutes as bU, InMemoryComponent as bV, LanguageComponent as bW, LanguageEditComponent as bX, MenuComponent as bY, MenuEditComponent as bZ, MutationLogComponent as b_, HubConnectionService as ba, IpServiceService as bb, LayoutService as bc, LiquidJsService as bd, MapService as be, MenuService as bf, MessageService as bg, ModalService as bh, OrganizationService as bi, PkceService as bj, PositionTransferService as bk, EnumNotificationDir as bl, NotificationActionType as bm, PushNotificationService as bn, RandomAvatarService as bo, RequestCache as bp, RequestCacheWithMap as bq, ResponseService as br, RoutingService as bs, EnumSsrsExpressFileExtension as bt, EnumSsrsExpressExportFormat as bu, SsrsExpressService as bv, StatisticService as bw, StatisticAuthService as bx, SysMenuService as by, TimeSheetService as bz, BaseEditComponent as c, CoreDocgenToolbarComponent as c$, PaSalaryPolicyComponent as c0, PaSalaryPolicyEditComponent as c1, PortalRouteComponent as c2, ScheduleOverviewComponent as c3, simpleChatRoutes as c4, PortalRouteEditComponent as c5, SysOtherListComponent as c6, SysOtherListEditComponent as c7, SysOtherListTypeComponent as c8, SysOtherListTypeEditComponent as c9, NewlyCreatedTokenService as cA, CoreApiProgressComponent as cB, CoreButtonGroupComponent as cC, EnumCoreButtonCode as cD, ActionSvgEditComponent as cE, CoreButtonGroupService as cF, CoreButtonVnsComponent as cG, CoreComTreeComponent as cH, ComPartyService as cI, CoreCommonParamKitComponent as cJ, CoreCompareDbPipelineComponent as cK, CoreCompositionState as cL, CoreCompositionService as cM, CoreCompositionComponent as cN, CoreConfirmDialogComponent as cO, ConfirmDialogStateComponent as cP, CoreLazyMountComponent as cQ, CoreRootMenuItemPickerComponent as cR, CoreRootMenuItemPickerService as cS, ECoreTableToolCode as cT, ECoreTableToolClass as cU, CoreTableComponent as cV, CoreComProfileComponent as cW, CoreContractSeekerComponent as cX, CoreControlNoGridBufferComponent as cY, CoreControlNoSeekerComponent as cZ, coreDocGenRoutes as c_, SysActionComponent as ca, SysActionEditComponent as cb, SysFunctionActionComponent as cc, SysFunctionActionEditComponent as cd, SysFunctionActionMapperComponent as ce, SysFunctionUrlMapperComponent as cf, FunctionEditService as cg, SysModuleComponent as ch, SysModuleEditComponent as ci, SysRouteAccessComponent as cj, liner_to_nested_array_script as ck, blob_to_base64_script as cl, AlertComponent as cm, EnumAlertType as cn, IAlertOptions as co, AnimatedTextService as cp, AnimatedTextComponent as cq, BaseDropdownComponent as cr, ButtonGroupModule as cs, ButtonGroupService as ct, ButtonGroupComponent as cu, EnumButtonCaptionCode as cv, CoreButtonComponent as cw, CoreAccordionComponent as cx, CoreAccordionService as cy, CoreActiveUserCountComponent as cz, EnumFormBaseContolType as d, EnumPermissionObjectType as d$, CoreEmployeeScheduleComponent as d0, CoreEmployeeSeekerComponent as d1, EnumCoreFileUploaderType as d2, CoreFileUploaderComponent as d3, CoreFilterHubComponent as d4, CoreFilterHubService as d5, ControlBase as d6, Textbox as d7, CoreControlService as d8, CustomValidators as d9, coreNavigationTrackerRoutes as dA, CoreOauthCallbackComponent as dB, CoreOauthCallbackOffice365Component as dC, EnumCoreOrgTreeaAccessorMode as dD, EnumCoreOrgTreeaSearchMode as dE, CoreOrgTreeComponent as dF, CoreOrgTreeState as dG, CoreOrgTreeService as dH, CoreOrgUnitSeekerComponent as dI, CoreOrgchartflexComponent as dJ, CoreOrgParamComponent as dK, EnumCorePageEditBootstrapClass as dL, EnumCorePageEditFieldType as dM, CorePageEditService as dN, CorePageEditLiteComponent as dO, CorePageEditTabComponent as dP, EnumExType as dQ, CorePageListService as dR, CorePageListState as dS, CorePageListContentComponent as dT, EnumCoreViewItemType as dU, CorePageViewComponent as dV, CorePaginationComponent as dW, CorePaginationFullComponent as dX, CorePaginationFullService as dY, CoreFileFormatPickerComponent as dZ, CorePermissionService as d_, URL_PATTERN as da, coreFormDesignRoutes as db, CoreFormTabComponent as dc, CoreFormLiteComponent as dd, CoreFormControlBaseComponent as de, EnumCoreSeekerColumnJob as df, EnumCoreSeekerColumnStaffProfile as dg, EnumCoreSeekerColumnContract as dh, EnumCoreSeekerColumnWorking as di, EnumCoreSeekerColumnWage as dj, EnumCoreSeekerColumnPosition as dk, EnumCoreSeekerColumnPositionConcurrent as dl, EnumCoreSeekerColumnAutoForm as dm, SeekerService as dn, CoreGridBufferComponent as dp, CoreHeaderParamsComponent as dq, CoreHelperComponent as dr, CoreLineComponent as ds, CoreLiquidWysiwygComponent as dt, CoreListComponent as du, CoreListLazyComponent as dv, CoreLoadingSurfaceComponent as dw, CoreMccComponent as dx, CoreMonthPickerComponent as dy, CoreNavigationTrackerComponent as dz, CorePageEditComponent as e, EnumRecursiveFields as e$, CorePermissionComponent as e0, CorePermissionActionsComponent as e1, CorePositionConcurrentSeekerComponent as e2, CorePositionSeekerComponent as e3, CoreQrcodeComponent as e4, EnumOparator as e5, CoreQueryBuilderComponent as e6, CoreReducerIconComponent as e7, CoreRotatingTextComponent as e8, CoreRouteAccumulatorComponent as e9, CoreYearSelectorComponent as eA, EnumCoreD3ScaleType as eB, CoreD3Service as eC, CorePieComponent as eD, CoreScatterPlotComponent as eE, EnumHrComparisonCode as eF, EnumICoreStatisticWidgetDataType as eG, CoreStatisticWidgetComponent as eH, DecisionComponent as eI, EvaluateDialogComponent as eJ, HuconcurrentlyComponent as eK, JobComponent as eL, LanguageChangerComponent as eM, DEFAULT_SVG as eN, ItemComponent as eO, NavigatorComponent as eP, OtpInputComponent as eQ, OtpInputService as eR, PageTitleComponent as eS, PaginationComponent as eT, FilterPipe as eU, normalizeHumanName as eV, PositionComponent as eW, PositionEditService as eX, CoreDatetimeService as eY, FileService as eZ, LongTaskService as e_, CoreRoutingHistoryComponent as ea, CoreSalaryPolicyPickerComponent as eb, CoreScrollComponent as ec, CoreScrollLazyComponent as ed, CoreSeenByComponent as ee, CoreShiftCardComponent as ef, CoreShiftCellComponent as eg, CoreShiftCollectionComponent as eh, CoreShiftStickerComponent as ei, STICKER_COLOR_SCHEMA as ej, CoreStatusStickerComponent as ek, CoreSubFormGroupComponent as el, CoreTabListComponent as em, CoreTagsComponent as en, CoreTopicPickerComponent as eo, EnumCoreArticleCategoryTreeaAccessorMode as ep, CoreTopicTreeComponent as eq, CoreTreeComponent as er, EnumCoreTreeGridEditMode as es, CoreTreeGridComponent as et, CoreWageSeekerComponent as eu, CoreWorkingSeekerComponent as ev, coreWorkflowRoutes as ew, CoreWorkflowBuilderComponent as ex, CoreWorkflowGroupEditComponent as ey, CoreYearPickerComponent as ez, CorePageHeaderComponent as f, RecursiveService as f0, StringService as f1, UnicodeService as f2, StaffProfileComponent as f3, ThreedotsComponent as f4, TooltipComponent as f5, UserActivityComponent as f6, WageComponent as f7, tooltip_directive as f8, coreStickerCollection_component as f9, dragReorder_directive as fa, CoreTabsComponent as g, CoreWorkflowService as h, EnumCoreFormControlSeekerSourceType as i, AlertService as j, CoreFormService as k, DbService as l, AiHintForColumnComponent as m, CoreWorkflowListComponent as n, TooltipDirective as o, DragReorderDirective as p, CanDeactivateGuard as q, TableCellPipe as r, MapAvatarToServerPipe as s, alertOptions as t, CoreTerminalSpinnerComponent as u, CoreFormDesignService as v, EnumWorkflowStepType as w, DomService as x, CoreDropdownComponent as y, CoreChecklistComponent as z };
+//# sourceMappingURL=ngx-histaff-alpha-ngx-histaff-alpha-ByIs02SI.mjs.map