ngx-histaff-alpha 5.1.1 → 5.1.3

package/fesm2022/ngx-histaff-alpha.mjs

@@ -7,7 +7,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { last, map, tap, finalize, first, filter as filter$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i3 from '@angular/common';
-import { CommonModule, NgStyle, UpperCasePipe, AsyncPipe, LowerCasePipe, NgIf, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgStyle, UpperCasePipe, AsyncPipe, NgTemplateOutlet, LowerCasePipe, NgIf } from '@angular/common';
 import * as i1$4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, ReactiveFormsModule, FormControl, FormGroup, Validators, FormArray } from '@angular/forms';
 import * as i1$2 from '@angular/router';
@@ -1668,6 +1668,7 @@ var EnumFormBaseContolType;
     EnumFormBaseContolType["SHIFTCOLLECTION"] = "SHIFTCOLLECTION";
     EnumFormBaseContolType["ORG_PARAM_DROPDOWN"] = "ORG_PARAM_DROPDOWN";
     EnumFormBaseContolType["REPORT_FORMAT"] = "REPORT_FORMAT";
+    EnumFormBaseContolType["TOPICPICKER"] = "TOPICPICKER";
 })(EnumFormBaseContolType || (EnumFormBaseContolType = {}));
 
 class HubConnectionService {
@@ -8629,6 +8630,7 @@ var EnumCoreFormControlSeekerSourceType;
     EnumCoreFormControlSeekerSourceType["POSITION_SEEK"] = "POSITION_SEEK";
     EnumCoreFormControlSeekerSourceType["POSITION_CONCURRENT_SEEK"] = "POSITION_CONCURRENT_SEEK";
     EnumCoreFormControlSeekerSourceType["ORGANIZATION_UNIT_SEEK"] = "ORGANIZATION_UNIT_SEEK";
+    EnumCoreFormControlSeekerSourceType["TOPICPICKER"] = "TOPICPICKER";
 })(EnumCoreFormControlSeekerSourceType || (EnumCoreFormControlSeekerSourceType = {}));
 
 class CoreReducerIconComponent {
@@ -19815,860 +19817,1406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                     ], template: "<div #container class=\"core-shift-cell-container\">\r\n    @for (shift$ of shifts$$!; track $index) {\r\n    <div #shiftSticker>\r\n        <core-shift-sticker [shift$]=\"shift$\" [$shiftCellId]=\"shiftCellId\" [$width]=\"228\"\r\n            [parentShifts$]=\"shifts$\" [$readOnly]=\"$readOnly()\"></core-shift-sticker>\r\n    </div>\r\n    }\r\n\r\n    @if (!value?.length) {\r\n    @if (!$hideStarterPlusSign()) {\r\n    <div #firstAddWrapper class=\"first-add-wrapper\" (click)=\"onAdd($event)\" [class.pointer]=\"!$readOnly()\">\r\n        <div class=\"icon-wrapper\" [class.hidden]=\"$readOnly()\">\r\n            <i class=\"feather-plus\"></i>\r\n        </div>\r\n    </div>\r\n    } @else {\r\n    <div #firstAddWrapper class=\"first-add-wrapper\">\r\n        {{ 'DROP_A_SHIFT_HERE' | translate: lang }}\r\n    </div>\r\n    }\r\n    }\r\n\r\n\r\n\r\n</div>", styles: [".core-shift-cell-container{--first-add-height: 36.59px;--first-add-width: 228px;--first-add-border: 1px solid #E6EBED;--first-add-opacity: 1;--first-add-icon-width: 15px;--first-add-icon-height: 15px;--first-add-icon-border-radius: 50%;--first-add-icon-color: white;--first-add-icon-background-color: #3DC65A;--first-add-color: gray;padding:15px;background-color:transparent;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.core-shift-cell-container .first-add-wrapper{display:flex;align-items:center;justify-content:center;height:var(--first-add-height);box-sizing:border-box;min-width:105px;max-width:228px;opacity:var(--first-add-opacity);border:var(--first-add-border)}.core-shift-cell-container .first-add-wrapper .icon-wrapper{width:var(--first-add-icon-width);height:var(--first-add-icon-height);color:var(--first-add-icon-color);background-color:var(--first-add-icon-background-color);border-radius:var(--first-add-icon-border-radius)}.core-shift-cell-container .first-add-wrapper .icon-wrapper.hidden{display:none}.core-shift-cell-container .pointer{cursor:pointer}.core-shift-cell-container.valid-drop{background-color:#dff6dd}.core-shift-cell-container.invalid-drop{background-color:#f08080}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: WorkShiftDndService }, { type: DialogService }, { type: MultiLanguageService }, { type: DndService }] });
 
-class CoreControlComponent extends BaseComponent {
-    constructor(mls, alertService) {
-        super(mls);
-        this.mls = mls;
-        this.alertService = alertService;
-        this.errors = [];
-        this.isDevMode = isDevMode();
-        this.coreOrgTreeDefaultAccessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
-    }
-    displayValidatorNameMathchingError() {
-        if (isDevMode()) {
-            this.alertService.error(`
-        '${this.control.field}' validator array definition error: validator name must equal Validators.&lt;key&gt;
-      `, noneAutoClosedAlertOptions);
-        }
-    }
-    checkError() {
-        if (!!this.rawControl?.errors) {
-            const newErrors = [];
-            Object.keys(this.form.controls[this.control.field].errors).forEach(key => {
-                /*
-                  tanleica:
-                    By custom design, custom error is an array
-                    while built-in validator should produce an object error if any
-                */
-                if (this.form.controls[this.control.field].errors[key] instanceof Array) {
-                    newErrors.push({
-                        key: key,
-                        errorMessage: this.form.controls[this.control.field].errors[key][1]
+var EnumCoreArticleCategoryTreeaAccessorMode;
+(function (EnumCoreArticleCategoryTreeaAccessorMode) {
+    EnumCoreArticleCategoryTreeaAccessorMode["ACTIVATED_SINGLE"] = "ACTIVATED_SINGLE";
+    EnumCoreArticleCategoryTreeaAccessorMode["ACTIVATED_INHERITANCE"] = "ACTIVATED_INHERITANCE";
+    EnumCoreArticleCategoryTreeaAccessorMode["CHECKED"] = "CHECKED";
+})(EnumCoreArticleCategoryTreeaAccessorMode || (EnumCoreArticleCategoryTreeaAccessorMode = {}));
+class CoreTopicTreeComponent extends CoreFormControlBaseComponent {
+    writeValue(obj) {
+        this.value = obj;
+        switch (this.accessorMode) {
+            case EnumCoreArticleCategoryTreeaAccessorMode.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;
                     });
                 }
-                else {
-                    if (!!this.control.validators) {
-                        const filter = this.control.validators?.filter(x => x.name.toLowerCase() === key.toLowerCase());
-                        if (!!filter.length) {
-                            newErrors.push({
-                                key: key,
-                                errorMessage: filter[0].errorMessage
-                            });
-                        }
-                        else {
-                            this.displayValidatorNameMathchingError();
-                        }
-                    }
-                    else {
-                        this.displayValidatorNameMathchingError();
-                    }
+                break;
+            case EnumCoreArticleCategoryTreeaAccessorMode.ACTIVATED_SINGLE:
+            case EnumCoreArticleCategoryTreeaAccessorMode.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;
+                    });
                 }
-            });
-            this.errors = newErrors;
+                break;
+            default:
+                break;
         }
-        else {
-            this.errors = [];
+        if (this.accessorMode === EnumCoreArticleCategoryTreeaAccessorMode.CHECKED) {
         }
-    }
-    resetError() {
-        this.errors = [];
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
-        this.controlType = this.control.controlType;
-        this.required = !!this.control.validators?.filter(x => x.validator.name === 'required').length;
-        this.rawControl = this.form.get(this.control.field);
-        this.subscriptions.push(this.rawControl?.statusChanges.subscribe(_ => {
-            this.checkError();
-        }));
-        if (!!this.checkError$) {
-            this.subscriptions.push(this.checkError$.subscribe(x => {
-                if (x) {
-                    this.checkError();
-                }
-                else {
-                    this.resetError();
-                }
-            }));
+        else /* EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE or EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE */ {
         }
     }
-    get isValid() { return this.form.controls[this.control.field].valid; }
-    onFocus(e) {
-        this.control.focus$?.next(e);
-    }
-    onBlur(e) {
-        this.control.blur$?.next(e);
-    }
-    oHandleClick(e) {
-        this.control.click$?.next(e);
+    setDisabledState(disabled) {
+        this.disabled = disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreControlComponent, deps: [{ token: MultiLanguageService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreControlComponent, isStandalone: true, selector: "core-control", inputs: { control: "control", form: "form", checkError$: "checkError$", rangeLimit: "rangeLimit" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-control-container\">\r\n    <div [formGroup]=\"form\" [class.hidden]=\"!!control.hidden\">\r\n\r\n        <!-- START: LABEL SESSION-->\r\n        <label [class]=\"'control-label' +  (required ? ' required' : '')\" [attr.for]=\"control.field\"\r\n            [class.avatar-label]=\"control.uploadFileType==='IMAGE_AVATAR'\" [appTooltip]=\"control.tooltip! | translate: lang\" [ngStyle]=\"{\r\n                display: 'inline-block'\r\n            }\">\r\n            {{(control.controlType!=='CHECKBOX' && control.controlType!=='BUTTON') ? (control.label | translate: lang) : ''}}\r\n        </label>\r\n\r\n        @if (!!control.hint! && control.controlType !== 'CHECKBOX') {\r\n            <i class=\"feather-help-circle\" [appTooltip]=\"control.hint!\" [ngStyle]=\"{\r\n                display: 'inline-block',\r\n                marginLeft: '2px'\r\n            }\"></i>\r\n        }\r\n\r\n        <!-- START: LABEL SESSION-->\r\n\r\n        <!-- START: FORM-CONTROL SESSION-->\r\n\r\n        <ng-container>\r\n        @switch (control.controlType) {\r\n            @case (\"TEXTBOX\") {\r\n                <input *ngIf=\"control.type==='date'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly!\" useValueAsDate>\r\n    \r\n                <input *ngIf=\"control.type==='number'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\" [step]=\"control.step || '1'\">\r\n    \r\n                <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [formControlName]=\"control.field\"\r\n                    [value]=\"form.get(control.field)?.value | tableCell: control.pipe : lang\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\"\r\n                    [appTooltip]=\"form.get(control.field)?.value\"\r\n                    (focus)=\"onFocus($event)\"\r\n                    (blur)=\"onBlur($event)\"\r\n                    >\r\n            }\r\n            @case (\"CURRENCY\") {\r\n                <core-currency-input [formControlName]=\"control.field\"></core-currency-input>\r\n            }\r\n            @case (\"TEXTAREA\") {\r\n                <textarea [rows]=\"control.textareaRows?.toString() || '3'\" [ngStyle]=\"{ height: 'unset' }\"\r\n                    [formControlName]=\"control.field\" class=\"form-control\" [readonly]=\"control.readonly\"></textarea>\r\n            }\r\n            @case (\"CHECKBOX\") {\r\n                <core-checkbox [formControlName]=\"control.field\" [text]=\"control.label\"\r\n                    [inputValue]=\"control.value\"></core-checkbox>\r\n            }\r\n            @case (\"MCC\") {\r\n                <core-mcc [formControlName]=\"control.field\" [columns]=\"control.columns!\" [shownFrom]=\"control.shownFrom!\" \r\n                [apiDefinition]=\"control.apiDefinition!\" [getByIdApi]=\"control.getByIdApi!\" [selectedRow$]=\"control.selectedRow$!\"\r\n                [outerParam$]=\"control.outerParam$!\"\r\n                ></core-mcc>\r\n            }\r\n            @case (\"DATEPICKER\") {\r\n                <core-date-picker [formControlName]=\"control.field\" [rangeLimit]=\"control.rangeLimit!\" [popupAlign]=\"control.popupAlign!\"></core-date-picker>\r\n            }\r\n            @case (\"DROPDOWN\") {\r\n                @if (!!control.dropdownOptions$) {\r\n                    <core-dropdown [formControlName]=\"control.field\" [options$]=\"control.dropdownOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-dropdown>\r\n                }\r\n            }\r\n            @case (\"LIST\") {\r\n                <core-list [formControlName]=\"control.field\" [options]=\"control.listOptions!\"></core-list>\r\n            }\r\n            @case (\"CHECKLIST\") {\r\n                @if (!!control.checklistOptions$) {\r\n                    <core-checklist [formControlName]=\"control.field\" [options$]=\"control.checklistOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-checklist>\r\n                }\r\n            }\r\n            @case (\"FILEUPLOADER\") {\r\n                @if (!!control.uploadFileType) {\r\n                    <core-file-uploader [formControlName]=\"control.field\" [uploadFileType]=\"control.uploadFileType\"\r\n                        [fileDataControlName]=\"control.fileDataControlName!\"\r\n                        [fileNameControlName]=\"control.fileNameControlName!\"\r\n                        [fileTypeControlName]=\"control.fileTypeControlName!\"\r\n                        [verticalMode]=\"control.verticalMode!\"></core-file-uploader>\r\n                }\r\n            }\r\n            @case (\"ATTACHMENT\") {\r\n                <core-attachment ngDefaultControl [formControlName]=\"control.field\" [assignTo]=\"control.assignTo!\"\r\n                    [valueToShow]=\"control.valueToShow!\"></core-attachment>\r\n            }\r\n            @case (\"GRIDBUFFER\") {\r\n                @if (!!control.gridBufferFormSections && !!control.gridBufferTableColumns) {\r\n                    <core-grid-buffer [formControlName]=\"control.field\" [formSections]=\"control.gridBufferFormSections\"\r\n                        [gridColumns]=\"control.gridBufferTableColumns\"\r\n                        (onBufferFormCreated)=\"!!control.onBufferFormCreated ? control.onBufferFormCreated($event) : null\"></core-grid-buffer>\r\n                }\r\n            }\r\n            @case (\"ORGTREECHECK\") {\r\n                <core-org-tree [formControlName]=\"control.field\"\r\n                    [accessorMode]=\"coreOrgTreeDefaultAccessorMode\" [height]=\"control.height!\"></core-org-tree>\r\n            }\r\n            @case (\"RADIOGROUP\") {\r\n                <core-radio-group [formControlName]=\"control.field\"\r\n                    [options$]=\"control.radioGroupOptions$!\"\r\n                    [vertical]=\"control.verticalMode!\"\r\n                    ></core-radio-group>\r\n            }\r\n            @case (\"MONTHSELECTOR\") {\r\n                <core-month-selector [formControlName]=\"control.field\"></core-month-selector>\r\n            }\r\n            @case (\"SHIFTCELL\") {\r\n                <core-shift-cell [formControlName]=\"control.field\"></core-shift-cell>\r\n            }\r\n            @case (\"SHIFTCOLLECTION\") {\r\n                <core-shift-collection [relativeMode]=\"true\" [height]=\"control.height || 800\"></core-shift-collection>\r\n            }\r\n            @case (\"SEEKER\") {\r\n                @switch(control.seekerSourceType) {\r\n                    @case(\"JOB_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"EMPLOYEE_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"CONTRACT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" [boundFrom]=\"control.boundFrom!\"\r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\" \r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [shownFrom]=\"control.shownFrom!\"\r\n                            [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WORKING_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WAGE_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [formControlName]=\"control.field\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [seekerVerifyIgnore]=\"control.seekerVerifyIgnore!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_CONCURRENT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [multiModeTableHeight]=\"control.multiModeTableHeight!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"ORGANIZATION_UNIT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [formControlName]=\"control.field\" [seekerSourceType]=\"control.seekerSourceType!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [alsoBindTo]=\"control.alsoBindTo!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"control.controlType==='BUTTON'\">\r\n            <button type=\"button\" class=\"btn btn-secondary text\" (click)=\"oHandleClick($event)\">{{control.label| translate: lang}}</button>\r\n        </ng-container>\r\n        <!-- END: FORM-CONTROL SESSION-->\r\n\r\n        <!-- START: ERROR SESSION-->\r\n        <div *ngIf=\"!!errors!.length\">\r\n            <div class=\"form-control-error\" *ngFor=\"let error of errors\">\r\n                {{ error.errorMessage | translate: lang }}\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!!!errors!.length && !!checkError$.value\">\r\n            <div>\r\n                {{ '&nbsp;' }}\r\n            </div>\r\n        </div>\r\n        <!-- END: ERROR SESSION-->\r\n\r\n    </div>\r\n</div>", styles: [".core-control-container{font-size:var(--typo-basic-font-size)!important}.core-control-container .control-label{color:#848484}.core-control-container>div.hidden{display:none}.core-control-container label{color:#464646}.core-control-container label.required:after{content:\"*\";color:#ff040b}.core-control-container label.avatar-label{width:var(--size-file-uploader);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight"] }, { kind: "component", type: CoreListComponent, selector: "core-list", inputs: ["title", "height", "options"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreFormControlSeekerComponent, selector: "core-form-control-seeker", inputs: ["title", "showPageHeader", "preDefinedOuterParam$", "preDefinedOuterFilter$", "click$", "getByIdObject$", "getByIdApi", "paramMode", "multiMode", "objectList$", "useTheseColumns", "hideOrgTree", "excludedColumns", "excludeExistingList", "sourceSpaceHeight", "indirectBinding", "bindGridIdTo", "multiModeExtendedColumns", "multiModeExtendedSections", "editBufferData$", "multiModeTableHeight", "multiModeRowHeight", "seekerSourceType", "boundFrom", "shownFrom", "alsoBindTo", "seekerVerifyIgnore"], outputs: ["onDoubleClick"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreFileUploaderComponent, selector: "core-file-uploader", inputs: ["uploadFileType", "fileDataControlName", "fileNameControlName", "fileTypeControlName", "avatarSize", "defaultAvatar", "hidePreview", "verticalMode"] }, { kind: "component", type: CoreAttachmentComponent, selector: "core-attachment", inputs: ["assignTo", "readonly", "valueToShow"] }, { kind: "component", type: CoreGridBufferComponent, selector: "core-grid-buffer", inputs: ["formSections", "gridColumns"], outputs: ["onBufferFormCreated"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "readonly", "disabled"] }, { kind: "component", type: CoreOrgTreeComponent, selector: "core-org-tree", inputs: ["lineColor", "fullWidthMode", "accessorMode", "searchMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "excludedIds$", "stateIsolated$"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical"] }, { kind: "component", type: CoreMccComponent, selector: "core-mcc", inputs: ["height", "columns", "shownFrom", "apiDefinition", "getByIdApi", "outerParam$", "selectedRow$", "outerFilterOperators", "outerInOperators"] }, { kind: "component", type: CoreMonthSelectorComponent, selector: "core-month-selector", inputs: ["align"], outputs: ["onYearClick"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreCurrencyInputComponent, selector: "core-currency-input", inputs: ["currencySign"], outputs: ["onLeftFocus"] }, { kind: "component", type: CoreShiftCellComponent, selector: "core-shift-cell", inputs: ["$readOnly", "$hideStarterPlusSign", "$hideStickersWhileDragover", "$backgroundColor"] }, { kind: "component", type: CoreShiftCollectionComponent, selector: "core-shift-collection", inputs: ["height", "relativeMode"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreControlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-control', imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TranslatePipe,
-                        TableCellPipe,
-                        CoreDropdownComponent,
-                        CoreListComponent,
-                        CoreChecklistComponent,
-                        CoreFormControlSeekerComponent,
-                        CoreCheckboxComponent,
-                        CoreFileUploaderComponent,
-                        CoreAttachmentComponent,
-                        CoreGridBufferComponent,
-                        CoreDatePickerComponent,
-                        CoreOrgTreeComponent,
-                        CoreRadioGroupComponent,
-                        CoreMccComponent,
-                        CoreMonthSelectorComponent,
-                        TooltipDirective,
-                        CoreCurrencyInputComponent,
-                        CoreShiftCellComponent,
-                        CoreShiftCollectionComponent
-                    ], template: "<div class=\"core-control-container\">\r\n    <div [formGroup]=\"form\" [class.hidden]=\"!!control.hidden\">\r\n\r\n        <!-- START: LABEL SESSION-->\r\n        <label [class]=\"'control-label' +  (required ? ' required' : '')\" [attr.for]=\"control.field\"\r\n            [class.avatar-label]=\"control.uploadFileType==='IMAGE_AVATAR'\" [appTooltip]=\"control.tooltip! | translate: lang\" [ngStyle]=\"{\r\n                display: 'inline-block'\r\n            }\">\r\n            {{(control.controlType!=='CHECKBOX' && control.controlType!=='BUTTON') ? (control.label | translate: lang) : ''}}\r\n        </label>\r\n\r\n        @if (!!control.hint! && control.controlType !== 'CHECKBOX') {\r\n            <i class=\"feather-help-circle\" [appTooltip]=\"control.hint!\" [ngStyle]=\"{\r\n                display: 'inline-block',\r\n                marginLeft: '2px'\r\n            }\"></i>\r\n        }\r\n\r\n        <!-- START: LABEL SESSION-->\r\n\r\n        <!-- START: FORM-CONTROL SESSION-->\r\n\r\n        <ng-container>\r\n        @switch (control.controlType) {\r\n            @case (\"TEXTBOX\") {\r\n                <input *ngIf=\"control.type==='date'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly!\" useValueAsDate>\r\n    \r\n                <input *ngIf=\"control.type==='number'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\" [step]=\"control.step || '1'\">\r\n    \r\n                <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [formControlName]=\"control.field\"\r\n                    [value]=\"form.get(control.field)?.value | tableCell: control.pipe : lang\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\"\r\n                    [appTooltip]=\"form.get(control.field)?.value\"\r\n                    (focus)=\"onFocus($event)\"\r\n                    (blur)=\"onBlur($event)\"\r\n                    >\r\n            }\r\n            @case (\"CURRENCY\") {\r\n                <core-currency-input [formControlName]=\"control.field\"></core-currency-input>\r\n            }\r\n            @case (\"TEXTAREA\") {\r\n                <textarea [rows]=\"control.textareaRows?.toString() || '3'\" [ngStyle]=\"{ height: 'unset' }\"\r\n                    [formControlName]=\"control.field\" class=\"form-control\" [readonly]=\"control.readonly\"></textarea>\r\n            }\r\n            @case (\"CHECKBOX\") {\r\n                <core-checkbox [formControlName]=\"control.field\" [text]=\"control.label\"\r\n                    [inputValue]=\"control.value\"></core-checkbox>\r\n            }\r\n            @case (\"MCC\") {\r\n                <core-mcc [formControlName]=\"control.field\" [columns]=\"control.columns!\" [shownFrom]=\"control.shownFrom!\" \r\n                [apiDefinition]=\"control.apiDefinition!\" [getByIdApi]=\"control.getByIdApi!\" [selectedRow$]=\"control.selectedRow$!\"\r\n                [outerParam$]=\"control.outerParam$!\"\r\n                ></core-mcc>\r\n            }\r\n            @case (\"DATEPICKER\") {\r\n                <core-date-picker [formControlName]=\"control.field\" [rangeLimit]=\"control.rangeLimit!\" [popupAlign]=\"control.popupAlign!\"></core-date-picker>\r\n            }\r\n            @case (\"DROPDOWN\") {\r\n                @if (!!control.dropdownOptions$) {\r\n                    <core-dropdown [formControlName]=\"control.field\" [options$]=\"control.dropdownOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-dropdown>\r\n                }\r\n            }\r\n            @case (\"LIST\") {\r\n                <core-list [formControlName]=\"control.field\" [options]=\"control.listOptions!\"></core-list>\r\n            }\r\n            @case (\"CHECKLIST\") {\r\n                @if (!!control.checklistOptions$) {\r\n                    <core-checklist [formControlName]=\"control.field\" [options$]=\"control.checklistOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-checklist>\r\n                }\r\n            }\r\n            @case (\"FILEUPLOADER\") {\r\n                @if (!!control.uploadFileType) {\r\n                    <core-file-uploader [formControlName]=\"control.field\" [uploadFileType]=\"control.uploadFileType\"\r\n                        [fileDataControlName]=\"control.fileDataControlName!\"\r\n                        [fileNameControlName]=\"control.fileNameControlName!\"\r\n                        [fileTypeControlName]=\"control.fileTypeControlName!\"\r\n                        [verticalMode]=\"control.verticalMode!\"></core-file-uploader>\r\n                }\r\n            }\r\n            @case (\"ATTACHMENT\") {\r\n                <core-attachment ngDefaultControl [formControlName]=\"control.field\" [assignTo]=\"control.assignTo!\"\r\n                    [valueToShow]=\"control.valueToShow!\"></core-attachment>\r\n            }\r\n            @case (\"GRIDBUFFER\") {\r\n                @if (!!control.gridBufferFormSections && !!control.gridBufferTableColumns) {\r\n                    <core-grid-buffer [formControlName]=\"control.field\" [formSections]=\"control.gridBufferFormSections\"\r\n                        [gridColumns]=\"control.gridBufferTableColumns\"\r\n                        (onBufferFormCreated)=\"!!control.onBufferFormCreated ? control.onBufferFormCreated($event) : null\"></core-grid-buffer>\r\n                }\r\n            }\r\n            @case (\"ORGTREECHECK\") {\r\n                <core-org-tree [formControlName]=\"control.field\"\r\n                    [accessorMode]=\"coreOrgTreeDefaultAccessorMode\" [height]=\"control.height!\"></core-org-tree>\r\n            }\r\n            @case (\"RADIOGROUP\") {\r\n                <core-radio-group [formControlName]=\"control.field\"\r\n                    [options$]=\"control.radioGroupOptions$!\"\r\n                    [vertical]=\"control.verticalMode!\"\r\n                    ></core-radio-group>\r\n            }\r\n            @case (\"MONTHSELECTOR\") {\r\n                <core-month-selector [formControlName]=\"control.field\"></core-month-selector>\r\n            }\r\n            @case (\"SHIFTCELL\") {\r\n                <core-shift-cell [formControlName]=\"control.field\"></core-shift-cell>\r\n            }\r\n            @case (\"SHIFTCOLLECTION\") {\r\n                <core-shift-collection [relativeMode]=\"true\" [height]=\"control.height || 800\"></core-shift-collection>\r\n            }\r\n            @case (\"SEEKER\") {\r\n                @switch(control.seekerSourceType) {\r\n                    @case(\"JOB_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"EMPLOYEE_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"CONTRACT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" [boundFrom]=\"control.boundFrom!\"\r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\" \r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [shownFrom]=\"control.shownFrom!\"\r\n                            [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WORKING_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WAGE_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [formControlName]=\"control.field\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [seekerVerifyIgnore]=\"control.seekerVerifyIgnore!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_CONCURRENT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [multiModeTableHeight]=\"control.multiModeTableHeight!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"ORGANIZATION_UNIT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [formControlName]=\"control.field\" [seekerSourceType]=\"control.seekerSourceType!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [alsoBindTo]=\"control.alsoBindTo!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"control.controlType==='BUTTON'\">\r\n            <button type=\"button\" class=\"btn btn-secondary text\" (click)=\"oHandleClick($event)\">{{control.label| translate: lang}}</button>\r\n        </ng-container>\r\n        <!-- END: FORM-CONTROL SESSION-->\r\n\r\n        <!-- START: ERROR SESSION-->\r\n        <div *ngIf=\"!!errors!.length\">\r\n            <div class=\"form-control-error\" *ngFor=\"let error of errors\">\r\n                {{ error.errorMessage | translate: lang }}\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!!!errors!.length && !!checkError$.value\">\r\n            <div>\r\n                {{ '&nbsp;' }}\r\n            </div>\r\n        </div>\r\n        <!-- END: ERROR SESSION-->\r\n\r\n    </div>\r\n</div>", styles: [".core-control-container{font-size:var(--typo-basic-font-size)!important}.core-control-container .control-label{color:#848484}.core-control-container>div.hidden{display:none}.core-control-container label{color:#464646}.core-control-container label.required:after{content:\"*\";color:#ff040b}.core-control-container label.avatar-label{width:var(--size-file-uploader);display:flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: AlertService }], propDecorators: { control: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], checkError$: [{
-                type: Input
-            }], rangeLimit: [{
-                type: Input
-            }] } });
-
-class CoreFormComponent {
-    constructor(coreControlService, multiLanguageService, alertService, coreFormService, appConfigService) {
-        this.coreControlService = coreControlService;
-        this.multiLanguageService = multiLanguageService;
+    constructor(
+    //public override injector: Injector,
+    authService, recursiveService, mls, layoutService, topicTreeService, alertService) {
+        super( /*injector*/);
+        this.authService = authService;
+        this.recursiveService = recursiveService;
+        this.mls = mls;
+        this.layoutService = layoutService;
+        this.topicTreeService = topicTreeService;
         this.alertService = alertService;
-        this.coreFormService = coreFormService;
-        this.appConfigService = appConfigService;
-        this.checkError$ = new BehaviorSubject(false);
-        this.onFormCreated = new EventEmitter();
-        this.onFormRefCreated = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this.onSave = new EventEmitter();
-        this.onCancal = new EventEmitter();
-        this.buttonClick = new EventEmitter();
+        this.lineColor = 'transparent';
+        this.itemDoubleClick = new EventEmitter();
+        this.itemClick = new EventEmitter();
+        this.activeIds = [];
+        this.checkedIds = [];
         this.subscriptions = [];
-        this.payLoad = '';
-        this.isDevMode = isDevMode();
-    }
-    updateSections(newSections) {
-        this.sections.map((section, sectionIndex) => {
-            const newSection = newSections[sectionIndex];
-            section.rows.map((row, rowIndex) => {
-                const newRow = newSection.rows[rowIndex];
-                row.map((control, controlIndex) => {
-                    const newControl = newRow[controlIndex];
-                    /* THE ONLY PROP TO BE UDATED IS 'hidden', THE OTHERS SHOULD BE MANIPULATED THROUGH this.form.get(YOUR_CONTROL_NAME)... */
-                    control.hidden = newControl?.hidden;
-                    /************************************************************************************************************************/
-                });
-            });
-            /* #region Oct the 11th 2023 */
-            /* Some sections was posibly have renderOff=true from previous state and their controls must be created/remove */
-            /*
-            BUT THIS TASK IS HARD SO FAR
-            */
-            /* #endregion Oct the 11th 2023 */
-        });
+        this.search$ = new Subject();
+        this.searchPlaceholder = EnumTranslateKey.UI_COMMON_PLACE_HOLDER_SEARCH_HERE;
+        this.checkInheritance = true; // default value is true
+        this.showDissolved = true; // default value is false
+        this.initializing = true;
+        // this.reduced$ = this.coreOrgTreeState.coreOrgTreeReduced$;
+        this.initializing = false;
     }
     ngOnChanges(changes) {
-        if (changes['inputSections']) {
-            let newSections = changes['inputSections'].currentValue;
-            if (!!!this.form) {
-                this.sections = newSections;
-                let leftGroup;
-                let form;
-                const mainGroup = this.coreControlService.toGroup(this.sections);
-                if (!!this.leftInputSections) {
-                    leftGroup = this.coreControlService.toGroup(this.leftInputSections);
-                    form = new FormGroup({ ...leftGroup, ...mainGroup });
-                }
-                else {
-                    form = new FormGroup(mainGroup);
-                }
-                this.form = form;
-            }
-            else {
-                this.updateSections(newSections);
-            }
-            this.onFormCreated.emit({
-                formName: this.formName,
-                formGroup: this.form,
-            });
+        if (changes['height']) {
+            this.resizeHeight();
         }
     }
     ngOnInit() {
-        /*
-        if (this.appConfigService.APP_TYPE === "WEBAPP") {
-        */
-        if (!this.disableSaveButton && !this.disableCancelButton) {
-            this.buttonItems = [
-                EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
-                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
-            ];
-        }
-        else if (!!this.disableCancelButton) {
-            this.buttonItems = [
-                EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
-            ];
-        }
-        else if (!!this.disableSaveButton) {
-            this.buttonItems = [
-                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
-            ];
-        }
-        /*
-        } else if (this.appConfigService.APP_TYPE === "PORTAL") {
-          if (!this.disableSaveButton) {
-            this.buttonItems = [
-              EnumCoreButtonVNSCode.SEND,
-              EnumCoreButtonVNSCode.CANCEL,
-              EnumCoreButtonVNSCode.SAVE,
-            ]
-          } else {
-            this.buttonItems = [
-              EnumCoreButtonVNSCode.SEND,
-              EnumCoreButtonVNSCode.CANCEL,
-            ]
-          }
-        }
-        */
-        if (!!this.customFormButtonItems) {
-            this.buttonItems = this.customFormButtonItems;
-        }
-        this.subscriptions.push(this.mode$.subscribe((x) => (this.isUpdateMode = x === EnumCorePageEditMode.UPDATE)));
-        console.log(this.mode$);
-        /* START: Check if id field is available */
-        if (!!!this.form.get('id') && isDevMode()) {
-            this.alertService.error(`
-            Control "id" is mandatory. Please define one in your bussiness component. You can assign its "hidden" property to true if needed.
-          `, noneAutoClosedAlertOptions);
+        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.topicTreeService.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;
+            }));
         }
-        /* END: Check if id field is available */
-        if (isDevMode()) {
-            /* START: Check if each field is unique */
-            const fields = this.coreFormService.getAllFormBaseControlNames(this.sections);
-            fields.reduce((p, c) => {
-                if (c === '') {
-                    this.alertService.error(`Form control name must be definded, '${c}' is invalid form control name!!!`, noneAutoClosedAlertOptions);
-                }
-                else {
-                    if (p === c) {
-                        this.alertService.error(`Duplicate form control name: '${c}'. Consider to predefine one ONLY!!!.`, noneAutoClosedAlertOptions);
-                    }
-                }
-                return c;
+        this.subscriptions.push(this.topicTreeService.linearData$.subscribe((x) => {
+            this.linearArticleCategoryArray = x;
+        }));
+        this.subscriptions.push(this.topicTreeService.status$.subscribe((x) => {
+            console.log("this.TopicTreeService.status$ changes", x);
+            const newActiveIds = [];
+            x.activeKeys.map((k) => {
+                newActiveIds.push(Number(k));
             });
-            /* END: Check if each field is unique */
-        }
-        this.subscriptions.push(this.multiLanguageService.lang$.subscribe((x) => (this.lang = x)));
-    }
-    ngAfterViewInit() {
-        this.onFormRefCreated.emit(this.formRef);
+            this.activeIds = newActiveIds;
+            if (this.accessorMode !== EnumCoreArticleCategoryTreeaAccessorMode.CHECKED) {
+                this.value = this.activeIds;
+                this.onChange(this.activeIds);
+            }
+            this.selectedKey = x.selectedKey;
+        }));
+        this.subscriptions.push(this.search$
+            .pipe(filter((x) => x !== null), debounceTime(500), distinctUntilChanged(), switchMap((text) => {
+            console.log('switchMap works');
+            this.loading = true;
+            return this.recursiveService.findItem(text, this.data);
+        }))
+            .subscribe((x) => {
+            this.loading = false;
+        }));
+        this.subscriptions.push(this.topicTreeService.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)));
     }
-    onFormSubmit() {
-        this.checkError$.next(true);
-        if (!!this.form.valid) {
-            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
-            this.onSubmit.emit(this.form?.getRawValue());
+    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');
         }
-    }
-    onFormSave() {
-        this.checkError$.next(true);
-        if (!!this.form.valid) {
-            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
-            this.onSave.emit(this.form?.getRawValue());
+        else {
+            this.container?.nativeElement.style.setProperty('--height', this.height + 'px');
         }
-        setTimeout(() => this.checkError$.next(false), 3000);
     }
-    onCancelLocal() {
-        this.onCancal.emit(null);
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.subscriptions.push(this.topicTreeService.topicTreeData$.subscribe((x) => {
+                this.data = x;
+                console.log("new Data coming", this.data, new Date().getTime());
+                if (!!this.data) {
+                    if (!!this.data.length)
+                        this.data[0].tree$Expanded = true;
+                }
+            }));
+        });
     }
-    updatePayload() {
-        if (this.payLoad === '') {
-            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
-        }
-        else {
-            this.payLoad = '';
+    onItemClickLocal(e) {
+        this.linearArticleCategoryArray.map((x) => (x.active = false));
+        setTimeout(() => this.buildTreeData());
+    }
+    onToggleItem(e) {
+        const cloneCopy = JSON.parse(JSON.stringify(this.linearArticleCategoryArray));
+        const filter = cloneCopy.filter((x) => x.id === e.id);
+        if (filter.length === 1) {
+            filter[0].expanded = !!!e.expanded;
         }
+        this.linearArticleCategoryArray = cloneCopy;
+        setTimeout(() => this.buildTreeData());
     }
-    updateValidorOverview() {
-        if (this.validatorOverview === undefined) {
-            const result = [];
-            Object.keys(this.form.controls).forEach((key) => {
-                const control = this.form.get(key);
-                const errors = [];
-                if (!!control.invalid) {
-                    Object.keys(control.errors).forEach((key) => {
-                        errors.push(key);
-                    });
-                }
-                result.push({
-                    key,
-                    errors,
-                });
+    buildTreeData() {
+        this.loading = true;
+        const cloneCopy = JSON.parse(JSON.stringify(this.linearArticleCategoryArray));
+        if (typeof Worker !== 'undefined') {
+            // Create a new
+            console.log("🟢🟢 Worker works");
+            const worker = new Worker(liner_to_nested_array_script);
+            worker.addEventListener('message', ({ data }) => {
+                this.data = data.list;
+                if (!!this.data && !!this.data?.length)
+                    this.data[0].tree$Expanded = true;
+                this.loading = false;
+            });
+            worker.postMessage({
+                list: cloneCopy,
+                keyField: 'id',
+                titleField: 'name',
+                parentField: 'parentId',
+                activeField: 'active',
+                //inheritantActiveField: 'inheritantActive',
+                checkedField: 'checked',
+                expandedField: 'expand',
             });
-            this.validatorOverview = JSON.stringify(result, null, 2);
         }
         else {
-            this.validatorOverview = undefined;
+            // Web workers are not supported in this environment.
+            // You should add a fallback so that your program still executes correctly.
+            const status = this.topicTreeService.status$.value;
+            this.subscriptions.push(this.recursiveService
+                .linerArrayToNestedArray(cloneCopy, 'id', 'name', 'parentId', 'active', 'checked', 'expand')
+                .subscribe((obj) => {
+                this.data = obj.list;
+                if (!!this.data && !!this.data?.length)
+                    this.data[0].tree$Expanded = true;
+                this.loading = false;
+            }));
         }
     }
-    ngOnDestroy() {
-        this.subscriptions.map((x) => x?.unsubscribe());
-    }
-    onButtonClick(e) {
-        switch (e.code) {
-            case EnumCoreButtonVNSCode.NONE_HEADER_CANCEL:
-            case EnumCoreButtonVNSCode.CANCEL:
-                this.onCancelLocal();
-                break;
-            case EnumCoreButtonVNSCode.NONE_HEADER_SAVE:
-            case EnumCoreButtonVNSCode.SEND:
-            case EnumCoreButtonVNSCode.NONE_HEADER_DELETE:
-            case EnumCoreButtonVNSCode.NONE_HEADER_LIQUIDATE_CONTRACT:
-            case EnumCoreButtonVNSCode.ONFORMDELETE:
-            case EnumCoreButtonVNSCode.SAVE_PASSWORD:
-                this.onFormSubmit();
-                break;
-            case EnumCoreButtonVNSCode.SAVE:
-                this.onFormSave();
-                break;
-            default:
-                break;
+    onExpandTogglerClick(e, event) {
+        event.stopPropagation();
+        const newValue = !e.tree$Expanded;
+        e.tree$Expanded = newValue;
+        // updating status with newValue
+        const currentExpandedIds = this.topicTreeService.status$.value?.expandedKeys;
+        let newExpandedIds = currentExpandedIds?.filter((_) => !!!currentExpandedIds.includes(e.id.toString()));
+        if (newValue) {
+            newExpandedIds?.push(e.id.toString());
         }
-        this.buttonClick.emit(e);
+        newExpandedIds?.sort();
+        const newExpandedKeys = [];
+        newExpandedIds.map((x) => newExpandedKeys.push(x.toString()));
+        this.topicTreeService.status$.next({
+            ...this.topicTreeService.status$.value,
+            expandedKeys: newExpandedKeys,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreFormComponent, deps: [{ token: CoreControlService }, { token: MultiLanguageService }, { token: AlertService }, { token: CoreFormService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreFormComponent, isStandalone: true, selector: "core-form", inputs: { formName: "formName", width: "width", submitText: "submitText", leftInputSections: "leftInputSections", leftInputSectionsFlexSize: "leftInputSectionsFlexSize", inputSections: "inputSections", mode$: "mode$", bottomTemplateRef: "bottomTemplateRef", customFormButtonItems: "customFormButtonItems", showCaptionButton: "showCaptionButton", disableSaveButton: "disableSaveButton", disableCancelButton: "disableCancelButton", checkError$: "checkError$" }, outputs: { onFormCreated: "onFormCreated", onFormRefCreated: "onFormRefCreated", onSubmit: "onSubmit", onSave: "onSave", onCancal: "onCancal", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!form) {\r\n<div class=\"core-form-container\" [ngStyle]=\"{\r\n    width: !!width ? width + 'px' : 'auto'\r\n}\">\r\n\r\n    <form #formRef (ngSubmit)=\"onFormSubmit()\" [formGroup]=\"form\" autocomplete=\"off\">\r\n\r\n        <div class=\"row\">\r\n\r\n            @if (!!leftInputSections) {\r\n            <div [class]=\"'col-md-' + (leftInputSectionsFlexSize || 0)\">\r\n\r\n                @for (section of leftInputSections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                }\r\n\r\n            </div>\r\n            }\r\n\r\n            <div [class]=\"'col-md-' + (12 - (leftInputSectionsFlexSize || 0))\">\r\n\r\n                @for (section of sections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\" [ngStyle]=\"{\r\n                        maxWidth: !!section.maxWidth ? section.maxWidth + 'px' : 'none'\r\n                    }\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n\r\n            @if (!!bottomTemplateRef) {\r\n                <div class=\"col-md-12\">\r\n                    <div class=\"bottom-template-wrapper\">\r\n                        <ng-container *ngTemplateOutlet=\"bottomTemplateRef\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <div class=\"h10\"></div>\r\n\r\n        <div class=\"form-row\">\r\n            <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                <core-button-group-vns [showCaption]=\"showCaptionButton\" [forHeader]=\"false\"\r\n                (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (isDevMode) {\r\n        <div class=\"form-row d-flex d-flex-center\">\r\n            <div class=\"dev-button\" (click)=\"updatePayload()\">Show\r\n                values</div>\r\n            <div class=\"dev-button\" (click)=\"updateValidorOverview()\">Show\r\n                validators</div>\r\n        </div>\r\n        }\r\n\r\n    </form>\r\n\r\n    @if (!!payLoad && isDevMode) {\r\n    <div class=\"form-row payload-preview\">\r\n        <strong>Current values</strong><br>{{payLoad}}\r\n    </div>\r\n    }\r\n\r\n    @if (!!validatorOverview && isDevMode) {\r\n    <div class=\"form-row payload-preview validator-preview\">\r\n        <strong>Current errors</strong><br>{{validatorOverview}}\r\n    </div>\r\n    }\r\n\r\n</div>\r\n}", styles: [".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;border:1px gray solid;font-size:13px;padding:8px}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;color:gray!important;background-color:#dff6dd;padding:24px;margin:24px}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-form', imports: [
-                        CommonModule,
+    onItemCheck(e, newValue) {
+        this.itemClick?.emit(e);
+        if (this.accessorMode !== EnumCoreArticleCategoryTreeaAccessorMode.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)
+                .then((x) => {
+                // 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.topicTreeService.status$.next({
+            ...this.topicTreeService.status$.value,
+            checkInheritance: value,
+        });
+    }
+    onObjectClick(e, event) {
+        // remove highlight class
+        // TO DO
+        if (!!e.protected)
+            return;
+        this.itemClick?.emit(e);
+        if (this.accessorMode === EnumCoreArticleCategoryTreeaAccessorMode.CHECKED)
+            return;
+        let activeIds = [];
+        this.recursiveService.nestedResetActive(this.data, false).then(falseAll => {
+            console.log("falseAll", falseAll);
+            if (this.accessorMode ===
+                EnumCoreArticleCategoryTreeaAccessorMode.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.topicTreeService.status$.next({
+                        ...this.topicTreeService.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.topicTreeService.status$.next({
+                    ...this.topicTreeService.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);
+    }
+    ngAfterContentInit() {
+        console.log("ngAfterContentInit");
+    }
+    ngOnDestroy() {
+        this.subscriptions.map((x) => x?.unsubscribe());
+        if (!!this.instanceNumber) {
+            const tryToFind = this.topicTreeService.instances.filter((x) => x.instanceNumber === this.instanceNumber);
+            if (!!tryToFind.length) {
+                const newInstances = this.topicTreeService.instances.filter((x) => x.instanceNumber !== this.instanceNumber);
+                this.topicTreeService.instances = newInstances;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicTreeComponent, deps: [{ token: AuthService }, { token: RecursiveService }, { token: MultiLanguageService }, { token: LayoutService }, { token: TopicTreeService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreTopicTreeComponent, isStandalone: true, selector: "core-topic-tree", inputs: { lineColor: "lineColor", translateText: "translateText", fullWidthMode: "fullWidthMode", accessorMode: "accessorMode", fullRendering: "fullRendering", height: "height", disabledLoopExpand: "disabledLoopExpand", showCheckInheritance: "showCheckInheritance", inlineExtraTemplateRef: "inlineExtraTemplateRef" }, outputs: { itemDoubleClick: "itemDoubleClick", itemClick: "itemClick" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CoreTopicTreeComponent,
+            },
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], 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-topic-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\"\n    [ngStyle]=\"{\n        position : 'relative',\n        width: '100%',\n        height: height + 'px'\n    }\">\n    <div #displayContent class=\"custom-org-tree\">\n        <div class=\"core-org-tree-header d-flex-between\">\n            <div>\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\n            </div>\n        </div>\n\n        <ng-container>\n\n            <div class=\"scroll-container\" [ngStyle]=\"{\n                height: height - layoutService.coreOrgTreeTopHeight - layoutService.coreOrgTreeBottomHeight + 'px'\n                }\">\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\n                @for (root of data; track $index) {\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\n                </ul>\n                }\n            </div>\n\n\n            <div [ngStyle]=\"{\n                display: 'block',\n                position: 'absolute',\n                bottom: '0px',\n                left: '0px',\n                right: '0px',\n                height: layoutService.corePaginationHeight + 'px',\n                paddingLeft: layoutService.basicSpacing + 'px',\n                paddingRight: layoutService.basicSpacing + 'px',\n                lineHeight: layoutService.corePaginationHeight + 'px',\n                overflow: 'hidden'\n            }\">\n                <div [ngStyle]=\"{\n                    height: layoutService.corePaginationHeight + 'px',\n                    position: 'relative',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'space-between'\n                }\">\n                    <!-- <div>\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\n                    </div> -->\n                    <div class=\"check-inheritance-wrapper\" *ngIf=\"accessorMode === 'CHECKED'\">\n                        <core-checkbox *ngIf=\"showCheckInheritance\" [(ngModel)]=\"checkInheritance\"\n                            (ngModelChange)=\"onCheckInheritanceChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\n                    </div>\n                </div>\n            </div>\n\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\n\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\n                    <span (click)=\"onObjectClick(context, $event)\">\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\n                        <i class=\"expand-toggler feather-chevron-down\"\n                            (click)=\"onExpandTogglerClick(context, $event)\"></i>\n                        }\n                        @if (accessorMode === 'CHECKED' && !!!protected) {\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\n                            [disabled]=\"disabled\"></core-checkbox>\n                        }\n                        <object [class.active]=\"activeIds.includes(id)\" [class.highlighted]=\"highlighted\"\n                            [class.dissolved]=\"!isActive\" [class.protected]=\"protected\"\n                            [appTooltip]=\"title\">\n                            {{ title | translate: lang }}\n                        </object>\n\n                        @if (!!inlineExtraTemplateRef) {\n                        <ng-container *ngTemplateOutlet=\"inlineExtraTemplateRef; context: { context: context }\">\n                        </ng-container>\n                        }\n\n                    </span>\n                    @if (children.length) {\n                    <ul [class.collapsed]=\" !!!expanded\">\n                        @for (child of children; track $index) {\n                        @if (!!expanded || !!fullRendering) {\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\n                        }\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n\n            </ng-template>\n\n        </ng-container>\n    </div>\n\n\n</div>", styles: [".core-topic-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;border-radius:5px;--item-height: 50px;--ul-padding: 20px;--display: \"block\";--square-color: darkgray;--square-size: 30px;--line-color: \"transparent\";--active-item-color: var(--color-bg-pagination-button);--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}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-topic-tree-container .custom-org-tree{display:var(--display)}.core-topic-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-topic-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)}.core-topic-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-topic-tree-container .check-inheritance-wrapper{padding:15px}.core-topic-tree-container .form-control{border:none}.core-topic-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-topic-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow-y:auto;overflow-x:auto;position:relative;width:100%;border-radius:5px}.core-topic-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}@media (max-width: 575px){.core-topic-tree-container .scroll-container ::-webkit-slider-runnable-track{width:0px}}.core-topic-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-topic-tree-container .scroll-container ul>li>span:hover{background-color:#fff;width:100%}.core-topic-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1}.core-topic-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-topic-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-topic-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-topic-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-topic-tree-container .scroll-container ul>li{display:block;position:relative}.core-topic-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-topic-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;padding-left:8px;cursor:pointer}.core-topic-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-topic-tree-container .scroll-container ul>li>span>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-topic-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-topic-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-topic-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-topic-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-topic-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-topic-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-topic-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-topic-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-topic-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: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreLoadingSurfaceComponent, selector: "core-loading-surface", inputs: ["loading", "height"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-topic-tree', imports: [
+                        CommonModule,
                         FormsModule,
-                        ReactiveFormsModule,
-                        CoreControlComponent,
+                        CoreLoadingSurfaceComponent,
+                        CoreReducerIconComponent,
+                        CoreCheckboxComponent,
                         TranslatePipe,
-                        CoreButtonGroupVnsComponent
-                    ], template: "@if (!!form) {\r\n<div class=\"core-form-container\" [ngStyle]=\"{\r\n    width: !!width ? width + 'px' : 'auto'\r\n}\">\r\n\r\n    <form #formRef (ngSubmit)=\"onFormSubmit()\" [formGroup]=\"form\" autocomplete=\"off\">\r\n\r\n        <div class=\"row\">\r\n\r\n            @if (!!leftInputSections) {\r\n            <div [class]=\"'col-md-' + (leftInputSectionsFlexSize || 0)\">\r\n\r\n                @for (section of leftInputSections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                }\r\n\r\n            </div>\r\n            }\r\n\r\n            <div [class]=\"'col-md-' + (12 - (leftInputSectionsFlexSize || 0))\">\r\n\r\n                @for (section of sections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\" [ngStyle]=\"{\r\n                        maxWidth: !!section.maxWidth ? section.maxWidth + 'px' : 'none'\r\n                    }\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n\r\n            @if (!!bottomTemplateRef) {\r\n                <div class=\"col-md-12\">\r\n                    <div class=\"bottom-template-wrapper\">\r\n                        <ng-container *ngTemplateOutlet=\"bottomTemplateRef\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <div class=\"h10\"></div>\r\n\r\n        <div class=\"form-row\">\r\n            <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                <core-button-group-vns [showCaption]=\"showCaptionButton\" [forHeader]=\"false\"\r\n                (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (isDevMode) {\r\n        <div class=\"form-row d-flex d-flex-center\">\r\n            <div class=\"dev-button\" (click)=\"updatePayload()\">Show\r\n                values</div>\r\n            <div class=\"dev-button\" (click)=\"updateValidorOverview()\">Show\r\n                validators</div>\r\n        </div>\r\n        }\r\n\r\n    </form>\r\n\r\n    @if (!!payLoad && isDevMode) {\r\n    <div class=\"form-row payload-preview\">\r\n        <strong>Current values</strong><br>{{payLoad}}\r\n    </div>\r\n    }\r\n\r\n    @if (!!validatorOverview && isDevMode) {\r\n    <div class=\"form-row payload-preview validator-preview\">\r\n        <strong>Current errors</strong><br>{{validatorOverview}}\r\n    </div>\r\n    }\r\n\r\n</div>\r\n}", styles: [".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;border:1px gray solid;font-size:13px;padding:8px}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;color:gray!important;background-color:#dff6dd;padding:24px;margin:24px}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n"] }]
-        }], ctorParameters: () => [{ type: CoreControlService }, { type: MultiLanguageService }, { type: AlertService }, { type: CoreFormService }, { type: AppConfigService }], propDecorators: { formName: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], submitText: [{
-                type: Input
-            }], leftInputSections: [{
-                type: Input
-            }], leftInputSectionsFlexSize: [{
+                        TooltipDirective,
+                        NgTemplateOutlet
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CoreTopicTreeComponent,
+                        },
+                    ], template: "<div #container class=\"core-topic-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\"\n    [ngStyle]=\"{\n        position : 'relative',\n        width: '100%',\n        height: height + 'px'\n    }\">\n    <div #displayContent class=\"custom-org-tree\">\n        <div class=\"core-org-tree-header d-flex-between\">\n            <div>\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\n            </div>\n        </div>\n\n        <ng-container>\n\n            <div class=\"scroll-container\" [ngStyle]=\"{\n                height: height - layoutService.coreOrgTreeTopHeight - layoutService.coreOrgTreeBottomHeight + 'px'\n                }\">\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\n                @for (root of data; track $index) {\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\n                </ul>\n                }\n            </div>\n\n\n            <div [ngStyle]=\"{\n                display: 'block',\n                position: 'absolute',\n                bottom: '0px',\n                left: '0px',\n                right: '0px',\n                height: layoutService.corePaginationHeight + 'px',\n                paddingLeft: layoutService.basicSpacing + 'px',\n                paddingRight: layoutService.basicSpacing + 'px',\n                lineHeight: layoutService.corePaginationHeight + 'px',\n                overflow: 'hidden'\n            }\">\n                <div [ngStyle]=\"{\n                    height: layoutService.corePaginationHeight + 'px',\n                    position: 'relative',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'space-between'\n                }\">\n                    <!-- <div>\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\n                    </div> -->\n                    <div class=\"check-inheritance-wrapper\" *ngIf=\"accessorMode === 'CHECKED'\">\n                        <core-checkbox *ngIf=\"showCheckInheritance\" [(ngModel)]=\"checkInheritance\"\n                            (ngModelChange)=\"onCheckInheritanceChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\n                    </div>\n                </div>\n            </div>\n\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\n\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\n                    <span (click)=\"onObjectClick(context, $event)\">\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\n                        <i class=\"expand-toggler feather-chevron-down\"\n                            (click)=\"onExpandTogglerClick(context, $event)\"></i>\n                        }\n                        @if (accessorMode === 'CHECKED' && !!!protected) {\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\n                            [disabled]=\"disabled\"></core-checkbox>\n                        }\n                        <object [class.active]=\"activeIds.includes(id)\" [class.highlighted]=\"highlighted\"\n                            [class.dissolved]=\"!isActive\" [class.protected]=\"protected\"\n                            [appTooltip]=\"title\">\n                            {{ title | translate: lang }}\n                        </object>\n\n                        @if (!!inlineExtraTemplateRef) {\n                        <ng-container *ngTemplateOutlet=\"inlineExtraTemplateRef; context: { context: context }\">\n                        </ng-container>\n                        }\n\n                    </span>\n                    @if (children.length) {\n                    <ul [class.collapsed]=\" !!!expanded\">\n                        @for (child of children; track $index) {\n                        @if (!!expanded || !!fullRendering) {\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\n                        }\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n\n            </ng-template>\n\n        </ng-container>\n    </div>\n\n\n</div>", styles: [".core-topic-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;border-radius:5px;--item-height: 50px;--ul-padding: 20px;--display: \"block\";--square-color: darkgray;--square-size: 30px;--line-color: \"transparent\";--active-item-color: var(--color-bg-pagination-button);--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}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-topic-tree-container .custom-org-tree{display:var(--display)}.core-topic-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-topic-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)}.core-topic-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-topic-tree-container .check-inheritance-wrapper{padding:15px}.core-topic-tree-container .form-control{border:none}.core-topic-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-topic-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow-y:auto;overflow-x:auto;position:relative;width:100%;border-radius:5px}.core-topic-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}@media (max-width: 575px){.core-topic-tree-container .scroll-container ::-webkit-slider-runnable-track{width:0px}}.core-topic-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-topic-tree-container .scroll-container ul>li>span:hover{background-color:#fff;width:100%}.core-topic-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1}.core-topic-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-topic-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-topic-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-topic-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-topic-tree-container .scroll-container ul>li{display:block;position:relative}.core-topic-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-topic-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;padding-left:8px;cursor:pointer}.core-topic-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-topic-tree-container .scroll-container ul>li>span>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-topic-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-topic-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-topic-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-topic-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-topic-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-topic-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-topic-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-topic-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-topic-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: TopicTreeService }, { type: AlertService }], propDecorators: { lineColor: [{
                 type: Input
-            }], inputSections: [{
+            }], translateText: [{
                 type: Input
-            }], mode$: [{
+            }], fullWidthMode: [{
                 type: Input
-            }], bottomTemplateRef: [{
+            }], accessorMode: [{
                 type: Input
-            }], customFormButtonItems: [{
+            }], fullRendering: [{
                 type: Input
-            }], showCaptionButton: [{
+            }], height: [{
                 type: Input
-            }], disableSaveButton: [{
+            }], disabledLoopExpand: [{
                 type: Input
-            }], disableCancelButton: [{
+            }], showCheckInheritance: [{
                 type: Input
-            }], checkError$: [{
+            }], inlineExtraTemplateRef: [{
                 type: Input
-            }], onFormCreated: [{
-                type: Output
-            }], onFormRefCreated: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }], onSave: [{
-                type: Output
-            }], onCancal: [{
+            }], itemDoubleClick: [{
                 type: Output
-            }], buttonClick: [{
+            }], itemClick: [{
                 type: Output
-            }], formRef: [{
+            }], container: [{
                 type: ViewChild,
-                args: ['formRef']
+                args: ['container']
+            }], displayContent: [{
+                type: ViewChild,
+                args: ['displayContent']
+            }], reducedIconWrapper: [{
+                type: ViewChild,
+                args: ['reducedIconWrapper']
             }] } });
 
-class CorePageEditComponent {
-    constructor(router, route, corePageEditService, commonHttpRequestService, animatedTextService, mls, coreFormService, corePageListService, hubConnectionService, authService, alertService, urlService, routingService, responseService, appConfigService) {
-        this.router = router;
-        this.route = route;
-        this.corePageEditService = corePageEditService;
-        this.commonHttpRequestService = commonHttpRequestService;
-        this.animatedTextService = animatedTextService;
-        this.mls = mls;
-        this.coreFormService = coreFormService;
-        this.corePageListService = corePageListService;
-        this.hubConnectionService = hubConnectionService;
-        this.authService = authService;
-        this.alertService = alertService;
-        this.urlService = urlService;
-        this.routingService = routingService;
+class CoreTopicPickerComponent extends CoreFormControlBaseComponent {
+    constructor(domService, renderer, appService, responseService, alertService, mls) {
+        super();
+        this.domService = domService;
+        this.renderer = renderer;
+        this.appService = appService;
         this.responseService = responseService;
-        this.appConfigService = appConfigService;
-        this.checkError$ = new BehaviorSubject(false);
-        this.submitLogic = new EventEmitter();
-        this.onFormCreated = new EventEmitter();
-        this.onSubmitSuccess = new EventEmitter();
-        this.onButtonClick = new EventEmitter();
-        this.cancelLogic = new EventEmitter();
-        this.entityUniqueIndexs = []; /* For ex: [['id'], ['provinceId', 'districCode']]  etc... */
-        this.onInitialValueStringReady = new EventEmitter();
-        this.mode$ = new BehaviorSubject(EnumCorePageEditMode.CREATE);
+        this.alertService = alertService;
+        this.mls = mls;
         this.subscriptions = [];
-        this.showCaptionButton = true;
-        this.fromUrl = this.corePageEditService.fromUrl;
-        this.listInstance = Number(this.route.snapshot.paramMap.get('listInstance'));
-    }
-    sendSignal(data) {
-        const connection = this.hubConnectionService.hubConnection$.value;
-        if (!!connection) {
-            const message = {
-                sid: this.authService.data$.value?.id,
-                username: this.authService.data$.value?.fullName,
-                avatar: this.authService.data$.value?.avatar,
-                signalType: EnumSignalRType.ENTITY_CHANGED,
-                message: `${this.authService.data$.value
-                    ?.userName} has changed entity ${this.entityTable}`,
-                loginTime: this.authService.data$.value?.loginTime,
-                data: null,
-            };
-            connection.invoke('SendMessage', message);
-        }
     }
     ngOnInit() {
-        this.sections$ = new BehaviorSubject(this.sections);
-        if (!!!this.entityTable) {
-            alert('Property entityTable (name) is required for component ' +
-                this.captionCode);
-            console.error('Property entityTable (name) is required for component ' +
-                this.captionCode);
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+    }
+    toggleExpanded() {
+        if (!this.disabled) {
+            this.expandState = !!!this.expandState;
         }
     }
-    ngAfterViewInit() {
-        if (!!this.normalMode) {
-            console.log(this.container);
-            this.container.nativeElement.style.setProperty('--width', '100%');
+    onTreeItemClick(event) {
+        if (this.value !== event['id'])
+            this.markAsTouched();
+        this.value = event['id'];
+        this.onChange(event['id']);
+        this.shownText = event['nameCode'];
+        this.toggleExpanded();
+    }
+    writeValue(obj) {
+        this.value = obj;
+        if (!!!obj) {
+            this.shownText = "";
         }
         else {
-            if (!!this.width) {
-                this.container.nativeElement.style.setProperty('--width', this.width + 'px');
-            }
-            this.containerBigger.nativeElement.style.setProperty('--height', '95%');
-        }
-        setTimeout(() => {
-            this.scroll = this.container.nativeElement.scrollHeight > this.container.nativeElement.offsetHeight;
-        });
-        setTimeout(() => {
-            if (!!!this.mixedMode) {
-                this.subscriptions.push(this.route.params.subscribe(x => {
-                    console.log("this.route.params.subscribe", x);
-                    let id = '0';
-                    if (this.hasIdOfStringType) {
-                        try {
-                            id = atob(x['id']);
-                        }
-                        catch {
-                            return;
-                        }
-                    }
-                    else {
-                        try {
-                            id = Number(atob(x['id'])).toString();
-                        }
-                        catch {
-                            return;
-                        }
-                    }
-                    if (id !== '0') {
-                        this.mode$.next(EnumCorePageEditMode.UPDATE);
-                        this.submitText = EnumTranslateKey.UI_EDIT_FORM_BUTTON_SAVE;
-                        if (!!!this.autoGetByIdOff) {
-                            this.loading = true;
-                            this.subscriptions.push(this.corePageEditService.getById(id, this.crud.r).subscribe((x) => {
-                                this.loading = false;
-                                const body = x.body;
-                                //this.responseService.resolve(body);
-                                if ((body.statusCode = 200)) {
-                                    /* #region Exclude sections with flag addModeOnly=true */
-                                    if (!!body.innerBody.id) {
-                                        // remove relevant controls from form group
-                                        const addModeOnlySections = this.sections.filter((x) => !!x.addModeOnly);
-                                        addModeOnlySections.map((addModeOnlySection) => {
-                                            addModeOnlySection.rows.map((addModeOnlyRow) => {
-                                                addModeOnlyRow.map((addModeOnlyControl) => {
-                                                    this.form.removeControl(addModeOnlyControl.field);
-                                                });
-                                            });
-                                        });
-                                        // remove relevant controls from form sections
-                                        const newSections = this.sections.filter((x) => !!!x.addModeOnly);
-                                        this.sections = newSections;
-                                        this.sections$.next(this.sections);
-                                    }
-                                    /* #endregion Exclude sections with flag addModeOnly=true */
-                                    /* #region: Assign value to attachment fields when controlType = ATTACHMENT */
-                                    this.sections.map((section) => {
-                                        section.rows.map((row) => {
-                                            row.map((control) => {
-                                                if (control.controlType === EnumFormBaseContolType.ATTACHMENT) {
-                                                    control.valueToShow = body.innerBody[control.assignTo];
-                                                }
-                                            });
-                                        });
-                                    });
-                                    /* #endregion: Assign value to basic fields when controlType = ATTACHMENT */
-                                    /* #region: Using PatchValue instead of setValue */
-                                    // Forms often have extra helper fields
-                                    // thus, if we use setValue method, the helper fields will be lost:
-                                    // this.form.setValue(body.innerBody)
-                                    // so, we use patchValue method :
-                                    this.currentValue = body.innerBody;
-                                    this.form.patchValue(this.currentValue);
-                                    this.sections.map((section) => {
-                                        section.rows.map((row) => {
-                                            row.map((control) => {
-                                                if ([
-                                                    EnumFormBaseContolType.SEEKER,
-                                                    EnumFormBaseContolType.DROPDOWN,
-                                                    EnumFormBaseContolType.CHECKLIST,
-                                                ].includes(control.controlType)) {
-                                                    if (!!this.currentValue[control.field]) {
-                                                        if (isDevMode() && !!!control.getByIdApi) {
-                                                            switch (control.controlType) {
-                                                                case EnumFormBaseContolType.SEEKER:
-                                                                    if (!control.multiMode) {
-                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
-                                                                    }
-                                                                    break;
-                                                                case EnumFormBaseContolType.DROPDOWN:
-                                                                    if (!!!control.dropdownOptions$?.value) {
-                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
-                                                                    }
-                                                                    break;
-                                                                case EnumFormBaseContolType.CHECKLIST:
-                                                                    if (!!!control.checklistOptions$?.value) {
-                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
-                                                                    }
-                                                                    break;
-                                                                default:
-                                                                    this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
-                                                                    break;
-                                                            }
-                                                        }
-                                                        this.subscriptions.push(this.commonHttpRequestService
-                                                            .makeGetRequest('getById', control.getByIdApi +
-                                                            `?id=${this.currentValue[control.field]}`)
-                                                            .subscribe((x) => {
-                                                            console.log("form getById result: ", this.currentValue);
-                                                            if (x.ok && x.status === 200) {
-                                                                const body = x.body;
-                                                                if (body.statusCode === 200) {
-                                                                    control.getByIdObject$?.next(body.innerBody);
-                                                                }
-                                                                else {
-                                                                    control.getByIdObject$?.next(null);
-                                                                }
-                                                            }
-                                                        }));
-                                                    }
-                                                }
-                                                if (control.controlType === EnumFormBaseContolType.SEEKER && control.multiMode) {
-                                                    control.objectList$?.next(body.innerBody[control.getObjectListFrom]);
-                                                }
-                                            });
-                                        });
-                                    });
-                                    this.sections$.next(this.sections);
-                                    /* #endregion: Using PatchValue instead of setValue */
-                                }
-                                // return initFormValueString to the caller
-                                this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
-                            }));
-                        }
+            this.loading = true;
+            this.subscriptions.push(this.appService.get(this.getByIdApi + "?id=" + obj.toString()).subscribe(x => {
+                this.loading = false;
+                if (x.ok && x.status === 200) {
+                    const body = x.body;
+                    //this.responseService.resolve(body);
+                    if (body.statusCode === 200) {
+                        this.shownText = body.innerBody['nameCode'];
                     }
                     else {
-                        this.mode$.next(EnumCorePageEditMode.CREATE);
-                        this.submitText = EnumTranslateKey.UI_EDIT_FORM_BUTTON_ADD;
+                        this.alertService.error(this.mls.trans(body.messageCode, this.lang), alertOptions);
                     }
-                }));
+                }
+                else {
+                    //this.alertService.error(JSON.stringify(x, null, 2), noneAutoClosedAlertOptions)
+                }
+            }));
+        }
+    }
+    onClickClear() {
+        this.writeValue(null);
+        this.onChange(null);
+        this.shownText = "";
+    }
+    ngAfterViewInit() {
+        /**
+         * This events get called by all clicks on the page
+         */
+        this.listenerFn = this.renderer.listen('window', 'click', (e) => {
+            /*
+             * handle click outside
+             */
+            if (this.container && !!!this.container.nativeElement.contains(e.target)) {
+                this.expandState = false;
             }
-            this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
         });
+        const maxZIndex = this.domService.getMaxZIndex();
+        this.container.nativeElement.style.setProperty('--max-z-index', maxZIndex + 1);
+        if (!!this.popupHeight)
+            this.container.nativeElement.style.setProperty('--popup-height', this.popupHeight);
     }
-    toggleReloadFlagForTheCaller(id) {
-        const instancesFilter = this.corePageListService.instances.filter((x) => x.instanceNumber === this.listInstance);
-        if (!!instancesFilter.length) {
-            const instance = instancesFilter[0];
-            instance.id$.next(id);
-            //if (!!!this.normalMode) instance.reloadFlag$?.next(!instance.reloadFlag$.value);
-            if (isDevMode()) {
-                this.alertService.info(`CorePageList instance number ${this.listInstance} current id is: ${instance.id$.value}`, alertOptions);
-            }
-        }
-        else {
-            if (isDevMode()) {
-                this.alertService.info(`CorePageList instances do not include number ${this.listInstance}`, alertOptions);
-            }
-        }
+    ngOnDestroy() {
+        if (this.listenerFn)
+            this.listenerFn();
+        this.subscriptions.map((x) => x?.unsubscribe());
     }
-    onNotOk200Response(x) {
-        if (isDevMode()) {
-            if (Object.keys(x).length === 0) {
-                this.alertService.error("No response content. It was possibly a CORS error.", noneAutoClosedAlertOptions);
-            }
-            else {
-                //this.alertService.error(JSON.stringify(x, null, 2), noneAutoClosedAlertOptions)
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicPickerComponent, deps: [{ token: DomService }, { token: i0.Renderer2 }, { token: AppService }, { token: ResponseService }, { token: AlertService }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreTopicPickerComponent, isStandalone: true, selector: "core-topic-picker", inputs: { popupHeight: "popupHeight", getByIdApi: "getByIdApi" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CoreTopicPickerComponent
             }
-        }
-    }
-    onSubmit() {
-        /* IF id is falsy => CREAT, otherwise UPDATE */
-        /* FOR CONTROL OF TYPE GRIDBUFFER, SET EVERY id TO NULL */
-        this.sections.map(section => {
-            section.rows.map(row => {
-                row.map(control => {
-                    console.log(control.controlType);
-                    if (control.controlType === EnumFormBaseContolType.GRIDBUFFER) {
-                        const abstractControl = this.form.get(control.field)?.value;
-                        // TO DO 17/08/2023 ===========
-                        abstractControl?.value?.map((x) => x.id = null);
-                        // =========================
-                    }
-                });
-            });
-        });
-        if (!!this.mixedMode) {
-            this.submitLogic.emit({
-                mode: this.form.get('editMode')?.value,
-                formValue: this.form.getRawValue()
-            });
-            return;
-        }
-        if (!!this.autoSubmitLogicOff) {
-            // DO your logic here
-            this.submitLogic.emit(JSON.stringify(this.form.getRawValue()));
-            return;
-        }
-        else if (!!!this.form.get('id').value) {
-            this.loading = true;
-            const sysMutationLogBeforeAfterRequest = {
-                sysFunctionCode: this.routingService.currentFunction$.value?.code || 'UNDEFINED',
-                sysActionCode: EnumCoreButtonVNSCode.HEADER_CREATE,
-                before: JSON.stringify(this.currentValue) ?? '""',
-                after: JSON.stringify(this.form.getRawValue()),
-                username: this.authService.data$.value?.userName
-            };
-            this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_ADDING_PLEASE_WAIT));
-            this.commonHttpRequestService
-                .makePostRequest('create ' + this.entityTable, this.crud.c, {
-                ...this.form.getRawValue(),
-                sysMutationLogBeforeAfterRequest,
-            })
-                .subscribe((x) => {
-                this.loading = false;
-                if (x.ok && x.status === 200) {
-                    const body = x.body;
-                    //this.responseService.resolve(body);
-                    if (body.statusCode === 200) {
-                        if (isDevMode()) {
-                            this.sendSignal(body.innerBody);
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n    <app-threedots></app-threedots>\n}\n<div #container class=\"core-topic-picker-container\" [class.d-none]=\"loading\">\n    <input type=\"checkbox\" class=\"expand-state\" [(ngModel)]=\"expandState\">\n    <input class=\"value\" [value]=\"value\">\n    <label type=\"text\" class=\"text form-control\" [class.form-control-disabled]=\"disabled\">\n        <span [appTooltip]=\"shownText\">{{ !!loading ? \"...\" : shownText }}</span>\n        <div class=\"icon\" (click)=\"toggleExpanded()\">\n            <i class=\"feather-chevrons-down\"></i>\n        </div>\n\n        <div class=\"clear-icon-wrapper\" [class.d-none]=\"!!disabled || !!!value\" (click)=\"onClickClear()\">\n            <div class=\"flex-wrapper\" [appTooltip]=\"'UI.CORE_CONTOL_COMMON_CLEAR' | translate: lang\">\n                <i class=\"feather-x\"></i>\n            </div>\n        </div>\n        \n    </label>\n    @if (!!expandState) {\n        <div class=\"dropdown\" [class.form-control-disabled]=\"disabled\">\n            <core-topic-tree [translateText]=\"true\" (itemClick)=\"onTreeItemClick($event)\"></core-topic-tree>\n        </div>\n    }\n\n</div>", styles: [".core-topic-picker-container{position:relative;display:block;--indicator-height: 0px;--search-bg-color: white;--search-border-color: #D1D1D1;--search-item-hover-bg: #358ccb;--search-item-hover-color: white;--dropdown-bg: lightyellow;--arrow-color: #358ccb;--height: var(--size-form-control-height);--item-height: 50px;--max-z-index: 0;--search-height: 38px;--popup-height: 460px}.core-topic-picker-container input.expand-state,.core-topic-picker-container .value{display:none}.core-topic-picker-container label.text{width:100%;height:var(--height);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between}.core-topic-picker-container label.text .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:45px;top:2px;width:44px;height:44px;border-radius:.375rem;cursor:pointer}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-topic-picker-container label.text:hover>.clear-icon-wrapper{display:block}.core-topic-picker-container label.text span{width:calc(100% - var(--height));overflow-x:hidden;text-overflow:ellipsis;color:inherit}.core-topic-picker-container label.text div.icon{display:flex;align-items:center;justify-content:center;position:absolute;right:3px;top:3px;width:calc(var(--height) - 6px);height:calc(var(--height) - 6px);background-color:#e9e9e9;border-radius:3px;cursor:pointer}.core-topic-picker-container label.text div.icon i{width:28px;height:28px;font-size:28px;color:#848484}.core-topic-picker-container .dropdown{display:block;position:absolute;width:800px;min-width:100%;max-height:0px;overflow-x:auto;overflow-y:hidden;background-color:#fff;font-size:15px;box-shadow:0 1rem 3rem #0000002e;transition:.25s linear;z-index:calc(var(--max-z-index) + 1)}.core-topic-picker-container .dropdown ul{padding-left:6px}.core-topic-picker-container .dropdown ul>li{display:flex;align-items:center;cursor:pointer;padding:0px var(--size-scrollbar-width);transition:.25s linear}.core-topic-picker-container .dropdown ul>li>label{width:100%}.core-topic-picker-container .dropdown ul>li:hover{background-color:var(--search-item-hover-bg);color:var(--search-item-hover-color);transition:.25s linear}.core-topic-picker-container input.expand-state:checked~.dropdown{border:1px solid #ced4da;margin-top:2px;max-height:var(--popup-height);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;transition:.25s linear}.core-topic-picker-container input.search{margin:0;width:100%;border:0;border-bottom:1px solid var(--search-border-color);background-color:var(--search-bg-color);position:sticky;top:0;height:38px;padding:6px 12px;font-size:15px}.core-topic-picker-container input.search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }, { kind: "component", type: CoreTopicTreeComponent, selector: "core-topic-tree", inputs: ["lineColor", "translateText", "fullWidthMode", "accessorMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "inlineExtraTemplateRef"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-topic-picker', imports: [
+                        TooltipDirective,
+                        FormsModule,
+                        ThreedotsComponent,
+                        CoreTopicTreeComponent,
+                        TranslatePipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CoreTopicPickerComponent
                         }
-                        this.onSubmitSuccess.emit(true);
-                        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
-                        /*
-                        Transfer newly created record id
-                      */
-                        this.toggleReloadFlagForTheCaller(body.innerBody.id || 0);
-                        if (this.forceListRefreshOnCreateOrUpdate) {
-                            this.corePageListService.instanceRequery(this.listInstance);
+                    ], template: "@if (loading) {\n    <app-threedots></app-threedots>\n}\n<div #container class=\"core-topic-picker-container\" [class.d-none]=\"loading\">\n    <input type=\"checkbox\" class=\"expand-state\" [(ngModel)]=\"expandState\">\n    <input class=\"value\" [value]=\"value\">\n    <label type=\"text\" class=\"text form-control\" [class.form-control-disabled]=\"disabled\">\n        <span [appTooltip]=\"shownText\">{{ !!loading ? \"...\" : shownText }}</span>\n        <div class=\"icon\" (click)=\"toggleExpanded()\">\n            <i class=\"feather-chevrons-down\"></i>\n        </div>\n\n        <div class=\"clear-icon-wrapper\" [class.d-none]=\"!!disabled || !!!value\" (click)=\"onClickClear()\">\n            <div class=\"flex-wrapper\" [appTooltip]=\"'UI.CORE_CONTOL_COMMON_CLEAR' | translate: lang\">\n                <i class=\"feather-x\"></i>\n            </div>\n        </div>\n        \n    </label>\n    @if (!!expandState) {\n        <div class=\"dropdown\" [class.form-control-disabled]=\"disabled\">\n            <core-topic-tree [translateText]=\"true\" (itemClick)=\"onTreeItemClick($event)\"></core-topic-tree>\n        </div>\n    }\n\n</div>", styles: [".core-topic-picker-container{position:relative;display:block;--indicator-height: 0px;--search-bg-color: white;--search-border-color: #D1D1D1;--search-item-hover-bg: #358ccb;--search-item-hover-color: white;--dropdown-bg: lightyellow;--arrow-color: #358ccb;--height: var(--size-form-control-height);--item-height: 50px;--max-z-index: 0;--search-height: 38px;--popup-height: 460px}.core-topic-picker-container input.expand-state,.core-topic-picker-container .value{display:none}.core-topic-picker-container label.text{width:100%;height:var(--height);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between}.core-topic-picker-container label.text .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:45px;top:2px;width:44px;height:44px;border-radius:.375rem;cursor:pointer}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-topic-picker-container label.text:hover>.clear-icon-wrapper{display:block}.core-topic-picker-container label.text span{width:calc(100% - var(--height));overflow-x:hidden;text-overflow:ellipsis;color:inherit}.core-topic-picker-container label.text div.icon{display:flex;align-items:center;justify-content:center;position:absolute;right:3px;top:3px;width:calc(var(--height) - 6px);height:calc(var(--height) - 6px);background-color:#e9e9e9;border-radius:3px;cursor:pointer}.core-topic-picker-container label.text div.icon i{width:28px;height:28px;font-size:28px;color:#848484}.core-topic-picker-container .dropdown{display:block;position:absolute;width:800px;min-width:100%;max-height:0px;overflow-x:auto;overflow-y:hidden;background-color:#fff;font-size:15px;box-shadow:0 1rem 3rem #0000002e;transition:.25s linear;z-index:calc(var(--max-z-index) + 1)}.core-topic-picker-container .dropdown ul{padding-left:6px}.core-topic-picker-container .dropdown ul>li{display:flex;align-items:center;cursor:pointer;padding:0px var(--size-scrollbar-width);transition:.25s linear}.core-topic-picker-container .dropdown ul>li>label{width:100%}.core-topic-picker-container .dropdown ul>li:hover{background-color:var(--search-item-hover-bg);color:var(--search-item-hover-color);transition:.25s linear}.core-topic-picker-container input.expand-state:checked~.dropdown{border:1px solid #ced4da;margin-top:2px;max-height:var(--popup-height);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;transition:.25s linear}.core-topic-picker-container input.search{margin:0;width:100%;border:0;border-bottom:1px solid var(--search-border-color);background-color:var(--search-bg-color);position:sticky;top:0;height:38px;padding:6px 12px;font-size:15px}.core-topic-picker-container input.search:focus{outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: DomService }, { type: i0.Renderer2 }, { type: AppService }, { type: ResponseService }, { type: AlertService }, { type: MultiLanguageService }], propDecorators: { popupHeight: [{
+                type: Input
+            }], getByIdApi: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
+class CoreControlComponent extends BaseComponent {
+    constructor(mls, alertService) {
+        super(mls);
+        this.mls = mls;
+        this.alertService = alertService;
+        this.errors = [];
+        this.isDevMode = isDevMode();
+        this.coreOrgTreeDefaultAccessorMode = EnumCoreOrgTreeaAccessorMode.CHECKED;
+    }
+    displayValidatorNameMathchingError() {
+        if (isDevMode()) {
+            this.alertService.error(`
+        '${this.control.field}' validator array definition error: validator name must equal Validators.&lt;key&gt;
+      `, noneAutoClosedAlertOptions);
+        }
+    }
+    checkError() {
+        if (!!this.rawControl?.errors) {
+            const newErrors = [];
+            Object.keys(this.form.controls[this.control.field].errors).forEach(key => {
+                /*
+                  tanleica:
+                    By custom design, custom error is an array
+                    while built-in validator should produce an object error if any
+                */
+                if (this.form.controls[this.control.field].errors[key] instanceof Array) {
+                    newErrors.push({
+                        key: key,
+                        errorMessage: this.form.controls[this.control.field].errors[key][1]
+                    });
+                }
+                else {
+                    if (!!this.control.validators) {
+                        const filter = this.control.validators?.filter(x => x.name.toLowerCase() === key.toLowerCase());
+                        if (!!filter.length) {
+                            newErrors.push({
+                                key: key,
+                                errorMessage: filter[0].errorMessage
+                            });
                         }
-                        if (!this.stayAfterSubmit) {
-                            this.router.navigate(['../'], { /* experiment*/ replaceUrl: true, relativeTo: this.route, state: { id: body.innerBody.id || 0, instanceNumber: this.listInstance } });
+                        else {
+                            this.displayValidatorNameMathchingError();
                         }
                     }
-                }
-                else {
-                    this.onNotOk200Response(x);
+                    else {
+                        this.displayValidatorNameMathchingError();
+                    }
                 }
             });
+            this.errors = newErrors;
         }
         else {
-            this.loading = true;
-            const sysMutationLogBeforeAfterRequest = {
-                sysFunctionCode: this.routingService.currentFunction$.value?.code || 'UNDEFINED',
-                sysActionCode: EnumCoreButtonVNSCode.HEADER_SAVE,
-                before: JSON.stringify(this.currentValue) ?? '""',
-                after: JSON.stringify(this.form.getRawValue()),
-                username: this.authService.data$.value?.userName
-            };
-            const a1 = this.coreFormService.getAllFormBaseControlNames(this.leftInputSections?.filter(x => !x.hidden));
-            const a2 = this.coreFormService.getAllFormBaseControlNames(this.sections?.filter(x => !x.hidden));
-            const actualFormDeclaredFields = [...a1, ...a2];
-            this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_UPDATING_PLEASE_WAIT));
-            this.commonHttpRequestService
-                .makePostRequest('update ' + this.entityTable, this.crud.u, {
-                ...this.form.getRawValue(),
-                sysMutationLogBeforeAfterRequest,
-                actualFormDeclaredFields
-            })
-                .subscribe((x) => {
-                this.loading = false;
-                if (x.ok && x.status === 200) {
-                    const body = x.body;
-                    //this.responseService.resolve(body);
-                    if (body.statusCode === 200) {
-                        if (isDevMode()) {
-                            this.sendSignal(body.innerBody);
-                        }
-                        this.onSubmitSuccess.emit(true);
-                        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
-                        /*
-                        Transfer current record id
-                      */
-                        this.toggleReloadFlagForTheCaller(body.innerBody.id);
-                        if (this.forceListRefreshOnCreateOrUpdate) {
-                            this.corePageListService.instanceRequery(this.listInstance);
-                        }
-                        if (!this.stayAfterSubmit) {
-                            if (this.appConfigService.APP_TYPE === "MOBILE") {
-                                this.router.navigate(['../'], { /* experiment*/ replaceUrl: true, relativeTo: this.route, state: { id: body.innerBody.id, instanceNumber: this.listInstance } });
-                            }
-                            else if (this.appConfigService.APP_TYPE === "WEBAPP") {
-                                this.router.navigate(['../'], { relativeTo: this.route, state: { id: body.innerBody.id, instanceNumber: this.listInstance } });
-                            }
-                        }
-                    }
+            this.errors = [];
+        }
+    }
+    resetError() {
+        this.errors = [];
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        this.controlType = this.control.controlType;
+        this.required = !!this.control.validators?.filter(x => x.validator.name === 'required').length;
+        this.rawControl = this.form.get(this.control.field);
+        this.subscriptions.push(this.rawControl?.statusChanges.subscribe(_ => {
+            this.checkError();
+        }));
+        if (!!this.checkError$) {
+            this.subscriptions.push(this.checkError$.subscribe(x => {
+                if (x) {
+                    this.checkError();
                 }
                 else {
-                    this.onNotOk200Response(x);
+                    this.resetError();
+                }
+            }));
+        }
+    }
+    get isValid() { return this.form.controls[this.control.field].valid; }
+    onFocus(e) {
+        this.control.focus$?.next(e);
+    }
+    onBlur(e) {
+        this.control.blur$?.next(e);
+    }
+    oHandleClick(e) {
+        this.control.click$?.next(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreControlComponent, deps: [{ token: MultiLanguageService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreControlComponent, isStandalone: true, selector: "core-control", inputs: { control: "control", form: "form", checkError$: "checkError$", rangeLimit: "rangeLimit" }, usesInheritance: true, ngImport: i0, template: "<div class=\"core-control-container\">\r\n    <div [formGroup]=\"form\" [class.hidden]=\"!!control.hidden\">\r\n\r\n        <!-- START: LABEL SESSION-->\r\n        <label [class]=\"'control-label' +  (required ? ' required' : '')\" [attr.for]=\"control.field\"\r\n            [class.avatar-label]=\"control.uploadFileType==='IMAGE_AVATAR'\" [appTooltip]=\"control.tooltip! | translate: lang\" [ngStyle]=\"{\r\n                display: 'inline-block'\r\n            }\">\r\n            {{(control.controlType!=='CHECKBOX' && control.controlType!=='BUTTON') ? (control.label | translate: lang) : ''}}\r\n        </label>\r\n\r\n        @if (!!control.hint! && control.controlType !== 'CHECKBOX') {\r\n            <i class=\"feather-help-circle\" [appTooltip]=\"control.hint!\" [ngStyle]=\"{\r\n                display: 'inline-block',\r\n                marginLeft: '2px'\r\n            }\"></i>\r\n        }\r\n\r\n        <!-- START: LABEL SESSION-->\r\n\r\n        <!-- START: FORM-CONTROL SESSION-->\r\n\r\n        <ng-container>\r\n        @switch (control.controlType) {\r\n            @case (\"TEXTBOX\") {\r\n                <input *ngIf=\"control.type==='date'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly!\" useValueAsDate>\r\n    \r\n                <input *ngIf=\"control.type==='number'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\" [step]=\"control.step || '1'\">\r\n    \r\n                <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [formControlName]=\"control.field\"\r\n                    [value]=\"form.get(control.field)?.value | tableCell: control.pipe : lang\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\"\r\n                    [appTooltip]=\"form.get(control.field)?.value\"\r\n                    (focus)=\"onFocus($event)\"\r\n                    (blur)=\"onBlur($event)\"\r\n                    >\r\n            }\r\n            @case (\"CURRENCY\") {\r\n                <core-currency-input [formControlName]=\"control.field\"></core-currency-input>\r\n            }\r\n            @case (\"TEXTAREA\") {\r\n                <textarea [rows]=\"control.textareaRows?.toString() || '3'\" [ngStyle]=\"{ height: 'unset' }\"\r\n                    [formControlName]=\"control.field\" class=\"form-control\" [readonly]=\"control.readonly\"></textarea>\r\n            }\r\n            @case (\"CHECKBOX\") {\r\n                <core-checkbox [formControlName]=\"control.field\" [text]=\"control.label\"\r\n                    [inputValue]=\"control.value\"></core-checkbox>\r\n            }\r\n            @case (\"MCC\") {\r\n                <core-mcc [formControlName]=\"control.field\" [columns]=\"control.columns!\" [shownFrom]=\"control.shownFrom!\" \r\n                [apiDefinition]=\"control.apiDefinition!\" [getByIdApi]=\"control.getByIdApi!\" [selectedRow$]=\"control.selectedRow$!\"\r\n                [outerParam$]=\"control.outerParam$!\"\r\n                ></core-mcc>\r\n            }\r\n            @case (\"DATEPICKER\") {\r\n                <core-date-picker [formControlName]=\"control.field\" [rangeLimit]=\"control.rangeLimit!\" [popupAlign]=\"control.popupAlign!\"></core-date-picker>\r\n            }\r\n            @case (\"DROPDOWN\") {\r\n                @if (!!control.dropdownOptions$) {\r\n                    <core-dropdown [formControlName]=\"control.field\" [options$]=\"control.dropdownOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-dropdown>\r\n                }\r\n            }\r\n            @case (\"LIST\") {\r\n                <core-list [formControlName]=\"control.field\" [options]=\"control.listOptions!\"></core-list>\r\n            }\r\n            @case (\"CHECKLIST\") {\r\n                @if (!!control.checklistOptions$) {\r\n                    <core-checklist [formControlName]=\"control.field\" [options$]=\"control.checklistOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-checklist>\r\n                }\r\n            }\r\n            @case (\"FILEUPLOADER\") {\r\n                @if (!!control.uploadFileType) {\r\n                    <core-file-uploader [formControlName]=\"control.field\" [uploadFileType]=\"control.uploadFileType\"\r\n                        [fileDataControlName]=\"control.fileDataControlName!\"\r\n                        [fileNameControlName]=\"control.fileNameControlName!\"\r\n                        [fileTypeControlName]=\"control.fileTypeControlName!\"\r\n                        [verticalMode]=\"control.verticalMode!\"></core-file-uploader>\r\n                }\r\n            }\r\n            @case (\"ATTACHMENT\") {\r\n                <core-attachment ngDefaultControl [formControlName]=\"control.field\" [assignTo]=\"control.assignTo!\"\r\n                    [valueToShow]=\"control.valueToShow!\"></core-attachment>\r\n            }\r\n            @case (\"GRIDBUFFER\") {\r\n                @if (!!control.gridBufferFormSections && !!control.gridBufferTableColumns) {\r\n                    <core-grid-buffer [formControlName]=\"control.field\" [formSections]=\"control.gridBufferFormSections\"\r\n                        [gridColumns]=\"control.gridBufferTableColumns\"\r\n                        (onBufferFormCreated)=\"!!control.onBufferFormCreated ? control.onBufferFormCreated($event) : null\"></core-grid-buffer>\r\n                }\r\n            }\r\n            @case (\"ORGTREECHECK\") {\r\n                <core-org-tree [formControlName]=\"control.field\"\r\n                    [accessorMode]=\"coreOrgTreeDefaultAccessorMode\" [height]=\"control.height!\"></core-org-tree>\r\n            }\r\n            @case (\"RADIOGROUP\") {\r\n                <core-radio-group [formControlName]=\"control.field\"\r\n                    [options$]=\"control.radioGroupOptions$!\"\r\n                    [vertical]=\"control.verticalMode!\"\r\n                    ></core-radio-group>\r\n            }\r\n            @case (\"MONTHSELECTOR\") {\r\n                <core-month-selector [formControlName]=\"control.field\"></core-month-selector>\r\n            }\r\n            @case (\"SHIFTCELL\") {\r\n                <core-shift-cell [formControlName]=\"control.field\"></core-shift-cell>\r\n            }\r\n            @case (\"SHIFTCOLLECTION\") {\r\n                <core-shift-collection [relativeMode]=\"true\" [height]=\"control.height || 800\"></core-shift-collection>\r\n            }\r\n            @case (\"SEEKER\") {\r\n                @switch(control.seekerSourceType) {\r\n                    @case(\"JOB_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"EMPLOYEE_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"CONTRACT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" [boundFrom]=\"control.boundFrom!\"\r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\" \r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [shownFrom]=\"control.shownFrom!\"\r\n                            [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WORKING_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WAGE_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [formControlName]=\"control.field\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [seekerVerifyIgnore]=\"control.seekerVerifyIgnore!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_CONCURRENT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [multiModeTableHeight]=\"control.multiModeTableHeight!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"ORGANIZATION_UNIT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [formControlName]=\"control.field\" [seekerSourceType]=\"control.seekerSourceType!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [alsoBindTo]=\"control.alsoBindTo!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"TOPICPICKER\") {\r\n                        <core-topic-picker [formControlName]=\"control.field\" [popupHeight]=\"control.popupHeight!\" [getByIdApi]=\"control.getByIdApi!\"></core-topic-picker>\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"control.controlType==='BUTTON'\">\r\n            <button type=\"button\" class=\"btn btn-secondary text\" (click)=\"oHandleClick($event)\">{{control.label| translate: lang}}</button>\r\n        </ng-container>\r\n        <!-- END: FORM-CONTROL SESSION-->\r\n\r\n        <!-- START: ERROR SESSION-->\r\n        <div *ngIf=\"!!errors!.length\">\r\n            <div class=\"form-control-error\" *ngFor=\"let error of errors\">\r\n                {{ error.errorMessage | translate: lang }}\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!!!errors!.length && !!checkError$.value\">\r\n            <div>\r\n                {{ '&nbsp;' }}\r\n            </div>\r\n        </div>\r\n        <!-- END: ERROR SESSION-->\r\n\r\n    </div>\r\n</div>", styles: [".core-control-container{font-size:var(--typo-basic-font-size)!important}.core-control-container .control-label{color:#848484}.core-control-container>div.hidden{display:none}.core-control-container label{color:#464646}.core-control-container label.required:after{content:\"*\";color:#ff040b}.core-control-container label.avatar-label{width:var(--size-file-uploader);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "tableCell" }, { kind: "component", type: CoreDropdownComponent, selector: "core-dropdown", inputs: ["getByIdObject$", "paramMode", "shownFrom", "options$", "height", "placeholder", "loading", "warningDisable", "clearDisable", "fitHeightWithItemCount", "itemHeight"] }, { kind: "component", type: CoreListComponent, selector: "core-list", inputs: ["title", "height", "options"] }, { kind: "component", type: CoreChecklistComponent, selector: "core-checklist", inputs: ["paramMode", "getByIdObject$", "shownFrom", "options$", "height", "placeholder", "loading", "readonly", "disabled"] }, { kind: "component", type: CoreFormControlSeekerComponent, selector: "core-form-control-seeker", inputs: ["title", "showPageHeader", "preDefinedOuterParam$", "preDefinedOuterFilter$", "click$", "getByIdObject$", "getByIdApi", "paramMode", "multiMode", "objectList$", "useTheseColumns", "hideOrgTree", "excludedColumns", "excludeExistingList", "sourceSpaceHeight", "indirectBinding", "bindGridIdTo", "multiModeExtendedColumns", "multiModeExtendedSections", "editBufferData$", "multiModeTableHeight", "multiModeRowHeight", "seekerSourceType", "boundFrom", "shownFrom", "alsoBindTo", "seekerVerifyIgnore"], outputs: ["onDoubleClick"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "component", type: CoreFileUploaderComponent, selector: "core-file-uploader", inputs: ["uploadFileType", "fileDataControlName", "fileNameControlName", "fileTypeControlName", "avatarSize", "defaultAvatar", "hidePreview", "verticalMode"] }, { kind: "component", type: CoreAttachmentComponent, selector: "core-attachment", inputs: ["assignTo", "readonly", "valueToShow"] }, { kind: "component", type: CoreGridBufferComponent, selector: "core-grid-buffer", inputs: ["formSections", "gridColumns"], outputs: ["onBufferFormCreated"] }, { kind: "component", type: CoreDatePickerComponent, selector: "core-date-picker", inputs: ["enableTimeZoneConverter", "showPlaceholder", "popupWidth", "popupXPadding", "popupAlign", "rangeLimit", "readonly", "disabled"] }, { kind: "component", type: CoreOrgTreeComponent, selector: "core-org-tree", inputs: ["lineColor", "fullWidthMode", "accessorMode", "searchMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "excludedIds$", "stateIsolated$"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "component", type: CoreRadioGroupComponent, selector: "core-radio-group", inputs: ["options$", "vertical"] }, { kind: "component", type: CoreMccComponent, selector: "core-mcc", inputs: ["height", "columns", "shownFrom", "apiDefinition", "getByIdApi", "outerParam$", "selectedRow$", "outerFilterOperators", "outerInOperators"] }, { kind: "component", type: CoreMonthSelectorComponent, selector: "core-month-selector", inputs: ["align"], outputs: ["onYearClick"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "component", type: CoreCurrencyInputComponent, selector: "core-currency-input", inputs: ["currencySign"], outputs: ["onLeftFocus"] }, { kind: "component", type: CoreShiftCellComponent, selector: "core-shift-cell", inputs: ["$readOnly", "$hideStarterPlusSign", "$hideStickersWhileDragover", "$backgroundColor"] }, { kind: "component", type: CoreShiftCollectionComponent, selector: "core-shift-collection", inputs: ["height", "relativeMode"] }, { kind: "component", type: CoreTopicPickerComponent, selector: "core-topic-picker", inputs: ["popupHeight", "getByIdApi"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-control', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslatePipe,
+                        TableCellPipe,
+                        CoreDropdownComponent,
+                        CoreListComponent,
+                        CoreChecklistComponent,
+                        CoreFormControlSeekerComponent,
+                        CoreCheckboxComponent,
+                        CoreFileUploaderComponent,
+                        CoreAttachmentComponent,
+                        CoreGridBufferComponent,
+                        CoreDatePickerComponent,
+                        CoreOrgTreeComponent,
+                        CoreRadioGroupComponent,
+                        CoreMccComponent,
+                        CoreMonthSelectorComponent,
+                        TooltipDirective,
+                        CoreCurrencyInputComponent,
+                        CoreShiftCellComponent,
+                        CoreShiftCollectionComponent,
+                        CoreTopicPickerComponent
+                    ], template: "<div class=\"core-control-container\">\r\n    <div [formGroup]=\"form\" [class.hidden]=\"!!control.hidden\">\r\n\r\n        <!-- START: LABEL SESSION-->\r\n        <label [class]=\"'control-label' +  (required ? ' required' : '')\" [attr.for]=\"control.field\"\r\n            [class.avatar-label]=\"control.uploadFileType==='IMAGE_AVATAR'\" [appTooltip]=\"control.tooltip! | translate: lang\" [ngStyle]=\"{\r\n                display: 'inline-block'\r\n            }\">\r\n            {{(control.controlType!=='CHECKBOX' && control.controlType!=='BUTTON') ? (control.label | translate: lang) : ''}}\r\n        </label>\r\n\r\n        @if (!!control.hint! && control.controlType !== 'CHECKBOX') {\r\n            <i class=\"feather-help-circle\" [appTooltip]=\"control.hint!\" [ngStyle]=\"{\r\n                display: 'inline-block',\r\n                marginLeft: '2px'\r\n            }\"></i>\r\n        }\r\n\r\n        <!-- START: LABEL SESSION-->\r\n\r\n        <!-- START: FORM-CONTROL SESSION-->\r\n\r\n        <ng-container>\r\n        @switch (control.controlType) {\r\n            @case (\"TEXTBOX\") {\r\n                <input *ngIf=\"control.type==='date'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly!\" useValueAsDate>\r\n    \r\n                <input *ngIf=\"control.type==='number'\" [formControlName]=\"control.field\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\" [step]=\"control.step || '1'\">\r\n    \r\n                <input *ngIf=\"control.type!=='date' && control.type!=='number'\" [formControlName]=\"control.field\"\r\n                    [value]=\"form.get(control.field)?.value | tableCell: control.pipe : lang\" [type]=\"control.type\"\r\n                    class=\"form-control\" [readonly]=\"control.readonly\"\r\n                    [appTooltip]=\"form.get(control.field)?.value\"\r\n                    (focus)=\"onFocus($event)\"\r\n                    (blur)=\"onBlur($event)\"\r\n                    >\r\n            }\r\n            @case (\"CURRENCY\") {\r\n                <core-currency-input [formControlName]=\"control.field\"></core-currency-input>\r\n            }\r\n            @case (\"TEXTAREA\") {\r\n                <textarea [rows]=\"control.textareaRows?.toString() || '3'\" [ngStyle]=\"{ height: 'unset' }\"\r\n                    [formControlName]=\"control.field\" class=\"form-control\" [readonly]=\"control.readonly\"></textarea>\r\n            }\r\n            @case (\"CHECKBOX\") {\r\n                <core-checkbox [formControlName]=\"control.field\" [text]=\"control.label\"\r\n                    [inputValue]=\"control.value\"></core-checkbox>\r\n            }\r\n            @case (\"MCC\") {\r\n                <core-mcc [formControlName]=\"control.field\" [columns]=\"control.columns!\" [shownFrom]=\"control.shownFrom!\" \r\n                [apiDefinition]=\"control.apiDefinition!\" [getByIdApi]=\"control.getByIdApi!\" [selectedRow$]=\"control.selectedRow$!\"\r\n                [outerParam$]=\"control.outerParam$!\"\r\n                ></core-mcc>\r\n            }\r\n            @case (\"DATEPICKER\") {\r\n                <core-date-picker [formControlName]=\"control.field\" [rangeLimit]=\"control.rangeLimit!\" [popupAlign]=\"control.popupAlign!\"></core-date-picker>\r\n            }\r\n            @case (\"DROPDOWN\") {\r\n                @if (!!control.dropdownOptions$) {\r\n                    <core-dropdown [formControlName]=\"control.field\" [options$]=\"control.dropdownOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-dropdown>\r\n                }\r\n            }\r\n            @case (\"LIST\") {\r\n                <core-list [formControlName]=\"control.field\" [options]=\"control.listOptions!\"></core-list>\r\n            }\r\n            @case (\"CHECKLIST\") {\r\n                @if (!!control.checklistOptions$) {\r\n                    <core-checklist [formControlName]=\"control.field\" [options$]=\"control.checklistOptions$!\"\r\n                        [getByIdObject$]=\"control.getByIdObject$!\" [shownFrom]=\"control.shownFrom!\"></core-checklist>\r\n                }\r\n            }\r\n            @case (\"FILEUPLOADER\") {\r\n                @if (!!control.uploadFileType) {\r\n                    <core-file-uploader [formControlName]=\"control.field\" [uploadFileType]=\"control.uploadFileType\"\r\n                        [fileDataControlName]=\"control.fileDataControlName!\"\r\n                        [fileNameControlName]=\"control.fileNameControlName!\"\r\n                        [fileTypeControlName]=\"control.fileTypeControlName!\"\r\n                        [verticalMode]=\"control.verticalMode!\"></core-file-uploader>\r\n                }\r\n            }\r\n            @case (\"ATTACHMENT\") {\r\n                <core-attachment ngDefaultControl [formControlName]=\"control.field\" [assignTo]=\"control.assignTo!\"\r\n                    [valueToShow]=\"control.valueToShow!\"></core-attachment>\r\n            }\r\n            @case (\"GRIDBUFFER\") {\r\n                @if (!!control.gridBufferFormSections && !!control.gridBufferTableColumns) {\r\n                    <core-grid-buffer [formControlName]=\"control.field\" [formSections]=\"control.gridBufferFormSections\"\r\n                        [gridColumns]=\"control.gridBufferTableColumns\"\r\n                        (onBufferFormCreated)=\"!!control.onBufferFormCreated ? control.onBufferFormCreated($event) : null\"></core-grid-buffer>\r\n                }\r\n            }\r\n            @case (\"ORGTREECHECK\") {\r\n                <core-org-tree [formControlName]=\"control.field\"\r\n                    [accessorMode]=\"coreOrgTreeDefaultAccessorMode\" [height]=\"control.height!\"></core-org-tree>\r\n            }\r\n            @case (\"RADIOGROUP\") {\r\n                <core-radio-group [formControlName]=\"control.field\"\r\n                    [options$]=\"control.radioGroupOptions$!\"\r\n                    [vertical]=\"control.verticalMode!\"\r\n                    ></core-radio-group>\r\n            }\r\n            @case (\"MONTHSELECTOR\") {\r\n                <core-month-selector [formControlName]=\"control.field\"></core-month-selector>\r\n            }\r\n            @case (\"SHIFTCELL\") {\r\n                <core-shift-cell [formControlName]=\"control.field\"></core-shift-cell>\r\n            }\r\n            @case (\"SHIFTCOLLECTION\") {\r\n                <core-shift-collection [relativeMode]=\"true\" [height]=\"control.height || 800\"></core-shift-collection>\r\n            }\r\n            @case (\"SEEKER\") {\r\n                @switch(control.seekerSourceType) {\r\n                    @case(\"JOB_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"EMPLOYEE_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [editBufferData$]=\"control.editBufferData$!\"\r\n                            [indirectBinding]=\"control.indirectBinding!\"\r\n                            [bindGridIdTo]=\"control.bindGridIdTo!\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"CONTRACT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" [boundFrom]=\"control.boundFrom!\"\r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\" \r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [shownFrom]=\"control.shownFrom!\"\r\n                            [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WORKING_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\" [formControlName]=\"control.field\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"WAGE_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [formControlName]=\"control.field\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_SEEK\") {\r\n                        <core-form-control-seeker \r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [objectList$]=\"control.objectList$!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [seekerVerifyIgnore]=\"control.seekerVerifyIgnore!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"POSITION_CONCURRENT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [excludeExistingList]=\"control.excludeExistingList!\"\r\n                            [multiMode]=\"control.multiMode!\" [multiModeTableHeight]=\"control.multiModeTableHeight!\" [multiModeRowHeight]=\"control.multiModeRowHeight!\"\r\n                            [formControlName]=\"control.field\" [alsoBindTo]=\"control.alsoBindTo!\"\r\n                            [seekerSourceType]=\"control.seekerSourceType!\" \r\n                            [preDefinedOuterParam$]=\"control.preDefinedOuterParam$!\"\r\n                            [preDefinedOuterFilter$]=\"control.preDefinedOuterFilter$!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [multiModeExtendedColumns]=\"control.multiModeExtendedColumns!\"\r\n                            [multiModeExtendedSections]=\"control.multiModeExtendedSections!\"\r\n                            [multiModeTableHeight]=\"control.multiModeTableHeight!\"\r\n                            [click$]=\"control.click$\"\r\n                            [useTheseColumns]=\"control.useTheseColumns!\"\r\n                            [hideOrgTree]=\"control.hideOrgTree!\"\r\n                            [sourceSpaceHeight]=\"control.sourceSpaceHeight!\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"ORGANIZATION_UNIT_SEEK\") {\r\n                        <core-form-control-seeker\r\n                            [formControlName]=\"control.field\" [seekerSourceType]=\"control.seekerSourceType!\"\r\n                            [boundFrom]=\"control.boundFrom!\" [alsoBindTo]=\"control.alsoBindTo!\" [shownFrom]=\"control.shownFrom!\"\r\n                            [getByIdObject$]=\"control.getByIdObject$!\"\r\n                            [click$]=\"control.click$\"\r\n                        ></core-form-control-seeker>\r\n                    }\r\n                    @case(\"TOPICPICKER\") {\r\n                        <core-topic-picker [formControlName]=\"control.field\" [popupHeight]=\"control.popupHeight!\" [getByIdApi]=\"control.getByIdApi!\"></core-topic-picker>\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"control.controlType==='BUTTON'\">\r\n            <button type=\"button\" class=\"btn btn-secondary text\" (click)=\"oHandleClick($event)\">{{control.label| translate: lang}}</button>\r\n        </ng-container>\r\n        <!-- END: FORM-CONTROL SESSION-->\r\n\r\n        <!-- START: ERROR SESSION-->\r\n        <div *ngIf=\"!!errors!.length\">\r\n            <div class=\"form-control-error\" *ngFor=\"let error of errors\">\r\n                {{ error.errorMessage | translate: lang }}\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!!!errors!.length && !!checkError$.value\">\r\n            <div>\r\n                {{ '&nbsp;' }}\r\n            </div>\r\n        </div>\r\n        <!-- END: ERROR SESSION-->\r\n\r\n    </div>\r\n</div>", styles: [".core-control-container{font-size:var(--typo-basic-font-size)!important}.core-control-container .control-label{color:#848484}.core-control-container>div.hidden{display:none}.core-control-container label{color:#464646}.core-control-container label.required:after{content:\"*\";color:#ff040b}.core-control-container label.avatar-label{width:var(--size-file-uploader);display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: AlertService }], propDecorators: { control: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], checkError$: [{
+                type: Input
+            }], rangeLimit: [{
+                type: Input
+            }] } });
+
+class CoreFormComponent {
+    constructor(coreControlService, multiLanguageService, alertService, coreFormService, appConfigService) {
+        this.coreControlService = coreControlService;
+        this.multiLanguageService = multiLanguageService;
+        this.alertService = alertService;
+        this.coreFormService = coreFormService;
+        this.appConfigService = appConfigService;
+        this.checkError$ = new BehaviorSubject(false);
+        this.onFormCreated = new EventEmitter();
+        this.onFormRefCreated = new EventEmitter();
+        this.onSubmit = new EventEmitter();
+        this.onSave = new EventEmitter();
+        this.onCancal = new EventEmitter();
+        this.buttonClick = new EventEmitter();
+        this.subscriptions = [];
+        this.payLoad = '';
+        this.isDevMode = isDevMode();
+    }
+    updateSections(newSections) {
+        this.sections.map((section, sectionIndex) => {
+            const newSection = newSections[sectionIndex];
+            section.rows.map((row, rowIndex) => {
+                const newRow = newSection.rows[rowIndex];
+                row.map((control, controlIndex) => {
+                    const newControl = newRow[controlIndex];
+                    /* THE ONLY PROP TO BE UDATED IS 'hidden', THE OTHERS SHOULD BE MANIPULATED THROUGH this.form.get(YOUR_CONTROL_NAME)... */
+                    control.hidden = newControl?.hidden;
+                    /************************************************************************************************************************/
+                });
+            });
+            /* #region Oct the 11th 2023 */
+            /* Some sections was posibly have renderOff=true from previous state and their controls must be created/remove */
+            /*
+            BUT THIS TASK IS HARD SO FAR
+            */
+            /* #endregion Oct the 11th 2023 */
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['inputSections']) {
+            let newSections = changes['inputSections'].currentValue;
+            if (!!!this.form) {
+                this.sections = newSections;
+                let leftGroup;
+                let form;
+                const mainGroup = this.coreControlService.toGroup(this.sections);
+                if (!!this.leftInputSections) {
+                    leftGroup = this.coreControlService.toGroup(this.leftInputSections);
+                    form = new FormGroup({ ...leftGroup, ...mainGroup });
                 }
+                else {
+                    form = new FormGroup(mainGroup);
+                }
+                this.form = form;
+            }
+            else {
+                this.updateSections(newSections);
+            }
+            this.onFormCreated.emit({
+                formName: this.formName,
+                formGroup: this.form,
             });
         }
     }
-    /**
-     *
-     * PHƯƠNG THỨC NÀY ĐƯỢC TẠO RA KHI DEV VNS-PORTAL
-     */
-    onSave(e) {
-        this.loading = true;
-        this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_ADDING_PLEASE_WAIT));
-        if (!!this.appConfigService.DEBUG_ENABLED) {
-            alert(JSON.stringify(e, null, 2));
+    ngOnInit() {
+        /*
+        if (this.appConfigService.APP_TYPE === "WEBAPP") {
+        */
+        if (!this.disableSaveButton && !this.disableCancelButton) {
+            this.buttonItems = [
+                EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
+                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
+            ];
         }
-        this.commonHttpRequestService
-            .makePostRequest('create ' + this.entityTable, this.crud.s, e)
-            .subscribe((x) => {
-            this.loading = false;
-            const body = x.body;
-            this.responseService.resolve(body);
-            if (x.ok && x.status === 200 && body.statusCode === 200) {
-                if (isDevMode()) {
-                    this.sendSignal(body.innerBody);
+        else if (!!this.disableCancelButton) {
+            this.buttonItems = [
+                EnumCoreButtonVNSCode.NONE_HEADER_SAVE,
+            ];
+        }
+        else if (!!this.disableSaveButton) {
+            this.buttonItems = [
+                EnumCoreButtonVNSCode.NONE_HEADER_CANCEL,
+            ];
+        }
+        /*
+        } else if (this.appConfigService.APP_TYPE === "PORTAL") {
+          if (!this.disableSaveButton) {
+            this.buttonItems = [
+              EnumCoreButtonVNSCode.SEND,
+              EnumCoreButtonVNSCode.CANCEL,
+              EnumCoreButtonVNSCode.SAVE,
+            ]
+          } else {
+            this.buttonItems = [
+              EnumCoreButtonVNSCode.SEND,
+              EnumCoreButtonVNSCode.CANCEL,
+            ]
+          }
+        }
+        */
+        if (!!this.customFormButtonItems) {
+            this.buttonItems = this.customFormButtonItems;
+        }
+        this.subscriptions.push(this.mode$.subscribe((x) => (this.isUpdateMode = x === EnumCorePageEditMode.UPDATE)));
+        console.log(this.mode$);
+        /* START: Check if id field is available */
+        if (!!!this.form.get('id') && isDevMode()) {
+            this.alertService.error(`
+            Control "id" is mandatory. Please define one in your bussiness component. You can assign its "hidden" property to true if needed.
+          `, noneAutoClosedAlertOptions);
+        }
+        /* END: Check if id field is available */
+        if (isDevMode()) {
+            /* START: Check if each field is unique */
+            const fields = this.coreFormService.getAllFormBaseControlNames(this.sections);
+            fields.reduce((p, c) => {
+                if (c === '') {
+                    this.alertService.error(`Form control name must be definded, '${c}' is invalid form control name!!!`, noneAutoClosedAlertOptions);
                 }
-                this.onInitialValueStringReady.emit(JSON.stringify(e));
-                /*
-                Transfer newly created record id
-                */
-                this.toggleReloadFlagForTheCaller(body.innerBody.id);
-                this.router.navigateByUrl(this.urlService.previousRouteUrl$.value);
-            }
-        });
+                else {
+                    if (p === c) {
+                        this.alertService.error(`Duplicate form control name: '${c}'. Consider to predefine one ONLY!!!.`, noneAutoClosedAlertOptions);
+                    }
+                }
+                return c;
+            });
+            /* END: Check if each field is unique */
+        }
+        this.subscriptions.push(this.multiLanguageService.lang$.subscribe((x) => (this.lang = x)));
     }
-    onCancel() {
-        if (!!this.autoCancelLogicOff) {
-            this.cancelLogic.emit(true);
-            return;
+    ngAfterViewInit() {
+        this.onFormRefCreated.emit(this.formRef);
+    }
+    onFormSubmit() {
+        this.checkError$.next(true);
+        if (!!this.form.valid) {
+            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
+            this.onSubmit.emit(this.form?.getRawValue());
         }
-        if (!!this.urlService.previousRouteUrl$.value.length) {
-            this.router.navigateByUrl(this.urlService.previousRouteUrl$.value);
+    }
+    onFormSave() {
+        this.checkError$.next(true);
+        if (!!this.form.valid) {
+            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
+            this.onSave.emit(this.form?.getRawValue());
+        }
+        setTimeout(() => this.checkError$.next(false), 3000);
+    }
+    onCancelLocal() {
+        this.onCancal.emit(null);
+    }
+    updatePayload() {
+        if (this.payLoad === '') {
+            this.payLoad = JSON.stringify(this.form?.getRawValue(), null, 2);
         }
         else {
-            this.router.navigate(['../'], { relativeTo: this.route });
+            this.payLoad = '';
         }
     }
-    buttonClick(e) {
-        this.onButtonClick.emit(e);
+    updateValidorOverview() {
+        if (this.validatorOverview === undefined) {
+            const result = [];
+            Object.keys(this.form.controls).forEach((key) => {
+                const control = this.form.get(key);
+                const errors = [];
+                if (!!control.invalid) {
+                    Object.keys(control.errors).forEach((key) => {
+                        errors.push(key);
+                    });
+                }
+                result.push({
+                    key,
+                    errors,
+                });
+            });
+            this.validatorOverview = JSON.stringify(result, null, 2);
+        }
+        else {
+            this.validatorOverview = undefined;
+        }
     }
-    onFormCreatedLocal(e) {
-        this.form = e.formGroup;
-        this.form.patchValue(this.currentValue);
-        this.onFormCreated.emit(this.form);
-        // Now we can return initFormValueString to the caller
-        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
+    ngOnDestroy() {
+        this.subscriptions.map((x) => x?.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CorePageEditComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: CorePageEditService }, { token: CommonHttpRequestService }, { token: AnimatedTextService }, { token: MultiLanguageService }, { token: CoreFormService }, { token: CorePageListService }, { token: HubConnectionService }, { token: AuthService }, { token: AlertService }, { token: UrlService }, { token: RoutingService }, { token: ResponseService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CorePageEditComponent, isStandalone: true, selector: "core-page-edit", inputs: { stayAfterSubmit: "stayAfterSubmit", width: "width", entityTable: "entityTable", hasIdOfStringType: "hasIdOfStringType", captionCode: "captionCode", leftInputSections: "leftInputSections", leftInputSectionsFlexSize: "leftInputSectionsFlexSize", sections: "sections", normalMode: "normalMode", bottomTemplateRef: "bottomTemplateRef", autoGetByIdOff: "autoGetByIdOff", autoSubmitLogicOff: "autoSubmitLogicOff", autoCancelLogicOff: "autoCancelLogicOff", customFormButtonItems: "customFormButtonItems", mixedMode: "mixedMode", checkError$: "checkError$", showSaveButton: "showSaveButton", disableSaveButton: "disableSaveButton", disableCancelButton: "disableCancelButton", forceListRefreshOnCreateOrUpdate: "forceListRefreshOnCreateOrUpdate", crud: "crud", entityUniqueIndexs: "entityUniqueIndexs" }, outputs: { submitLogic: "submitLogic", onFormCreated: "onFormCreated", onSubmitSuccess: "onSubmitSuccess", onButtonClick: "onButtonClick", cancelLogic: "cancelLogic", onInitialValueStringReady: "onInitialValueStringReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "containerBigger", first: true, predicate: ["containerBigger"], descendants: true }], ngImport: i0, template: "@if (!!normalMode) {\r\n<div #container class=\"core-page-edit-container\">\r\n    <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n        <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n    </div>\r\n    @if (!!sections.length) {\r\n    <core-form [width]=\"width\" [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n        [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n        [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [customFormButtonItems]=\"customFormButtonItems\" [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\"\r\n        [checkError$]=\"checkError$\" (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\"\r\n        (onSave)=\"onSave($event)\" (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n    }\r\n</div>\r\n} @else {\r\n<div class=\"modal-container\" [ngStyle]=\"{\r\n        overflowY: 'scroll'\r\n    }\">\r\n    <div #containerBigger class=\"modal-content\">\r\n        <div class=\"custom-header-popup\">\r\n            <i class=\"feather-x\" (click)=\"onCancel()\"></i>\r\n            <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n                <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n            </div>\r\n        </div>\r\n        <div #container class=\"core-page-edit-container not-normal-mode\" [ngStyle]=\"{\r\n                overflow: 'visible'\r\n            }\">\r\n            @if (!!sections.length) {\r\n            <core-form [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n                [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n                [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\" [customFormButtonItems]=\"customFormButtonItems\"\r\n                [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\" [checkError$]=\"checkError$\"\r\n                (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\" (onSave)=\"onSave($event)\"\r\n                (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@if (loading) {\r\n<app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n}", styles: ["@charset \"UTF-8\";.core-page-edit-container{--width: 50vw;background-color:#fff;padding:0,var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing);width:var(--width)}@media (max-width: 992px){.core-page-edit-container{width:100%}}.core-page-edit-container>.custom-header-popup{display:flex}.core-page-edit-container>i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.core-page-edit-container>caption{display:block;width:100%;color:#464646;font-weight:400}.modal-content{--height: 100%;height:var(--height);border-radius:10px}.modal-content i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.modal-content caption{display:block;width:100%;color:#000}.custom-header-popup{background:#fff}.captionText{margin-left:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }] }); }
+    onButtonClick(e) {
+        switch (e.code) {
+            case EnumCoreButtonVNSCode.NONE_HEADER_CANCEL:
+            case EnumCoreButtonVNSCode.CANCEL:
+                this.onCancelLocal();
+                break;
+            case EnumCoreButtonVNSCode.NONE_HEADER_SAVE:
+            case EnumCoreButtonVNSCode.SEND:
+            case EnumCoreButtonVNSCode.NONE_HEADER_DELETE:
+            case EnumCoreButtonVNSCode.NONE_HEADER_LIQUIDATE_CONTRACT:
+            case EnumCoreButtonVNSCode.ONFORMDELETE:
+            case EnumCoreButtonVNSCode.SAVE_PASSWORD:
+                this.onFormSubmit();
+                break;
+            case EnumCoreButtonVNSCode.SAVE:
+                this.onFormSave();
+                break;
+            default:
+                break;
+        }
+        this.buttonClick.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreFormComponent, deps: [{ token: CoreControlService }, { token: MultiLanguageService }, { token: AlertService }, { token: CoreFormService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreFormComponent, isStandalone: true, selector: "core-form", inputs: { formName: "formName", width: "width", submitText: "submitText", leftInputSections: "leftInputSections", leftInputSectionsFlexSize: "leftInputSectionsFlexSize", inputSections: "inputSections", mode$: "mode$", bottomTemplateRef: "bottomTemplateRef", customFormButtonItems: "customFormButtonItems", showCaptionButton: "showCaptionButton", disableSaveButton: "disableSaveButton", disableCancelButton: "disableCancelButton", checkError$: "checkError$" }, outputs: { onFormCreated: "onFormCreated", onFormRefCreated: "onFormRefCreated", onSubmit: "onSubmit", onSave: "onSave", onCancal: "onCancal", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "formRef", first: true, predicate: ["formRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!!form) {\r\n<div class=\"core-form-container\" [ngStyle]=\"{\r\n    width: !!width ? width + 'px' : 'auto'\r\n}\">\r\n\r\n    <form #formRef (ngSubmit)=\"onFormSubmit()\" [formGroup]=\"form\" autocomplete=\"off\">\r\n\r\n        <div class=\"row\">\r\n\r\n            @if (!!leftInputSections) {\r\n            <div [class]=\"'col-md-' + (leftInputSectionsFlexSize || 0)\">\r\n\r\n                @for (section of leftInputSections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                }\r\n\r\n            </div>\r\n            }\r\n\r\n            <div [class]=\"'col-md-' + (12 - (leftInputSectionsFlexSize || 0))\">\r\n\r\n                @for (section of sections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\" [ngStyle]=\"{\r\n                        maxWidth: !!section.maxWidth ? section.maxWidth + 'px' : 'none'\r\n                    }\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n\r\n            @if (!!bottomTemplateRef) {\r\n                <div class=\"col-md-12\">\r\n                    <div class=\"bottom-template-wrapper\">\r\n                        <ng-container *ngTemplateOutlet=\"bottomTemplateRef\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <div class=\"h10\"></div>\r\n\r\n        <div class=\"form-row\">\r\n            <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                <core-button-group-vns [showCaption]=\"showCaptionButton\" [forHeader]=\"false\"\r\n                (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (isDevMode) {\r\n        <div class=\"form-row d-flex d-flex-center\">\r\n            <div class=\"dev-button\" (click)=\"updatePayload()\">Show\r\n                values</div>\r\n            <div class=\"dev-button\" (click)=\"updateValidorOverview()\">Show\r\n                validators</div>\r\n        </div>\r\n        }\r\n\r\n    </form>\r\n\r\n    @if (!!payLoad && isDevMode) {\r\n    <div class=\"form-row payload-preview\">\r\n        <strong>Current values</strong><br>{{payLoad}}\r\n    </div>\r\n    }\r\n\r\n    @if (!!validatorOverview && isDevMode) {\r\n    <div class=\"form-row payload-preview validator-preview\">\r\n        <strong>Current errors</strong><br>{{validatorOverview}}\r\n    </div>\r\n    }\r\n\r\n</div>\r\n}", styles: [".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;border:1px gray solid;font-size:13px;padding:8px}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;color:gray!important;background-color:#dff6dd;padding:24px;margin:24px}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: CoreControlComponent, selector: "core-control", inputs: ["control", "form", "checkError$", "rangeLimit"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CoreButtonGroupVnsComponent, selector: "core-button-group-vns", inputs: ["height", "instanceNumber", "forHeader", "fixedShow", "shownItems", "showCaption", "lastChildEffectOff"], outputs: ["buttonClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CorePageEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-page-edit', imports: [
+            args: [{ selector: 'core-form', imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        CoreFormComponent,
+                        CoreControlComponent,
                         TranslatePipe,
-                        FullscreenModalLoaderComponent,
-                        CorePageHeaderComponent
-                    ], template: "@if (!!normalMode) {\r\n<div #container class=\"core-page-edit-container\">\r\n    <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n        <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n    </div>\r\n    @if (!!sections.length) {\r\n    <core-form [width]=\"width\" [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n        [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n        [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [customFormButtonItems]=\"customFormButtonItems\" [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\"\r\n        [checkError$]=\"checkError$\" (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\"\r\n        (onSave)=\"onSave($event)\" (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n    }\r\n</div>\r\n} @else {\r\n<div class=\"modal-container\" [ngStyle]=\"{\r\n        overflowY: 'scroll'\r\n    }\">\r\n    <div #containerBigger class=\"modal-content\">\r\n        <div class=\"custom-header-popup\">\r\n            <i class=\"feather-x\" (click)=\"onCancel()\"></i>\r\n            <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n                <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n            </div>\r\n        </div>\r\n        <div #container class=\"core-page-edit-container not-normal-mode\" [ngStyle]=\"{\r\n                overflow: 'visible'\r\n            }\">\r\n            @if (!!sections.length) {\r\n            <core-form [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n                [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n                [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\" [customFormButtonItems]=\"customFormButtonItems\"\r\n                [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\" [checkError$]=\"checkError$\"\r\n                (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\" (onSave)=\"onSave($event)\"\r\n                (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@if (loading) {\r\n<app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n}", styles: ["@charset \"UTF-8\";.core-page-edit-container{--width: 50vw;background-color:#fff;padding:0,var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing);width:var(--width)}@media (max-width: 992px){.core-page-edit-container{width:100%}}.core-page-edit-container>.custom-header-popup{display:flex}.core-page-edit-container>i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.core-page-edit-container>caption{display:block;width:100%;color:#464646;font-weight:400}.modal-content{--height: 100%;height:var(--height);border-radius:10px}.modal-content i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.modal-content caption{display:block;width:100%;color:#000}.custom-header-popup{background:#fff}.captionText{margin-left:24px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: CorePageEditService }, { type: CommonHttpRequestService }, { type: AnimatedTextService }, { type: MultiLanguageService }, { type: CoreFormService }, { type: CorePageListService }, { type: HubConnectionService }, { type: AuthService }, { type: AlertService }, { type: UrlService }, { type: RoutingService }, { type: ResponseService }, { type: AppConfigService }], propDecorators: { stayAfterSubmit: [{
+                        CoreButtonGroupVnsComponent
+                    ], template: "@if (!!form) {\r\n<div class=\"core-form-container\" [ngStyle]=\"{\r\n    width: !!width ? width + 'px' : 'auto'\r\n}\">\r\n\r\n    <form #formRef (ngSubmit)=\"onFormSubmit()\" [formGroup]=\"form\" autocomplete=\"off\">\r\n\r\n        <div class=\"row\">\r\n\r\n            @if (!!leftInputSections) {\r\n            <div [class]=\"'col-md-' + (leftInputSectionsFlexSize || 0)\">\r\n\r\n                @for (section of leftInputSections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n\r\n                }\r\n\r\n            </div>\r\n            }\r\n\r\n            <div [class]=\"'col-md-' + (12 - (leftInputSectionsFlexSize || 0))\">\r\n\r\n                @for (section of sections; track $index) {\r\n                <div class=\"section\"\r\n                    [class.d-none]=\"(!!isUpdateMode && section.addModeOnly) || (!!!isUpdateMode && section.updateModeOnly) || !!section.hidden\" [ngStyle]=\"{\r\n                        maxWidth: !!section.maxWidth ? section.maxWidth + 'px' : 'none'\r\n                    }\">\r\n\r\n                    @if (!!section.caption) {\r\n                    <div class=\"section-header-label\">\r\n                        <div class=\"section-img-wrapper\">\r\n                            <div class=\"section-img\"></div>\r\n                        </div>\r\n                        <div class=\"section-caption\">{{ section.caption | translate: lang }}</div>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (row of section.rows; track $index) {\r\n                    <div class=\"row mb15\">\r\n                        @for (col of row; track $index) {\r\n                        <div [class]=\"'col-md-' + col.flexSize\" [class.grid-buffer]=\"col.controlType==='GRIDBUFFER'\"\r\n                            [class.button-control]=\"col.controlType==='BUTTON'\">\r\n                            <core-control [control]=\"col\" [form]=\"form\" [checkError$]=\"checkError$\"></core-control>\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n                }\r\n\r\n            </div>\r\n\r\n            @if (!!bottomTemplateRef) {\r\n                <div class=\"col-md-12\">\r\n                    <div class=\"bottom-template-wrapper\">\r\n                        <ng-container *ngTemplateOutlet=\"bottomTemplateRef\"></ng-container>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n        </div>\r\n\r\n        <div class=\"h10\"></div>\r\n\r\n        <div class=\"form-row\">\r\n            <div class=\"d-flex d-flex-end w-100 pr18\">\r\n                <core-button-group-vns [showCaption]=\"showCaptionButton\" [forHeader]=\"false\"\r\n                (buttonClick)=\"onButtonClick($event)\" [shownItems]=\"buttonItems\"\r\n                class=\"buttonGroupCustom\"></core-button-group-vns>\r\n            </div>\r\n        </div>\r\n        @if (isDevMode) {\r\n        <div class=\"form-row d-flex d-flex-center\">\r\n            <div class=\"dev-button\" (click)=\"updatePayload()\">Show\r\n                values</div>\r\n            <div class=\"dev-button\" (click)=\"updateValidorOverview()\">Show\r\n                validators</div>\r\n        </div>\r\n        }\r\n\r\n    </form>\r\n\r\n    @if (!!payLoad && isDevMode) {\r\n    <div class=\"form-row payload-preview\">\r\n        <strong>Current values</strong><br>{{payLoad}}\r\n    </div>\r\n    }\r\n\r\n    @if (!!validatorOverview && isDevMode) {\r\n    <div class=\"form-row payload-preview validator-preview\">\r\n        <strong>Current errors</strong><br>{{validatorOverview}}\r\n    </div>\r\n    }\r\n\r\n</div>\r\n}", styles: [".core-form-container{overflow-x:visible}.core-form-container>form .section{margin-top:var(--size-layout-block-cell-spacing)}.core-form-container>form .section:not(:first-child){margin-top:calc(var(--size-layout-block-cell-spacing) * 2)}.core-form-container>form .section .section-header-label{display:block;height:34px;line-height:34px;margin-bottom:15px;margin-left:12px}.core-form-container>form .section .section-header-label .section-img-wrapper{position:relative}.core-form-container>form .section .section-header-label .section-img-wrapper .section-img{position:absolute;width:34px;height:34px;border-radius:50%;background-color:#d3d3d3;float:left;background-image:url(/assets/images/info.svg);background-repeat:no-repeat;background-position:center}.core-form-container>form .section .section-header-label .section-caption{padding-left:40px;font-weight:700;color:#696969}.core-form-container .row{margin-left:var(--size-layout-block-cell-spacing) 0px;margin-right:var(--size-layout-block-cell-spacing) 0px}.core-form-container .row .grid-buffer{border:dotted 2px darkgray}.core-form-container .row .button-control{display:flex;align-items:flex-end}.core-form-container .form-row{margin:var(--size-layout-block-cell-spacing) 0px;display:flex;align-items:center;justify-content:center}.core-form-container .form-row>button{cursor:pointer;border-radius:0}.core-form-container .form-row>button:not(:first-child){margin-left:var(--size-layout-block-cell-spacing)}.core-form-container .dev-button{cursor:pointer;display:flex;align-items:center;border:1px gray solid;font-size:13px;padding:8px}.core-form-container .payload-preview{display:block;width:calc(100% - 48px);height:200px;white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;color:gray!important;background-color:#dff6dd;padding:24px;margin:24px}.core-form-container .payload-preview.validator-preview{background-color:#fff4ce}.core-form-container .bottom-template-wrapper{padding-left:12px;padding-right:12px}.core-form-container .w-100{width:100%}.core-form-container .pr18{padding-right:18px}\n"] }]
+        }], ctorParameters: () => [{ type: CoreControlService }, { type: MultiLanguageService }, { type: AlertService }, { type: CoreFormService }, { type: AppConfigService }], propDecorators: { formName: [{
                 type: Input
             }], width: [{
                 type: Input
-            }], entityTable: [{
-                type: Input
-            }], hasIdOfStringType: [{
-                type: Input
-            }], captionCode: [{
+            }], submitText: [{
                 type: Input
             }], leftInputSections: [{
                 type: Input
             }], leftInputSectionsFlexSize: [{
                 type: Input
-            }], sections: [{
+            }], inputSections: [{
                 type: Input
-            }], normalMode: [{
+            }], mode$: [{
                 type: Input
             }], bottomTemplateRef: [{
                 type: Input
-            }], autoGetByIdOff: [{
-                type: Input
-            }], autoSubmitLogicOff: [{
-                type: Input
-            }], autoCancelLogicOff: [{
-                type: Input
             }], customFormButtonItems: [{
                 type: Input
-            }], mixedMode: [{
-                type: Input
-            }], checkError$: [{
-                type: Input
-            }], showSaveButton: [{
+            }], showCaptionButton: [{
                 type: Input
             }], disableSaveButton: [{
                 type: Input
             }], disableCancelButton: [{
                 type: Input
-            }], forceListRefreshOnCreateOrUpdate: [{
+            }], checkError$: [{
                 type: Input
-            }], submitLogic: [{
-                type: Output
             }], onFormCreated: [{
                 type: Output
-            }], onSubmitSuccess: [{
+            }], onFormRefCreated: [{
+                type: Output
+            }], onSubmit: [{
+                type: Output
+            }], onSave: [{
+                type: Output
+            }], onCancal: [{
+                type: Output
+            }], buttonClick: [{
+                type: Output
+            }], formRef: [{
+                type: ViewChild,
+                args: ['formRef']
+            }] } });
+
+class CorePageEditComponent {
+    constructor(router, route, corePageEditService, commonHttpRequestService, animatedTextService, mls, coreFormService, corePageListService, hubConnectionService, authService, alertService, urlService, routingService, responseService, appConfigService) {
+        this.router = router;
+        this.route = route;
+        this.corePageEditService = corePageEditService;
+        this.commonHttpRequestService = commonHttpRequestService;
+        this.animatedTextService = animatedTextService;
+        this.mls = mls;
+        this.coreFormService = coreFormService;
+        this.corePageListService = corePageListService;
+        this.hubConnectionService = hubConnectionService;
+        this.authService = authService;
+        this.alertService = alertService;
+        this.urlService = urlService;
+        this.routingService = routingService;
+        this.responseService = responseService;
+        this.appConfigService = appConfigService;
+        this.checkError$ = new BehaviorSubject(false);
+        this.submitLogic = new EventEmitter();
+        this.onFormCreated = new EventEmitter();
+        this.onSubmitSuccess = new EventEmitter();
+        this.onButtonClick = new EventEmitter();
+        this.cancelLogic = new EventEmitter();
+        this.entityUniqueIndexs = []; /* For ex: [['id'], ['provinceId', 'districCode']]  etc... */
+        this.onInitialValueStringReady = new EventEmitter();
+        this.mode$ = new BehaviorSubject(EnumCorePageEditMode.CREATE);
+        this.subscriptions = [];
+        this.showCaptionButton = true;
+        this.fromUrl = this.corePageEditService.fromUrl;
+        this.listInstance = Number(this.route.snapshot.paramMap.get('listInstance'));
+    }
+    sendSignal(data) {
+        const connection = this.hubConnectionService.hubConnection$.value;
+        if (!!connection) {
+            const message = {
+                sid: this.authService.data$.value?.id,
+                username: this.authService.data$.value?.fullName,
+                avatar: this.authService.data$.value?.avatar,
+                signalType: EnumSignalRType.ENTITY_CHANGED,
+                message: `${this.authService.data$.value
+                    ?.userName} has changed entity ${this.entityTable}`,
+                loginTime: this.authService.data$.value?.loginTime,
+                data: null,
+            };
+            connection.invoke('SendMessage', message);
+        }
+    }
+    ngOnInit() {
+        this.sections$ = new BehaviorSubject(this.sections);
+        if (!!!this.entityTable) {
+            alert('Property entityTable (name) is required for component ' +
+                this.captionCode);
+            console.error('Property entityTable (name) is required for component ' +
+                this.captionCode);
+        }
+    }
+    ngAfterViewInit() {
+        if (!!this.normalMode) {
+            console.log(this.container);
+            this.container.nativeElement.style.setProperty('--width', '100%');
+        }
+        else {
+            if (!!this.width) {
+                this.container.nativeElement.style.setProperty('--width', this.width + 'px');
+            }
+            this.containerBigger.nativeElement.style.setProperty('--height', '95%');
+        }
+        setTimeout(() => {
+            this.scroll = this.container.nativeElement.scrollHeight > this.container.nativeElement.offsetHeight;
+        });
+        setTimeout(() => {
+            if (!!!this.mixedMode) {
+                this.subscriptions.push(this.route.params.subscribe(x => {
+                    console.log("this.route.params.subscribe", x);
+                    let id = '0';
+                    if (this.hasIdOfStringType) {
+                        try {
+                            id = atob(x['id']);
+                        }
+                        catch {
+                            return;
+                        }
+                    }
+                    else {
+                        try {
+                            id = Number(atob(x['id'])).toString();
+                        }
+                        catch {
+                            return;
+                        }
+                    }
+                    if (id !== '0') {
+                        this.mode$.next(EnumCorePageEditMode.UPDATE);
+                        this.submitText = EnumTranslateKey.UI_EDIT_FORM_BUTTON_SAVE;
+                        if (!!!this.autoGetByIdOff) {
+                            this.loading = true;
+                            this.subscriptions.push(this.corePageEditService.getById(id, this.crud.r).subscribe((x) => {
+                                this.loading = false;
+                                const body = x.body;
+                                //this.responseService.resolve(body);
+                                if ((body.statusCode = 200)) {
+                                    /* #region Exclude sections with flag addModeOnly=true */
+                                    if (!!body.innerBody.id) {
+                                        // remove relevant controls from form group
+                                        const addModeOnlySections = this.sections.filter((x) => !!x.addModeOnly);
+                                        addModeOnlySections.map((addModeOnlySection) => {
+                                            addModeOnlySection.rows.map((addModeOnlyRow) => {
+                                                addModeOnlyRow.map((addModeOnlyControl) => {
+                                                    this.form.removeControl(addModeOnlyControl.field);
+                                                });
+                                            });
+                                        });
+                                        // remove relevant controls from form sections
+                                        const newSections = this.sections.filter((x) => !!!x.addModeOnly);
+                                        this.sections = newSections;
+                                        this.sections$.next(this.sections);
+                                    }
+                                    /* #endregion Exclude sections with flag addModeOnly=true */
+                                    /* #region: Assign value to attachment fields when controlType = ATTACHMENT */
+                                    this.sections.map((section) => {
+                                        section.rows.map((row) => {
+                                            row.map((control) => {
+                                                if (control.controlType === EnumFormBaseContolType.ATTACHMENT) {
+                                                    control.valueToShow = body.innerBody[control.assignTo];
+                                                }
+                                            });
+                                        });
+                                    });
+                                    /* #endregion: Assign value to basic fields when controlType = ATTACHMENT */
+                                    /* #region: Using PatchValue instead of setValue */
+                                    // Forms often have extra helper fields
+                                    // thus, if we use setValue method, the helper fields will be lost:
+                                    // this.form.setValue(body.innerBody)
+                                    // so, we use patchValue method :
+                                    this.currentValue = body.innerBody;
+                                    this.form.patchValue(this.currentValue);
+                                    this.sections.map((section) => {
+                                        section.rows.map((row) => {
+                                            row.map((control) => {
+                                                if ([
+                                                    EnumFormBaseContolType.SEEKER,
+                                                    EnumFormBaseContolType.DROPDOWN,
+                                                    EnumFormBaseContolType.CHECKLIST,
+                                                ].includes(control.controlType)) {
+                                                    if (!!this.currentValue[control.field]) {
+                                                        if (isDevMode() && !!!control.getByIdApi) {
+                                                            switch (control.controlType) {
+                                                                case EnumFormBaseContolType.SEEKER:
+                                                                    if (!control.multiMode) {
+                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
+                                                                    }
+                                                                    break;
+                                                                case EnumFormBaseContolType.DROPDOWN:
+                                                                    if (!!!control.dropdownOptions$?.value) {
+                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
+                                                                    }
+                                                                    break;
+                                                                case EnumFormBaseContolType.CHECKLIST:
+                                                                    if (!!!control.checklistOptions$?.value) {
+                                                                        this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
+                                                                    }
+                                                                    break;
+                                                                default:
+                                                                    this.alertService.error(`getByIdApi not provided for '${control.field}'`, noneAutoClosedAlertOptions);
+                                                                    break;
+                                                            }
+                                                        }
+                                                        this.subscriptions.push(this.commonHttpRequestService
+                                                            .makeGetRequest('getById', control.getByIdApi +
+                                                            `?id=${this.currentValue[control.field]}`)
+                                                            .subscribe((x) => {
+                                                            console.log("form getById result: ", this.currentValue);
+                                                            if (x.ok && x.status === 200) {
+                                                                const body = x.body;
+                                                                if (body.statusCode === 200) {
+                                                                    control.getByIdObject$?.next(body.innerBody);
+                                                                }
+                                                                else {
+                                                                    control.getByIdObject$?.next(null);
+                                                                }
+                                                            }
+                                                        }));
+                                                    }
+                                                }
+                                                if (control.controlType === EnumFormBaseContolType.SEEKER && control.multiMode) {
+                                                    control.objectList$?.next(body.innerBody[control.getObjectListFrom]);
+                                                }
+                                            });
+                                        });
+                                    });
+                                    this.sections$.next(this.sections);
+                                    /* #endregion: Using PatchValue instead of setValue */
+                                }
+                                // return initFormValueString to the caller
+                                this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
+                            }));
+                        }
+                    }
+                    else {
+                        this.mode$.next(EnumCorePageEditMode.CREATE);
+                        this.submitText = EnumTranslateKey.UI_EDIT_FORM_BUTTON_ADD;
+                    }
+                }));
+            }
+            this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+        });
+    }
+    toggleReloadFlagForTheCaller(id) {
+        const instancesFilter = this.corePageListService.instances.filter((x) => x.instanceNumber === this.listInstance);
+        if (!!instancesFilter.length) {
+            const instance = instancesFilter[0];
+            instance.id$.next(id);
+            //if (!!!this.normalMode) instance.reloadFlag$?.next(!instance.reloadFlag$.value);
+            if (isDevMode()) {
+                this.alertService.info(`CorePageList instance number ${this.listInstance} current id is: ${instance.id$.value}`, alertOptions);
+            }
+        }
+        else {
+            if (isDevMode()) {
+                this.alertService.info(`CorePageList instances do not include number ${this.listInstance}`, alertOptions);
+            }
+        }
+    }
+    onNotOk200Response(x) {
+        if (isDevMode()) {
+            if (Object.keys(x).length === 0) {
+                this.alertService.error("No response content. It was possibly a CORS error.", noneAutoClosedAlertOptions);
+            }
+            else {
+                //this.alertService.error(JSON.stringify(x, null, 2), noneAutoClosedAlertOptions)
+            }
+        }
+    }
+    onSubmit() {
+        /* IF id is falsy => CREAT, otherwise UPDATE */
+        /* FOR CONTROL OF TYPE GRIDBUFFER, SET EVERY id TO NULL */
+        this.sections.map(section => {
+            section.rows.map(row => {
+                row.map(control => {
+                    console.log(control.controlType);
+                    if (control.controlType === EnumFormBaseContolType.GRIDBUFFER) {
+                        const abstractControl = this.form.get(control.field)?.value;
+                        // TO DO 17/08/2023 ===========
+                        abstractControl?.value?.map((x) => x.id = null);
+                        // =========================
+                    }
+                });
+            });
+        });
+        if (!!this.mixedMode) {
+            this.submitLogic.emit({
+                mode: this.form.get('editMode')?.value,
+                formValue: this.form.getRawValue()
+            });
+            return;
+        }
+        if (!!this.autoSubmitLogicOff) {
+            // DO your logic here
+            this.submitLogic.emit(JSON.stringify(this.form.getRawValue()));
+            return;
+        }
+        else if (!!!this.form.get('id').value) {
+            this.loading = true;
+            const sysMutationLogBeforeAfterRequest = {
+                sysFunctionCode: this.routingService.currentFunction$.value?.code || 'UNDEFINED',
+                sysActionCode: EnumCoreButtonVNSCode.HEADER_CREATE,
+                before: JSON.stringify(this.currentValue) ?? '""',
+                after: JSON.stringify(this.form.getRawValue()),
+                username: this.authService.data$.value?.userName
+            };
+            this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_ADDING_PLEASE_WAIT));
+            this.commonHttpRequestService
+                .makePostRequest('create ' + this.entityTable, this.crud.c, {
+                ...this.form.getRawValue(),
+                sysMutationLogBeforeAfterRequest,
+            })
+                .subscribe((x) => {
+                this.loading = false;
+                if (x.ok && x.status === 200) {
+                    const body = x.body;
+                    //this.responseService.resolve(body);
+                    if (body.statusCode === 200) {
+                        if (isDevMode()) {
+                            this.sendSignal(body.innerBody);
+                        }
+                        this.onSubmitSuccess.emit(true);
+                        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
+                        /*
+                        Transfer newly created record id
+                      */
+                        this.toggleReloadFlagForTheCaller(body.innerBody.id || 0);
+                        if (this.forceListRefreshOnCreateOrUpdate) {
+                            this.corePageListService.instanceRequery(this.listInstance);
+                        }
+                        if (!this.stayAfterSubmit) {
+                            this.router.navigate(['../'], { /* experiment*/ replaceUrl: true, relativeTo: this.route, state: { id: body.innerBody.id || 0, instanceNumber: this.listInstance } });
+                        }
+                    }
+                }
+                else {
+                    this.onNotOk200Response(x);
+                }
+            });
+        }
+        else {
+            this.loading = true;
+            const sysMutationLogBeforeAfterRequest = {
+                sysFunctionCode: this.routingService.currentFunction$.value?.code || 'UNDEFINED',
+                sysActionCode: EnumCoreButtonVNSCode.HEADER_SAVE,
+                before: JSON.stringify(this.currentValue) ?? '""',
+                after: JSON.stringify(this.form.getRawValue()),
+                username: this.authService.data$.value?.userName
+            };
+            const a1 = this.coreFormService.getAllFormBaseControlNames(this.leftInputSections?.filter(x => !x.hidden));
+            const a2 = this.coreFormService.getAllFormBaseControlNames(this.sections?.filter(x => !x.hidden));
+            const actualFormDeclaredFields = [...a1, ...a2];
+            this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_UPDATING_PLEASE_WAIT));
+            this.commonHttpRequestService
+                .makePostRequest('update ' + this.entityTable, this.crud.u, {
+                ...this.form.getRawValue(),
+                sysMutationLogBeforeAfterRequest,
+                actualFormDeclaredFields
+            })
+                .subscribe((x) => {
+                this.loading = false;
+                if (x.ok && x.status === 200) {
+                    const body = x.body;
+                    //this.responseService.resolve(body);
+                    if (body.statusCode === 200) {
+                        if (isDevMode()) {
+                            this.sendSignal(body.innerBody);
+                        }
+                        this.onSubmitSuccess.emit(true);
+                        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
+                        /*
+                        Transfer current record id
+                      */
+                        this.toggleReloadFlagForTheCaller(body.innerBody.id);
+                        if (this.forceListRefreshOnCreateOrUpdate) {
+                            this.corePageListService.instanceRequery(this.listInstance);
+                        }
+                        if (!this.stayAfterSubmit) {
+                            if (this.appConfigService.APP_TYPE === "MOBILE") {
+                                this.router.navigate(['../'], { /* experiment*/ replaceUrl: true, relativeTo: this.route, state: { id: body.innerBody.id, instanceNumber: this.listInstance } });
+                            }
+                            else if (this.appConfigService.APP_TYPE === "WEBAPP") {
+                                this.router.navigate(['../'], { relativeTo: this.route, state: { id: body.innerBody.id, instanceNumber: this.listInstance } });
+                            }
+                        }
+                    }
+                }
+                else {
+                    this.onNotOk200Response(x);
+                }
+            });
+        }
+    }
+    /**
+     *
+     * PHƯƠNG THỨC NÀY ĐƯỢC TẠO RA KHI DEV VNS-PORTAL
+     */
+    onSave(e) {
+        this.loading = true;
+        this.animatedTextService.text$.next(this.mls.trans(EnumTranslateKey.UI_DIALOG_ADDING_PLEASE_WAIT));
+        if (!!this.appConfigService.DEBUG_ENABLED) {
+            alert(JSON.stringify(e, null, 2));
+        }
+        this.commonHttpRequestService
+            .makePostRequest('create ' + this.entityTable, this.crud.s, e)
+            .subscribe((x) => {
+            this.loading = false;
+            const body = x.body;
+            this.responseService.resolve(body);
+            if (x.ok && x.status === 200 && body.statusCode === 200) {
+                if (isDevMode()) {
+                    this.sendSignal(body.innerBody);
+                }
+                this.onInitialValueStringReady.emit(JSON.stringify(e));
+                /*
+                Transfer newly created record id
+                */
+                this.toggleReloadFlagForTheCaller(body.innerBody.id);
+                this.router.navigateByUrl(this.urlService.previousRouteUrl$.value);
+            }
+        });
+    }
+    onCancel() {
+        if (!!this.autoCancelLogicOff) {
+            this.cancelLogic.emit(true);
+            return;
+        }
+        if (!!this.urlService.previousRouteUrl$.value.length) {
+            this.router.navigateByUrl(this.urlService.previousRouteUrl$.value);
+        }
+        else {
+            this.router.navigate(['../'], { relativeTo: this.route });
+        }
+    }
+    buttonClick(e) {
+        this.onButtonClick.emit(e);
+    }
+    onFormCreatedLocal(e) {
+        this.form = e.formGroup;
+        this.form.patchValue(this.currentValue);
+        this.onFormCreated.emit(this.form);
+        // Now we can return initFormValueString to the caller
+        this.onInitialValueStringReady.emit(JSON.stringify(this.form.getRawValue()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CorePageEditComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: CorePageEditService }, { token: CommonHttpRequestService }, { token: AnimatedTextService }, { token: MultiLanguageService }, { token: CoreFormService }, { token: CorePageListService }, { token: HubConnectionService }, { token: AuthService }, { token: AlertService }, { token: UrlService }, { token: RoutingService }, { token: ResponseService }, { token: AppConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CorePageEditComponent, isStandalone: true, selector: "core-page-edit", inputs: { stayAfterSubmit: "stayAfterSubmit", width: "width", entityTable: "entityTable", hasIdOfStringType: "hasIdOfStringType", captionCode: "captionCode", leftInputSections: "leftInputSections", leftInputSectionsFlexSize: "leftInputSectionsFlexSize", sections: "sections", normalMode: "normalMode", bottomTemplateRef: "bottomTemplateRef", autoGetByIdOff: "autoGetByIdOff", autoSubmitLogicOff: "autoSubmitLogicOff", autoCancelLogicOff: "autoCancelLogicOff", customFormButtonItems: "customFormButtonItems", mixedMode: "mixedMode", checkError$: "checkError$", showSaveButton: "showSaveButton", disableSaveButton: "disableSaveButton", disableCancelButton: "disableCancelButton", forceListRefreshOnCreateOrUpdate: "forceListRefreshOnCreateOrUpdate", crud: "crud", entityUniqueIndexs: "entityUniqueIndexs" }, outputs: { submitLogic: "submitLogic", onFormCreated: "onFormCreated", onSubmitSuccess: "onSubmitSuccess", onButtonClick: "onButtonClick", cancelLogic: "cancelLogic", onInitialValueStringReady: "onInitialValueStringReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "containerBigger", first: true, predicate: ["containerBigger"], descendants: true }], ngImport: i0, template: "@if (!!normalMode) {\r\n<div #container class=\"core-page-edit-container\">\r\n    <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n        <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n    </div>\r\n    @if (!!sections.length) {\r\n    <core-form [width]=\"width\" [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n        [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n        [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [customFormButtonItems]=\"customFormButtonItems\" [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\"\r\n        [checkError$]=\"checkError$\" (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\"\r\n        (onSave)=\"onSave($event)\" (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n    }\r\n</div>\r\n} @else {\r\n<div class=\"modal-container\" [ngStyle]=\"{\r\n        overflowY: 'scroll'\r\n    }\">\r\n    <div #containerBigger class=\"modal-content\">\r\n        <div class=\"custom-header-popup\">\r\n            <i class=\"feather-x\" (click)=\"onCancel()\"></i>\r\n            <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n                <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n            </div>\r\n        </div>\r\n        <div #container class=\"core-page-edit-container not-normal-mode\" [ngStyle]=\"{\r\n                overflow: 'visible'\r\n            }\">\r\n            @if (!!sections.length) {\r\n            <core-form [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n                [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n                [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\" [customFormButtonItems]=\"customFormButtonItems\"\r\n                [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\" [checkError$]=\"checkError$\"\r\n                (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\" (onSave)=\"onSave($event)\"\r\n                (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@if (loading) {\r\n<app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n}", styles: ["@charset \"UTF-8\";.core-page-edit-container{--width: 50vw;background-color:#fff;padding:0,var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing);width:var(--width)}@media (max-width: 992px){.core-page-edit-container{width:100%}}.core-page-edit-container>.custom-header-popup{display:flex}.core-page-edit-container>i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.core-page-edit-container>caption{display:block;width:100%;color:#464646;font-weight:400}.modal-content{--height: 100%;height:var(--height);border-radius:10px}.modal-content i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.modal-content caption{display:block;width:100%;color:#000}.custom-header-popup{background:#fff}.captionText{margin-left:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }, { kind: "component", type: FullscreenModalLoaderComponent, selector: "app-fullscreen-modal-loader", inputs: ["content"] }, { kind: "component", type: CorePageHeaderComponent, selector: "core-page-header", inputs: ["instanceNumber", "shownItems", "title", "hideButtonGroup"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CorePageEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-page-edit', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CoreFormComponent,
+                        TranslatePipe,
+                        FullscreenModalLoaderComponent,
+                        CorePageHeaderComponent
+                    ], template: "@if (!!normalMode) {\r\n<div #container class=\"core-page-edit-container\">\r\n    <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n        <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n    </div>\r\n    @if (!!sections.length) {\r\n    <core-form [width]=\"width\" [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n        [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n        [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\"\r\n        [customFormButtonItems]=\"customFormButtonItems\" [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\"\r\n        [checkError$]=\"checkError$\" (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\"\r\n        (onSave)=\"onSave($event)\" (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n    }\r\n</div>\r\n} @else {\r\n<div class=\"modal-container\" [ngStyle]=\"{\r\n        overflowY: 'scroll'\r\n    }\">\r\n    <div #containerBigger class=\"modal-content\">\r\n        <div class=\"custom-header-popup\">\r\n            <i class=\"feather-x\" (click)=\"onCancel()\"></i>\r\n            <div [ngStyle]=\"{ margin: '0px 24px' }\">\r\n                <core-page-header [title]=\"captionCode\" [hideButtonGroup]=\"true\"></core-page-header>\r\n            </div>\r\n        </div>\r\n        <div #container class=\"core-page-edit-container not-normal-mode\" [ngStyle]=\"{\r\n                overflow: 'visible'\r\n            }\">\r\n            @if (!!sections.length) {\r\n            <core-form [formName]=\"'form'\" [submitText]=\"submitText\" [showCaptionButton]=\"showCaptionButton\"\r\n                [leftInputSections]=\"leftInputSections\" [leftInputSectionsFlexSize]=\"leftInputSectionsFlexSize\"\r\n                [inputSections]=\"sections\" [mode$]=\"mode$\" [bottomTemplateRef]=\"bottomTemplateRef\" [customFormButtonItems]=\"customFormButtonItems\"\r\n                [disableSaveButton]=\"disableSaveButton\" [disableCancelButton]=\"disableCancelButton\" [checkError$]=\"checkError$\"\r\n                (onFormCreated)=\"onFormCreatedLocal($event)\" (onSubmit)=\"onSubmit()\" (onSave)=\"onSave($event)\"\r\n                (buttonClick)=\"buttonClick($event)\" (onCancal)=\"onCancel()\"></core-form>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n}\r\n@if (loading) {\r\n<app-fullscreen-modal-loader></app-fullscreen-modal-loader>\r\n}", styles: ["@charset \"UTF-8\";.core-page-edit-container{--width: 50vw;background-color:#fff;padding:0,var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing),var(--size-layout-block-cell-spacing);width:var(--width)}@media (max-width: 992px){.core-page-edit-container{width:100%}}.core-page-edit-container>.custom-header-popup{display:flex}.core-page-edit-container>i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.core-page-edit-container>caption{display:block;width:100%;color:#464646;font-weight:400}.modal-content{--height: 100%;height:var(--height);border-radius:10px}.modal-content i{display:block;float:right;font-size:24px;cursor:pointer;margin:10px}.modal-content caption{display:block;width:100%;color:#000}.custom-header-popup{background:#fff}.captionText{margin-left:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: CorePageEditService }, { type: CommonHttpRequestService }, { type: AnimatedTextService }, { type: MultiLanguageService }, { type: CoreFormService }, { type: CorePageListService }, { type: HubConnectionService }, { type: AuthService }, { type: AlertService }, { type: UrlService }, { type: RoutingService }, { type: ResponseService }, { type: AppConfigService }], propDecorators: { stayAfterSubmit: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], entityTable: [{
+                type: Input
+            }], hasIdOfStringType: [{
+                type: Input
+            }], captionCode: [{
+                type: Input
+            }], leftInputSections: [{
+                type: Input
+            }], leftInputSectionsFlexSize: [{
+                type: Input
+            }], sections: [{
+                type: Input
+            }], normalMode: [{
+                type: Input
+            }], bottomTemplateRef: [{
+                type: Input
+            }], autoGetByIdOff: [{
+                type: Input
+            }], autoSubmitLogicOff: [{
+                type: Input
+            }], autoCancelLogicOff: [{
+                type: Input
+            }], customFormButtonItems: [{
+                type: Input
+            }], mixedMode: [{
+                type: Input
+            }], checkError$: [{
+                type: Input
+            }], showSaveButton: [{
+                type: Input
+            }], disableSaveButton: [{
+                type: Input
+            }], disableCancelButton: [{
+                type: Input
+            }], forceListRefreshOnCreateOrUpdate: [{
+                type: Input
+            }], submitLogic: [{
+                type: Output
+            }], onFormCreated: [{
+                type: Output
+            }], onSubmitSuccess: [{
                 type: Output
             }], onButtonClick: [{
                 type: Output
@@ -31947,956 +32495,411 @@ class CoreQueryBuilderComponent {
             }
             if (filter.filters[i] && !!filter.filters[i]?.hasOwnProperty('filters')) {
                 if (filter.filters[i]?.filters.length !== 0) {
-                    str += this.computed(filter.filters[i]);
-                }
-            }
-            else {
-                str +=
-                    filter.filters[i].name +
-                        " " +
-                        this.htmlEntities(filter.filters[i].relationalOperator) +
-                        " " +
-                        filter.filters[i].value;
-            }
-        }
-        return str + ")";
-    }
-    setValueType(event, childFilter) {
-        this.columnType = this.totalCols.filter(x => x.netType === event)[0].columnType;
-        if (!!childFilter) {
-            childFilter.get('type').setValue(this.columnType);
-            const value = this.mainForm.getRawValue();
-            this.filterString = this.computed(value);
-            this.expressionEmitter.emit(this.filterString);
-            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
-            this.jsonEmitter.emit(this.filterFormJsonString);
-        }
-    }
-    setValueChange(event, childFilter) {
-        // console.log(this.mainForm)
-        if (!!event) {
-            const value = this.mainForm.getRawValue();
-            this.filterString = this.computed(value);
-            this.expressionEmitter.emit(this.filterString);
-            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
-            this.jsonEmitter.emit(this.filterFormJsonString);
-        }
-    }
-    setRelationalChange(event, childFilter) {
-        // console.log(this.mainForm)
-        if (!!event) {
-            const value = this.mainForm.getRawValue();
-            this.filterString = this.computed(value);
-            this.expressionEmitter.emit(this.filterString);
-            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
-            this.jsonEmitter.emit(this.filterFormJsonString);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreQueryBuilderComponent, deps: [{ token: i1$4.FormBuilder }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreQueryBuilderComponent, isStandalone: true, selector: "core-query-builder", inputs: { totalCols: "totalCols", mainForm: "mainForm", filterStringInput: "filterStringInput", expressionInput: "expressionInput" }, outputs: { jsonEmitter: "jsonEmitter", expressionEmitter: "expressionEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"core-query-builder-container\">\r\n  <div *ngIf=\"isDevMode\" class=\"alert alert-primary\">\r\n    Expression = {{ filterString ? filterString : '()' }}\r\n  </div>\r\n  <div class=\"p-relative\">\r\n\r\n    <form [formGroup]=\"mainForm\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <ng-template #queryTemplateRef let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n\r\n        <div class=\"alert alert-dark\" role=\"alert\">\r\n\r\n          <!-- Main Form Controls -->\r\n          <div class=\"row\">\r\n            <div class=\"col\">\r\n              <!-- <input class=\"form-control\" type=\"text\" [formControl]=\"filter.get('logicalOperator')\" /> -->\r\n              <select class=\"form-control\" [formControl]=\"filter.get('logicalOperator')\" value=\"AND\">\r\n                <option value=\"AND\">{{'AND' | translate : lang}}</option>\r\n                <option value=\"OR\">{{'OR' | translate : lang}}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addField(filter)\" class=\"btn btn-sm btn-success feather-file-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Field -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_GROUP_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addGroup(filter)\" class=\"btn btn-sm btn-success feather-folder-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Group -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i *ngIf=\"groupToRemove\" [appTooltip]=\"'REMOVE_GROUP_CONDITON_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 2px;margin-top:5px\" (click)=\"removeGroup(groupToRemove)\"\r\n                class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                Remove Group -->\r\n              </i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"filter.value.filters && filter.value.filters.length > 0 \" class=\"child-query\"\r\n            formArrayName=\"filters\">\r\n            <!-- field condition -->\r\n            <div *ngFor=\"let childFilter of filter.get('filters').controls; let fieldGroup = index;\">\r\n              <div class=\"row mt-1\" *ngIf=\"!childFilter.value.logicalOperator; else nestedFilter\"\r\n                style=\"margin-left: 2%;\" [formGroup]=\"childFilter\">\r\n                <input hidden=\"true\" [value]=\"columnType\" class=\"form-control\" type=\"text\" formControlName=\"type\" />\r\n                <div class=\"col\" style=\"margin-right: 5px;\">\r\n                  \r\n\r\n                  <select class=\"form-control\" formControlName=\"name\" (ngModelChange)=\"setValueType($event,childFilter)\">\r\n                    <option *ngFor=\"let item of totalCols\" [value]=\"item.netType\">\r\n                      {{item.columnName | translate: lang}}\r\n                      <!-- <input hidden=\"true\" [value]=\"item.columnType\" class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <!-- <input class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <!-- <input class=\"form-control\" type=\"text\" formControlName=\"relationalOperator\" /> -->\r\n                  <select class=\"form-control\" formControlName=\"relationalOperator\" (ngModelChange)=\"setRelationalChange($event,childFilter)\">\r\n                    <option *ngFor=\"let item of relationalOperator\" [value]=\"item.value\" [appTooltip]=\"item.value | translate : lang\">\r\n                      {{item.value | translate : lang}}\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <input class=\"form-control\" type=\"text\" formControlName=\"value\" (ngModelChange)=\"setValueChange($event,childFilter)\"/>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <i [appTooltip]=\"'REMOVE_CONDITON_DYNAMIC_REPORT'| translate: lang\"  style=\"margin-left: 5px;margin-top:5px\" (click)=\"removeField(filter, fieldGroup)\"\r\n                    class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                    <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                    Remove -->\r\n                  </i>\r\n                </div>\r\n              </div>\r\n\r\n              <ng-template #nestedFilter>\r\n                <div class=\"mt-2\" [formGroup]=\"childFilter\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"queryTemplateRef; context: { filter: childFilter, groupToRemove: { group: filter, index: fieldGroup} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-template>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"queryTemplateRef\"\r\n        [ngTemplateOutletContext]=\"{ filter: mainForm, groupToRemove: null }\">\r\n      </ng-container>\r\n\r\n    </form>\r\n  </div>\r\n  <div>\r\n    <div *ngIf=\"isDevMode\" [ngStyle]=\"{\r\n        display: 'block',\r\n        width: '100%',\r\n        height: 'auto',\r\n        whiteSpace: 'pre-wrap',\r\n        overflowX: 'hidden',\r\n        overflowY: 'auto'\r\n      }\">\r\n      {{filterFormJsonString}}\r\n    </div>\r\n  </div>\r\n</div>", styles: [".alert{float:left;margin-top:10px;width:100%}.col.p-0>i{margin-top:5px}.core-query-builder-container{max-height:600px;overflow-y:auto;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.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$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreQueryBuilderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-query-builder', imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        CoreDropdownComponent,
-                        TooltipDirective,
-                        TranslatePipe
-                    ], template: "<div class=\"core-query-builder-container\">\r\n  <div *ngIf=\"isDevMode\" class=\"alert alert-primary\">\r\n    Expression = {{ filterString ? filterString : '()' }}\r\n  </div>\r\n  <div class=\"p-relative\">\r\n\r\n    <form [formGroup]=\"mainForm\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <ng-template #queryTemplateRef let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n\r\n        <div class=\"alert alert-dark\" role=\"alert\">\r\n\r\n          <!-- Main Form Controls -->\r\n          <div class=\"row\">\r\n            <div class=\"col\">\r\n              <!-- <input class=\"form-control\" type=\"text\" [formControl]=\"filter.get('logicalOperator')\" /> -->\r\n              <select class=\"form-control\" [formControl]=\"filter.get('logicalOperator')\" value=\"AND\">\r\n                <option value=\"AND\">{{'AND' | translate : lang}}</option>\r\n                <option value=\"OR\">{{'OR' | translate : lang}}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addField(filter)\" class=\"btn btn-sm btn-success feather-file-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Field -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_GROUP_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addGroup(filter)\" class=\"btn btn-sm btn-success feather-folder-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Group -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i *ngIf=\"groupToRemove\" [appTooltip]=\"'REMOVE_GROUP_CONDITON_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 2px;margin-top:5px\" (click)=\"removeGroup(groupToRemove)\"\r\n                class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                Remove Group -->\r\n              </i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"filter.value.filters && filter.value.filters.length > 0 \" class=\"child-query\"\r\n            formArrayName=\"filters\">\r\n            <!-- field condition -->\r\n            <div *ngFor=\"let childFilter of filter.get('filters').controls; let fieldGroup = index;\">\r\n              <div class=\"row mt-1\" *ngIf=\"!childFilter.value.logicalOperator; else nestedFilter\"\r\n                style=\"margin-left: 2%;\" [formGroup]=\"childFilter\">\r\n                <input hidden=\"true\" [value]=\"columnType\" class=\"form-control\" type=\"text\" formControlName=\"type\" />\r\n                <div class=\"col\" style=\"margin-right: 5px;\">\r\n                  \r\n\r\n                  <select class=\"form-control\" formControlName=\"name\" (ngModelChange)=\"setValueType($event,childFilter)\">\r\n                    <option *ngFor=\"let item of totalCols\" [value]=\"item.netType\">\r\n                      {{item.columnName | translate: lang}}\r\n                      <!-- <input hidden=\"true\" [value]=\"item.columnType\" class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <!-- <input class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <!-- <input class=\"form-control\" type=\"text\" formControlName=\"relationalOperator\" /> -->\r\n                  <select class=\"form-control\" formControlName=\"relationalOperator\" (ngModelChange)=\"setRelationalChange($event,childFilter)\">\r\n                    <option *ngFor=\"let item of relationalOperator\" [value]=\"item.value\" [appTooltip]=\"item.value | translate : lang\">\r\n                      {{item.value | translate : lang}}\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <input class=\"form-control\" type=\"text\" formControlName=\"value\" (ngModelChange)=\"setValueChange($event,childFilter)\"/>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <i [appTooltip]=\"'REMOVE_CONDITON_DYNAMIC_REPORT'| translate: lang\"  style=\"margin-left: 5px;margin-top:5px\" (click)=\"removeField(filter, fieldGroup)\"\r\n                    class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                    <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                    Remove -->\r\n                  </i>\r\n                </div>\r\n              </div>\r\n\r\n              <ng-template #nestedFilter>\r\n                <div class=\"mt-2\" [formGroup]=\"childFilter\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"queryTemplateRef; context: { filter: childFilter, groupToRemove: { group: filter, index: fieldGroup} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-template>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"queryTemplateRef\"\r\n        [ngTemplateOutletContext]=\"{ filter: mainForm, groupToRemove: null }\">\r\n      </ng-container>\r\n\r\n    </form>\r\n  </div>\r\n  <div>\r\n    <div *ngIf=\"isDevMode\" [ngStyle]=\"{\r\n        display: 'block',\r\n        width: '100%',\r\n        height: 'auto',\r\n        whiteSpace: 'pre-wrap',\r\n        overflowX: 'hidden',\r\n        overflowY: 'auto'\r\n      }\">\r\n      {{filterFormJsonString}}\r\n    </div>\r\n  </div>\r\n</div>", styles: [".alert{float:left;margin-top:10px;width:100%}.col.p-0>i{margin-top:5px}.core-query-builder-container{max-height:600px;overflow-y:auto;padding:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: MultiLanguageService }], propDecorators: { totalCols: [{
-                type: Input
-            }], mainForm: [{
-                type: Input
-            }], filterStringInput: [{
-                type: Input
-            }], expressionInput: [{
-                type: Input
-            }], jsonEmitter: [{
-                type: Output
-            }], expressionEmitter: [{
-                type: Output
-            }] } });
-
-class CoreRouteAccumulatorComponent {
-    constructor(router) {
-        this.router = router;
-        this.processedRoutes = new Set(); // Store unique routes to prevent duplicates
-        this.subscriptions = [];
-        this.subscriptions.push(this.router.events
-            .pipe(filter(event => event instanceof RoutesRecognized || event instanceof RouteConfigLoadEnd))
-            .subscribe(event => {
-            console.log("subscribe event", event);
-            if (event instanceof RoutesRecognized) {
-                // Handle eager-loaded routes
-                this.onEagerModuleLoaded(event);
-            }
-            else if (event instanceof RouteConfigLoadEnd) {
-                // Handle lazy-loaded modules
-                this.onLazyModuleLoaded(event);
-            }
-        }));
-    }
-    mapActivatedRouteToRouteData(activatedRoute) {
-        const path = activatedRoute.url.map((segment) => segment.path).join('/'); // Construct path from segments
-        return {
-            path,
-            children: activatedRoute.children.map((childRoute) => this.mapActivatedRouteToRouteData(childRoute)),
-        };
-    }
-    onLazyModuleLoaded(event) {
-        console.log("CoreRouteAccumulatorComponent onLazyModuleLoaded", event);
-        return;
-        /*
-        const accumulatedPath = event.route.path || ''; // Start with the current path
-    
-        if (event.route.loadChildren) {
-          event.route
-            .loadChildren()
-            .then((module: any) => {
-              const routes = Array.isArray(module) ? module : module.routes || [];
-              this.processRoutes(routes, accumulatedPath);
-            })
-            .catch((error) => {
-              console.error('Error loading module:', error);
-            });
-        } else if (event.route._loadedRoutes) {
-          this.processRoutes(event.route._loadedRoutes, accumulatedPath);
-        } else if (event.route.children) {
-          const mappedRoutes = event.route.children.map((child) =>
-            child instanceof ActivatedRouteSnapshot
-              ? this.mapActivatedRouteToRouteData(child)
-              : { path: child.path, children: child.children || [] }
-          );
-          this.processRoutes(mappedRoutes, accumulatedPath);
-        } else {
-          this.saveRouteToDatabase({
-            routePath: accumulatedPath,
-            parentPath: null, // Root path has no parent
-          });
-        }
-        */
-    }
-    onEagerModuleLoaded(event) {
-        console.log("CoreRouteAccumulatorComponent onEagerModuleLoaded", event);
-        this.saveRouteToDatabase({
-            routePath: event.url,
-            parentPath: "" // pending. will be updated accumulately on lazy loaded event, based on path and children
-        });
-        /*
-        const accumulatedPath = event.state.url || ''; // Start with the current URL
-    
-        const mappedRoutes = event.state.root.children.map((child) =>
-          this.mapActivatedRouteToRouteData(child)
-        );
-    
-        this.processRoutes(mappedRoutes, accumulatedPath);
-        */
-    }
-    // Save route to the database, ensuring uniqueness with processedRoutes
-    saveRouteToDatabase(routeData) {
-        if (!this.processedRoutes.has(routeData.routePath)) {
-            this.processedRoutes.add(routeData.routePath); // Mark as processed
-            console.log(`Saving route: ${routeData.routePath}, Parent: ${routeData.parentPath}`);
-            // Implement actual DB logic here
-        }
-    }
-    processRoutes(routes, accumulatedPath) {
-        for (const route of routes) {
-            let fullPath = route.path || ''; // Current route path
-            // Handle true root modules
-            if (this.isRootModule(route)) {
-                fullPath = `/${fullPath}`.replace(/\/+/g, '/'); // Root modules start a new hierarchy
-                accumulatedPath = fullPath; // Reset the accumulated path
-            }
-            else if (accumulatedPath) {
-                // Append the current route to the accumulated path
-                fullPath = `${accumulatedPath}/${route.path}`.replace(/\/+/g, '/');
-            }
-            else {
-                // Fallback for non-root routes without accumulatedPath
-                fullPath = `/${route.path}`.replace(/\/+/g, '/');
-            }
-            // Avoid duplicate processing
-            if (this.processedRoutes.has(fullPath)) {
-                continue;
-            }
-            // Save the route
-            this.saveRouteToDatabase({
-                routePath: fullPath,
-                parentPath: accumulatedPath || null,
-            });
-            this.processedRoutes.add(fullPath);
-            // Recursively process children, if any
-            if (route.children) {
-                this.processRoutes(route.children, fullPath);
-            }
-        }
-    }
-    // Helper method to identify root modules
-    isRootModule(route) {
-        const ROOT_MODULES = ['oauth-callback', 'root', 'cms', 'developer-doc', 'online-users', 'menu', 'home', 'auth', 'sys']; // Add other known root modules or patterns here
-        return ROOT_MODULES.some(rootModule => route.path.startsWith(rootModule));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRouteAccumulatorComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreRouteAccumulatorComponent, isStandalone: true, selector: "core-route-accumulator", ngImport: i0, template: "<p>core-route-accumulator works!</p>\r\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRouteAccumulatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-route-accumulator', imports: [], template: "<p>core-route-accumulator works!</p>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$2.Router }] });
-
-class CoreRoutingHistoryComponent extends BaseComponent {
-    constructor(mls, routingService) {
-        super(mls);
-        this.mls = mls;
-        this.routingService = routingService;
-        this.items = [];
-        this.subscriptions.push(this.routingService.routingHistory$.subscribe(x => this.items = x.reverse()));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRoutingHistoryComponent, deps: [{ token: MultiLanguageService }, { token: RoutingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreRoutingHistoryComponent, isStandalone: true, selector: "core-routing-history", usesInheritance: true, ngImport: i0, template: "<div class=\"core-routing-history-container\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items;  let i = index\">\r\n            <span>\r\n                {{ i + 1 }}\r\n            </span>\r\n        </li>\r\n    </ul>\r\n</div>", styles: [".core-routing-history-container{width:100%;height:auto}.core-routing-history-container>ul{overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;justify-content:flex-end;height:40px}.core-routing-history-container>ul>li>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:0 5px;border:solid 1px darkgray}.core-routing-history-container>ul>li>span:hover{background-color:#a9a9a9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRoutingHistoryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-routing-history', imports: [
-                        CommonModule
-                    ], template: "<div class=\"core-routing-history-container\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items;  let i = index\">\r\n            <span>\r\n                {{ i + 1 }}\r\n            </span>\r\n        </li>\r\n    </ul>\r\n</div>", styles: [".core-routing-history-container{width:100%;height:auto}.core-routing-history-container>ul{overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;justify-content:flex-end;height:40px}.core-routing-history-container>ul>li>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:0 5px;border:solid 1px darkgray}.core-routing-history-container>ul>li>span:hover{background-color:#a9a9a9}\n"] }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: RoutingService }] });
-
-class CoreSalaryPolicyPickerComponent extends CoreFormControlBaseComponent {
-    writeValue(e) {
-        this.value = e;
-    }
-    constructor(appService) {
-        super();
-        this.appService = appService;
-        this.items = [];
-        this.subscriptions = [];
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.subscriptions.push(this.appService.get('/api/PaSalaryPolicy/ScanSalaryPolicys').subscribe(x => {
-                if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
-                    this.items = x.body?.innerBody;
-                }
-            }));
-        });
-    }
-    onClick(item, e) {
-        e.stopPropagation();
-        this.writeValue(item.id);
-        this.onChange(item.id);
-    }
-    ngOnDestroy() {
-        this.subscriptions.forEach(x => x?.unsubscribe());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSalaryPolicyPickerComponent, deps: [{ token: AppService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreSalaryPolicyPickerComponent, isStandalone: true, selector: "core-salary-policy-picker", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: CoreSalaryPolicyPickerComponent
-            }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"core-salary-policy-picker-container\">\r\n    @for(item of items; track $index) {\r\n        <div class=\"policy-code-wrapper d-flex d-flex-between\">\r\n            <div class=\"d-flex d-flex-center policy-code\" [class.default]=\"!!item.isDefault\" [class.active]=\"item.id === value\" (click)=\"onClick(item, $event)\">{{ item.code }}</div>\r\n        </div>\r\n    }\r\n</div>", styles: [".core-salary-policy-picker-container .policy-code-wrapper{max-width:56px}.core-salary-policy-picker-container .policy-code{width:24px;height:24px;border-radius:50%;background-color:#5f9ea0;color:#fff;cursor:pointer;opacity:.2}.core-salary-policy-picker-container .policy-code.default{background-color:var(--color-basic-orange)}.core-salary-policy-picker-container .policy-code.active{opacity:1}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSalaryPolicyPickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-salary-policy-picker', imports: [], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: CoreSalaryPolicyPickerComponent
-                        }
-                    ], template: "<div class=\"core-salary-policy-picker-container\">\r\n    @for(item of items; track $index) {\r\n        <div class=\"policy-code-wrapper d-flex d-flex-between\">\r\n            <div class=\"d-flex d-flex-center policy-code\" [class.default]=\"!!item.isDefault\" [class.active]=\"item.id === value\" (click)=\"onClick(item, $event)\">{{ item.code }}</div>\r\n        </div>\r\n    }\r\n</div>", styles: [".core-salary-policy-picker-container .policy-code-wrapper{max-width:56px}.core-salary-policy-picker-container .policy-code{width:24px;height:24px;border-radius:50%;background-color:#5f9ea0;color:#fff;cursor:pointer;opacity:.2}.core-salary-policy-picker-container .policy-code.default{background-color:var(--color-basic-orange)}.core-salary-policy-picker-container .policy-code.active{opacity:1}\n"] }]
-        }], ctorParameters: () => [{ type: AppService }] });
-
-class CoreSeenByComponent extends CoreFormControlBaseComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSeenByComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreSeenByComponent, isStandalone: true, selector: "core-seen-by", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: CoreSeenByComponent
-            }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"core-seen-by-container\">\n    @if (value) {\n    @for (item of value; track $index) {\n    <div class=\"avatar-wrapper\" [ngStyle]=\"{\n        zIndex: $index,\n        left: (36 + 2) * $index + 'px'\n    }\">\n        <img [src]=\"item.avatar | mapAvatarToServer\" appImageErrorResolver>\n    </div>\n    }\n    }\n</div>", styles: [".core-seen-by-container{display:block;position:relative;max-width:100%;overflow-x:auto;height:36px}.core-seen-by-container>.avatar-wrapper{display:block;position:absolute;width:36px;height:36px;border-radius:50%;top:0;cursor:pointer}.core-seen-by-container>.avatar-wrapper>img{width:36px;height:36px;border-radius:50%;transform:none!important}.core-seen-by-container>.avatar-wrapper>img :hover{transform:none!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: MapAvatarToServerPipe, name: "mapAvatarToServer" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSeenByComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-seen-by', imports: [
-                        NgStyle,
-                        MapAvatarToServerPipe,
-                        ImageErrorResolverDirective
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: CoreSeenByComponent
-                        }
-                    ], template: "<div class=\"core-seen-by-container\">\n    @if (value) {\n    @for (item of value; track $index) {\n    <div class=\"avatar-wrapper\" [ngStyle]=\"{\n        zIndex: $index,\n        left: (36 + 2) * $index + 'px'\n    }\">\n        <img [src]=\"item.avatar | mapAvatarToServer\" appImageErrorResolver>\n    </div>\n    }\n    }\n</div>", styles: [".core-seen-by-container{display:block;position:relative;max-width:100%;overflow-x:auto;height:36px}.core-seen-by-container>.avatar-wrapper{display:block;position:absolute;width:36px;height:36px;border-radius:50%;top:0;cursor:pointer}.core-seen-by-container>.avatar-wrapper>img{width:36px;height:36px;border-radius:50%;transform:none!important}.core-seen-by-container>.avatar-wrapper>img :hover{transform:none!important}\n"] }]
-        }] });
-
-class CoreSubFormGroupComponent extends CorePageEditComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSubFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreSubFormGroupComponent, isStandalone: true, selector: "core-sub-form-group", usesInheritance: true, ngImport: i0, template: "<core-form *ngIf=\"!!sections.length\" [formName]=\"'form'\" [inputSections]=\"sections\" [mode$]=\"mode$\" (onFormCreated)=\"onFormCreatedLocal($event)\"></core-form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSubFormGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-sub-form-group', imports: [
-                        CommonModule,
-                        CoreFormComponent
-                    ], template: "<core-form *ngIf=\"!!sections.length\" [formName]=\"'form'\" [inputSections]=\"sections\" [mode$]=\"mode$\" (onFormCreated)=\"onFormCreatedLocal($event)\"></core-form>\r\n" }]
-        }] });
-
-class CoreTabListComponent extends BaseComponent {
-    constructor(mls, appService) {
-        super(mls);
-        this.mls = mls;
-        this.appService = appService;
-        this.rowClick = new EventEmitter();
-        this.rowDoubleClick = new EventEmitter();
-        this.selectedIdsChange = new EventEmitter();
-        this.corePageHeaderButtonClick = new EventEmitter();
-        this.headers = []; // based on statuses
-        this.contents = []; // based on statuses, constructed from core-table ref instances
-        this.selectedIds = [];
-    }
-    onCoreTabsHeaderClick(event) {
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            if (!!this.statusOptionsApi) {
-                this.subscriptions.push(this.mls.lang$.subscribe(x => {
-                    this.subscriptions.push(this.appService.get(this.statusOptionsApi + '?lang=' + x).subscribe((x) => {
-                        if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
-                            const body = x.body;
-                            const newHeaders = [];
-                            body.innerBody.forEach((m) => newHeaders.push(m.text));
-                            this.headers = newHeaders;
-                        }
-                    }));
-                }));
-            }
-        });
-    }
-    onSelectedIdsChange(e) {
-        this.selectedIds = e;
-        console.log(this.selectedIds);
-    }
-    onCorePageHeaderButtonClick(e) {
-        this.corePageHeaderButtonClick.emit(e);
-    }
-    onRowClick(e) {
-        this.rowClick.emit(e);
-    }
-    onRowDoubleClick(event) {
-        this.rowDoubleClick.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTabListComponent, deps: [{ token: MultiLanguageService }, { token: AppService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreTabListComponent, isStandalone: true, selector: "core-tab-list", inputs: { title: "title", height: "height", headerLineHeight: "headerLineHeight", apiDefinition: "apiDefinition", columns: "columns", editRoute: "editRoute", crud: "crud", frozen: "frozen", generateTemplateRequest: "generateTemplateRequest", importPreviewPath: "importPreviewPath", outerSort: "outerSort", outerInOperators: "outerInOperators", outerParam$: "outerParam$", datePeriodComparisonFor: "datePeriodComparisonFor", datePeriodComparisonForLabelKey: "datePeriodComparisonForLabelKey", statusInclusionFor: "statusInclusionFor", statusOptionsApi: "statusOptionsApi" }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", selectedIdsChange: "selectedIdsChange", corePageHeaderButtonClick: "corePageHeaderButtonClick" }, viewQueries: [{ propertyName: "corePageList", first: true, predicate: ["corePageList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<core-tabs [headers]=\"headers\" [contents]=\"[]\" [height]=\"55\" [headerLineHeight]=\"headerLineHeight\"\r\n    (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n</core-tabs>\r\n\r\n\r\n<core-page-list [height]=\"height\" [hideHeader]=\"true\" [apiDefinition]=\"apiDefinition\" [columns]=\"columns\"\r\n    [editRoute]=\"editRoute\" [crud]=\"crud\" [title]=\"title\" *ngIf=\"!!avatar\" [outerParam$]=\"outerParam$\"\r\n    [outerInOperators]=\"outerInOperators\" [autoResizeWithWindow]=\"true\" [selfResolveCorePageHeaderButtonClick]=\"true\"\r\n    (rowDoubleClick)=\"onRowDoubleClick($event)\" (rowClick)=\"onRowClick($event)\"\r\n    (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\" (selectedIdsChange)=\"onSelectedIdsChange($event)\"\r\n    [frozen]=\"3\" [outerSort]=\"outerSort\" [generateTemplateRequest]=\"generateTemplateRequest\"\r\n    [importPreviewPath]=\"'staffprofile-import'\"></core-page-list>\r\n\r\n\r\n<ng-template #avatar let-avatar=\"context.avatar\">\r\n    <img [src]=\"avatar | mapAvatarToServer\" class=\"in-table-avatar\" appImageErrorResolver>\r\n</ng-template>\r\n\r\n<!-- [showParamKit]=\"true\"\r\n[datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n[datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n[hideStatusInclusion]=\"false\"\r\n[statusInclusionFor]=\"statusInclusionFor\"\r\n[statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n[statusOptionsApi]=\"statusOptionsApi\" -->", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreTabsComponent, selector: "core-tabs", inputs: ["headers", "contents", "headerTools", "height", "headerLineHeight"], outputs: ["onHeaderClick", "onToolItemClick"] }, { kind: "component", type: CorePageListComponent, selector: "core-page-list", inputs: ["normalMode", "hideHeader", "hideButtonGroup", "seekerMode", "mccMode", "height", "headerWrap", "headerFirstRowHeight", "enableTimeZoneConverterForDateTimePeriodParameters", "showParamKit", "enableFilterKit", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "statusOptions$", "showOrgParam", "showOrgParamDropdown", "hideGeneralSearch", "hideDatePeriodComparison", "hideStatusInclusion", "filterOperators$", "camelCaseDtoStatusIdField", "gridStatusColumn", "title", "hasIdOfStringType", "hideCheck", "apiDefinition", "columns", "useTheseColumns", "hideOrgTree", "frozen", "inlineTools", "inlineToolItems", "editRoute", "crud", "showListInlineTools", "top", "left", "hideLeft", "outerParam$", "outerFilter$", "outerSort", "outerFilterOperators", "outerInOperators", "autoResizeWithWindow", "extraManualOffset", "wrap", "rowHeight", "selfResolveCorePageHeaderButtonClick", "clearData$", "deleteValidateFn", "generateTemplateRequest", "importPreviewPath", "columnSearchDefaultOpen", "fixedPageSize", "disableDoubleClick", "noPaddingCell", "disableHighlightOnClick", "loading$", "excludedIds$", "disableDialogInformationLines", "changeTracking", "primaryKey", "changedItems$", "tabMode", "paramRows", "disableFilterHub", "autoColumnFitAvailableSpace", "ignoredDefaultActions", "checkboxExplicity"], outputs: ["corePageHeaderButtonClick", "rowClick", "rowDoubleClick", "selectedIdsChange", "selectedDataChange", "onInstanceCreated", "onInputFileBase64DataReady", "listChange"] }, { kind: "pipe", type: MapAvatarToServerPipe, name: "mapAvatarToServer" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTabListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'core-tab-list', imports: [
-                        NgIf,
-                        CoreTabsComponent,
-                        CorePageListComponent,
-                        MapAvatarToServerPipe,
-                        ImageErrorResolverDirective
-                    ], template: "<core-tabs [headers]=\"headers\" [contents]=\"[]\" [height]=\"55\" [headerLineHeight]=\"headerLineHeight\"\r\n    (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n</core-tabs>\r\n\r\n\r\n<core-page-list [height]=\"height\" [hideHeader]=\"true\" [apiDefinition]=\"apiDefinition\" [columns]=\"columns\"\r\n    [editRoute]=\"editRoute\" [crud]=\"crud\" [title]=\"title\" *ngIf=\"!!avatar\" [outerParam$]=\"outerParam$\"\r\n    [outerInOperators]=\"outerInOperators\" [autoResizeWithWindow]=\"true\" [selfResolveCorePageHeaderButtonClick]=\"true\"\r\n    (rowDoubleClick)=\"onRowDoubleClick($event)\" (rowClick)=\"onRowClick($event)\"\r\n    (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\" (selectedIdsChange)=\"onSelectedIdsChange($event)\"\r\n    [frozen]=\"3\" [outerSort]=\"outerSort\" [generateTemplateRequest]=\"generateTemplateRequest\"\r\n    [importPreviewPath]=\"'staffprofile-import'\"></core-page-list>\r\n\r\n\r\n<ng-template #avatar let-avatar=\"context.avatar\">\r\n    <img [src]=\"avatar | mapAvatarToServer\" class=\"in-table-avatar\" appImageErrorResolver>\r\n</ng-template>\r\n\r\n<!-- [showParamKit]=\"true\"\r\n[datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n[datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n[hideStatusInclusion]=\"false\"\r\n[statusInclusionFor]=\"statusInclusionFor\"\r\n[statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n[statusOptionsApi]=\"statusOptionsApi\" -->" }]
-        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: AppService }], propDecorators: { corePageList: [{
-                type: ViewChild,
-                args: ['corePageList']
-            }], title: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], headerLineHeight: [{
-                type: Input
-            }], apiDefinition: [{
-                type: Input,
-                args: [{ required: true }]
-            }], columns: [{
-                type: Input,
-                args: [{ required: true }]
-            }], editRoute: [{
-                type: Input
-            }], crud: [{
-                type: Input
-            }], frozen: [{
-                type: Input
-            }], generateTemplateRequest: [{
-                type: Input
-            }], importPreviewPath: [{
-                type: Input
-            }], outerSort: [{
-                type: Input
-            }], outerInOperators: [{
-                type: Input
-            }], outerParam$: [{
-                type: Input
-            }], datePeriodComparisonFor: [{
-                type: Input
-            }], datePeriodComparisonForLabelKey: [{
-                type: Input
-            }], statusInclusionFor: [{
-                type: Input
-            }], statusOptionsApi: [{
-                type: Input
-            }], rowClick: [{
-                type: Output
-            }], rowDoubleClick: [{
-                type: Output
-            }], selectedIdsChange: [{
-                type: Output
-            }], corePageHeaderButtonClick: [{
-                type: Output
-            }] } });
-
-var EnumCoreArticleCategoryTreeaAccessorMode;
-(function (EnumCoreArticleCategoryTreeaAccessorMode) {
-    EnumCoreArticleCategoryTreeaAccessorMode["ACTIVATED_SINGLE"] = "ACTIVATED_SINGLE";
-    EnumCoreArticleCategoryTreeaAccessorMode["ACTIVATED_INHERITANCE"] = "ACTIVATED_INHERITANCE";
-    EnumCoreArticleCategoryTreeaAccessorMode["CHECKED"] = "CHECKED";
-})(EnumCoreArticleCategoryTreeaAccessorMode || (EnumCoreArticleCategoryTreeaAccessorMode = {}));
-class CoreTopicTreeComponent extends CoreFormControlBaseComponent {
-    writeValue(obj) {
-        this.value = obj;
-        switch (this.accessorMode) {
-            case EnumCoreArticleCategoryTreeaAccessorMode.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 EnumCoreArticleCategoryTreeaAccessorMode.ACTIVATED_SINGLE:
-            case EnumCoreArticleCategoryTreeaAccessorMode.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 === EnumCoreArticleCategoryTreeaAccessorMode.CHECKED) {
-        }
-        else /* EnumCoreOrgTreeaAccessorMode.ACTIVATED_SINGLE or EnumCoreOrgTreeaAccessorMode.ACTIVATED_INHERITANCE */ {
-        }
-    }
-    setDisabledState(disabled) {
-        this.disabled = disabled;
-    }
-    constructor(
-    //public override injector: Injector,
-    authService, recursiveService, mls, layoutService, topicTreeService, alertService) {
-        super( /*injector*/);
-        this.authService = authService;
-        this.recursiveService = recursiveService;
-        this.mls = mls;
-        this.layoutService = layoutService;
-        this.topicTreeService = topicTreeService;
-        this.alertService = alertService;
-        this.lineColor = 'transparent';
-        this.itemDoubleClick = new EventEmitter();
-        this.itemClick = new EventEmitter();
-        this.activeIds = [];
-        this.checkedIds = [];
-        this.subscriptions = [];
-        this.search$ = new Subject();
-        this.searchPlaceholder = EnumTranslateKey.UI_COMMON_PLACE_HOLDER_SEARCH_HERE;
-        this.checkInheritance = true; // default value is true
-        this.showDissolved = true; // default value is false
-        this.initializing = true;
-        // this.reduced$ = this.coreOrgTreeState.coreOrgTreeReduced$;
-        this.initializing = false;
-    }
-    ngOnChanges(changes) {
-        if (changes['height']) {
-            this.resizeHeight();
-        }
-    }
-    ngOnInit() {
-        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.topicTreeService.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.topicTreeService.linearData$.subscribe((x) => {
-            this.linearArticleCategoryArray = x;
-        }));
-        this.subscriptions.push(this.topicTreeService.status$.subscribe((x) => {
-            console.log("this.TopicTreeService.status$ changes", x);
-            const newActiveIds = [];
-            x.activeKeys.map((k) => {
-                newActiveIds.push(Number(k));
-            });
-            this.activeIds = newActiveIds;
-            if (this.accessorMode !== EnumCoreArticleCategoryTreeaAccessorMode.CHECKED) {
-                this.value = this.activeIds;
-                this.onChange(this.activeIds);
-            }
-            this.selectedKey = x.selectedKey;
-        }));
-        this.subscriptions.push(this.search$
-            .pipe(filter((x) => x !== null), debounceTime(500), distinctUntilChanged(), switchMap((text) => {
-            console.log('switchMap works');
-            this.loading = true;
-            return this.recursiveService.findItem(text, this.data);
-        }))
-            .subscribe((x) => {
-            this.loading = false;
-        }));
-        this.subscriptions.push(this.topicTreeService.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');
-        }
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.subscriptions.push(this.topicTreeService.topicTreeData$.subscribe((x) => {
-                this.data = x;
-                console.log("new Data coming", this.data, new Date().getTime());
-                if (!!this.data) {
-                    if (!!this.data.length)
-                        this.data[0].tree$Expanded = true;
-                }
-            }));
-        });
-    }
-    onItemClickLocal(e) {
-        this.linearArticleCategoryArray.map((x) => (x.active = false));
-        setTimeout(() => this.buildTreeData());
-    }
-    onToggleItem(e) {
-        const cloneCopy = JSON.parse(JSON.stringify(this.linearArticleCategoryArray));
-        const filter = cloneCopy.filter((x) => x.id === e.id);
-        if (filter.length === 1) {
-            filter[0].expanded = !!!e.expanded;
-        }
-        this.linearArticleCategoryArray = cloneCopy;
-        setTimeout(() => this.buildTreeData());
-    }
-    buildTreeData() {
-        this.loading = true;
-        const cloneCopy = JSON.parse(JSON.stringify(this.linearArticleCategoryArray));
-        if (typeof Worker !== 'undefined') {
-            // Create a new
-            console.log("🟢🟢 Worker works");
-            const worker = new Worker(liner_to_nested_array_script);
-            worker.addEventListener('message', ({ data }) => {
-                this.data = data.list;
-                if (!!this.data && !!this.data?.length)
-                    this.data[0].tree$Expanded = true;
-                this.loading = false;
-            });
-            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.topicTreeService.status$.value;
-            this.subscriptions.push(this.recursiveService
-                .linerArrayToNestedArray(cloneCopy, 'id', 'name', 'parentId', 'active', 'checked', 'expand')
-                .subscribe((obj) => {
-                this.data = obj.list;
-                if (!!this.data && !!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.topicTreeService.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.topicTreeService.status$.next({
-            ...this.topicTreeService.status$.value,
-            expandedKeys: newExpandedKeys,
-        });
-    }
-    onItemCheck(e, newValue) {
-        this.itemClick?.emit(e);
-        if (this.accessorMode !== EnumCoreArticleCategoryTreeaAccessorMode.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)
-                .then((x) => {
-                // 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.topicTreeService.status$.next({
-            ...this.topicTreeService.status$.value,
-            checkInheritance: value,
-        });
-    }
-    onObjectClick(e, event) {
-        // remove highlight class
-        // TO DO
-        if (!!e.protected)
-            return;
-        this.itemClick?.emit(e);
-        if (this.accessorMode === EnumCoreArticleCategoryTreeaAccessorMode.CHECKED)
-            return;
-        let activeIds = [];
-        this.recursiveService.nestedResetActive(this.data, false).then(falseAll => {
-            console.log("falseAll", falseAll);
-            if (this.accessorMode ===
-                EnumCoreArticleCategoryTreeaAccessorMode.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.topicTreeService.status$.next({
-                        ...this.topicTreeService.status$.value,
-                        activeKeys: newActiveKeys,
-                        selectedKey: e.id.toString()
-                    });
-                    this.activeIds = activeIds;
-                    console.log(this.activeIds);
-                    this.onChange(activeIds);
-                })
-                    .catch((x) => {
-                    console.error(x);
-                });
+                    str += this.computed(filter.filters[i]);
+                }
             }
             else {
-                // ACTIVATED_SINGLE
-                // Otherwise we simply set current item to be active only
-                activeIds = [e.id];
-                this.activeIds = activeIds;
-                this.topicTreeService.status$.next({
-                    ...this.topicTreeService.status$.value,
-                    activeKeys: [e.id.toString()],
-                    selectedKey: e.id.toString(),
-                });
-                this.onChange(activeIds);
+                str +=
+                    filter.filters[i].name +
+                        " " +
+                        this.htmlEntities(filter.filters[i].relationalOperator) +
+                        " " +
+                        filter.filters[i].value;
             }
-        });
-        const { detail } = event;
-        if (detail === 2) {
-            console.log('This was a dblclick');
-            this.itemDoubleClick.emit(e);
         }
-        this.selectedItem = e;
+        return str + ")";
     }
-    onSearchChange(text) {
-        this.search$.next(text);
+    setValueType(event, childFilter) {
+        this.columnType = this.totalCols.filter(x => x.netType === event)[0].columnType;
+        if (!!childFilter) {
+            childFilter.get('type').setValue(this.columnType);
+            const value = this.mainForm.getRawValue();
+            this.filterString = this.computed(value);
+            this.expressionEmitter.emit(this.filterString);
+            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
+            this.jsonEmitter.emit(this.filterFormJsonString);
+        }
     }
-    ngAfterContentInit() {
-        console.log("ngAfterContentInit");
+    setValueChange(event, childFilter) {
+        // console.log(this.mainForm)
+        if (!!event) {
+            const value = this.mainForm.getRawValue();
+            this.filterString = this.computed(value);
+            this.expressionEmitter.emit(this.filterString);
+            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
+            this.jsonEmitter.emit(this.filterFormJsonString);
+        }
     }
-    ngOnDestroy() {
-        this.subscriptions.map((x) => x?.unsubscribe());
-        if (!!this.instanceNumber) {
-            const tryToFind = this.topicTreeService.instances.filter((x) => x.instanceNumber === this.instanceNumber);
-            if (!!tryToFind.length) {
-                const newInstances = this.topicTreeService.instances.filter((x) => x.instanceNumber !== this.instanceNumber);
-                this.topicTreeService.instances = newInstances;
-            }
+    setRelationalChange(event, childFilter) {
+        // console.log(this.mainForm)
+        if (!!event) {
+            const value = this.mainForm.getRawValue();
+            this.filterString = this.computed(value);
+            this.expressionEmitter.emit(this.filterString);
+            this.filterFormJsonString = JSON.stringify(this.mainForm.getRawValue(), null, 2);
+            this.jsonEmitter.emit(this.filterFormJsonString);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicTreeComponent, deps: [{ token: AuthService }, { token: RecursiveService }, { token: MultiLanguageService }, { token: LayoutService }, { token: TopicTreeService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreTopicTreeComponent, isStandalone: true, selector: "core-topic-tree", inputs: { lineColor: "lineColor", translateText: "translateText", fullWidthMode: "fullWidthMode", accessorMode: "accessorMode", fullRendering: "fullRendering", height: "height", disabledLoopExpand: "disabledLoopExpand", showCheckInheritance: "showCheckInheritance", inlineExtraTemplateRef: "inlineExtraTemplateRef" }, outputs: { itemDoubleClick: "itemDoubleClick", itemClick: "itemClick" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                multi: true,
-                useExisting: CoreTopicTreeComponent,
-            },
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], 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-topic-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\"\n    [ngStyle]=\"{\n        position : 'relative',\n        width: '100%',\n        height: height + 'px'\n    }\">\n    <div #displayContent class=\"custom-org-tree\">\n        <div class=\"core-org-tree-header d-flex-between\">\n            <div>\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\n            </div>\n        </div>\n\n        <ng-container>\n\n            <div class=\"scroll-container\" [ngStyle]=\"{\n                height: height - layoutService.coreOrgTreeTopHeight - layoutService.coreOrgTreeBottomHeight + 'px'\n                }\">\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\n                @for (root of data; track $index) {\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\n                </ul>\n                }\n            </div>\n\n\n            <div [ngStyle]=\"{\n                display: 'block',\n                position: 'absolute',\n                bottom: '0px',\n                left: '0px',\n                right: '0px',\n                height: layoutService.corePaginationHeight + 'px',\n                paddingLeft: layoutService.basicSpacing + 'px',\n                paddingRight: layoutService.basicSpacing + 'px',\n                lineHeight: layoutService.corePaginationHeight + 'px',\n                overflow: 'hidden'\n            }\">\n                <div [ngStyle]=\"{\n                    height: layoutService.corePaginationHeight + 'px',\n                    position: 'relative',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'space-between'\n                }\">\n                    <!-- <div>\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\n                    </div> -->\n                    <div class=\"check-inheritance-wrapper\" *ngIf=\"accessorMode === 'CHECKED'\">\n                        <core-checkbox *ngIf=\"showCheckInheritance\" [(ngModel)]=\"checkInheritance\"\n                            (ngModelChange)=\"onCheckInheritanceChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\n                    </div>\n                </div>\n            </div>\n\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\n\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\n                    <span (click)=\"onObjectClick(context, $event)\">\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\n                        <i class=\"expand-toggler feather-chevron-down\"\n                            (click)=\"onExpandTogglerClick(context, $event)\"></i>\n                        }\n                        @if (accessorMode === 'CHECKED' && !!!protected) {\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\n                            [disabled]=\"disabled\"></core-checkbox>\n                        }\n                        <object [class.active]=\"activeIds.includes(id)\" [class.highlighted]=\"highlighted\"\n                            [class.dissolved]=\"!isActive\" [class.protected]=\"protected\"\n                            [appTooltip]=\"title\">\n                            {{ title | translate: lang }}\n                        </object>\n\n                        @if (!!inlineExtraTemplateRef) {\n                        <ng-container *ngTemplateOutlet=\"inlineExtraTemplateRef; context: { context: context }\">\n                        </ng-container>\n                        }\n\n                    </span>\n                    @if (children.length) {\n                    <ul [class.collapsed]=\" !!!expanded\">\n                        @for (child of children; track $index) {\n                        @if (!!expanded || !!fullRendering) {\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\n                        }\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n\n            </ng-template>\n\n        </ng-container>\n    </div>\n\n\n</div>", styles: [".core-topic-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;border-radius:5px;--item-height: 50px;--ul-padding: 20px;--display: \"block\";--square-color: darkgray;--square-size: 30px;--line-color: \"transparent\";--active-item-color: var(--color-bg-pagination-button);--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}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-topic-tree-container .custom-org-tree{display:var(--display)}.core-topic-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-topic-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)}.core-topic-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-topic-tree-container .check-inheritance-wrapper{padding:15px}.core-topic-tree-container .form-control{border:none}.core-topic-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-topic-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow-y:auto;overflow-x:auto;position:relative;width:100%;border-radius:5px}.core-topic-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}@media (max-width: 575px){.core-topic-tree-container .scroll-container ::-webkit-slider-runnable-track{width:0px}}.core-topic-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-topic-tree-container .scroll-container ul>li>span:hover{background-color:#fff;width:100%}.core-topic-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1}.core-topic-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-topic-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-topic-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-topic-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-topic-tree-container .scroll-container ul>li{display:block;position:relative}.core-topic-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-topic-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;padding-left:8px;cursor:pointer}.core-topic-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-topic-tree-container .scroll-container ul>li>span>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-topic-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-topic-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-topic-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-topic-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-topic-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-topic-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-topic-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-topic-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-topic-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: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CoreLoadingSurfaceComponent, selector: "core-loading-surface", inputs: ["loading", "height"] }, { kind: "component", type: CoreCheckboxComponent, selector: "core-checkbox", inputs: ["text", "tooltipPosition", "tooltip", "inputValue", "disabled"], outputs: ["onClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreQueryBuilderComponent, deps: [{ token: i1$4.FormBuilder }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreQueryBuilderComponent, isStandalone: true, selector: "core-query-builder", inputs: { totalCols: "totalCols", mainForm: "mainForm", filterStringInput: "filterStringInput", expressionInput: "expressionInput" }, outputs: { jsonEmitter: "jsonEmitter", expressionEmitter: "expressionEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"core-query-builder-container\">\r\n  <div *ngIf=\"isDevMode\" class=\"alert alert-primary\">\r\n    Expression = {{ filterString ? filterString : '()' }}\r\n  </div>\r\n  <div class=\"p-relative\">\r\n\r\n    <form [formGroup]=\"mainForm\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <ng-template #queryTemplateRef let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n\r\n        <div class=\"alert alert-dark\" role=\"alert\">\r\n\r\n          <!-- Main Form Controls -->\r\n          <div class=\"row\">\r\n            <div class=\"col\">\r\n              <!-- <input class=\"form-control\" type=\"text\" [formControl]=\"filter.get('logicalOperator')\" /> -->\r\n              <select class=\"form-control\" [formControl]=\"filter.get('logicalOperator')\" value=\"AND\">\r\n                <option value=\"AND\">{{'AND' | translate : lang}}</option>\r\n                <option value=\"OR\">{{'OR' | translate : lang}}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addField(filter)\" class=\"btn btn-sm btn-success feather-file-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Field -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_GROUP_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addGroup(filter)\" class=\"btn btn-sm btn-success feather-folder-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Group -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i *ngIf=\"groupToRemove\" [appTooltip]=\"'REMOVE_GROUP_CONDITON_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 2px;margin-top:5px\" (click)=\"removeGroup(groupToRemove)\"\r\n                class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                Remove Group -->\r\n              </i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"filter.value.filters && filter.value.filters.length > 0 \" class=\"child-query\"\r\n            formArrayName=\"filters\">\r\n            <!-- field condition -->\r\n            <div *ngFor=\"let childFilter of filter.get('filters').controls; let fieldGroup = index;\">\r\n              <div class=\"row mt-1\" *ngIf=\"!childFilter.value.logicalOperator; else nestedFilter\"\r\n                style=\"margin-left: 2%;\" [formGroup]=\"childFilter\">\r\n                <input hidden=\"true\" [value]=\"columnType\" class=\"form-control\" type=\"text\" formControlName=\"type\" />\r\n                <div class=\"col\" style=\"margin-right: 5px;\">\r\n                  \r\n\r\n                  <select class=\"form-control\" formControlName=\"name\" (ngModelChange)=\"setValueType($event,childFilter)\">\r\n                    <option *ngFor=\"let item of totalCols\" [value]=\"item.netType\">\r\n                      {{item.columnName | translate: lang}}\r\n                      <!-- <input hidden=\"true\" [value]=\"item.columnType\" class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <!-- <input class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <!-- <input class=\"form-control\" type=\"text\" formControlName=\"relationalOperator\" /> -->\r\n                  <select class=\"form-control\" formControlName=\"relationalOperator\" (ngModelChange)=\"setRelationalChange($event,childFilter)\">\r\n                    <option *ngFor=\"let item of relationalOperator\" [value]=\"item.value\" [appTooltip]=\"item.value | translate : lang\">\r\n                      {{item.value | translate : lang}}\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <input class=\"form-control\" type=\"text\" formControlName=\"value\" (ngModelChange)=\"setValueChange($event,childFilter)\"/>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <i [appTooltip]=\"'REMOVE_CONDITON_DYNAMIC_REPORT'| translate: lang\"  style=\"margin-left: 5px;margin-top:5px\" (click)=\"removeField(filter, fieldGroup)\"\r\n                    class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                    <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                    Remove -->\r\n                  </i>\r\n                </div>\r\n              </div>\r\n\r\n              <ng-template #nestedFilter>\r\n                <div class=\"mt-2\" [formGroup]=\"childFilter\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"queryTemplateRef; context: { filter: childFilter, groupToRemove: { group: filter, index: fieldGroup} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-template>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"queryTemplateRef\"\r\n        [ngTemplateOutletContext]=\"{ filter: mainForm, groupToRemove: null }\">\r\n      </ng-container>\r\n\r\n    </form>\r\n  </div>\r\n  <div>\r\n    <div *ngIf=\"isDevMode\" [ngStyle]=\"{\r\n        display: 'block',\r\n        width: '100%',\r\n        height: 'auto',\r\n        whiteSpace: 'pre-wrap',\r\n        overflowX: 'hidden',\r\n        overflowY: 'auto'\r\n      }\">\r\n      {{filterFormJsonString}}\r\n    </div>\r\n  </div>\r\n</div>", styles: [".alert{float:left;margin-top:10px;width:100%}.col.p-0>i{margin-top:5px}.core-query-builder-container{max-height:600px;overflow-y:auto;padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.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$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreQueryBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-topic-tree', imports: [
+            args: [{ selector: 'core-query-builder', imports: [
                         CommonModule,
                         FormsModule,
-                        CoreLoadingSurfaceComponent,
-                        CoreReducerIconComponent,
-                        CoreCheckboxComponent,
-                        TranslatePipe,
+                        ReactiveFormsModule,
+                        CoreDropdownComponent,
                         TooltipDirective,
-                        NgTemplateOutlet
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: CoreTopicTreeComponent,
-                        },
-                    ], template: "<div #container class=\"core-topic-tree-container\" [class.full-width]=\"!!fullWidthMode\" *ngIf=\"!!data\"\n    [ngStyle]=\"{\n        position : 'relative',\n        width: '100%',\n        height: height + 'px'\n    }\">\n    <div #displayContent class=\"custom-org-tree\">\n        <div class=\"core-org-tree-header d-flex-between\">\n            <div>\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"search\" (ngModelChange)=\"onSearchChange($event)\"\n                    [placeholder]=\"searchPlaceholder | translate: lang\" [class.full-width]=\"!!fullWidthMode\">\n            </div>\n        </div>\n\n        <ng-container>\n\n            <div class=\"scroll-container\" [ngStyle]=\"{\n                height: height - layoutService.coreOrgTreeTopHeight - layoutService.coreOrgTreeBottomHeight + 'px'\n                }\">\n                <core-loading-surface [loading]=\"loading\" [height]=\"scrollContainerHeight\"></core-loading-surface>\n                @for (root of data; track $index) {\n                <ul class=\"root\" [class.collapsed]=\"!!!root.tree$Expanded\">\n                    <ng-container *ngTemplateOutlet=\"item; context: { context: root }\"></ng-container>\n                </ul>\n                }\n            </div>\n\n\n            <div [ngStyle]=\"{\n                display: 'block',\n                position: 'absolute',\n                bottom: '0px',\n                left: '0px',\n                right: '0px',\n                height: layoutService.corePaginationHeight + 'px',\n                paddingLeft: layoutService.basicSpacing + 'px',\n                paddingRight: layoutService.basicSpacing + 'px',\n                lineHeight: layoutService.corePaginationHeight + 'px',\n                overflow: 'hidden'\n            }\">\n                <div [ngStyle]=\"{\n                    height: layoutService.corePaginationHeight + 'px',\n                    position: 'relative',\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'space-between'\n                }\">\n                    <!-- <div>\n                        <core-checkbox [(ngModel)]=\"showDissolved\"\n                            (ngModelChange)=\"onCheckIncludeDissolvedChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS_ABBREVIATED'\"\n                            [tooltip]=\"'UI.CORE_ORG_TREE.SHOW_OUTDATED_UNITS'\" tooltipPosition=\"above\"></core-checkbox>\n                    </div> -->\n                    <div class=\"check-inheritance-wrapper\" *ngIf=\"accessorMode === 'CHECKED'\">\n                        <core-checkbox *ngIf=\"showCheckInheritance\" [(ngModel)]=\"checkInheritance\"\n                            (ngModelChange)=\"onCheckInheritanceChange($event)\"\n                            [text]=\"'UI.CORE_ORG_TREE.CHECK_INHERITANCE'\"></core-checkbox>\n                    </div>\n                </div>\n            </div>\n\n            <ng-template #item let-context=\"context\" let-id=\"context.id\" let-title=\"context.tree$Title\"\n                let-highlighted=\"context.tree$Highlighted\" let-hasChildren=\"context.tree$HasChildren\"\n                let-hasActiveChildren=\"context.tree$HasActiveChildren\" let-children=\"context.tree$Children\"\n                let-expanded=\"context.tree$Expanded\" let-isActive=\"context.isActive\" let-active=\"context.tree$Active\"\n                let-checked=\"context.tree$Checked\" let-protected=\"context.protected\">\n\n                @if ((!showDissolved && !!isActive) || (!!showDissolved)) {\n                <li [class.has-children]=\"!!hasChildren\" [class.collapsed]=\"!!hasChildren && !!!expanded\">\n                    <span (click)=\"onObjectClick(context, $event)\">\n                        @if ((!!showDissolved && !!hasChildren) || (!showDissolved && !!hasActiveChildren)) {\n                        <i class=\"expand-toggler feather-chevron-down\"\n                            (click)=\"onExpandTogglerClick(context, $event)\"></i>\n                        }\n                        @if (accessorMode === 'CHECKED' && !!!protected) {\n                        <core-checkbox (onClick)=\"onItemCheck(context, $event)\" [inputValue]=\"checked\"\n                            [disabled]=\"disabled\"></core-checkbox>\n                        }\n                        <object [class.active]=\"activeIds.includes(id)\" [class.highlighted]=\"highlighted\"\n                            [class.dissolved]=\"!isActive\" [class.protected]=\"protected\"\n                            [appTooltip]=\"title\">\n                            {{ title | translate: lang }}\n                        </object>\n\n                        @if (!!inlineExtraTemplateRef) {\n                        <ng-container *ngTemplateOutlet=\"inlineExtraTemplateRef; context: { context: context }\">\n                        </ng-container>\n                        }\n\n                    </span>\n                    @if (children.length) {\n                    <ul [class.collapsed]=\" !!!expanded\">\n                        @for (child of children; track $index) {\n                        @if (!!expanded || !!fullRendering) {\n                        <ng-container *ngTemplateOutlet=\"item; context: { context: child }\"></ng-container>\n                        }\n                        }\n                    </ul>\n                    }\n                </li>\n                }\n\n            </ng-template>\n\n        </ng-container>\n    </div>\n\n\n</div>", styles: [".core-topic-tree-container{--background: var(--color-bg-core-org-tree);--height: 545px;border-radius:5px;--item-height: 50px;--ul-padding: 20px;--display: \"block\";--square-color: darkgray;--square-size: 30px;--line-color: \"transparent\";--active-item-color: var(--color-bg-pagination-button);--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}@keyframes reducedPanelOn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}.core-topic-tree-container .custom-org-tree{display:var(--display)}.core-topic-tree-container .core-org-tree-header{height:var(--size-core-org-tree-header-height)}.core-topic-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)}.core-topic-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-topic-tree-container .check-inheritance-wrapper{padding:15px}.core-topic-tree-container .form-control{border:none}.core-topic-tree-container .core-reducer-icon-wrapper{height:var(--size-core-reducer-icon-wrapper-height);padding:var(--size-layout-block-cell-spacing)}.core-topic-tree-container .scroll-container{background:var(--background);height:var(--scroll-container-height);overflow-y:auto;overflow-x:auto;position:relative;width:100%;border-radius:5px}.core-topic-tree-container .scroll-container *{box-sizing:border-box;padding:0;margin:0}@media (max-width: 575px){.core-topic-tree-container .scroll-container ::-webkit-slider-runnable-track{width:0px}}.core-topic-tree-container .scroll-container ul{display:table;vertical-align:top;padding-left:var(--ul-padding);transition:all .5s ease-out;width:100%}.core-topic-tree-container .scroll-container ul>li>span:hover{background-color:#fff;width:100%}.core-topic-tree-container .scroll-container ul>li>span:active{background-color:#f1f1f1}.core-topic-tree-container .scroll-container ul>li>span>object.active{color:var(--active-item-color)}.core-topic-tree-container .scroll-container ul .highlighted{color:var(--color-core-org-tree-highlighted);font-weight:700}.core-topic-tree-container .scroll-container ul .dissolved{color:#848484;text-decoration:line-through dashed}.core-topic-tree-container .scroll-container ul .dissolved.active{color:#c9252b!important}.core-topic-tree-container .scroll-container ul>li{display:block;position:relative}.core-topic-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-topic-tree-container .scroll-container ul>li>span{display:flex;align-items:center;height:var(--item-height);white-space:nowrap;padding-left:8px;cursor:pointer}.core-topic-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-topic-tree-container .scroll-container ul>li>span>.expand-toggler{position:absolute;z-index:1;transform:translate(-100%) rotate(0);transition:.5s ease-out;display:flex;align-items:center;justify-content:center}.core-topic-tree-container .scroll-container ul>li>span>.check-toggler{margin-left:5px;margin-right:5px}.core-topic-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-topic-tree-container .scroll-container ul>li.collapsed>span>.expand-toggler{transform:translate(-100%) rotate(-90deg);transition:.5s ease-out}.core-topic-tree-container .scroll-container ul>li.collapsed:before{border-left:none}.core-topic-tree-container .scroll-container ul>li:not(.collapsed):not(.has-children):before{border-left:none}.core-topic-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-topic-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-topic-tree-container .scroll-container ul.collapsed:not(.root){display:none}.core-topic-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: TopicTreeService }, { type: AlertService }], propDecorators: { lineColor: [{
-                type: Input
-            }], translateText: [{
-                type: Input
-            }], fullWidthMode: [{
-                type: Input
-            }], accessorMode: [{
-                type: Input
-            }], fullRendering: [{
-                type: Input
-            }], height: [{
+                        TranslatePipe
+                    ], template: "<div class=\"core-query-builder-container\">\r\n  <div *ngIf=\"isDevMode\" class=\"alert alert-primary\">\r\n    Expression = {{ filterString ? filterString : '()' }}\r\n  </div>\r\n  <div class=\"p-relative\">\r\n\r\n    <form [formGroup]=\"mainForm\" (ngSubmit)=\"onSubmit()\">\r\n\r\n      <ng-template #queryTemplateRef let-filter=\"filter\" let-groupToRemove=\"groupToRemove\">\r\n\r\n        <div class=\"alert alert-dark\" role=\"alert\">\r\n\r\n          <!-- Main Form Controls -->\r\n          <div class=\"row\">\r\n            <div class=\"col\">\r\n              <!-- <input class=\"form-control\" type=\"text\" [formControl]=\"filter.get('logicalOperator')\" /> -->\r\n              <select class=\"form-control\" [formControl]=\"filter.get('logicalOperator')\" value=\"AND\">\r\n                <option value=\"AND\">{{'AND' | translate : lang}}</option>\r\n                <option value=\"OR\">{{'OR' | translate : lang}}</option>\r\n              </select>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addField(filter)\" class=\"btn btn-sm btn-success feather-file-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Field -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i [appTooltip]=\"'ADD_GROUP_CONDITION_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 5px\" (click)=\"addGroup(filter)\" class=\"btn btn-sm btn-success feather-folder-plus\">\r\n                <!-- <span class=\"glyphicon glyphicon-plus-sign\"></span>\r\n                Add Group -->\r\n              </i>\r\n            </div>\r\n            <div class=\"col p-0\">\r\n              <i *ngIf=\"groupToRemove\" [appTooltip]=\"'REMOVE_GROUP_CONDITON_DYNAMIC_REPORT'| translate: lang\" style=\"margin-left: 2px;margin-top:5px\" (click)=\"removeGroup(groupToRemove)\"\r\n                class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                Remove Group -->\r\n              </i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"filter.value.filters && filter.value.filters.length > 0 \" class=\"child-query\"\r\n            formArrayName=\"filters\">\r\n            <!-- field condition -->\r\n            <div *ngFor=\"let childFilter of filter.get('filters').controls; let fieldGroup = index;\">\r\n              <div class=\"row mt-1\" *ngIf=\"!childFilter.value.logicalOperator; else nestedFilter\"\r\n                style=\"margin-left: 2%;\" [formGroup]=\"childFilter\">\r\n                <input hidden=\"true\" [value]=\"columnType\" class=\"form-control\" type=\"text\" formControlName=\"type\" />\r\n                <div class=\"col\" style=\"margin-right: 5px;\">\r\n                  \r\n\r\n                  <select class=\"form-control\" formControlName=\"name\" (ngModelChange)=\"setValueType($event,childFilter)\">\r\n                    <option *ngFor=\"let item of totalCols\" [value]=\"item.netType\">\r\n                      {{item.columnName | translate: lang}}\r\n                      <!-- <input hidden=\"true\" [value]=\"item.columnType\" class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <!-- <input class=\"form-control input-sm\" type=\"text\" formControlName=\"type\"> -->\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <!-- <input class=\"form-control\" type=\"text\" formControlName=\"relationalOperator\" /> -->\r\n                  <select class=\"form-control\" formControlName=\"relationalOperator\" (ngModelChange)=\"setRelationalChange($event,childFilter)\">\r\n                    <option *ngFor=\"let item of relationalOperator\" [value]=\"item.value\" [appTooltip]=\"item.value | translate : lang\">\r\n                      {{item.value | translate : lang}}\r\n                    </option>\r\n                  </select>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <input class=\"form-control\" type=\"text\" formControlName=\"value\" (ngModelChange)=\"setValueChange($event,childFilter)\"/>\r\n                </div>\r\n                <div class=\"col\"  style=\"margin-right: 5px;\">\r\n                  <i [appTooltip]=\"'REMOVE_CONDITON_DYNAMIC_REPORT'| translate: lang\"  style=\"margin-left: 5px;margin-top:5px\" (click)=\"removeField(filter, fieldGroup)\"\r\n                    class=\"btn btn-sm btn-danger feather-trash-2\">\r\n                    <!-- <span class=\"glyphicon glyphicon-minus-sign\"></span>\r\n                    Remove -->\r\n                  </i>\r\n                </div>\r\n              </div>\r\n\r\n              <ng-template #nestedFilter>\r\n                <div class=\"mt-2\" [formGroup]=\"childFilter\">\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"queryTemplateRef; context: { filter: childFilter, groupToRemove: { group: filter, index: fieldGroup} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-template>\r\n\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-container [ngTemplateOutlet]=\"queryTemplateRef\"\r\n        [ngTemplateOutletContext]=\"{ filter: mainForm, groupToRemove: null }\">\r\n      </ng-container>\r\n\r\n    </form>\r\n  </div>\r\n  <div>\r\n    <div *ngIf=\"isDevMode\" [ngStyle]=\"{\r\n        display: 'block',\r\n        width: '100%',\r\n        height: 'auto',\r\n        whiteSpace: 'pre-wrap',\r\n        overflowX: 'hidden',\r\n        overflowY: 'auto'\r\n      }\">\r\n      {{filterFormJsonString}}\r\n    </div>\r\n  </div>\r\n</div>", styles: [".alert{float:left;margin-top:10px;width:100%}.col.p-0>i{margin-top:5px}.core-query-builder-container{max-height:600px;overflow-y:auto;padding:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.FormBuilder }, { type: MultiLanguageService }], propDecorators: { totalCols: [{
                 type: Input
-            }], disabledLoopExpand: [{
+            }], mainForm: [{
                 type: Input
-            }], showCheckInheritance: [{
+            }], filterStringInput: [{
                 type: Input
-            }], inlineExtraTemplateRef: [{
+            }], expressionInput: [{
                 type: Input
-            }], itemDoubleClick: [{
+            }], jsonEmitter: [{
                 type: Output
-            }], itemClick: [{
+            }], expressionEmitter: [{
                 type: Output
-            }], container: [{
-                type: ViewChild,
-                args: ['container']
-            }], displayContent: [{
-                type: ViewChild,
-                args: ['displayContent']
-            }], reducedIconWrapper: [{
-                type: ViewChild,
-                args: ['reducedIconWrapper']
             }] } });
 
-class CoreTopicPickerComponent extends CoreFormControlBaseComponent {
-    constructor(domService, renderer, appService, responseService, alertService, mls) {
-        super();
-        this.domService = domService;
-        this.renderer = renderer;
-        this.appService = appService;
-        this.responseService = responseService;
-        this.alertService = alertService;
-        this.mls = mls;
+class CoreRouteAccumulatorComponent {
+    constructor(router) {
+        this.router = router;
+        this.processedRoutes = new Set(); // Store unique routes to prevent duplicates
         this.subscriptions = [];
+        this.subscriptions.push(this.router.events
+            .pipe(filter(event => event instanceof RoutesRecognized || event instanceof RouteConfigLoadEnd))
+            .subscribe(event => {
+            console.log("subscribe event", event);
+            if (event instanceof RoutesRecognized) {
+                // Handle eager-loaded routes
+                this.onEagerModuleLoaded(event);
+            }
+            else if (event instanceof RouteConfigLoadEnd) {
+                // Handle lazy-loaded modules
+                this.onLazyModuleLoaded(event);
+            }
+        }));
     }
-    ngOnInit() {
-        this.subscriptions.push(this.mls.lang$.subscribe(x => this.lang = x));
+    mapActivatedRouteToRouteData(activatedRoute) {
+        const path = activatedRoute.url.map((segment) => segment.path).join('/'); // Construct path from segments
+        return {
+            path,
+            children: activatedRoute.children.map((childRoute) => this.mapActivatedRouteToRouteData(childRoute)),
+        };
     }
-    toggleExpanded() {
-        if (!this.disabled) {
-            this.expandState = !!!this.expandState;
+    onLazyModuleLoaded(event) {
+        console.log("CoreRouteAccumulatorComponent onLazyModuleLoaded", event);
+        return;
+        /*
+        const accumulatedPath = event.route.path || ''; // Start with the current path
+    
+        if (event.route.loadChildren) {
+          event.route
+            .loadChildren()
+            .then((module: any) => {
+              const routes = Array.isArray(module) ? module : module.routes || [];
+              this.processRoutes(routes, accumulatedPath);
+            })
+            .catch((error) => {
+              console.error('Error loading module:', error);
+            });
+        } else if (event.route._loadedRoutes) {
+          this.processRoutes(event.route._loadedRoutes, accumulatedPath);
+        } else if (event.route.children) {
+          const mappedRoutes = event.route.children.map((child) =>
+            child instanceof ActivatedRouteSnapshot
+              ? this.mapActivatedRouteToRouteData(child)
+              : { path: child.path, children: child.children || [] }
+          );
+          this.processRoutes(mappedRoutes, accumulatedPath);
+        } else {
+          this.saveRouteToDatabase({
+            routePath: accumulatedPath,
+            parentPath: null, // Root path has no parent
+          });
         }
+        */
     }
-    onTreeItemClick(event) {
-        if (this.value !== event['id'])
-            this.markAsTouched();
-        this.value = event['id'];
-        this.onChange(event['id']);
-        this.shownText = event['nameCode'];
-        this.toggleExpanded();
+    onEagerModuleLoaded(event) {
+        console.log("CoreRouteAccumulatorComponent onEagerModuleLoaded", event);
+        this.saveRouteToDatabase({
+            routePath: event.url,
+            parentPath: "" // pending. will be updated accumulately on lazy loaded event, based on path and children
+        });
+        /*
+        const accumulatedPath = event.state.url || ''; // Start with the current URL
+    
+        const mappedRoutes = event.state.root.children.map((child) =>
+          this.mapActivatedRouteToRouteData(child)
+        );
+    
+        this.processRoutes(mappedRoutes, accumulatedPath);
+        */
     }
-    writeValue(obj) {
-        this.value = obj;
-        if (!!!obj) {
-            this.shownText = "";
+    // Save route to the database, ensuring uniqueness with processedRoutes
+    saveRouteToDatabase(routeData) {
+        if (!this.processedRoutes.has(routeData.routePath)) {
+            this.processedRoutes.add(routeData.routePath); // Mark as processed
+            console.log(`Saving route: ${routeData.routePath}, Parent: ${routeData.parentPath}`);
+            // Implement actual DB logic here
         }
-        else {
-            this.loading = true;
-            this.subscriptions.push(this.appService.get(this.getByIdApi + "?id=" + obj.toString()).subscribe(x => {
-                this.loading = false;
-                if (x.ok && x.status === 200) {
-                    const body = x.body;
-                    //this.responseService.resolve(body);
-                    if (body.statusCode === 200) {
-                        this.shownText = body.innerBody['nameCode'];
-                    }
-                    else {
-                        this.alertService.error(this.mls.trans(body.messageCode, this.lang), alertOptions);
-                    }
-                }
-                else {
-                    //this.alertService.error(JSON.stringify(x, null, 2), noneAutoClosedAlertOptions)
-                }
-            }));
+    }
+    processRoutes(routes, accumulatedPath) {
+        for (const route of routes) {
+            let fullPath = route.path || ''; // Current route path
+            // Handle true root modules
+            if (this.isRootModule(route)) {
+                fullPath = `/${fullPath}`.replace(/\/+/g, '/'); // Root modules start a new hierarchy
+                accumulatedPath = fullPath; // Reset the accumulated path
+            }
+            else if (accumulatedPath) {
+                // Append the current route to the accumulated path
+                fullPath = `${accumulatedPath}/${route.path}`.replace(/\/+/g, '/');
+            }
+            else {
+                // Fallback for non-root routes without accumulatedPath
+                fullPath = `/${route.path}`.replace(/\/+/g, '/');
+            }
+            // Avoid duplicate processing
+            if (this.processedRoutes.has(fullPath)) {
+                continue;
+            }
+            // Save the route
+            this.saveRouteToDatabase({
+                routePath: fullPath,
+                parentPath: accumulatedPath || null,
+            });
+            this.processedRoutes.add(fullPath);
+            // Recursively process children, if any
+            if (route.children) {
+                this.processRoutes(route.children, fullPath);
+            }
         }
     }
-    onClickClear() {
-        this.writeValue(null);
-        this.onChange(null);
-        this.shownText = "";
+    // Helper method to identify root modules
+    isRootModule(route) {
+        const ROOT_MODULES = ['oauth-callback', 'root', 'cms', 'developer-doc', 'online-users', 'menu', 'home', 'auth', 'sys']; // Add other known root modules or patterns here
+        return ROOT_MODULES.some(rootModule => route.path.startsWith(rootModule));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRouteAccumulatorComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreRouteAccumulatorComponent, isStandalone: true, selector: "core-route-accumulator", ngImport: i0, template: "<p>core-route-accumulator works!</p>\r\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRouteAccumulatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-route-accumulator', imports: [], template: "<p>core-route-accumulator works!</p>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$2.Router }] });
+
+class CoreRoutingHistoryComponent extends BaseComponent {
+    constructor(mls, routingService) {
+        super(mls);
+        this.mls = mls;
+        this.routingService = routingService;
+        this.items = [];
+        this.subscriptions.push(this.routingService.routingHistory$.subscribe(x => this.items = x.reverse()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRoutingHistoryComponent, deps: [{ token: MultiLanguageService }, { token: RoutingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreRoutingHistoryComponent, isStandalone: true, selector: "core-routing-history", usesInheritance: true, ngImport: i0, template: "<div class=\"core-routing-history-container\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items;  let i = index\">\r\n            <span>\r\n                {{ i + 1 }}\r\n            </span>\r\n        </li>\r\n    </ul>\r\n</div>", styles: [".core-routing-history-container{width:100%;height:auto}.core-routing-history-container>ul{overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;justify-content:flex-end;height:40px}.core-routing-history-container>ul>li>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:0 5px;border:solid 1px darkgray}.core-routing-history-container>ul>li>span:hover{background-color:#a9a9a9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreRoutingHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-routing-history', imports: [
+                        CommonModule
+                    ], template: "<div class=\"core-routing-history-container\">\r\n    <ul>\r\n        <li *ngFor=\"let item of items;  let i = index\">\r\n            <span>\r\n                {{ i + 1 }}\r\n            </span>\r\n        </li>\r\n    </ul>\r\n</div>", styles: [".core-routing-history-container{width:100%;height:auto}.core-routing-history-container>ul{overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;justify-content:flex-end;height:40px}.core-routing-history-container>ul>li>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:0 5px;border:solid 1px darkgray}.core-routing-history-container>ul>li>span:hover{background-color:#a9a9a9}\n"] }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: RoutingService }] });
+
+class CoreSalaryPolicyPickerComponent extends CoreFormControlBaseComponent {
+    writeValue(e) {
+        this.value = e;
+    }
+    constructor(appService) {
+        super();
+        this.appService = appService;
+        this.items = [];
+        this.subscriptions = [];
     }
     ngAfterViewInit() {
-        /**
-         * This events get called by all clicks on the page
-         */
-        this.listenerFn = this.renderer.listen('window', 'click', (e) => {
-            /*
-             * handle click outside
-             */
-            if (this.container && !!!this.container.nativeElement.contains(e.target)) {
-                this.expandState = false;
-            }
+        setTimeout(() => {
+            this.subscriptions.push(this.appService.get('/api/PaSalaryPolicy/ScanSalaryPolicys').subscribe(x => {
+                if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                    this.items = x.body?.innerBody;
+                }
+            }));
         });
-        const maxZIndex = this.domService.getMaxZIndex();
-        this.container.nativeElement.style.setProperty('--max-z-index', maxZIndex + 1);
-        if (!!this.popupHeight)
-            this.container.nativeElement.style.setProperty('--popup-height', this.popupHeight);
+    }
+    onClick(item, e) {
+        e.stopPropagation();
+        this.writeValue(item.id);
+        this.onChange(item.id);
     }
     ngOnDestroy() {
-        if (this.listenerFn)
-            this.listenerFn();
-        this.subscriptions.map((x) => x?.unsubscribe());
+        this.subscriptions.forEach(x => x?.unsubscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicPickerComponent, deps: [{ token: DomService }, { token: i0.Renderer2 }, { token: AppService }, { token: ResponseService }, { token: AlertService }, { token: MultiLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreTopicPickerComponent, isStandalone: true, selector: "core-topic-picker", inputs: { popupHeight: "popupHeight", getByIdApi: "getByIdApi" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSalaryPolicyPickerComponent, deps: [{ token: AppService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreSalaryPolicyPickerComponent, isStandalone: true, selector: "core-salary-policy-picker", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
-                useExisting: CoreTopicPickerComponent
+                useExisting: CoreSalaryPolicyPickerComponent
             }
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\n    <app-threedots></app-threedots>\n}\n<div #container class=\"core-topic-picker-container\" [class.d-none]=\"loading\">\n    <input type=\"checkbox\" class=\"expand-state\" [(ngModel)]=\"expandState\">\n    <input class=\"value\" [value]=\"value\">\n    <label type=\"text\" class=\"text form-control\" [class.form-control-disabled]=\"disabled\">\n        <span [appTooltip]=\"shownText\">{{ !!loading ? \"...\" : shownText }}</span>\n        <div class=\"icon\" (click)=\"toggleExpanded()\">\n            <i class=\"feather-chevrons-down\"></i>\n        </div>\n\n        <div class=\"clear-icon-wrapper\" [class.d-none]=\"!!disabled || !!!value\" (click)=\"onClickClear()\">\n            <div class=\"flex-wrapper\" [appTooltip]=\"'UI.CORE_CONTOL_COMMON_CLEAR' | translate: lang\">\n                <i class=\"feather-x\"></i>\n            </div>\n        </div>\n        \n    </label>\n    @if (!!expandState) {\n        <div class=\"dropdown\" [class.form-control-disabled]=\"disabled\">\n            <core-topic-tree [translateText]=\"true\" (itemClick)=\"onTreeItemClick($event)\"></core-topic-tree>\n        </div>\n    }\n\n</div>", styles: [".core-topic-picker-container{position:relative;display:block;--indicator-height: 0px;--search-bg-color: white;--search-border-color: #D1D1D1;--search-item-hover-bg: #358ccb;--search-item-hover-color: white;--dropdown-bg: lightyellow;--arrow-color: #358ccb;--height: var(--size-form-control-height);--item-height: 50px;--max-z-index: 0;--search-height: 38px;--popup-height: 460px}.core-topic-picker-container input.expand-state,.core-topic-picker-container .value{display:none}.core-topic-picker-container label.text{width:100%;height:var(--height);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between}.core-topic-picker-container label.text .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:45px;top:2px;width:44px;height:44px;border-radius:.375rem;cursor:pointer}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-topic-picker-container label.text:hover>.clear-icon-wrapper{display:block}.core-topic-picker-container label.text span{width:calc(100% - var(--height));overflow-x:hidden;text-overflow:ellipsis;color:inherit}.core-topic-picker-container label.text div.icon{display:flex;align-items:center;justify-content:center;position:absolute;right:3px;top:3px;width:calc(var(--height) - 6px);height:calc(var(--height) - 6px);background-color:#e9e9e9;border-radius:3px;cursor:pointer}.core-topic-picker-container label.text div.icon i{width:28px;height:28px;font-size:28px;color:#848484}.core-topic-picker-container .dropdown{display:block;position:absolute;width:800px;min-width:100%;max-height:0px;overflow-x:auto;overflow-y:hidden;background-color:#fff;font-size:15px;box-shadow:0 1rem 3rem #0000002e;transition:.25s linear;z-index:calc(var(--max-z-index) + 1)}.core-topic-picker-container .dropdown ul{padding-left:6px}.core-topic-picker-container .dropdown ul>li{display:flex;align-items:center;cursor:pointer;padding:0px var(--size-scrollbar-width);transition:.25s linear}.core-topic-picker-container .dropdown ul>li>label{width:100%}.core-topic-picker-container .dropdown ul>li:hover{background-color:var(--search-item-hover-bg);color:var(--search-item-hover-color);transition:.25s linear}.core-topic-picker-container input.expand-state:checked~.dropdown{border:1px solid #ced4da;margin-top:2px;max-height:var(--popup-height);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;transition:.25s linear}.core-topic-picker-container input.search{margin:0;width:100%;border:0;border-bottom:1px solid var(--search-border-color);background-color:var(--search-bg-color);position:sticky;top:0;height:38px;padding:6px 12px;font-size:15px}.core-topic-picker-container input.search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[appTooltip]", inputs: ["color", "backgroundColor", "appTooltip", "showAnyway", "position"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThreedotsComponent, selector: "app-threedots" }, { kind: "component", type: CoreTopicTreeComponent, selector: "core-topic-tree", inputs: ["lineColor", "translateText", "fullWidthMode", "accessorMode", "fullRendering", "height", "disabledLoopExpand", "showCheckInheritance", "inlineExtraTemplateRef"], outputs: ["itemDoubleClick", "itemClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"core-salary-policy-picker-container\">\r\n    @for(item of items; track $index) {\r\n        <div class=\"policy-code-wrapper d-flex d-flex-between\">\r\n            <div class=\"d-flex d-flex-center policy-code\" [class.default]=\"!!item.isDefault\" [class.active]=\"item.id === value\" (click)=\"onClick(item, $event)\">{{ item.code }}</div>\r\n        </div>\r\n    }\r\n</div>", styles: [".core-salary-policy-picker-container .policy-code-wrapper{max-width:56px}.core-salary-policy-picker-container .policy-code{width:24px;height:24px;border-radius:50%;background-color:#5f9ea0;color:#fff;cursor:pointer;opacity:.2}.core-salary-policy-picker-container .policy-code.default{background-color:var(--color-basic-orange)}.core-salary-policy-picker-container .policy-code.active{opacity:1}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTopicPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSalaryPolicyPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'core-topic-picker', imports: [
-                        TooltipDirective,
-                        FormsModule,
-                        ThreedotsComponent,
-                        CoreTopicTreeComponent,
-                        TranslatePipe,
+            args: [{ selector: 'core-salary-policy-picker', imports: [], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CoreSalaryPolicyPickerComponent
+                        }
+                    ], template: "<div class=\"core-salary-policy-picker-container\">\r\n    @for(item of items; track $index) {\r\n        <div class=\"policy-code-wrapper d-flex d-flex-between\">\r\n            <div class=\"d-flex d-flex-center policy-code\" [class.default]=\"!!item.isDefault\" [class.active]=\"item.id === value\" (click)=\"onClick(item, $event)\">{{ item.code }}</div>\r\n        </div>\r\n    }\r\n</div>", styles: [".core-salary-policy-picker-container .policy-code-wrapper{max-width:56px}.core-salary-policy-picker-container .policy-code{width:24px;height:24px;border-radius:50%;background-color:#5f9ea0;color:#fff;cursor:pointer;opacity:.2}.core-salary-policy-picker-container .policy-code.default{background-color:var(--color-basic-orange)}.core-salary-policy-picker-container .policy-code.active{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: AppService }] });
+
+class CoreSeenByComponent extends CoreFormControlBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSeenByComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: CoreSeenByComponent, isStandalone: true, selector: "core-seen-by", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CoreSeenByComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"core-seen-by-container\">\n    @if (value) {\n    @for (item of value; track $index) {\n    <div class=\"avatar-wrapper\" [ngStyle]=\"{\n        zIndex: $index,\n        left: (36 + 2) * $index + 'px'\n    }\">\n        <img [src]=\"item.avatar | mapAvatarToServer\" appImageErrorResolver>\n    </div>\n    }\n    }\n</div>", styles: [".core-seen-by-container{display:block;position:relative;max-width:100%;overflow-x:auto;height:36px}.core-seen-by-container>.avatar-wrapper{display:block;position:absolute;width:36px;height:36px;border-radius:50%;top:0;cursor:pointer}.core-seen-by-container>.avatar-wrapper>img{width:36px;height:36px;border-radius:50%;transform:none!important}.core-seen-by-container>.avatar-wrapper>img :hover{transform:none!important}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: MapAvatarToServerPipe, name: "mapAvatarToServer" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSeenByComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-seen-by', imports: [
+                        NgStyle,
+                        MapAvatarToServerPipe,
+                        ImageErrorResolverDirective
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             multi: true,
-                            useExisting: CoreTopicPickerComponent
+                            useExisting: CoreSeenByComponent
                         }
-                    ], template: "@if (loading) {\n    <app-threedots></app-threedots>\n}\n<div #container class=\"core-topic-picker-container\" [class.d-none]=\"loading\">\n    <input type=\"checkbox\" class=\"expand-state\" [(ngModel)]=\"expandState\">\n    <input class=\"value\" [value]=\"value\">\n    <label type=\"text\" class=\"text form-control\" [class.form-control-disabled]=\"disabled\">\n        <span [appTooltip]=\"shownText\">{{ !!loading ? \"...\" : shownText }}</span>\n        <div class=\"icon\" (click)=\"toggleExpanded()\">\n            <i class=\"feather-chevrons-down\"></i>\n        </div>\n\n        <div class=\"clear-icon-wrapper\" [class.d-none]=\"!!disabled || !!!value\" (click)=\"onClickClear()\">\n            <div class=\"flex-wrapper\" [appTooltip]=\"'UI.CORE_CONTOL_COMMON_CLEAR' | translate: lang\">\n                <i class=\"feather-x\"></i>\n            </div>\n        </div>\n        \n    </label>\n    @if (!!expandState) {\n        <div class=\"dropdown\" [class.form-control-disabled]=\"disabled\">\n            <core-topic-tree [translateText]=\"true\" (itemClick)=\"onTreeItemClick($event)\"></core-topic-tree>\n        </div>\n    }\n\n</div>", styles: [".core-topic-picker-container{position:relative;display:block;--indicator-height: 0px;--search-bg-color: white;--search-border-color: #D1D1D1;--search-item-hover-bg: #358ccb;--search-item-hover-color: white;--dropdown-bg: lightyellow;--arrow-color: #358ccb;--height: var(--size-form-control-height);--item-height: 50px;--max-z-index: 0;--search-height: 38px;--popup-height: 460px}.core-topic-picker-container input.expand-state,.core-topic-picker-container .value{display:none}.core-topic-picker-container label.text{width:100%;height:var(--height);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between}.core-topic-picker-container label.text .clear-icon-wrapper{display:none;position:absolute;background-color:transparent;right:45px;top:2px;width:44px;height:44px;border-radius:.375rem;cursor:pointer}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.core-topic-picker-container label.text .clear-icon-wrapper>.flex-wrapper>i{color:#848484;font-size:20px}.core-topic-picker-container label.text:hover>.clear-icon-wrapper{display:block}.core-topic-picker-container label.text span{width:calc(100% - var(--height));overflow-x:hidden;text-overflow:ellipsis;color:inherit}.core-topic-picker-container label.text div.icon{display:flex;align-items:center;justify-content:center;position:absolute;right:3px;top:3px;width:calc(var(--height) - 6px);height:calc(var(--height) - 6px);background-color:#e9e9e9;border-radius:3px;cursor:pointer}.core-topic-picker-container label.text div.icon i{width:28px;height:28px;font-size:28px;color:#848484}.core-topic-picker-container .dropdown{display:block;position:absolute;width:800px;min-width:100%;max-height:0px;overflow-x:auto;overflow-y:hidden;background-color:#fff;font-size:15px;box-shadow:0 1rem 3rem #0000002e;transition:.25s linear;z-index:calc(var(--max-z-index) + 1)}.core-topic-picker-container .dropdown ul{padding-left:6px}.core-topic-picker-container .dropdown ul>li{display:flex;align-items:center;cursor:pointer;padding:0px var(--size-scrollbar-width);transition:.25s linear}.core-topic-picker-container .dropdown ul>li>label{width:100%}.core-topic-picker-container .dropdown ul>li:hover{background-color:var(--search-item-hover-bg);color:var(--search-item-hover-color);transition:.25s linear}.core-topic-picker-container input.expand-state:checked~.dropdown{border:1px solid #ced4da;margin-top:2px;max-height:var(--popup-height);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;transition:.25s linear}.core-topic-picker-container input.search{margin:0;width:100%;border:0;border-bottom:1px solid var(--search-border-color);background-color:var(--search-bg-color);position:sticky;top:0;height:38px;padding:6px 12px;font-size:15px}.core-topic-picker-container input.search:focus{outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: DomService }, { type: i0.Renderer2 }, { type: AppService }, { type: ResponseService }, { type: AlertService }, { type: MultiLanguageService }], propDecorators: { popupHeight: [{
+                    ], template: "<div class=\"core-seen-by-container\">\n    @if (value) {\n    @for (item of value; track $index) {\n    <div class=\"avatar-wrapper\" [ngStyle]=\"{\n        zIndex: $index,\n        left: (36 + 2) * $index + 'px'\n    }\">\n        <img [src]=\"item.avatar | mapAvatarToServer\" appImageErrorResolver>\n    </div>\n    }\n    }\n</div>", styles: [".core-seen-by-container{display:block;position:relative;max-width:100%;overflow-x:auto;height:36px}.core-seen-by-container>.avatar-wrapper{display:block;position:absolute;width:36px;height:36px;border-radius:50%;top:0;cursor:pointer}.core-seen-by-container>.avatar-wrapper>img{width:36px;height:36px;border-radius:50%;transform:none!important}.core-seen-by-container>.avatar-wrapper>img :hover{transform:none!important}\n"] }]
+        }] });
+
+class CoreSubFormGroupComponent extends CorePageEditComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSubFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreSubFormGroupComponent, isStandalone: true, selector: "core-sub-form-group", usesInheritance: true, ngImport: i0, template: "<core-form *ngIf=\"!!sections.length\" [formName]=\"'form'\" [inputSections]=\"sections\" [mode$]=\"mode$\" (onFormCreated)=\"onFormCreatedLocal($event)\"></core-form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreFormComponent, selector: "core-form", inputs: ["formName", "width", "submitText", "leftInputSections", "leftInputSectionsFlexSize", "inputSections", "mode$", "bottomTemplateRef", "customFormButtonItems", "showCaptionButton", "disableSaveButton", "disableCancelButton", "checkError$"], outputs: ["onFormCreated", "onFormRefCreated", "onSubmit", "onSave", "onCancal", "buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreSubFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-sub-form-group', imports: [
+                        CommonModule,
+                        CoreFormComponent
+                    ], template: "<core-form *ngIf=\"!!sections.length\" [formName]=\"'form'\" [inputSections]=\"sections\" [mode$]=\"mode$\" (onFormCreated)=\"onFormCreatedLocal($event)\"></core-form>\r\n" }]
+        }] });
+
+class CoreTabListComponent extends BaseComponent {
+    constructor(mls, appService) {
+        super(mls);
+        this.mls = mls;
+        this.appService = appService;
+        this.rowClick = new EventEmitter();
+        this.rowDoubleClick = new EventEmitter();
+        this.selectedIdsChange = new EventEmitter();
+        this.corePageHeaderButtonClick = new EventEmitter();
+        this.headers = []; // based on statuses
+        this.contents = []; // based on statuses, constructed from core-table ref instances
+        this.selectedIds = [];
+    }
+    onCoreTabsHeaderClick(event) {
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (!!this.statusOptionsApi) {
+                this.subscriptions.push(this.mls.lang$.subscribe(x => {
+                    this.subscriptions.push(this.appService.get(this.statusOptionsApi + '?lang=' + x).subscribe((x) => {
+                        if (x.ok && x.status === 200 && x.body?.statusCode === 200) {
+                            const body = x.body;
+                            const newHeaders = [];
+                            body.innerBody.forEach((m) => newHeaders.push(m.text));
+                            this.headers = newHeaders;
+                        }
+                    }));
+                }));
+            }
+        });
+    }
+    onSelectedIdsChange(e) {
+        this.selectedIds = e;
+        console.log(this.selectedIds);
+    }
+    onCorePageHeaderButtonClick(e) {
+        this.corePageHeaderButtonClick.emit(e);
+    }
+    onRowClick(e) {
+        this.rowClick.emit(e);
+    }
+    onRowDoubleClick(event) {
+        this.rowDoubleClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTabListComponent, deps: [{ token: MultiLanguageService }, { token: AppService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: CoreTabListComponent, isStandalone: true, selector: "core-tab-list", inputs: { title: "title", height: "height", headerLineHeight: "headerLineHeight", apiDefinition: "apiDefinition", columns: "columns", editRoute: "editRoute", crud: "crud", frozen: "frozen", generateTemplateRequest: "generateTemplateRequest", importPreviewPath: "importPreviewPath", outerSort: "outerSort", outerInOperators: "outerInOperators", outerParam$: "outerParam$", datePeriodComparisonFor: "datePeriodComparisonFor", datePeriodComparisonForLabelKey: "datePeriodComparisonForLabelKey", statusInclusionFor: "statusInclusionFor", statusOptionsApi: "statusOptionsApi" }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", selectedIdsChange: "selectedIdsChange", corePageHeaderButtonClick: "corePageHeaderButtonClick" }, viewQueries: [{ propertyName: "corePageList", first: true, predicate: ["corePageList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<core-tabs [headers]=\"headers\" [contents]=\"[]\" [height]=\"55\" [headerLineHeight]=\"headerLineHeight\"\r\n    (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n</core-tabs>\r\n\r\n\r\n<core-page-list [height]=\"height\" [hideHeader]=\"true\" [apiDefinition]=\"apiDefinition\" [columns]=\"columns\"\r\n    [editRoute]=\"editRoute\" [crud]=\"crud\" [title]=\"title\" *ngIf=\"!!avatar\" [outerParam$]=\"outerParam$\"\r\n    [outerInOperators]=\"outerInOperators\" [autoResizeWithWindow]=\"true\" [selfResolveCorePageHeaderButtonClick]=\"true\"\r\n    (rowDoubleClick)=\"onRowDoubleClick($event)\" (rowClick)=\"onRowClick($event)\"\r\n    (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\" (selectedIdsChange)=\"onSelectedIdsChange($event)\"\r\n    [frozen]=\"3\" [outerSort]=\"outerSort\" [generateTemplateRequest]=\"generateTemplateRequest\"\r\n    [importPreviewPath]=\"'staffprofile-import'\"></core-page-list>\r\n\r\n\r\n<ng-template #avatar let-avatar=\"context.avatar\">\r\n    <img [src]=\"avatar | mapAvatarToServer\" class=\"in-table-avatar\" appImageErrorResolver>\r\n</ng-template>\r\n\r\n<!-- [showParamKit]=\"true\"\r\n[datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n[datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n[hideStatusInclusion]=\"false\"\r\n[statusInclusionFor]=\"statusInclusionFor\"\r\n[statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n[statusOptionsApi]=\"statusOptionsApi\" -->", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CoreTabsComponent, selector: "core-tabs", inputs: ["headers", "contents", "headerTools", "height", "headerLineHeight"], outputs: ["onHeaderClick", "onToolItemClick"] }, { kind: "component", type: CorePageListComponent, selector: "core-page-list", inputs: ["normalMode", "hideHeader", "hideButtonGroup", "seekerMode", "mccMode", "height", "headerWrap", "headerFirstRowHeight", "enableTimeZoneConverterForDateTimePeriodParameters", "showParamKit", "enableFilterKit", "datePeriodComparisonFor", "datePeriodComparisonForLabelKey", "statusInclusionFor", "statusInclusionForLabelKey", "statusOptionsApi", "statusOptions$", "showOrgParam", "showOrgParamDropdown", "hideGeneralSearch", "hideDatePeriodComparison", "hideStatusInclusion", "filterOperators$", "camelCaseDtoStatusIdField", "gridStatusColumn", "title", "hasIdOfStringType", "hideCheck", "apiDefinition", "columns", "useTheseColumns", "hideOrgTree", "frozen", "inlineTools", "inlineToolItems", "editRoute", "crud", "showListInlineTools", "top", "left", "hideLeft", "outerParam$", "outerFilter$", "outerSort", "outerFilterOperators", "outerInOperators", "autoResizeWithWindow", "extraManualOffset", "wrap", "rowHeight", "selfResolveCorePageHeaderButtonClick", "clearData$", "deleteValidateFn", "generateTemplateRequest", "importPreviewPath", "columnSearchDefaultOpen", "fixedPageSize", "disableDoubleClick", "noPaddingCell", "disableHighlightOnClick", "loading$", "excludedIds$", "disableDialogInformationLines", "changeTracking", "primaryKey", "changedItems$", "tabMode", "paramRows", "disableFilterHub", "autoColumnFitAvailableSpace", "ignoredDefaultActions", "checkboxExplicity"], outputs: ["corePageHeaderButtonClick", "rowClick", "rowDoubleClick", "selectedIdsChange", "selectedDataChange", "onInstanceCreated", "onInputFileBase64DataReady", "listChange"] }, { kind: "pipe", type: MapAvatarToServerPipe, name: "mapAvatarToServer" }, { kind: "directive", type: ImageErrorResolverDirective, selector: "[appImageErrorResolver]", inputs: ["type", "isFemale"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoreTabListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-tab-list', imports: [
+                        NgIf,
+                        CoreTabsComponent,
+                        CorePageListComponent,
+                        MapAvatarToServerPipe,
+                        ImageErrorResolverDirective
+                    ], template: "<core-tabs [headers]=\"headers\" [contents]=\"[]\" [height]=\"55\" [headerLineHeight]=\"headerLineHeight\"\r\n    (onHeaderClick)=\"onCoreTabsHeaderClick($event)\">\r\n</core-tabs>\r\n\r\n\r\n<core-page-list [height]=\"height\" [hideHeader]=\"true\" [apiDefinition]=\"apiDefinition\" [columns]=\"columns\"\r\n    [editRoute]=\"editRoute\" [crud]=\"crud\" [title]=\"title\" *ngIf=\"!!avatar\" [outerParam$]=\"outerParam$\"\r\n    [outerInOperators]=\"outerInOperators\" [autoResizeWithWindow]=\"true\" [selfResolveCorePageHeaderButtonClick]=\"true\"\r\n    (rowDoubleClick)=\"onRowDoubleClick($event)\" (rowClick)=\"onRowClick($event)\"\r\n    (corePageHeaderButtonClick)=\"onCorePageHeaderButtonClick($event)\" (selectedIdsChange)=\"onSelectedIdsChange($event)\"\r\n    [frozen]=\"3\" [outerSort]=\"outerSort\" [generateTemplateRequest]=\"generateTemplateRequest\"\r\n    [importPreviewPath]=\"'staffprofile-import'\"></core-page-list>\r\n\r\n\r\n<ng-template #avatar let-avatar=\"context.avatar\">\r\n    <img [src]=\"avatar | mapAvatarToServer\" class=\"in-table-avatar\" appImageErrorResolver>\r\n</ng-template>\r\n\r\n<!-- [showParamKit]=\"true\"\r\n[datePeriodComparisonFor]=\"datePeriodComparisonFor\"\r\n[datePeriodComparisonForLabelKey]=\"datePeriodComparisonForLabelKey\"\r\n[hideStatusInclusion]=\"false\"\r\n[statusInclusionFor]=\"statusInclusionFor\"\r\n[statusInclusionForLabelKey]=\"statusInclusionForLabelKey\"\r\n[statusOptionsApi]=\"statusOptionsApi\" -->" }]
+        }], ctorParameters: () => [{ type: MultiLanguageService }, { type: AppService }], propDecorators: { corePageList: [{
+                type: ViewChild,
+                args: ['corePageList']
+            }], title: [{
                 type: Input
-            }], getByIdApi: [{
+            }], height: [{
                 type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container']
+            }], headerLineHeight: [{
+                type: Input
+            }], apiDefinition: [{
+                type: Input,
+                args: [{ required: true }]
+            }], columns: [{
+                type: Input,
+                args: [{ required: true }]
+            }], editRoute: [{
+                type: Input
+            }], crud: [{
+                type: Input
+            }], frozen: [{
+                type: Input
+            }], generateTemplateRequest: [{
+                type: Input
+            }], importPreviewPath: [{
+                type: Input
+            }], outerSort: [{
+                type: Input
+            }], outerInOperators: [{
+                type: Input
+            }], outerParam$: [{
+                type: Input
+            }], datePeriodComparisonFor: [{
+                type: Input
+            }], datePeriodComparisonForLabelKey: [{
+                type: Input
+            }], statusInclusionFor: [{
+                type: Input
+            }], statusOptionsApi: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], rowDoubleClick: [{
+                type: Output
+            }], selectedIdsChange: [{
+                type: Output
+            }], corePageHeaderButtonClick: [{
+                type: Output
             }] } });
 
 class CoreTreeComponent {