cat-qw-lib 1.0.16 → 1.0.17

package/fesm2022/cat-qw-lib.mjs

@@ -4592,11 +4592,11 @@ class WidgetHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetHeaderComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-12 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\">\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}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetHeaderComponent, isStandalone: false, selector: "lib-widget-header", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i classs=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\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:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\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.2.5", ngImport: i0, type: WidgetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3\">\r\n  <div class=\"col-12 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\">\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}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"] }]
+            args: [{ selector: 'lib-widget-header', standalone: false, template: "<div *ngIf=\"widget.header || widget.subHeader\" class=\"grid m-0 align-items-center justify-content-between px-3 pt-3\">\r\n  <div class=\"col-12 p-0\">\r\n    <div class=\"flex align-items-center\">\r\n      <i classs=\"headerIconClass\" [ngStyle]=\"headerIconStyle\"></i>\r\n      <h3 [ngStyle]=\"headerStyle\" class=\"m-0 application-title-wrapper\">\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:16px;font-weight:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 1200px) and (max-width: 1800px){.application-title-wrapper{font-size:14px}}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }] } });
@@ -4700,6 +4700,9 @@ class WidgetItemComponent {
         this.widgetStore.setOnWidgetItemClick(null);
         this.widgetStore.setEventClickDetails({ recordId: null, isDailogShow: false });
     }
+    isDate(value) {
+        return !isNaN(Date.parse(value));
+    }
     handleWidgetItemClick(widgetItem) {
         const updatedItem = { ...widgetItem };
         const applicantId = this.widget.recordId;
@@ -4730,11 +4733,11 @@ class WidgetItemComponent {
         this.widgetStore.setOnWidgetItemClick(updatedItem);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container overflow-hidden\" [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    <div class=\"flex align-items-center justify-content-between\" [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n        class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"check-icon-container flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n     [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></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]=\"mergedValueStyle\"\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]=\"mergedValueStyle\"\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          @if(widgetItem.isHtml) {\r\n          <div [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"></div>\r\n          }\r\n          @else {\r\n          <span [ngStyle]=\"fieldValueStyle\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </span>\r\n          }\r\n\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{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.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)}.check-icon-wrapper{border-radius:50%;background:#22c55e;color:#fff;padding:4px}.key-title-wrapper{width:100%}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}@media screen and (min-width: 1200px) and (max-width: 1800px){.key-title-wrapper{width:66.6667%!important}.check-icon-container{width:33.3333%!important;margin-right:4px}}\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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\"\r\n    [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n          <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div> \r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n        <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n         <a\r\n           class=\"cursor-pointer key-field-wrapper\"\r\n           [ngStyle]=\"mergedValueStyle\"\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 key-field-wrapper\"\r\n              [ngStyle]=\"mergedValueStyle\"\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          @if(widgetItem.isHtml) {\r\n          <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\" [ngStyle]=\"mergedValueStyle\"></div>\r\n          }\r\n          @else {\r\n          <p class=\"mb-0\" [ngStyle]=\"mergedValueStyle\">\r\n            <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n              {{ widgetItem.value | date: 'dd/MM/yyyy' }}\r\n            </ng-container>\r\n            <ng-template #normalText>\r\n              {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n            </ng-template>\r\n          </p>\r\n          }\r\n\r\n        </ng-template>\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{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.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-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\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"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container overflow-hidden\" [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    <div class=\"flex align-items-center justify-content-between\" [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n        class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"check-icon-container flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <i class=\"pi pi-check check-icon-wrapper\"></i>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n     [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></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]=\"mergedValueStyle\"\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]=\"mergedValueStyle\"\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          @if(widgetItem.isHtml) {\r\n          <div [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"></div>\r\n          }\r\n          @else {\r\n          <span [ngStyle]=\"fieldValueStyle\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </span>\r\n          }\r\n\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{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.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)}.check-icon-wrapper{border-radius:50%;background:#22c55e;color:#fff;padding:4px}.key-title-wrapper{width:100%}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}@media screen and (min-width: 1200px) and (max-width: 1800px){.key-title-wrapper{width:66.6667%!important}.check-icon-container{width:33.3333%!important;margin-right:4px}}\n"] }]
+            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\"\r\n    [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n          <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div> \r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n        <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n         <a\r\n           class=\"cursor-pointer key-field-wrapper\"\r\n           [ngStyle]=\"mergedValueStyle\"\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 key-field-wrapper\"\r\n              [ngStyle]=\"mergedValueStyle\"\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          @if(widgetItem.isHtml) {\r\n          <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\" [ngStyle]=\"mergedValueStyle\"></div>\r\n          }\r\n          @else {\r\n          <p class=\"mb-0\" [ngStyle]=\"mergedValueStyle\">\r\n            <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n              {{ widgetItem.value | date: 'dd/MM/yyyy' }}\r\n            </ng-container>\r\n            <ng-template #normalText>\r\n              {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n            </ng-template>\r\n          </p>\r\n          }\r\n\r\n        </ng-template>\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{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.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-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }, { type: WidgetStore }, { type: WidgetQuery }], propDecorators: { widgetItem: [{
                 type: Input
             }], widget: [{
@@ -4768,11 +4771,11 @@ class WidgetBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetBodyComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetBodyComponent, isStandalone: false, selector: "lib-widget-body", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"[widget.style.width, widget.style.width === 'col-12' ? 'p-0' : '']\">\r\n        @if(!dataItem.isHidden){\r\n        <div class=\"h-full\" [ngStyle]=\"widgetItemStyle[i]\" \r\n        [ngClass]=\"{\r\n            'widget-confirm-wrapper': isConfirmed[i]\r\n        }\">\r\n            <div class=\"px-3 widget-wrapper\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:6px 0}.widget-confirm-wrapper{background-color:#e8fbee!important;border:1px solid #22C55E!important}.vulnerability-title-wrapper{background:#fb392d36}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetItemComponent, selector: "lib-widget-item", inputs: ["widgetItem", "widget", "application"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetBodyComponent, isStandalone: false, selector: "lib-widget-body", inputs: { widget: "widget" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"[widget.style.width, widget.style.width === 'col-12' ? 'p-0' : '']\">\r\n        @if(!dataItem.isHidden){\r\n        <div class=\"h-full\" [ngStyle]=\"widgetItemStyle[i]\" \r\n        [ngClass]=\"{\r\n            'widget-confirm-wrapper': isConfirmed[i]\r\n        }\">\r\n            <div>\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-confirm-wrapper{background-color:#e8fbee!important;border:1px solid #22C55E!important}.vulnerability-title-wrapper{background:#fb392d36}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetItemComponent, selector: "lib-widget-item", inputs: ["widgetItem", "widget", "application"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-body', standalone: false, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"[widget.style.width, widget.style.width === 'col-12' ? 'p-0' : '']\">\r\n        @if(!dataItem.isHidden){\r\n        <div class=\"h-full\" [ngStyle]=\"widgetItemStyle[i]\" \r\n        [ngClass]=\"{\r\n            'widget-confirm-wrapper': isConfirmed[i]\r\n        }\">\r\n            <div class=\"px-3 widget-wrapper\">\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-wrapper{padding:6px 0}.widget-confirm-wrapper{background-color:#e8fbee!important;border:1px solid #22C55E!important}.vulnerability-title-wrapper{background:#fb392d36}\n"] }]
+            args: [{ selector: 'lib-widget-body', standalone: false, template: "<div class=\"widget-body-container grid m-0\">\r\n    <div *ngFor=\"let dataItem of widget?.dataItems || []; let i = index\" [ngClass]=\"[widget.style.width, widget.style.width === 'col-12' ? 'p-0' : '']\">\r\n        @if(!dataItem.isHidden){\r\n        <div class=\"h-full\" [ngStyle]=\"widgetItemStyle[i]\" \r\n        [ngClass]=\"{\r\n            'widget-confirm-wrapper': isConfirmed[i]\r\n        }\">\r\n            <div>\r\n                <lib-widget-item [widgetItem]=\"dataItem\" [widget]=\"widget\"></lib-widget-item>\r\n            </div>\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".widget-item-wrapper{border-bottom:1px solid rgba(68,72,109,.1)}.widget-confirm-wrapper{background-color:#e8fbee!important;border:1px solid #22C55E!important}.vulnerability-title-wrapper{background:#fb392d36}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }] } });
@@ -4798,11 +4801,11 @@ class WidgetMainComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMainComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMainComponent, isStandalone: false, selector: "lib-widget-main", inputs: { widget: "widget", index: "index" }, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper mt-3' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"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-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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMainComponent, isStandalone: false, selector: "lib-widget-main", inputs: { widget: "widget", index: "index" }, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"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-color:var(--surface-0)!important;border-radius:10px;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-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.2.5", ngImport: i0, type: WidgetMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-main', standalone: false, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper mt-3' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"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-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"] }]
+            args: [{ selector: 'lib-widget-main', standalone: false, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper\" [ngClass]=\"index !== 0 ? 'mt-4' : ''\">\r\n  <div class=\"widget-container-wrapper\">\r\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\r\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"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-color:var(--surface-0)!important;border-radius:10px;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-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: [{
@@ -4967,11 +4970,11 @@ class WidgetMenuComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", 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.2.5", 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-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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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-color:var(--surface-0)!important;border-radius:10px;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-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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuComponent, decorators: [{
             type: Component,
-            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-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"] }]
+            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-color:var(--surface-0)!important;border-radius:10px;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-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
             }], onWidgetEventClick: [{
@@ -5024,11 +5027,11 @@ class WidgetRowTileComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetRowTileComponent, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetRowTileComponent, isStandalone: false, selector: "lib-widget-row-tile", inputs: { recordId: "recordId", widgetName: "widgetName", onWidgetUpdate: "onWidgetUpdate" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper\">\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-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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetRowTileComponent, isStandalone: false, selector: "lib-widget-row-tile", inputs: { recordId: "recordId", widgetName: "widgetName", onWidgetUpdate: "onWidgetUpdate" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper\">\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-color:var(--surface-0)!important;border-radius:10px;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-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$2.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.2.5", ngImport: i0, type: WidgetRowTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-row-tile', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper\">\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-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"] }]
+            args: [{ selector: 'lib-widget-row-tile', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper\">\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-color:var(--surface-0)!important;border-radius:10px;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-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: [{
@@ -5070,11 +5073,11 @@ class WidgetContainerComponent {
         this.onWidgetItemClick.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate" }, 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    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      ></lib-widget-row-tile>\r\n    </div>\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-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", "onWidgetUpdate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate" }, 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    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      ></lib-widget-row-tile>\r\n    </div>\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-color:var(--surface-0)!important;border-radius:10px;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-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", "onWidgetUpdate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      ></lib-widget-row-tile>\r\n    </div>\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-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"] }]
+            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    <div class=\"bg-white widget-menu-container\">\r\n      <lib-widget-row-tile\r\n      [recordId]=\"recordId\"\r\n      [widgetName]=\"widgetName\"\r\n      [onWidgetUpdate]=\"onWidgetUpdate\"\r\n      ></lib-widget-row-tile>\r\n    </div>\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-color:var(--surface-0)!important;border-radius:10px;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-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: [{
@@ -5099,11 +5102,11 @@ class WidgetMenuHeaderComponent {
     widget;
     progressChartData;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetMenuHeaderComponent, isStandalone: false, selector: "lib-widget-menu-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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetMenuHeaderComponent, isStandalone: false, selector: "lib-widget-menu-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:600}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-menu-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"] }]
+            args: [{ selector: 'lib-widget-menu-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:600}.chart-container{display:flex;flex-direction:column;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { widget: [{
                 type: Input
             }], progressChartData: [{
@@ -5323,11 +5326,11 @@ class WidgetMenuContainerComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuContainerComponent, 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.2.5", type: WidgetMenuContainerComponent, isStandalone: false, selector: "lib-widget-menu-container", inputs: { widgetName: "widgetName", recordId: "recordId", isRouteChanged: "isRouteChanged", isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", progressChartData: "progressChartData" }, outputs: { onViewAllDetails: "onViewAllDetails", onViewAllProperties: "onViewAllProperties", onWidgetItemClick: "onWidgetItemClick", getWidgetData: "getWidgetData", onDirectDebitClick: "onDirectDebitClick", onWidgetLoaded: "onWidgetLoaded" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper 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-menu-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-menu-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-menu-body [widget]=\"widget\"></lib-widget-menu-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>\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 .p-card{box-shadow:none;background:transparent!important;border-radius:0;box-shadow:none!important}::ng-deep .widget-block-wrapper .p-card-body{padding:0}::ng-deep .widget-block-wrapper .p-card-content{padding-bottom:0}.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}: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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetMenuHeaderComponent, selector: "lib-widget-menu-header", inputs: ["widget", "progressChartData"] }, { kind: "component", type: WidgetMenuBodyComponent, selector: "lib-widget-menu-body", inputs: ["widget"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMenuContainerComponent, isStandalone: false, selector: "lib-widget-menu-container", inputs: { widgetName: "widgetName", recordId: "recordId", isRouteChanged: "isRouteChanged", isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", progressChartData: "progressChartData" }, outputs: { onViewAllDetails: "onViewAllDetails", onViewAllProperties: "onViewAllProperties", onWidgetItemClick: "onWidgetItemClick", getWidgetData: "getWidgetData", onDirectDebitClick: "onDirectDebitClick", onWidgetLoaded: "onWidgetLoaded" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper 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-menu-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-menu-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-menu-body [widget]=\"widget\"></lib-widget-menu-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>\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}.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}: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$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetMenuHeaderComponent, selector: "lib-widget-menu-header", inputs: ["widget", "progressChartData"] }, { kind: "component", type: WidgetMenuBodyComponent, selector: "lib-widget-menu-body", inputs: ["widget"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-menu-container', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper 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-menu-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-menu-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-menu-body [widget]=\"widget\"></lib-widget-menu-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>\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 .p-card{box-shadow:none;background:transparent!important;border-radius:0;box-shadow:none!important}::ng-deep .widget-block-wrapper .p-card-body{padding:0}::ng-deep .widget-block-wrapper .p-card-content{padding-bottom:0}.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}: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-container', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\r\n    <div class=\"widget-section-wrapper 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-menu-header [widget]=\"widget\" [progressChartData]=\"progressChartData\"></lib-widget-menu-header>\r\n            <div class=\"widget-content-wrapper mt-3 py-3\">\r\n              <lib-widget-menu-body [widget]=\"widget\"></lib-widget-menu-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>\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}.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}: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: { widgetName: [{
                 type: Input
             }], recordId: [{