cat-qw-lib 0.49.1 → 0.49.6

package/fesm2022/cat-qw-lib.mjs

@@ -66,7 +66,6 @@ import { QuillModule, QuillConfigModule } from 'ngx-quill';
 import * as i5$3 from 'primeng/tabview';
 import { TabViewModule } from 'primeng/tabview';
 import hljs from 'highlight.js';
-import * as i2$3 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
 
 class SHARED {
@@ -173,6 +172,7 @@ class SHARED {
     static EXPENDITURE = 'expenditure';
     static INCOME = 'income';
     static WIDGET_NAME = 'widgetName';
+    static IS_MENU = 'isMenu';
 }
 const widgetLayoutTypeList = [
     { name: 'Row', value: 'row' },
@@ -2634,7 +2634,8 @@ class WidgetModel extends BaseModel {
     subHeaderDictionaryID;
     headerDictionaryItemID;
     subHeaderDictionaryItemID;
-    widgetLayoutType;
+    style;
+    layoutType;
     isActive;
 }
 /**
@@ -2644,9 +2645,7 @@ class WidgetItemModel extends BaseModel {
     name;
     dictionaryItemID;
     dictionaryID;
-    isMain = true;
-    isEditable;
-    linkedWidgetID;
+    style;
     isActive = true;
 }
 
@@ -2771,11 +2770,11 @@ class WidgetAdminFormComponent extends BaseFormComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminFormComponent, deps: [{ token: WidgetAdminService }, { token: ValidatorService }, { token: WidgetAdminStore }, { token: WidgetAdminQuery }, { token: i3$4.Router }, { token: i3$4.ActivatedRoute }, { token: BaseStore }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\r\n    (onCancel)=\"handleCancel()\">\r\n    <div class=\"card p-fluid p-formgrid\">\r\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\r\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\r\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'name',\r\n              isRequired: true,\r\n              displayText: 'Name',\r\n              placeholder: 'Enter Widget Name'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\r\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                name:'apiConfigId',\r\n                displayText : 'Select API',\r\n                isRequired:true,\r\n              }\" (onInput)=\"handleAPIChange($event)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"col-2 md:col-2 mt-5\">\r\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                                                              name:'isActive',\r\n                                                              displayText : 'Active',\r\n                                                            }\">\r\n                </check-box>\r\n            </div>\r\n        </div>\r\n        <div class=\"grid align-items-center m-0\">\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryID',\r\n                                            listLabelProperty:'name',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Dictionary',\r\n                                            options: dictionaries\r\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryItemID',\r\n                                            listLabelProperty:'itemName',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Header Item',\r\n                                            options: headerDictionaryItems\r\n                                          }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryID',\r\n                                                                listLabelProperty:'name',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select Dictionary',\r\n                                                                options: dictionaries\r\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryItemID',\r\n                                                                listLabelProperty:'itemName',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select SubHeader Item',\r\n                                                                options: subHeaderDictionaryItems\r\n                                                              }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\r\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                            name:'widgetLayoutType',\r\n                                                            listLabelProperty:'name',\r\n                                                            listValueProperty:'value',\r\n                                                            displayText : 'Select Layout Type',\r\n                                                            options: widgetLayoutTypeList\r\n                                                          }\">\r\n                </dropdown>\r\n            </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\r\n            <div class=\"card m-0 p-0 mb-2\">\r\n                <div class=\"mt-3 w-full flex\">\r\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\r\n                        icon=\"pi pi-plus font-semibold\"\r\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\r\n                        (click)=\"handleWidgetItemAddBtnClick()\">\r\n                        <span class=\"ml-3\">Add Widget Item </span>\r\n                    </button>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Widget Items -->\r\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'name',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Label',\r\n                                                                    isRequired : true,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryID',\r\n                                        listLabelProperty:'name',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Dictionary',\r\n                                        isRequired:true,\r\n                                        options: dictionaries\r\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryItemID',\r\n                                        listLabelProperty:'itemName',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Properties',\r\n                                        isRequired:true,\r\n                                        options: dictionaryItemArray[i]\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"false\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'linkedWidgetID',\r\n                                        displayText : 'Select Linked Widget'\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-4 m-0 flex justify-content-around md:col-4 mt-5\">\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                          name:'isMain',\r\n                                          displayText : 'Add to Main ?',\r\n                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                          name:'isEditable',\r\n                                          displayText : 'Is Editable ?',\r\n                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                          name:'isActive',\r\n                                                          displayText : 'Is Active ?',\r\n                                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"ml-1 delete-icon-container\">\r\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteRecord(i)\"></i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["messages", "record", "headerText", "showSave", "disableSaveButton"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetAdminFormComponent, isStandalone: false, selector: "lib-widget-admin-form", usesInheritance: true, ngImport: i0, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\r\n    (onCancel)=\"handleCancel()\">\r\n    <div class=\"card p-fluid p-formgrid\">\r\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\r\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\r\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'name',\r\n              isRequired: true,\r\n              displayText: 'Name',\r\n              placeholder: 'Enter Widget Name'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\r\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                name:'apiConfigId',\r\n                displayText : 'Select API',\r\n                isRequired:true,\r\n              }\" (onInput)=\"handleAPIChange($event)\">\r\n                </dropdown>\r\n            </div>\r\n\r\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\r\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'style',\r\n              isRequired: false,\r\n              displayText: 'Style',\r\n              placeholder: 'Enter Widget Style'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-2 md:col-2 mt-5\">\r\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                                                              name:'isActive',\r\n                                                              displayText : 'Active',\r\n                                                            }\">\r\n                </check-box>\r\n            </div>\r\n        </div>\r\n        <div class=\"grid align-items-center m-0\">\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryID',\r\n                                            listLabelProperty:'name',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Dictionary',\r\n                                            options: dictionaries\r\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryItemID',\r\n                                            listLabelProperty:'itemName',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Header Item',\r\n                                            options: headerDictionaryItems\r\n                                          }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryID',\r\n                                                                listLabelProperty:'name',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select Dictionary',\r\n                                                                options: dictionaries\r\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryItemID',\r\n                                                                listLabelProperty:'itemName',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select SubHeader Item',\r\n                                                                options: subHeaderDictionaryItems\r\n                                                              }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\r\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                            name:'layoutType',\r\n                                                            listLabelProperty:'name',\r\n                                                            listValueProperty:'value',\r\n                                                            displayText : 'Select Layout Type',\r\n                                                            options: widgetLayoutTypeList\r\n                                                          }\">\r\n                </dropdown>\r\n            </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\r\n            <div class=\"card m-0 p-0 mb-2\">\r\n                <div class=\"mt-3 w-full flex\">\r\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\r\n                        icon=\"pi pi-plus font-semibold\"\r\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\r\n                        (click)=\"handleWidgetItemAddBtnClick()\">\r\n                        <span class=\"ml-3\">Add Widget Item </span>\r\n                    </button>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Widget Items -->\r\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'name',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Label',\r\n                                                                    isRequired : true,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryID',\r\n                                        listLabelProperty:'name',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Dictionary',\r\n                                        isRequired:true,\r\n                                        options: dictionaries\r\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryItemID',\r\n                                        listLabelProperty:'itemName',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Properties',\r\n                                        isRequired:true,\r\n                                        options: dictionaryItemArray[i]\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-4 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'style',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Style',\r\n                                                                    isRequired : false,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                          name:'isActive',\r\n                                                          displayText : 'Is Active ?',\r\n                                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"ml-4 delete-icon-container\">\r\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteRecord(i)\"></i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextBoxComponent, selector: "text-box" }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["isStaticDropdown"] }, { kind: "component", type: FormContainerComponent, selector: "form-container", inputs: ["messages", "record", "headerText", "showSave", "disableSaveButton"], outputs: ["onSave", "onCancel"] }, { kind: "component", type: CheckBoxComponent, selector: "check-box" }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetAdminFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\r\n    (onCancel)=\"handleCancel()\">\r\n    <div class=\"card p-fluid p-formgrid\">\r\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\r\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\r\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'name',\r\n              isRequired: true,\r\n              displayText: 'Name',\r\n              placeholder: 'Enter Widget Name'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-5 md:col-5 mt-2 mb-2\">\r\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                name:'apiConfigId',\r\n                displayText : 'Select API',\r\n                isRequired:true,\r\n              }\" (onInput)=\"handleAPIChange($event)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"col-2 md:col-2 mt-5\">\r\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                                                              name:'isActive',\r\n                                                              displayText : 'Active',\r\n                                                            }\">\r\n                </check-box>\r\n            </div>\r\n        </div>\r\n        <div class=\"grid align-items-center m-0\">\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryID',\r\n                                            listLabelProperty:'name',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Dictionary',\r\n                                            options: dictionaries\r\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryItemID',\r\n                                            listLabelProperty:'itemName',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Header Item',\r\n                                            options: headerDictionaryItems\r\n                                          }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryID',\r\n                                                                listLabelProperty:'name',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select Dictionary',\r\n                                                                options: dictionaries\r\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryItemID',\r\n                                                                listLabelProperty:'itemName',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select SubHeader Item',\r\n                                                                options: subHeaderDictionaryItems\r\n                                                              }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\r\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                            name:'widgetLayoutType',\r\n                                                            listLabelProperty:'name',\r\n                                                            listValueProperty:'value',\r\n                                                            displayText : 'Select Layout Type',\r\n                                                            options: widgetLayoutTypeList\r\n                                                          }\">\r\n                </dropdown>\r\n            </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\r\n            <div class=\"card m-0 p-0 mb-2\">\r\n                <div class=\"mt-3 w-full flex\">\r\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\r\n                        icon=\"pi pi-plus font-semibold\"\r\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\r\n                        (click)=\"handleWidgetItemAddBtnClick()\">\r\n                        <span class=\"ml-3\">Add Widget Item </span>\r\n                    </button>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Widget Items -->\r\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'name',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Label',\r\n                                                                    isRequired : true,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryID',\r\n                                        listLabelProperty:'name',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Dictionary',\r\n                                        isRequired:true,\r\n                                        options: dictionaries\r\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryItemID',\r\n                                        listLabelProperty:'itemName',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Properties',\r\n                                        isRequired:true,\r\n                                        options: dictionaryItemArray[i]\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"false\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'linkedWidgetID',\r\n                                        displayText : 'Select Linked Widget'\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-4 m-0 flex justify-content-around md:col-4 mt-5\">\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                          name:'isMain',\r\n                                          displayText : 'Add to Main ?',\r\n                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                          name:'isEditable',\r\n                                          displayText : 'Is Editable ?',\r\n                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                          name:'isActive',\r\n                                                          displayText : 'Is Active ?',\r\n                                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"ml-1 delete-icon-container\">\r\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteRecord(i)\"></i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"] }]
+            args: [{ selector: 'lib-widget-admin-form', standalone: false, template: "<form-container [record]=\"record\" [showSave]=\"true\" [messages]=\"message\" (onSave)=\"handleSubmit()\"\r\n    (onCancel)=\"handleCancel()\">\r\n    <div class=\"card p-fluid p-formgrid\">\r\n        <h4 class=\"font-bold col-12 md:col-12\">Widget Form</h4>\r\n        <div class=\"col-12 md:col-12 mt-2 mb-2 flex\">\r\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'name',\r\n              isRequired: true,\r\n              displayText: 'Name',\r\n              placeholder: 'Enter Widget Name'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-3 md:col-3 mt-2 mb-2\">\r\n                <dropdown [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                name:'apiConfigId',\r\n                displayText : 'Select API',\r\n                isRequired:true,\r\n              }\" (onInput)=\"handleAPIChange($event)\">\r\n                </dropdown>\r\n            </div>\r\n\r\n            <div class=\"col-4 md:col-4 mt-2 mb-2\">\r\n            <text-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n              readonly: false,\r\n              name: 'style',\r\n              isRequired: false,\r\n              displayText: 'Style',\r\n              placeholder: 'Enter Widget Style'\r\n            }\"></text-box>\r\n            </div>\r\n\r\n            <div class=\"col-2 md:col-2 mt-5\">\r\n                <check-box [store]=\"widgetStore\" [record]=\"record\" [attributeModel]=\"{\r\n                                                              name:'isActive',\r\n                                                              displayText : 'Active',\r\n                                                            }\">\r\n                </check-box>\r\n            </div>\r\n        </div>\r\n        <div class=\"grid align-items-center m-0\">\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryID',\r\n                                            listLabelProperty:'name',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Dictionary',\r\n                                            options: dictionaries\r\n                                          }\" (onInput)=\"handleHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                            name:'headerDictionaryItemID',\r\n                                            listLabelProperty:'itemName',\r\n                                            listValueProperty:'_id',\r\n                                            displayText : 'Select Header Item',\r\n                                            options: headerDictionaryItems\r\n                                          }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-5 mt-2 mb-2 flex\">\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryID',\r\n                                                                listLabelProperty:'name',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select Dictionary',\r\n                                                                options: dictionaries\r\n                                                              }\" (onInput)=\"handleSubHeaderDictionarySelect($event)\">\r\n                    </dropdown>\r\n                </div>\r\n                <div class=\"field col-6 pl-2 pb-0 mb-2 md:mr-2 md:col-6\">\r\n                    <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                                name:'subHeaderDictionaryItemID',\r\n                                                                listLabelProperty:'itemName',\r\n                                                                listValueProperty:'_id',\r\n                                                                displayText : 'Select SubHeader Item',\r\n                                                                options: subHeaderDictionaryItems\r\n                                                              }\">\r\n                    </dropdown>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-6 md:col-2 mt-2 mb-2 flex\">\r\n                <div class=\"field col-12 pl-2 pb-0 mb-2 md:mr-2 md:col-12\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"record\" [attributeModel]=\"{\r\n                                                            name:'layoutType',\r\n                                                            listLabelProperty:'name',\r\n                                                            listValueProperty:'value',\r\n                                                            displayText : 'Select Layout Type',\r\n                                                            options: widgetLayoutTypeList\r\n                                                          }\">\r\n                </dropdown>\r\n            </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field p-0 pr-2 col-12 md:col-2\">\r\n            <div class=\"card m-0 p-0 mb-2\">\r\n                <div class=\"mt-3 w-full flex\">\r\n                    <button pButton pRipple routerLinkActive=\"router-link-active\"\r\n                        icon=\"pi pi-plus font-semibold\"\r\n                        class=\"py-3 justify-content-center font-semibold w-full border-round\"\r\n                        (click)=\"handleWidgetItemAddBtnClick()\">\r\n                        <span class=\"ml-3\">Add Widget Item </span>\r\n                    </button>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Widget Items -->\r\n        <div class=\"feild-card col-12 md:col-12 flex\" *ngFor=\"let widgetItem of record.dataItems; let i = index;\">\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'name',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Label',\r\n                                                                    isRequired : true,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryID',\r\n                                        listLabelProperty:'name',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Dictionary',\r\n                                        isRequired:true,\r\n                                        options: dictionaries\r\n                                      }\" (onInput)=\"handleWidgetItemDictionarySelect($event, i)\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-2 col-sm-6\">\r\n                <dropdown [store]=\"widgetStore\" [isStaticDropdown]=\"true\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                        name:'dictionaryItemID',\r\n                                        listLabelProperty:'itemName',\r\n                                        listValueProperty:'_id',\r\n                                        displayText : 'Select Properties',\r\n                                        isRequired:true,\r\n                                        options: dictionaryItemArray[i]\r\n                                      }\">\r\n                </dropdown>\r\n            </div>\r\n            <div class=\"field col-4 col-sm-6\">\r\n                <text-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                                    name : 'style',\r\n                                                                    readonly : false,\r\n                                                                    displayText : 'Item Style',\r\n                                                                    isRequired : false,\r\n                                                                }\"></text-box>\r\n            </div>\r\n            <div class=\"field col-4 m-0 flex justify-content-center md:col-2 mt-5\">\r\n                <div class=\"m-0\">\r\n                    <check-box [store]=\"widgetStore\" [record]=\"widgetItem\" [attributeModel]=\"{\r\n                                                          name:'isActive',\r\n                                                          displayText : 'Is Active ?',\r\n                                                        }\">\r\n                    </check-box>\r\n                </div>\r\n                <div class=\"ml-4 delete-icon-container\">\r\n                    <i class=\"pi pi-trash trash-icon-wrapper cursor-pointer\" (click)=\"handleDeleteRecord(i)\"></i>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form-container>", styles: [".trash-icon-wrapper{font-size:20px;color:var(--red-500)}\n"] }]
         }], ctorParameters: () => [{ type: WidgetAdminService }, { type: ValidatorService }, { type: WidgetAdminStore }, { type: WidgetAdminQuery }, { type: i3$4.Router }, { type: i3$4.ActivatedRoute }, { type: BaseStore }, { type: BaseQuery }] });
 
 /**
@@ -4078,16 +4077,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  */
 let WidgetStore = class WidgetStore extends BaseStore {
     onViewAllDetails$;
-    onViewPropertyDetails$;
+    onEventClickDetails$;
     onItemClick$;
     constructor() {
         super();
         this.onViewAllDetails$ = new BehaviorSubject(SHARED.EMPTY_STRING);
-        this.onViewPropertyDetails$ = new BehaviorSubject(SHARED.EMPTY);
+        this.onEventClickDetails$ = new BehaviorSubject(SHARED.EMPTY);
         this.onItemClick$ = new BehaviorSubject({});
     }
-    setOnViewPropertyDetails(value) {
-        this.onViewPropertyDetails$.next(value);
+    setEventClickDetails(value) {
+        this.onEventClickDetails$.next(value);
     }
     setOnViewAllDetails(value) {
         this.onViewAllDetails$.next(value);
@@ -4101,6 +4100,9 @@ let WidgetStore = class WidgetStore extends BaseStore {
     setWidgetItem(widgetItem) {
         this.update({ widgetItem: widgetItem });
     }
+    setIsMenu(isMenu) {
+        this.update({ isMenu: isMenu });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetStore, providedIn: 'root' });
 };
@@ -4158,8 +4160,8 @@ class WidgetQuery extends BaseQuery {
     getOnViewAllDetails() {
         return this.widgetStore.onViewAllDetails$.asObservable();
     }
-    getViewPropertyDetails() {
-        return this.widgetStore.onViewPropertyDetails$.asObservable();
+    getEventClickDetails() {
+        return this.widgetStore.onEventClickDetails$.asObservable();
     }
     getOnWidgetItemClick() {
         return this.widgetStore.onItemClick$.asObservable();
@@ -4167,6 +4169,9 @@ class WidgetQuery extends BaseQuery {
     getWidgetItem() {
         return this.select(state => state['widgetItem']);
     }
+    getIsMenu() {
+        return this.select(state => state['isMenu']);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetQuery, deps: [{ token: WidgetStore }, { token: WidgetStore }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetQuery, providedIn: 'root' });
 }
@@ -4175,18 +4180,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: WidgetStore }, { type: WidgetStore }] });
 
+class StyleBuilderService {
+    constructor() { }
+    getStyle(style) {
+        if (!style)
+            return {};
+        return style.split(SHARED.SEMICOLON_STRING).reduce((acc, rule) => {
+            const [prop, value] = rule.split(SHARED.COLON_STRING);
+            if (prop && value)
+                acc[prop.trim()] = value.trim();
+            return acc;
+        }, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class WidgetHeaderComponent {
+    styleBulderService;
     widget;
-    progressChartData;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget", progressChartData: "progressChartData" }, ngImport: i0, template: "<div class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-10 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <h3 class=\"mb-0 application-title-wrapper font-bold mr-3\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span class=\"mr-1\">Risk Rating:</span>\r\n      <span class=\"mr-3 font-semibold\" [ngClass]=\"{\r\n            'text-red-500': widget.subHeader === 'High',\r\n            'text-green-500': widget.subHeader === 'Low',\r\n            'text-yellow-500': widget.subHeader === 'Medium'\r\n          }\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n  @if(widget.predefinedName == \"ApplicationWidget\") {\r\n    <div class=\"chart-container\">\r\n      <p-chart type=\"pie\" [data]=\"progressChartData\" height=\"50px\" width=\"50px\"></p-chart>\r\n      <p class=\"percentage-label text-green-500 text-lg\">{{ progressChartData.datasets[0].data[0] }}%</p>\r\n    </div>\r\n  }\r\n\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:18px;font-weight:700}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.UIChart, selector: "p-chart", inputs: ["type", "plugins", "width", "height", "responsive", "ariaLabel", "ariaLabelledBy", "data", "options"], outputs: ["onDataSelect"] }] });
+    headerStyle = {};
+    subHeaderStyle = {};
+    headerIconStyle = {};
+    headerIconClass;
+    constructor(styleBulderService) {
+        this.styleBulderService = styleBulderService;
+    }
+    ngOnChanges(changes) {
+        if (this.widget && this.widget.style) {
+            this.headerStyle = this.styleBulderService.getStyle(this.widget.style.headerStyle);
+            this.subHeaderStyle = this.styleBulderService.getStyle(this.widget.style.subHeaderStyle);
+            this.headerIconClass = this.widget.style.headerIconClass;
+            this.headerIconStyle = this.styleBulderService.getStyle(this.widget.style.headerIconStyle);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetHeaderComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-10 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i classs=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"mb-0 application-title-wrapper font-bold mr-3\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:18px;font-weight:700}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-10 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <h3 class=\"mb-0 application-title-wrapper font-bold mr-3\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span class=\"mr-1\">Risk Rating:</span>\r\n      <span class=\"mr-3 font-semibold\" [ngClass]=\"{\r\n            'text-red-500': widget.subHeader === 'High',\r\n            'text-green-500': widget.subHeader === 'Low',\r\n            'text-yellow-500': widget.subHeader === 'Medium'\r\n          }\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n  @if(widget.predefinedName == \"ApplicationWidget\") {\r\n    <div class=\"chart-container\">\r\n      <p-chart type=\"pie\" [data]=\"progressChartData\" height=\"50px\" width=\"50px\"></p-chart>\r\n      <p class=\"percentage-label text-green-500 text-lg\">{{ progressChartData.datasets[0].data[0] }}%</p>\r\n    </div>\r\n  }\r\n\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:18px;font-weight:700}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { widget: [{
-                type: Input
-            }], progressChartData: [{
+            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-10 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i classs=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"mb-0 application-title-wrapper font-bold mr-3\">\r\n        {{ (widget.header) }}\r\n      </h3>\r\n    </div>\r\n    <div *ngIf=\"widget?.subHeader\" class=\"flex align-items-center mt-2\">\r\n      <span [ngStyle]=\"subHeaderStyle\" class=\"mr-3 font-semibold\">{{ widget.subHeader }}</span>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}.application-title-wrapper{font-size:18px;font-weight:700}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }] } });
 
@@ -4215,50 +4255,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Input
             }] } });
 
-class StyleBuilderService {
-    constructor() { }
-    getStyle(style) {
-        if (!style)
-            return {};
-        return style.split(SHARED.SEMICOLON_STRING).reduce((acc, rule) => {
-            const [prop, value] = rule.split(SHARED.COLON_STRING);
-            if (prop && value)
-                acc[prop.trim()] = value.trim();
-            return acc;
-        }, {});
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: StyleBuilderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class WidgetItemComponent {
     styleBulderService;
     widgetStore;
+    widgetQuery;
     widgetItem;
     widget;
     application;
-    constructor(styleBulderService, widgetStore) {
+    fieldKeyStyle = {};
+    fieldValueStyle = {};
+    keyIconClass = SHARED.EMPTY;
+    keyIconStyle = {};
+    valueIconClass = SHARED.EMPTY;
+    valueIconStyle = {};
+    hasSeparator = false;
+    isMenu = false;
+    destroy$ = new Subject();
+    constructor(styleBulderService, widgetStore, widgetQuery) {
         this.styleBulderService = styleBulderService;
         this.widgetStore = widgetStore;
+        this.widgetQuery = widgetQuery;
     }
-    getStyle(style) {
-        return this.styleBulderService.getStyle(style);
+    ngOnInit() {
+        this.handleIsMenu();
     }
-    onHandleSidebar(propertyId) {
-        this.widgetStore.setOnViewPropertyDetails({ propertyId: propertyId, isDailogShow: true });
+    ngOnChanges() {
+        if (this.widgetItem && this.widgetItem.style) {
+            this.fieldValueStyle = this.styleBulderService.getStyle(this.widgetItem.style.value);
+            this.fieldKeyStyle = this.styleBulderService.getStyle(this.widgetItem.style.key);
+            this.keyIconClass = this.widgetItem.style.keyIconClass;
+            this.keyIconStyle = this.widgetItem.style.keyIconStyle ? this.styleBulderService.getStyle(this.widgetItem.style.keyIconStyle) : {};
+            this.valueIconClass = this.widgetItem.style.valueIconClass;
+            this.valueIconStyle = this.widgetItem.style.valueIconStyle ? this.styleBulderService.getStyle(this.widgetItem.style.valueIconStyle) : {};
+            this.hasSeparator = this.widgetItem.style.hasSeparator;
+        }
+    }
+    handleIsMenu() {
+        this.widgetQuery.getIsMenu()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((res) => {
+            if (res) {
+                this.isMenu = res;
+            }
+        });
+    }
+    handleDynamicEvent(recordId) {
+        this.widgetStore.setEventClickDetails({ recordId: recordId, isDailogShow: true });
     }
     ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
         this.widgetStore.setOnWidgetItemClick(null);
-        this.widgetStore.setOnViewPropertyDetails({ propertyId: null, isDailogShow: false });
+        this.widgetStore.setEventClickDetails({ recordId: null, isDailogShow: false });
     }
     handleWidgetItemClick(widgetItem) {
         const updatedItem = { ...widgetItem };
+        const applicantId = this.widget.recordId;
         switch (updatedItem.route) {
             case SHARED.DIRECT_DEBIT:
                 const directDebit = this.widget.dataItems.filter((val) => val.key === SHARED.DIRECT_DEBITID);
@@ -4273,23 +4325,24 @@ class WidgetItemComponent {
                 updatedItem.value = product[0].value;
                 break;
             case SHARED.COMMITMENTS:
-                const applicantId = this.widget.recordId;
                 updatedItem.value = applicantId;
                 break;
             case SHARED.INCOME:
-                const id = this.widget.recordId;
-                updatedItem.value = id;
+                updatedItem.value = applicantId;
+                break;
+            case SHARED.EXPENDITURE:
+                updatedItem.value = applicantId;
                 break;
         }
         this.widgetStore.setOnWidgetItemClick(updatedItem);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, ngImport: i0, template: "<div class=\"widget-container\">\r\n  <div class=\"flex justify-content-between\"\r\n    [ngClass]=\"!(widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget') ? 'align-items-center' : ''\">\r\n    <p class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50 flex align-items-center justify-content-end\">\r\n      <i *ngIf=\"widgetItem?.style?.includes('color: red;')\" class=\"pi pi-exclamation-triangle text-red-500 mr-1\"\r\n        style=\"font-size: 1.3rem\"></i>\r\n      <p *ngIf=\"!(widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget')\" class=\"key-field-wrapper\"\r\n        [ngStyle]=\"getStyle(widgetItem?.style)\">\r\n        <ng-container *ngIf=\"widgetItem?.isLink; else plainText\">\r\n          <a class=\"cursor-pointer\" (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ (widgetItem.value && widgetItem.value !== 'null') ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n        <ng-template #plainText>\r\n        <a (click)=\"handleWidgetItemClick(widgetItem)\"> {{ (widgetItem?.value && widgetItem?.value !== 'null') ? widgetItem?.value : '' }} </a>\r\n        </ng-template>\r\n      </p>\r\n      <i *ngIf=\"widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget'\"\r\n        class=\"pi pi-map-marker map-icon map-icon-wrapper\"></i>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget'\"\r\n    class=\"address-title-wrapper cursor-pointer\" [ngStyle]=\"getStyle(widgetItem?.style)\" (click)=\"onHandleSidebar(widget.recordId)\">\r\n    {{ widgetItem?.value }}\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n  <div class=\"widget-content\"\r\n    [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <i classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n    <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n    <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n    class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50 flex align-items-center justify-content-end\">\r\n      <i classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n      <p class=\"key-field-wrapper\">\r\n        <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n         <a\r\n           class=\"cursor-pointer\"\r\n           [ngStyle]=\"fieldValueStyle\"\r\n           (click)=\"handleDynamicEvent(widget.recordId)\"\r\n         >\r\n           {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n         </a>\r\n        </ng-container>\r\n\r\n        <ng-template #notEvent>\r\n          <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n            <a\r\n              class=\"cursor-pointer\"\r\n              [ngStyle]=\"fieldValueStyle\"\r\n              (click)=\"handleWidgetItemClick(widgetItem)\"\r\n            >\r\n              {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n            </a>\r\n          </ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #plainText>\r\n          <span [ngStyle]=\"fieldValueStyle\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </span>\r\n        </ng-template>\r\n      </p>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:auto 1fr;row-gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container\">\r\n  <div class=\"flex justify-content-between\"\r\n    [ngClass]=\"!(widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget') ? 'align-items-center' : ''\">\r\n    <p class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50 flex align-items-center justify-content-end\">\r\n      <i *ngIf=\"widgetItem?.style?.includes('color: red;')\" class=\"pi pi-exclamation-triangle text-red-500 mr-1\"\r\n        style=\"font-size: 1.3rem\"></i>\r\n      <p *ngIf=\"!(widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget')\" class=\"key-field-wrapper\"\r\n        [ngStyle]=\"getStyle(widgetItem?.style)\">\r\n        <ng-container *ngIf=\"widgetItem?.isLink; else plainText\">\r\n          <a class=\"cursor-pointer\" (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ (widgetItem.value && widgetItem.value !== 'null') ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n        <ng-template #plainText>\r\n        <a (click)=\"handleWidgetItemClick(widgetItem)\"> {{ (widgetItem?.value && widgetItem?.value !== 'null') ? widgetItem?.value : '' }} </a>\r\n        </ng-template>\r\n      </p>\r\n      <i *ngIf=\"widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget'\"\r\n        class=\"pi pi-map-marker map-icon map-icon-wrapper\"></i>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div *ngIf=\"widgetItem.key === 'Address' && widget.predefinedName === 'PropertyWidget'\"\r\n    class=\"address-title-wrapper cursor-pointer\" [ngStyle]=\"getStyle(widgetItem?.style)\" (click)=\"onHandleSidebar(widget.recordId)\">\r\n    {{ widgetItem?.value }}\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}\n"] }]
-        }], ctorParameters: () => [{ type: StyleBuilderService }, { type: WidgetStore }], propDecorators: { widgetItem: [{
+            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container\" [class.border-bottom]=\"hasSeparator\">\r\n  <div class=\"widget-content\"\r\n    [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <i classs=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n    <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n    <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n    class=\"mb-0 text-color-secondary mr-3 key-field-wrapper w-50\">{{ widgetItem?.key }}</p>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-50 flex align-items-center justify-content-end\">\r\n      <i classs=\"valueIconClass\" [ngStyle]=\"valueIconStyle\"></i>\r\n      <p class=\"key-field-wrapper\">\r\n        <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n         <a\r\n           class=\"cursor-pointer\"\r\n           [ngStyle]=\"fieldValueStyle\"\r\n           (click)=\"handleDynamicEvent(widget.recordId)\"\r\n         >\r\n           {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n         </a>\r\n        </ng-container>\r\n\r\n        <ng-template #notEvent>\r\n          <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n            <a\r\n              class=\"cursor-pointer\"\r\n              [ngStyle]=\"fieldValueStyle\"\r\n              (click)=\"handleWidgetItemClick(widgetItem)\"\r\n            >\r\n              {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n            </a>\r\n          </ng-container>\r\n        </ng-template>\r\n\r\n        <ng-template #plainText>\r\n          <span [ngStyle]=\"fieldValueStyle\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </span>\r\n        </ng-template>\r\n      </p>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-bottom{border-bottom:1px solid rgba(76,98,146,.1)}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:auto 1fr;row-gap:.5rem;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: StyleBuilderService }, { type: WidgetStore }, { type: WidgetQuery }], propDecorators: { widgetItem: [{
                 type: Input
             }], widget: [{
                 type: Input
@@ -4309,10 +4362,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Input
             }] } });
 
-/**
- * Widget Container Component
- */
-class WidgetContainerComponent {
+class WidgetMainComponent {
+    styleBulderService;
+    constructor(styleBulderService) {
+        this.styleBulderService = styleBulderService;
+    }
+    widget;
+    index;
+    widgetStyle = {};
+    ngOnChanges() {
+        if (this.widget && this.widget.style) {
+            this.widgetStyle = this.styleBulderService.getStyle(this.widget.style);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMainComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetMainComponent, isStandalone: false, selector: "lib-widget-main", inputs: { widget: "widget", index: "index" }, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"widgetStyle\" class=\"widget-container-wrapper pl-1\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper pl-1\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div class=\"widget-content-wrapper mt-3 py-3\">\r\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetHeaderComponent, selector: "lib-widget-header", inputs: ["widget"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetBodyComponent, selector: "lib-widget-body", inputs: ["widget"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMainComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-widget-main', standalone: false, template: "<div [ngStyle]=\"widgetStyle\" class=\"widget-container-wrapper pl-1\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper pl-1\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div class=\"widget-content-wrapper mt-3 py-3\">\r\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+        }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class WidgetMenuComponent {
     widgetService;
     activatedRoute;
     widgetQuery;
@@ -4330,15 +4405,13 @@ class WidgetContainerComponent {
     subscriptions = [];
     isLoading = true;
     onViewAllDetails = new EventEmitter();
-    onViewAllProperties = new EventEmitter();
+    onWidgetEventClick = new EventEmitter();
     onWidgetItemClick = new EventEmitter();
-    onDirectDebitClick = new EventEmitter();
     isSidebarVisible = SHARED.FALSE;
     offerWidgetData;
     valuationWidgetData;
-    progressChartData;
     ngOnInit() {
-        this.handleEventFromPropertyDetails();
+        this.handleEventClickDetails();
         this.handleOnViewAllDetails();
         const queueId = localStorage.getItem(SHARED.selectedQueue);
         const recordId = this.activatedRoute.snapshot.params[SHARED.ID];
@@ -4365,12 +4438,12 @@ class WidgetContainerComponent {
             console.error('Error in getOnWidgetItemClick subscription:', error);
         });
     }
-    handleEventFromPropertyDetails() {
-        this.widgetQuery.getViewPropertyDetails()
+    handleEventClickDetails() {
+        this.widgetQuery.getEventClickDetails()
             .pipe(takeUntil(this.destroy$))
             .subscribe((res) => {
             if (res) {
-                this.onViewAllProperties.next(res);
+                this.onWidgetEventClick.next(res);
             }
         });
     }
@@ -4407,7 +4480,7 @@ class WidgetContainerComponent {
     }
     ngOnChanges(changes) {
         if (!this.isSidebarVisible) {
-            this.widgetStore.setOnViewPropertyDetails({ propertyId: null, isDailogShow: false });
+            this.widgetStore.setEventClickDetails({ recordId: null, isDailogShow: false });
         }
     }
     ngOnDestroy() {
@@ -4417,31 +4490,27 @@ class WidgetContainerComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetService }, { token: i3$4.ActivatedRoute }, { token: WidgetQuery }, { token: WidgetStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", progressChartData: "progressChartData" }, outputs: { onViewAllDetails: "onViewAllDetails", onViewAllProperties: "onViewAllProperties", onWidgetItemClick: "onWidgetItemClick", onDirectDebitClick: "onDirectDebitClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n    <!-- Loading state -->\r\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n    </ng-container>\r\n\r\n    <!-- Content after API call -->\r\n    <ng-template #widgetContent>\r\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\r\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n        <div class=\"widget-container-wrapper pl-1\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\">\r\n          <lib-widget-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-header>\r\n          <div class=\"widget-content-wrapper mt-3 py-3\">\r\n            <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n            <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n          </div>\r\n        </div>\r\n        </ng-container>\r\n    <ng-container *ngIf=\"offerWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"valuationWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- No widget configured state -->\r\n      <ng-template #noWidgets>\r\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n      </ng-template>\r\n    </ng-template>\r\n    </div>\r\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding-bottom:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }, { kind: "component", type: WidgetHeaderComponent, selector: "lib-widget-header", inputs: ["widget", "progressChartData"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetBodyComponent, selector: "lib-widget-body", inputs: ["widget"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMenuComponent, deps: [{ token: WidgetService }, { token: i3$4.ActivatedRoute }, { token: WidgetQuery }, { token: WidgetStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetMenuComponent, isStandalone: false, selector: "lib-widget-menu", inputs: { isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n    <!-- Loading state -->\r\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n    </ng-container>\r\n\r\n    <!-- Content after API call -->\r\n    <ng-template #widgetContent>\r\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\r\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"offerWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"valuationWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- No widget configured state -->\r\n      <ng-template #noWidgets>\r\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n      </ng-template>\r\n    </ng-template>\r\n    </div>\r\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-container', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n    <!-- Loading state -->\r\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n    </ng-container>\r\n\r\n    <!-- Content after API call -->\r\n    <ng-template #widgetContent>\r\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\r\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n        <div class=\"widget-container-wrapper pl-1\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\">\r\n          <lib-widget-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-header>\r\n          <div class=\"widget-content-wrapper mt-3 py-3\">\r\n            <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n            <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n          </div>\r\n        </div>\r\n        </ng-container>\r\n    <ng-container *ngIf=\"offerWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"valuationWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- No widget configured state -->\r\n      <ng-template #noWidgets>\r\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n      </ng-template>\r\n    </ng-template>\r\n    </div>\r\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding-bottom:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+            args: [{ selector: 'lib-widget-menu', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n    <!-- Loading state -->\r\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n    </ng-container>\r\n\r\n    <!-- Content after API call -->\r\n    <ng-template #widgetContent>\r\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\r\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"offerWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n    <ng-container *ngIf=\"valuationWidgetData\">\r\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\r\n      </ng-container>\r\n      </ng-container>\r\n\r\n      <!-- No widget configured state -->\r\n      <ng-template #noWidgets>\r\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n      </ng-template>\r\n    </ng-template>\r\n    </div>\r\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: i3$4.ActivatedRoute }, { type: WidgetQuery }, { type: WidgetStore }, { type: i0.ChangeDetectorRef }], propDecorators: { onViewAllDetails: [{
                 type: Output
-            }], onViewAllProperties: [{
+            }], onWidgetEventClick: [{
                 type: Output
             }], onWidgetItemClick: [{
                 type: Output
-            }], onDirectDebitClick: [{
-                type: Output
             }], isSidebarVisible: [{
                 type: Input
             }], offerWidgetData: [{
                 type: Input
             }], valuationWidgetData: [{
                 type: Input
-            }], progressChartData: [{
-                type: Input
             }] } });
 
-class WidgetLayoutComponent {
+class WidgetRowTileComponent {
     widgetService;
     destroy$ = new Subject();
     widgets;
@@ -4468,28 +4537,77 @@ class WidgetLayoutComponent {
         this.destroy$.unsubscribe();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetLayoutComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetLayoutComponent, isStandalone: false, selector: "lib-widget-layout", inputs: { recordId: "recordId", widgetName: "widgetName" }, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n      <!-- Loading state -->\r\n      <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n        <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n      </ng-container>\r\n  \r\n      <!-- Content after API call -->\r\n      <ng-template #widgetContent>\r\n        <ng-container *ngIf=\"(widgets && widgets.length > 0); else noWidgets\">\r\n           <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n            <div class=\"widget-container-wrapper pl-1\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\">\r\n          <div class=\"widget-container-wrapper pl-1\">\r\n            <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n              <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n            </div>\r\n          </div>\r\n          </div>\r\n          </ng-container>\r\n        </ng-container>\r\n  \r\n        <!-- No widget configured state -->\r\n        <ng-template #noWidgets>\r\n          <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n        </ng-template>\r\n      </ng-template>\r\n      </div>\r\n  </p-card>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetHeaderComponent, selector: "lib-widget-header", inputs: ["widget", "progressChartData"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetBodyComponent, selector: "lib-widget-body", inputs: ["widget"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetRowTileComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetRowTileComponent, isStandalone: false, selector: "lib-widget-row-tile", inputs: { recordId: "recordId", widgetName: "widgetName" }, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n      <!-- Loading state -->\r\n      <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n        <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n      </ng-container>\r\n  \r\n      <!-- Content after API call -->\r\n      <ng-template #widgetContent>\r\n        <ng-container *ngIf=\"(widgets && widgets.length > 0); else noWidgets\">\r\n           <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n            <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\r\n          </ng-container>\r\n        </ng-container>\r\n  \r\n        <!-- No widget configured state -->\r\n        <ng-template #noWidgets>\r\n          <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n        </ng-template>\r\n      </ng-template>\r\n      </div>\r\n  </p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetRowTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-layout', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n      <!-- Loading state -->\r\n      <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n        <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n      </ng-container>\r\n  \r\n      <!-- Content after API call -->\r\n      <ng-template #widgetContent>\r\n        <ng-container *ngIf=\"(widgets && widgets.length > 0); else noWidgets\">\r\n           <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n            <div class=\"widget-container-wrapper pl-1\" [ngClass]=\"i !== 0 ? 'mt-4' : ''\">\r\n          <div class=\"widget-container-wrapper pl-1\">\r\n            <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-body [widget]=\"widget\"></lib-widget-body>\r\n              <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\r\n            </div>\r\n          </div>\r\n          </div>\r\n          </ng-container>\r\n        </ng-container>\r\n  \r\n        <!-- No widget configured state -->\r\n        <ng-template #noWidgets>\r\n          <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n        </ng-template>\r\n      </ng-template>\r\n      </div>\r\n  </p-card>" }]
+            args: [{ selector: 'lib-widget-row-tile', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper custom-scroll pt-2\">\r\n      <!-- Loading state -->\r\n      <ng-container *ngIf=\"isLoading; else widgetContent\">\r\n        <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\r\n      </ng-container>\r\n  \r\n      <!-- Content after API call -->\r\n      <ng-template #widgetContent>\r\n        <ng-container *ngIf=\"(widgets && widgets.length > 0); else noWidgets\">\r\n           <ng-container *ngFor=\"let widget of widgets; let i = index\">\r\n            <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\r\n          </ng-container>\r\n        </ng-container>\r\n  \r\n        <!-- No widget configured state -->\r\n        <ng-template #noWidgets>\r\n          <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\r\n        </ng-template>\r\n      </ng-template>\r\n      </div>\r\n  </p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: WidgetService }], propDecorators: { recordId: [{
                 type: Input
             }], widgetName: [{
                 type: Input
             }] } });
 
+/**
+ * Widget Container Component
+ */
+class WidgetContainerComponent {
+    widgetStore;
+    constructor(widgetStore) {
+        this.widgetStore = widgetStore;
+    }
+    isMenu = false;
+    offerWidgetData;
+    valuationWidgetData;
+    onViewAllDetails = new EventEmitter();
+    onWidgetEventClick = new EventEmitter();
+    onWidgetItemClick = new EventEmitter();
+    ngOnChanges(changes) {
+        if (changes[SHARED.IS_MENU]) {
+            this.isMenu = changes[SHARED.IS_MENU].currentValue;
+            this.widgetStore.setIsMenu(this.isMenu);
+        }
+    }
+    handleViewAllDetails(event) {
+        this.onViewAllDetails.emit(event);
+    }
+    handleWidgetEventClick(event) {
+        this.onWidgetEventClick.emit(event);
+    }
+    handleWidgetItemClick(event) {
+        this.onWidgetItemClick.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetStore }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container-wrapper\">\r\n  @if(isMenu) {\r\n    <div class=\"bg-white widget-menu-container\">\r\n    <lib-widget-menu \r\n    [offerWidgetData]=\"offerWidgetData\"\r\n    [valuationWidgetData]=\"valuationWidgetData\"\r\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\r\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\r\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n    ></lib-widget-menu>\r\n    </div>\r\n  } @else {\r\n    <lib-widget-row-tile></lib-widget-row-tile>\r\n  }\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "component", type: WidgetMenuComponent, selector: "lib-widget-menu", inputs: ["isSidebarVisible", "offerWidgetData", "valuationWidgetData"], outputs: ["onViewAllDetails", "onWidgetEventClick", "onWidgetItemClick"] }, { kind: "component", type: WidgetRowTileComponent, selector: "lib-widget-row-tile", inputs: ["recordId", "widgetName"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-widget-container', standalone: false, template: "<div class=\"widget-container-wrapper\">\r\n  @if(isMenu) {\r\n    <div class=\"bg-white widget-menu-container\">\r\n    <lib-widget-menu \r\n    [offerWidgetData]=\"offerWidgetData\"\r\n    [valuationWidgetData]=\"valuationWidgetData\"\r\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\r\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\r\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\r\n    ></lib-widget-menu>\r\n    </div>\r\n  } @else {\r\n    <lib-widget-row-tile></lib-widget-row-tile>\r\n  }\r\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background:transparent;border-radius:0;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-content-wrapper{border-top:1px solid rgba(68,72,109,.1)}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:6px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+        }], ctorParameters: () => [{ type: WidgetStore }], propDecorators: { isMenu: [{
+                type: Input
+            }], offerWidgetData: [{
+                type: Input
+            }], valuationWidgetData: [{
+                type: Input
+            }], onViewAllDetails: [{
+                type: Output
+            }], onWidgetEventClick: [{
+                type: Output
+            }], onWidgetItemClick: [{
+                type: Output
+            }] } });
+
 class WidgetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: WidgetModule, declarations: [WidgetContainerComponent, WidgetHeaderComponent, WidgetFooterComponent, WidgetBodyComponent, WidgetItemComponent, WidgetLayoutComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: WidgetModule, declarations: [WidgetContainerComponent, WidgetMenuComponent, WidgetMainComponent, WidgetHeaderComponent, WidgetFooterComponent, WidgetBodyComponent, WidgetItemComponent, WidgetRowTileComponent], imports: [CommonModule,
             ButtonModule,
             DividerModule,
             CardModule,
             SharedModule,
             SidebarModule,
             TimelineModule,
-            ChartModule], exports: [WidgetContainerComponent, WidgetLayoutComponent] });
+            ChartModule], exports: [WidgetContainerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetModule, imports: [CommonModule,
             ButtonModule,
             DividerModule,
@@ -4502,7 +4620,7 @@ class WidgetModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [WidgetContainerComponent, WidgetHeaderComponent, WidgetFooterComponent, WidgetBodyComponent, WidgetItemComponent, WidgetLayoutComponent],
+                    declarations: [WidgetContainerComponent, WidgetMenuComponent, WidgetMainComponent, WidgetHeaderComponent, WidgetFooterComponent, WidgetBodyComponent, WidgetItemComponent, WidgetRowTileComponent],
                     imports: [
                         CommonModule,
                         ButtonModule,
@@ -4513,7 +4631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                         TimelineModule,
                         ChartModule
                     ],
-                    exports: [WidgetContainerComponent, WidgetLayoutComponent]
+                    exports: [WidgetContainerComponent]
                 }]
         }] });
 
