cat-qw-lib 0.57.0 → 0.57.1

package/fesm2022/cat-qw-lib.mjs

@@ -4306,11 +4306,15 @@ class WidgetContainerComponent {
     widgets = [];
     subscriptions = [];
     isLoading = true;
+    queueId;
+    recordId;
     onViewAllDetails = new EventEmitter();
     onViewAllProperties = new EventEmitter();
     onWidgetItemClick = new EventEmitter();
     getWidgetData = new EventEmitter();
     onDirectDebitClick = new EventEmitter();
+    onWidgetLoaded = new EventEmitter();
+    isRouteChanged = SHARED.EMPTY;
     isSidebarVisible = SHARED.FALSE;
     offerWidgetData;
     valuationWidgetData;
@@ -4318,18 +4322,18 @@ class WidgetContainerComponent {
     ngOnInit() {
         this.handleEventFromPropertyDetails();
         this.handleOnViewAllDetails();
-        const queueId = localStorage.getItem(SHARED.selectedQueue);
-        const recordId = this.activatedRoute.snapshot.params[SHARED.ID];
-        if (!queueId || !recordId) {
+        this.queueId = localStorage.getItem(SHARED.selectedQueue);
+        this.recordId = this.activatedRoute.snapshot.params[SHARED.ID];
+        if (!this.queueId || !this.recordId) {
             console.error(ERROR.ERROR_MISSING_PARAMETERS, {
-                queueId: queueId || SHARED.MISSING_QUEUE_ID,
-                recordId: recordId || SHARED.MISSING_RECORD_ID
+                queueId: this.queueId || SHARED.MISSING_QUEUE_ID,
+                recordId: this.recordId || SHARED.MISSING_RECORD_ID
             });
             this.isLoading = false;
             return;
         }
-        this.getWidgetFromCacheList(queueId, recordId);
-        this.getAllWidgetList(queueId, recordId);
+        this.getWidgetFromCacheList(this.queueId, this.recordId);
+        this.getAllWidgetList(this.queueId, this.recordId);
         this.handleGetWidgetData();
         this.handleWidgetItemClick();
     }
@@ -4378,8 +4382,10 @@ class WidgetContainerComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((res) => {
             this.widgets = res.sort((a, b) => a.order - b.order);
+            this.onWidgetLoaded.emit(this.widgets);
             this.cdr.detectChanges();
         }, (error) => {
+            this.onWidgetLoaded.emit(true);
             console.error(ERROR.ERROR_FETCHING_WIDGET_DATA, error);
             this.cdr.detectChanges();
         });
@@ -4399,16 +4405,20 @@ class WidgetContainerComponent {
         if (!this.isSidebarVisible) {
             this.widgetStore.setOnViewPropertyDetails({ propertyId: null, isDailogShow: false });
         }
+        if (changes['isRouteChanged'] && this.queueId && this.recordId) {
+            this.getAllWidgetList(this.queueId, this.recordId);
+        }
     }
     ngOnDestroy() {
         this.widgets = [];
         this.widgetStore.resetOnViewAllDetails();
+        this.onWidgetLoaded.emit(SHARED.EMPTY);
         this.subscriptions.forEach(sub => sub.unsubscribe());
         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", getWidgetData: "getWidgetData", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { 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 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: WidgetContainerComponent, decorators: [{
             type: Component,
@@ -4423,6 +4433,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
                 type: Output
             }], onDirectDebitClick: [{
                 type: Output
+            }], onWidgetLoaded: [{
+                type: Output
+            }], isRouteChanged: [{
+                type: Input
             }], isSidebarVisible: [{
                 type: Input
             }], offerWidgetData: [{