@@ -4525,5 +4643,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionAdminModule, AdminActionFormComponent, AdminActionListComponent, ApiAdminFormComponent, ApiAdminListComponent, ApiAdminModule, DdAdminFormComponent, DdAdminListComponent, DdAdminModule, FormStateService, QWWidgetAdminModule, QueueAdminFormComponent, QueueAdminListComponent, QueueAdminModule, QueueApplicationListComponent, TemplateAdminFormComponent, TemplateAdminListComponent, TemplateAdminModule, WidgetAdminFormComponent, WidgetAdminListComponent, WidgetContainerComponent, WidgetLayoutComponent, WidgetModule };
+export { ActionAdminModule, AdminActionFormComponent, AdminActionListComponent, ApiAdminFormComponent, ApiAdminListComponent, ApiAdminModule, DdAdminFormComponent, DdAdminListComponent, DdAdminModule, FormStateService, QWWidgetAdminModule, QueueAdminFormComponent, QueueAdminListComponent, QueueAdminModule, QueueApplicationListComponent, TemplateAdminFormComponent, TemplateAdminListComponent, TemplateAdminModule, WidgetAdminFormComponent, WidgetAdminListComponent, WidgetContainerComponent, WidgetModule };
 //# sourceMappingURL=cat-qw-lib.mjs.map