npm - ax-common-ui-lib - Versions diffs - 1.0.1-beta.34-testing → 1.0.1-beta.34-testing2 - Mend

ax-common-ui-lib 1.0.1-beta.34-testing → 1.0.1-beta.34-testing2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/fesm2020/ax-common-ui-lib.mjs CHANGED Viewed

@@ -82,7 +82,7 @@ import * as i11$2 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i2$4 from '@agm/core';
 import { AgmCoreModule } from '@agm/core';
-import * as i6$2 from '@agm/snazzy-info-window';
+import * as i4$3 from '@agm/snazzy-info-window';
 import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
 import * as i3$2 from '@angular/flex-layout/extended';
 import * as i5 from '@angular/material/card';
@@ -811,6 +811,8 @@ class IconsModule {
         this._matIconRegistry.addSvgIcon('customize_icon', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/customize-icon.svg'));
         this._matIconRegistry.addSvgIcon('use_icon', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/use-icon.svg'));
         this._matIconRegistry.addSvgIcon('build_icon', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/build-icon.svg'));
+        this._matIconRegistry.addSvgIcon('android_icon', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/android.svg'));
+        this._matIconRegistry.addSvgIcon('apple_icon', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/apple.svg'));
     }
 }
 IconsModule.ɵfac = function IconsModule_Factory(t) { return new (t || IconsModule)(i0.ɵɵinject(i1$1.DomSanitizer), i0.ɵɵinject(i2$1.MatIconRegistry)); };
@@ -3453,7 +3455,7 @@ class AttributesDto {
     }
 }
-const _c0$17 = ["multiSelectList"];
+const _c0$18 = ["multiSelectList"];
 class CommonFilterComponent {
     /**
      * Constructor
@@ -3734,7 +3736,7 @@ class CommonFilterComponent {
 }
 CommonFilterComponent.ɵfac = function CommonFilterComponent_Factory(t) { return new (t || CommonFilterComponent)(i0.ɵɵdirectiveInject(CommonFilterService)); };
 CommonFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommonFilterComponent, selectors: [["lib-common-filter"]], viewQuery: function CommonFilterComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$17, 5);
+        i0.ɵɵviewQuery(_c0$18, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectElem = _t.first);
@@ -3775,7 +3777,7 @@ CommonFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Commo
             type: Output
         }] }); })();
-const _c0$16 = ["searchBox"];
+const _c0$17 = ["searchBox"];
 function AxoSearchBarComponent_mat_icon_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-icon", 6);
@@ -3817,7 +3819,7 @@ class AxoSearchBarComponent {
 }
 AxoSearchBarComponent.ɵfac = function AxoSearchBarComponent_Factory(t) { return new (t || AxoSearchBarComponent)(); };
 AxoSearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AxoSearchBarComponent, selectors: [["axo-search-bar"]], viewQuery: function AxoSearchBarComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$16, 5);
+        i0.ɵɵviewQuery(_c0$17, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchElement = _t.first);
@@ -5697,7 +5699,7 @@ function CalenderFilterComponent_div_26_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, " Please enter valid date ");
     i0.ɵɵelementEnd();
 } }
-const _c0$15 = function (a0) { return { "mat-form-field-invalid": a0 }; };
+const _c0$16 = function (a0) { return { "mat-form-field-invalid": a0 }; };
 function CalenderFilterComponent_div_26_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 22);
@@ -5720,7 +5722,7 @@ function CalenderFilterComponent_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("formGroup", ctx_r4.dateRange);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("readonly", true)("rangePicker", _r16)("ngClass", i0.ɵɵpureFunction1(6, _c0$15, ctx_r4.isSubmitButton));
+    i0.ɵɵproperty("readonly", true)("rangePicker", _r16)("ngClass", i0.ɵɵpureFunction1(6, _c0$16, ctx_r4.isSubmitButton));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("for", _r16);
     i0.ɵɵadvance(3);
@@ -6024,7 +6026,7 @@ function DateTimeFilterComponent_div_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("for", _r12);
 } }
-const _c0$14 = function () { return { applyLabel: "ok", format: "MM/DD/YYYY HH:mm" }; };
+const _c0$15 = function () { return { applyLabel: "ok", format: "MM/DD/YYYY HH:mm" }; };
 function DateTimeFilterComponent_div_26_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 22);
@@ -6039,7 +6041,7 @@ function DateTimeFilterComponent_div_26_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("timePicker", true)("readonly", true)("timePickerSeconds", false)("timePickerIncrement", 1)("timePicker24Hour", true)("locale", i0.ɵɵpureFunction0(8, _c0$14))("singleDatePicker", false)("ngModel", ctx_r4.dateRangeValue.value);
+    i0.ɵɵproperty("timePicker", true)("readonly", true)("timePickerSeconds", false)("timePickerIncrement", 1)("timePicker24Hour", true)("locale", i0.ɵɵpureFunction0(8, _c0$15))("singleDatePicker", false)("ngModel", ctx_r4.dateRangeValue.value);
 } }
 const dateTimeWidget = [ExpressionValueSubType.dateTime, ExpressionValueSubType.dateTimeOld, ExpressionValueSubType.timestamp];
 class DateTimeFilterComponent extends CommonFilterComponent {
@@ -6369,7 +6371,7 @@ function TimeFilterComponent_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r4.expression == null ? null : ctx_r4.expression.value == null ? null : ctx_r4.expression.value.value);
 } }
-const _c0$13 = function (a0) { return { "between_time_active": a0 }; };
+const _c0$14 = function (a0) { return { "between_time_active": a0 }; };
 class TimeFilterComponent extends CommonFilterComponent {
     constructor(_commonFilterService) {
         super(_commonFilterService);
@@ -6565,7 +6567,7 @@ TimeFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimeFil
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("placeholder", ctx.displayValue)("matTooltip", ctx.toolTipValue)("matTooltipClass", "capitalize")("matMenuTriggerFor", _r1);
         i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0$13, ctx.selectedOperator === ctx.timeOperatorIndex.between));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c0$14, ctx.selectedOperator === ctx.timeOperatorIndex.between));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("value", ctx.timeOperatorIndex.greaterThanOrEqualTo)("checked", ctx.selectedOperator === ctx.timeOperatorIndex.greaterThanOrEqualTo);
         i0.ɵɵadvance(2);
@@ -6669,7 +6671,7 @@ function NumberFilterComponent_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r5.expression == null ? null : ctx_r5.expression.value == null ? null : ctx_r5.expression.value.value);
 } }
-const _c0$12 = function (a0) { return { "between_date_active": a0 }; };
+const _c0$13 = function (a0) { return { "between_date_active": a0 }; };
 class NumberFilterComponent extends CommonFilterComponent {
     constructor(_commonFilterService) {
         super(_commonFilterService);
@@ -6863,7 +6865,7 @@ NumberFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Numbe
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("placeholder", ctx.displayValue)("matTooltip", ctx.toolTipValue)("matMenuTriggerFor", _r1);
         i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c0$12, ctx.selectedOperator === ctx.numberOperatorIndex.between));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c0$13, ctx.selectedOperator === ctx.numberOperatorIndex.between));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("value", ctx.numberOperatorIndex.equalTo)("checked", ctx.selectedOperator === ctx.numberOperatorIndex.equalTo);
         i0.ɵɵadvance(2);
@@ -7125,7 +7127,13 @@ class ChoiceListFilterComponent extends CommonFilterComponent {
         this.setDisplayValue();
         this.expression.comparisonOperator = new AxOperator({ text: 'In', value: 'IN' });
         this.stringOperators = AxOperator.getStringOperator();
-        this.seriesList = this.expression.field.choices;
+        // Ensure seriesList is always an array
+        const choices = this.expression.field.choices;
+        this.seriesList = Array.isArray(choices)
+            ? choices
+            : typeof choices === 'string'
+                ? choices.split(',').map(choice => new ChoiceListOption(choice.trim()))
+                : []; // Fallback to an empty array if choices is neither
     }
     /**
      * Set expression value
@@ -7893,7 +7901,7 @@ CategoryFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cat
             type: Output
         }] }); })();
-const _c0$11 = ["filterScrollElement"];
+const _c0$12 = ["filterScrollElement"];
 function FiltersComponent_ng_container_4_ng_container_1_ng_container_1_ng_container_3_lib_calender_filter_2_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "lib-calender-filter", 18);
@@ -8478,7 +8486,7 @@ class FiltersComponent {
 }
 FiltersComponent.ɵfac = function FiltersComponent_Factory(t) { return new (t || FiltersComponent)(i0.ɵɵdirectiveInject(MultiSelectFilterService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(FiltersService), i0.ɵɵdirectiveInject(CommonFilterService)); };
 FiltersComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FiltersComponent, selectors: [["filters"]], viewQuery: function FiltersComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$11, 5, ElementRef);
+        i0.ɵɵviewQuery(_c0$12, 5, ElementRef);
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
     } if (rf & 2) {
         let _t;
@@ -10014,7 +10022,7 @@ function ReportFilterComponent_div_0_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, " Add Filter");
     i0.ɵɵelementEnd();
 } }
-const _c0$10 = function (a0) { return { "border-seperator": a0 }; };
+const _c0$11 = function (a0) { return { "border-seperator": a0 }; };
 const _c1$n = function (a0) { return { "local-filter-btn": a0 }; };
 function ReportFilterComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -10035,7 +10043,7 @@ function ReportFilterComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const _r2 = i0.ɵɵreference(5);
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$10, ctx_r0.getFiltersCount()));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$11, ctx_r0.getFiltersCount()));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("matMenuTriggerFor", _r2)("ngClass", i0.ɵɵpureFunction1(9, _c1$n, ctx_r0.scopeType.local === ctx_r0.filterScopeType));
     i0.ɵɵadvance(2);
@@ -10328,7 +10336,7 @@ function CategoriesTreeComponent_div_0_ng_container_7_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", !category_r4.isHidden);
 } }
-const _c0$$ = function (a0) { return { "field-container": a0 }; };
+const _c0$10 = function (a0) { return { "field-container": a0 }; };
 function CategoriesTreeComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1);
@@ -10347,7 +10355,7 @@ function CategoriesTreeComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     let tmp_1_0;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$$, ctx_r0.showSearchBox));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$10, ctx_r0.showSearchBox));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", (tmp_1_0 = i0.ɵɵpipeBind2(4, 3, ctx_r0.categories, ctx_r0.searchedTerm)) == null ? null : tmp_1_0.length);
     i0.ɵɵadvance(4);
@@ -10595,7 +10603,7 @@ function DataModelTreeComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, "Fields");
     i0.ɵɵelementEnd();
 } }
-const _c0$_ = function (a0) { return { "search-icon": a0 }; };
+const _c0$$ = function (a0) { return { "search-icon": a0 }; };
 function DataModelTreeComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
@@ -10605,7 +10613,7 @@ function DataModelTreeComponent_button_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$_, ctx_r1.showSearchBox))("svgIcon", "heroicons_solid:search");
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$$, ctx_r1.showSearchBox))("svgIcon", "heroicons_solid:search");
 } }
 function DataModelTreeComponent_mat_icon_7_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -11804,7 +11812,7 @@ function SelectDashboardsDialogComponent_div_13_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", ctx_r1.dashboardName.invalid && ctx_r1.dashboardName.touched);
 } }
-const _c0$Z = function (a0) { return { "active-selected": a0 }; };
+const _c0$_ = function (a0) { return { "active-selected": a0 }; };
 class SelectDashboardsDialogComponent {
     constructor(_dashboardListService, _showDashboardComponentService, _snackBar, _axoSnackBar, dialog, data, router) {
         this._dashboardListService = _dashboardListService;
@@ -11937,9 +11945,9 @@ SelectDashboardsDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(5);
-        i0.ɵɵproperty("disableRipple", true)("ngClass", i0.ɵɵpureFunction1(8, _c0$Z, ctx.showDashboard));
+        i0.ɵɵproperty("disableRipple", true)("ngClass", i0.ɵɵpureFunction1(8, _c0$_, ctx.showDashboard));
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("disableRipple", true)("ngClass", i0.ɵɵpureFunction1(10, _c0$Z, !ctx.showDashboard));
+        i0.ɵɵproperty("disableRipple", true)("ngClass", i0.ɵɵpureFunction1(10, _c0$_, !ctx.showDashboard));
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("ngIf", ctx.showDashboard);
         i0.ɵɵadvance(1);
@@ -11962,7 +11970,7 @@ SelectDashboardsDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
                 args: [MAT_DIALOG_DATA]
             }] }, { type: i2.Router }]; }, null); })();
-const _c0$Y = function (a0) { return { "delete-button": a0 }; };
+const _c0$Z = function (a0) { return { "delete-button": a0 }; };
 class ConfirmationModalComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -11976,46 +11984,43 @@ class ConfirmationModalComponent {
     }
 }
 ConfirmationModalComponent.ɵfac = function ConfirmationModalComponent_Factory(t) { return new (t || ConfirmationModalComponent)(i0.ɵɵdirectiveInject(i1$5.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
-ConfirmationModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmationModalComponent, selectors: [["comfirmation-modal"]], decls: 13, vars: 7, consts: [[1, "confirmation-popup"], [1, "flex", "justify-between", "items-start"], [1, "mb-2"], [1, "h-6", "w-6", 3, "click"], ["svgIcon", "axo_popup_close"], [1, "message-text", "mb-5"], [1, "flex", "justify-end", "gap-2"], [1, "btn", "stroke-btn", 3, "click"], ["cdkFocusInitial", "", 1, "btn", "delete-btn", 3, "ngClass", "click"]], template: function ConfirmationModalComponent_Template(rf, ctx) { if (rf & 1) {
+ConfirmationModalComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmationModalComponent, selectors: [["comfirmation-modal"]], decls: 11, vars: 7, consts: [[1, "popup-container", "confirmation-popup"], [1, "close-icon", 3, "click"], [1, "action-btn-container"], [1, "stroke-btn", 3, "click"], ["cdkFocusInitial", "", 1, "delete-btn", 3, "ngClass", "click"]], template: function ConfirmationModalComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "div", 1);
-        i0.ɵɵelementStart(2, "h1", 2);
+        i0.ɵɵelementStart(1, "button", 1);
+        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_1_listener() { return ctx.onNoClick(); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(2, "h1");
         i0.ɵɵtext(3);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "button", 3);
-        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_4_listener() { return ctx.onNoClick(); });
-        i0.ɵɵelement(5, "mat-icon", 4);
+        i0.ɵɵelementStart(4, "p");
+        i0.ɵɵtext(5);
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 2);
+        i0.ɵɵelementStart(7, "button", 3);
+        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_7_listener() { return ctx.onNoClick(); });
+        i0.ɵɵtext(8);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(6, "p", 5);
-        i0.ɵɵtext(7);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(8, "div", 6);
-        i0.ɵɵelementStart(9, "button", 7);
-        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_9_listener() { return ctx.onNoClick(); });
+        i0.ɵɵelementStart(9, "button", 4);
+        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_9_listener() { return ctx.onYesClick(); });
         i0.ɵɵtext(10);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(11, "button", 8);
-        i0.ɵɵlistener("click", function ConfirmationModalComponent_Template_button_click_11_listener() { return ctx.onYesClick(); });
-        i0.ɵɵtext(12);
-        i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate(ctx.data.title);
-        i0.ɵɵadvance(4);
+        i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(ctx.data.message);
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate(ctx.data.cancelButtonText);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$Y, ctx.data.confirmButtonType === "delete"));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$Z, ctx.data.confirmButtonType === "delete"));
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(ctx.data.confirmButtonText);
-    } }, directives: [i2$1.MatIcon, i1$3.NgClass], styles: [".confirmation-popup .delete-btn{background-color:#dc2626;color:#fff}.confirmation-popup .delete-btn:hover{background-color:#b91c1c}\n"], encapsulation: 2 });
+    } }, directives: [i1$3.NgClass], styles: [".confirmation-popup{max-width:20vw}\n", ".popup-container{min-width:20vw;min-height:fit-content;width:fit-content;height:fit-content;max-width:75vw;max-height:75vh;font-family:Inter var,Roboto;font-size:.875rem;position:relative}.popup-container h1{font-family:Inter var,Roboto!important;color:#1b2b4b;font-size:1.125rem;font-weight:500;line-height:28px;margin:0 0 1rem;text-transform:capitalize;width:fit-content}.popup-container p{color:#475467;font-weight:400;margin:0;line-height:20px}.popup-container label{display:block;color:#1b2b4b;font-weight:500;margin:0 0 .2rem}.popup-container .close-icon{height:24px;width:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M18 6L6 18M6 6L18 18%22 stroke%3D%22%23667085%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");background-position:center;background-size:100%;position:absolute;top:0;right:0}.popup-container .action-btn-container{display:flex;justify-content:right;gap:.5rem;margin:1.5rem 0 0}.popup-container input[type=text],.popup-container input[type=number],.popup-container input[type=email],.popup-container textarea{display:block;border:1px solid #D0D5DD;border-radius:.375rem;width:100%;padding:.5rem 1rem;color:#1b2b4b;resize:none}.popup-container input[type=text]::placeholder,.popup-container input[type=number]::placeholder,.popup-container input[type=email]::placeholder,.popup-container textarea::placeholder{color:#a5a5a5}.popup-container input[type=text]:focus,.popup-container input[type=number]:focus,.popup-container input[type=email]:focus,.popup-container textarea:focus{border:1px solid #6C52ED}.popup-container .err-message-container{height:14px;line-height:12px;width:100%;margin-top:2px}.popup-container .err-message-container .error-message{color:#dc2626;font-size:12px;float:right}.popup-container .invalid-input{border:1px solid #dc2626!important}.popup-container .checkbox-container{display:flex;justify-content:start;align-items:center}.popup-container .checkbox-container input[type=checkbox]{width:fit-content;margin:0 .5rem 0 0}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmationModalComponent, [{
         type: Component,
-        args: [{ selector: 'comfirmation-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"confirmation-popup\">\n  <div class=\"flex justify-between items-start\">\n    <h1 class=\"mb-2\">{{data.title}}</h1>\n    <button class=\"h-6 w-6\" (click)=\"onNoClick()\">\n      <mat-icon svgIcon=\"axo_popup_close\"></mat-icon>\n    </button>\n  </div>\n  <p class=\"message-text mb-5\">{{data.message}}</p>\n  <div class=\"flex justify-end gap-2\">\n    <button class=\"btn stroke-btn\" (click)=\"onNoClick()\">{{data.cancelButtonText}}</button>\n    <button class=\"btn delete-btn\" [ngClass]=\"{'delete-button': data.confirmButtonType === 'delete'}\"\n      (click)=\"onYesClick()\" cdkFocusInitial>{{data.confirmButtonText}}</button>\n  </div>\n</div>", styles: [".confirmation-popup .delete-btn{background-color:#dc2626;color:#fff}.confirmation-popup .delete-btn:hover{background-color:#b91c1c}\n"] }]
+        args: [{ selector: 'comfirmation-modal', encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-container confirmation-popup\">\n  <button class=\"close-icon\" (click)=\"onNoClick()\"></button>\n  <h1>{{data.title}}</h1>\n  <p>{{data.message}}</p>\n  <div class=\"action-btn-container\">\n    <button class=\"stroke-btn\" (click)=\"onNoClick()\">{{data.cancelButtonText}}</button>\n    <button class=\"delete-btn\" [ngClass]=\"{'delete-button': data.confirmButtonType === 'delete'}\" (click)=\"onYesClick()\"\n      cdkFocusInitial>{{data.confirmButtonText}}</button>\n  </div>\n</div>", styles: [".confirmation-popup{max-width:20vw}\n", ".popup-container{min-width:20vw;min-height:fit-content;width:fit-content;height:fit-content;max-width:75vw;max-height:75vh;font-family:Inter var,Roboto;font-size:.875rem;position:relative}.popup-container h1{font-family:Inter var,Roboto!important;color:#1b2b4b;font-size:1.125rem;font-weight:500;line-height:28px;margin:0 0 1rem;text-transform:capitalize;width:fit-content}.popup-container p{color:#475467;font-weight:400;margin:0;line-height:20px}.popup-container label{display:block;color:#1b2b4b;font-weight:500;margin:0 0 .2rem}.popup-container .close-icon{height:24px;width:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M18 6L6 18M6 6L18 18%22 stroke%3D%22%23667085%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");background-position:center;background-size:100%;position:absolute;top:0;right:0}.popup-container .action-btn-container{display:flex;justify-content:right;gap:.5rem;margin:1.5rem 0 0}.popup-container input[type=text],.popup-container input[type=number],.popup-container input[type=email],.popup-container textarea{display:block;border:1px solid #D0D5DD;border-radius:.375rem;width:100%;padding:.5rem 1rem;color:#1b2b4b;resize:none}.popup-container input[type=text]::placeholder,.popup-container input[type=number]::placeholder,.popup-container input[type=email]::placeholder,.popup-container textarea::placeholder{color:#a5a5a5}.popup-container input[type=text]:focus,.popup-container input[type=number]:focus,.popup-container input[type=email]:focus,.popup-container textarea:focus{border:1px solid #6C52ED}.popup-container .err-message-container{height:14px;line-height:12px;width:100%;margin-top:2px}.popup-container .err-message-container .error-message{color:#dc2626;font-size:12px;float:right}.popup-container .invalid-input{border:1px solid #dc2626!important}.popup-container .checkbox-container{display:flex;justify-content:start;align-items:center}.popup-container .checkbox-container input[type=checkbox]{width:fit-content;margin:0 .5rem 0 0}\n"] }]
     }], function () { return [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -12183,14 +12188,14 @@ DashboardBuilderService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token:
 function GhostLoaderComponent_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 3);
 } }
-const _c0$X = function () { return []; };
+const _c0$Y = function () { return []; };
 function GhostLoaderComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtemplate(1, GhostLoaderComponent_ng_container_1_div_1_Template, 1, 0, "div", 2);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(11));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(11));
 } }
 function GhostLoaderComponent_ng_container_2_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 9);
@@ -12211,9 +12216,9 @@ function GhostLoaderComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$Y).constructor(2));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$X).constructor(3));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$Y).constructor(3));
 } }
 function GhostLoaderComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12276,7 +12281,7 @@ function GhostLoaderComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(4));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(4));
 } }
 function GhostLoaderComponent_ng_container_8_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12300,7 +12305,7 @@ function GhostLoaderComponent_ng_container_8_ng_container_6_Template(rf, ctx) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(11));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(11));
 } }
 function GhostLoaderComponent_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12317,9 +12322,9 @@ function GhostLoaderComponent_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$X).constructor(11));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$Y).constructor(11));
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$X).constructor(8));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$Y).constructor(8));
 } }
 function GhostLoaderComponent_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12342,7 +12347,7 @@ function GhostLoaderComponent_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(4));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(4));
 } }
 function GhostLoaderComponent_ng_container_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12382,7 +12387,7 @@ function GhostLoaderComponent_ng_container_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(4));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(4));
 } }
 function GhostLoaderComponent_ng_container_14_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 57);
@@ -12397,7 +12402,7 @@ function GhostLoaderComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(15));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(15));
 } }
 function GhostLoaderComponent_ng_container_15_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 24);
@@ -12432,11 +12437,11 @@ function GhostLoaderComponent_ng_container_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$Y).constructor(2));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$X).constructor(12));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$Y).constructor(12));
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$X).constructor(12));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$Y).constructor(12));
 } }
 function GhostLoaderComponent_ng_container_16_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 24);
@@ -12482,13 +12487,13 @@ function GhostLoaderComponent_ng_container_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$Y).constructor(2));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$X).constructor(12));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$Y).constructor(12));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(6, _c1$l));
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(7, _c0$X).constructor(8));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(7, _c0$Y).constructor(8));
 } }
 function GhostLoaderComponent_ng_container_17_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 24);
@@ -12530,13 +12535,13 @@ function GhostLoaderComponent_ng_container_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$Y).constructor(2));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$X).constructor(6));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$Y).constructor(6));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(6, _c2$h));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(7, _c0$X).constructor(10));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(7, _c0$Y).constructor(10));
 } }
 function GhostLoaderComponent_ng_container_18_tr_4_td_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "td", 30);
@@ -12549,7 +12554,7 @@ function GhostLoaderComponent_ng_container_18_tr_4_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(3));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(3));
 } }
 function GhostLoaderComponent_ng_container_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12563,7 +12568,7 @@ function GhostLoaderComponent_ng_container_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(11));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(11));
 } }
 function GhostLoaderComponent_ng_container_19_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 24);
@@ -12587,9 +12592,9 @@ function GhostLoaderComponent_ng_container_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$Y).constructor(2));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$X).constructor(4));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$Y).constructor(4));
 } }
 function GhostLoaderComponent_ng_container_20_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 95);
@@ -12606,7 +12611,7 @@ function GhostLoaderComponent_ng_container_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(6));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(6));
 } }
 function GhostLoaderComponent_ng_container_21_div_1_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 106);
@@ -12662,11 +12667,11 @@ function GhostLoaderComponent_ng_container_21_div_1_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$X).constructor(3));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(3, _c0$Y).constructor(3));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$X).constructor(9));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(4, _c0$Y).constructor(9));
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$X).constructor(3));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(5, _c0$Y).constructor(3));
 } }
 function GhostLoaderComponent_ng_container_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12674,7 +12679,7 @@ function GhostLoaderComponent_ng_container_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(2));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(2));
 } }
 function GhostLoaderComponent_ng_container_22_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 107);
@@ -12707,7 +12712,7 @@ function GhostLoaderComponent_ng_container_22_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r21 = i0.ɵɵnextContext();
     i0.ɵɵadvance(9);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$X).constructor(9));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(2, _c0$Y).constructor(9));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("elementType", ctx_r21.GhostLoaderType.DataDetailLoader);
 } }
@@ -12799,7 +12804,7 @@ function GhostLoaderComponent_ng_container_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(16));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(16));
 } }
 function GhostLoaderComponent_ng_container_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -12846,7 +12851,7 @@ function GhostLoaderComponent_ng_container_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$X).constructor(3));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0$Y).constructor(3));
 } }
 class GhostLoaderComponent {
     constructor() {
@@ -13003,7 +13008,7 @@ var GhostLoaderType;
     GhostLoaderType[GhostLoaderType["FormSuggestionLoader"] = 29] = "FormSuggestionLoader";
 })(GhostLoaderType || (GhostLoaderType = {}));
-const _c0$W = ["cardChartContainer"];
+const _c0$X = ["cardChartContainer"];
 const _c1$k = ["cardBody"];
 function CardChartComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -13468,7 +13473,7 @@ class CardChartComponent {
 CardChartComponent.ɵfac = function CardChartComponent_Factory(t) { return new (t || CardChartComponent)(i0.ɵɵdirectiveInject(FieldsListService), i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(SendToDashboardService), i0.ɵɵdirectiveInject(ElementService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(DashboardBuilderService), i0.ɵɵdirectiveInject(FiltersService)); };
 CardChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardChartComponent, selectors: [["lib-card-chart"]], viewQuery: function CardChartComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
-        i0.ɵɵviewQuery(_c0$W, 5);
+        i0.ɵɵviewQuery(_c0$X, 5);
         i0.ɵɵviewQuery(_c1$k, 5);
     } if (rf & 2) {
         let _t;
@@ -13968,7 +13973,7 @@ DrillThroughService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: Dril
     }], function () { return [{ type: BreadCrumbsService }]; }, null); })();
 // External libs
-const _c0$V = ["chart"];
+const _c0$W = ["chart"];
 function LineChartComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelement(1, "app-ghost-loader", 13);
@@ -14707,7 +14712,7 @@ class LineChartComponent {
 }
 LineChartComponent.ɵfac = function LineChartComponent_Factory(t) { return new (t || LineChartComponent)(i0.ɵɵdirectiveInject(FieldsListService), i0.ɵɵdirectiveInject(SendToDashboardService), i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(ElementService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(DashboardBuilderService), i0.ɵɵdirectiveInject(DrillThroughService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(FiltersService)); };
 LineChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["lib-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$V, 5);
+        i0.ɵɵviewQuery(_c0$W, 5);
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
     } if (rf & 2) {
         let _t;
@@ -14907,7 +14912,7 @@ function PieChartComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("diameter", _r0.offsetHeight <= _r0.offsetWidth ? _r0.offsetHeight : _r0.offsetWidth)("elementType", ctx_r1.GhostLoaderType.PieChartLoader);
 } }
-const _c0$U = function (a0, a1) { return { "local-body": a0, "hidden": a1 }; };
+const _c0$V = function (a0, a1) { return { "local-body": a0, "hidden": a1 }; };
 function PieChartComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 15);
@@ -14918,7 +14923,7 @@ function PieChartComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c0$U, !ctx_r2.isEditable, ctx_r2.screenType != ctx_r2.ScreenType.reportBuilder && !ctx_r2.ShowFilters));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c0$V, !ctx_r2.isEditable, ctx_r2.screenType != ctx_r2.ScreenType.reportBuilder && !ctx_r2.ShowFilters));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("filters", ctx_r2.reportData.filters)("categories", ctx_r2.reportData.categories)("reportId", ctx_r2.reportId)("screenType", ctx_r2.screenType)("dataModel", ctx_r2.dataModel)("isEditable", ctx_r2.isEditable)("appVersion", ctx_r2.appVersionId);
 } }
@@ -15909,7 +15914,7 @@ class PieChart extends Chart {
     }
 }
-const _c0$T = ["textContainer"];
+const _c0$U = ["textContainer"];
 function TextComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelement(1, "app-ghost-loader", 3);
@@ -16246,7 +16251,7 @@ class TextComponent {
 TextComponent.ɵfac = function TextComponent_Factory(t) { return new (t || TextComponent)(i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(SendToDashboardService), i0.ɵɵdirectiveInject(CommonService)); };
 TextComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextComponent, selectors: [["lib-text"]], viewQuery: function TextComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
-        i0.ɵɵviewQuery(_c0$T, 5);
+        i0.ɵɵviewQuery(_c0$U, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contextMenu = _t.first);
@@ -17014,7 +17019,7 @@ ReportBuilderMasterService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ toke
         type: Injectable
     }], function () { return [{ type: i1$2.HttpClient }, { type: ReportControlService }, { type: BreadCrumbsService }, { type: CommonService }]; }, null); })();
-const _c0$S = ["barChartContainer"];
+const _c0$T = ["barChartContainer"];
 function BarChartComponent_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelement(1, "app-ghost-loader", 14);
@@ -17902,7 +17907,7 @@ class BarChartComponent {
 }
 BarChartComponent.ɵfac = function BarChartComponent_Factory(t) { return new (t || BarChartComponent)(i0.ɵɵdirectiveInject(FieldsListService), i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(SendToDashboardService), i0.ɵɵdirectiveInject(ElementService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(DrillThroughService), i0.ɵɵdirectiveInject(DashboardBuilderService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(FiltersService)); };
 BarChartComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BarChartComponent, selectors: [["bar-chart"]], viewQuery: function BarChartComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$S, 5);
+        i0.ɵɵviewQuery(_c0$T, 5);
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
     } if (rf & 2) {
         let _t;
@@ -18126,7 +18131,7 @@ function ChartFilterComponent_div_0_ng_container_14_div_1_mat_list_option_5_Temp
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", category_r13.name, "");
 } }
-const _c0$R = function (a0) { return { "field-container": a0 }; };
+const _c0$S = function (a0) { return { "field-container": a0 }; };
 function ChartFilterComponent_div_0_ng_container_14_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 20);
@@ -18141,7 +18146,7 @@ function ChartFilterComponent_div_0_ng_container_14_div_1_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext(3);
     let tmp_1_0;
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$R, ctx_r9.showSearchBox));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$S, ctx_r9.showSearchBox));
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("ngIf", (tmp_1_0 = i0.ɵɵpipeBind2(2, 3, ctx_r9.categoryList, ctx_r9.searchedTerm)) == null ? null : tmp_1_0.length);
     i0.ɵɵadvance(4);
@@ -19414,7 +19419,7 @@ TabularReportService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: Tab
             }]
     }], function () { return [{ type: i1$2.HttpClient }]; }, null); })();
-const _c0$Q = ["removeFromDashboardMenu"];
+const _c0$R = ["removeFromDashboardMenu"];
 const _c1$e = ["drillThorughMenuTrigger"];
 const _c2$a = function (a0) { return { "dashboard-tabular-filter": a0 }; };
 function TabularComponent_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
@@ -20041,7 +20046,7 @@ class TabularComponent {
 TabularComponent.ɵfac = function TabularComponent_Factory(t) { return new (t || TabularComponent)(i0.ɵɵdirectiveInject(FieldsListService), i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(ElementService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(TabularReportService), i0.ɵɵdirectiveInject(i9.FormBuilder), i0.ɵɵdirectiveInject(UserDataService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DashboardBuilderService), i0.ɵɵdirectiveInject(DrillThroughService), i0.ɵɵdirectiveInject(i2.Router)); };
 TabularComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabularComponent, selectors: [["tabular"]], viewQuery: function TabularComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
-        i0.ɵɵviewQuery(_c0$Q, 5, MatMenuTrigger);
+        i0.ɵɵviewQuery(_c0$R, 5, MatMenuTrigger);
         i0.ɵɵviewQuery(_c1$e, 5, MatMenuTrigger);
     } if (rf & 2) {
         let _t;
@@ -20209,7 +20214,7 @@ function DashboardFilterComponent_button_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(1, "mat-icon", 4);
     i0.ɵɵelementEnd();
 } }
-const _c0$P = function (a0) { return { "widthWithCrossFilter": a0 }; };
+const _c0$Q = function (a0) { return { "widthWithCrossFilter": a0 }; };
 class DashboardFilterComponent {
     constructor(_elementService, activatedRoute) {
         this._elementService = _elementService;
@@ -20276,7 +20281,7 @@ DashboardFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Da
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("commonFilterArray", ctx.commonFilterArray)("screenType", ctx.screenType)("scopeType", ctx.scopeType)("ngClass", i0.ɵɵpureFunction1(5, _c0$P, !ctx.showHeader && ctx.crossFilterEnabled));
+        i0.ɵɵproperty("commonFilterArray", ctx.commonFilterArray)("screenType", ctx.screenType)("scopeType", ctx.scopeType)("ngClass", i0.ɵɵpureFunction1(5, _c0$Q, !ctx.showHeader && ctx.crossFilterEnabled));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx.showHeader && ctx.crossFilterEnabled);
     } }, styles: ["lib-dashboard-filter{max-width:100%;width:100%;height:3.7rem;display:flex;align-items:start}lib-dashboard-filter .widthWithCrossFilter{width:calc(100% - 2.563rem);min-width:calc(100% - 2.563rem);max-width:calc(100% - 2.563rem);display:flex;align-items:center}lib-dashboard-filter .global-filter{height:100%;display:flex;align-items:center;max-width:100%}lib-dashboard-filter .global-filter .dash-reset,lib-dashboard-filter .global-filter .reset-section,lib-dashboard-filter .global-filter .reset-btn{border-left:1px solid #c9c9c9c9;white-space:nowrap;width:144px;display:flex;height:2rem;align-items:start;padding-left:.4rem}lib-dashboard-filter .global-filter .dash-reset .reset,lib-dashboard-filter .global-filter .reset-section .reset,lib-dashboard-filter .global-filter .reset-btn .reset{margin:0;font-size:11px}lib-dashboard-filter .global-filter .filter-wrapper{position:inherit;display:inline-block;gap:25px;max-width:calc(100% - 154px);height:2.7rem;line-height:2.7rem;align-items:start!important;overflow-y:hidden;align-self:center}lib-dashboard-filter .global-filter .filter-wrapper .reset{margin:0!important}\n"], encapsulation: 2 });
@@ -20335,7 +20340,7 @@ function RowGroupViewComponent_div_0_table_1_ng_container_4_th_1_button_5_Templa
     i0.ɵɵelement(1, "mat-icon", 26);
     i0.ɵɵelementEnd();
 } }
-const _c0$O = function (a1, a2, a4) { return { enable: true, report: a1, attribute: a2, type: "attribute", index: a4 }; };
+const _c0$P = function (a1, a2, a4) { return { enable: true, report: a1, attribute: a2, type: "attribute", index: a4 }; };
 function RowGroupViewComponent_div_0_table_1_ng_container_4_th_1_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "th", 18);
@@ -20355,7 +20360,7 @@ function RowGroupViewComponent_div_0_table_1_ng_container_4_th_1_Template(rf, ct
     const i_r12 = ctx_r22.index;
     const ctx_r13 = i0.ɵɵnextContext(3);
     i0.ɵɵstyleProp("font-size", ctx_r13.tabularReport.tableStyle.header.font.size, "px")("color", ctx_r13.tabularReport.tableStyle.header.font.color)("font-family", ctx_r13.tabularReport.tableStyle.header.font.family)("background", ctx_r13.tabularReport.tableStyle.header.backgroundColor)("border", ctx_r13.tabularReport.tableStyle.border.width + "px" + " " + ctx_r13.tabularReport.tableStyle.border.borderStyle + " " + ctx_r13.tabularReport.tableStyle.border.color)("text-align", attr_r11.alignment);
-    i0.ɵɵproperty("id", ctx_r13.th)("cdkDragDisabled", !ctx_r13.isEditable || attr_r11.rowSpan)("resizeColumnData", i0.ɵɵpureFunction3(27, _c0$O, ctx_r13.tabularReport, attr_r11, i_r12));
+    i0.ɵɵproperty("id", ctx_r13.th)("cdkDragDisabled", !ctx_r13.isEditable || attr_r11.rowSpan)("resizeColumnData", i0.ɵɵpureFunction3(27, _c0$P, ctx_r13.tabularReport, attr_r11, i_r12));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r13.isEditable && !attr_r11.rowSpan);
     i0.ɵɵadvance(2);
@@ -22249,7 +22254,7 @@ CodeEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CodeEdi
             type: Output
         }] }); })();
-const _c0$N = ["editor"];
+const _c0$O = ["editor"];
 class ConditionalFormattingComponent {
     constructor(dialogRef, data) {
         this.dialogRef = dialogRef;
@@ -22286,7 +22291,7 @@ class ConditionalFormattingComponent {
 }
 ConditionalFormattingComponent.ɵfac = function ConditionalFormattingComponent_Factory(t) { return new (t || ConditionalFormattingComponent)(i0.ɵɵdirectiveInject(i1$5.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
 ConditionalFormattingComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConditionalFormattingComponent, selectors: [["lib-conditional-formatting"]], viewQuery: function ConditionalFormattingComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$N, 5);
+        i0.ɵɵviewQuery(_c0$O, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editor = _t.first);
@@ -22325,7 +22330,7 @@ ConditionalFormattingComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
             args: ['editor']
         }] }); })();
-const _c0$M = ["drillThorughMenuTrigger"];
+const _c0$N = ["drillThorughMenuTrigger"];
 function DetailGroupViewComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
     i0.ɵɵelement(1, "app-ghost-loader", 8);
@@ -23809,7 +23814,7 @@ class DetailGroupViewComponent {
 DetailGroupViewComponent.ɵfac = function DetailGroupViewComponent_Factory(t) { return new (t || DetailGroupViewComponent)(i0.ɵɵdirectiveInject(ReportBuilderMasterService), i0.ɵɵdirectiveInject(FieldsListService), i0.ɵɵdirectiveInject(CommonService), i0.ɵɵdirectiveInject(ElementService), i0.ɵɵdirectiveInject(TabularReportService), i0.ɵɵdirectiveInject(DashboardBuilderService), i0.ɵɵdirectiveInject(i0.Injector)); };
 DetailGroupViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DetailGroupViewComponent, selectors: [["lib-detail-view"]], viewQuery: function DetailGroupViewComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(MatMenuTrigger, 5);
-        i0.ɵɵviewQuery(_c0$M, 5, MatMenuTrigger);
+        i0.ɵɵviewQuery(_c0$N, 5, MatMenuTrigger);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contextMenu = _t.first);
@@ -25664,7 +25669,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r383.series[i_r375], _attr_r383.valueFormatting.currency, "symbol"));
 } }
-const _c0$L = function () { return []; };
+const _c0$M = function () { return []; };
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_2_td_1_span_3_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
@@ -25674,7 +25679,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
     const _attr_r383 = i0.ɵɵnextContext(3).$implicit;
     const i_r375 = i0.ɵɵnextContext().index;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r383.series[i_r375], i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r383.series[i_r375], i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_2_td_1_span_3_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -25820,7 +25825,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
     const _attr_r383 = i0.ɵɵnextContext(4).$implicit;
     const i_r375 = i0.ɵɵnextContext().index;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r383.series[i_r375], i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r383.series[i_r375], i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_2_td_1_span_5_span_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26057,7 +26062,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
     const _attr_r488 = i0.ɵɵnextContext(3).$implicit;
     const i_r375 = i0.ɵɵnextContext().index;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r488.series[i_r375], i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r488.series[i_r375], i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_3_td_2_span_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26204,7 +26209,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
     const _attr_r488 = i0.ɵɵnextContext(4).$implicit;
     const i_r375 = i0.ɵɵnextContext().index;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r488.series[i_r375], i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, _attr_r488.series[i_r375], i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_3_td_2_span_4_span_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26454,7 +26459,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r598 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r598, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r598, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_4_ng_container_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26506,7 +26511,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r607 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r607, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r607, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_4_ng_container_2_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26578,7 +26583,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r620 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r620, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r620, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_5_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26663,7 +26668,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r636 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r636, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r636, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_ng_container_5_ng_container_3_ng_container_1_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26793,7 +26798,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r658 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r658, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r658, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_tr_6_ng_container_2_ng_container_2_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26841,7 +26846,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r658 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r658, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r658, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_tr_6_ng_container_2_ng_container_3_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -26938,7 +26943,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_contai
 } if (rf & 2) {
     const data_r683 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r683, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r683, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_6_ng_container_1_tr_6_ng_container_4_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27073,7 +27078,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r705 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r705, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r705, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_ng_container_6_ng_container_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27125,7 +27130,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r714 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r714, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r714, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_ng_container_6_ng_container_2_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27197,7 +27202,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r727 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r727, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r727, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_ng_container_7_ng_container_1_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27285,7 +27290,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r741 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r741, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r741, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_ng_container_7_ng_container_3_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27367,7 +27372,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r755 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r755, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r755, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_tr_8_ng_container_3_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27416,7 +27421,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r764 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r764, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r764, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_tr_8_ng_container_3_ng_container_2_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27488,7 +27493,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r777 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r777, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r777, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_tr_8_ng_container_4_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27573,7 +27578,7 @@ function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_contai
 } if (rf & 2) {
     const data_r791 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r791, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, data_r791, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tbody_2_ng_container_7_ng_container_1_tr_8_ng_container_4_ng_container_3_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27751,7 +27756,7 @@ function ColumnGroupViewComponent_div_0_table_1_tfoot_3_tr_1_ng_container_4_td_1
 } if (rf & 2) {
     const total_r810 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, total_r810, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, total_r810, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tfoot_3_tr_1_ng_container_4_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -27821,7 +27826,7 @@ function ColumnGroupViewComponent_div_0_table_1_tfoot_3_tr_1_ng_container_5_ng_c
 } if (rf & 2) {
     const total_r823 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, total_r823, i0.ɵɵpureFunction0(5, _c0$L), "column"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, total_r823, i0.ɵɵpureFunction0(5, _c0$M), "column"));
 } }
 function ColumnGroupViewComponent_div_0_table_1_tfoot_3_tr_1_ng_container_5_ng_container_1_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -29223,10 +29228,23 @@ SuccessDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Succ
                 args: [MAT_DIALOG_DATA]
             }] }, { type: i1$5.MatDialog }, { type: i1$5.MatDialogRef }, { type: CommonService }, { type: CommonLibConfigurationService }]; }, null); })();
+function AppCreateDialogComponentComponent_span_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r0.errMessage.name);
+} }
+const _c0$L = function (a0) { return { "invalid-input": a0 }; };
 class AppCreateDialogComponentComponent {
     constructor(dialogRef) {
         this.dialogRef = dialogRef;
+        this.name = '';
         this.description = '';
+        this.errMessage = { name: '' };
+        this.showErrMessge = { name: false };
     }
     onCancel() {
         this.dialogRef.close();
@@ -29236,57 +29254,70 @@ class AppCreateDialogComponentComponent {
             this.dialogRef.close({ name: this.name, description: this.description });
         }
         else {
+            this.onBlur();
             // Optional: Display an error message if name is empty
         }
     }
+    onBlur() {
+        this.showErrMessge.name = true;
+        this.onInput();
+    }
+    onInput() {
+        this.name.trim() ? this.errMessage.name = "" : this.errMessage.name = "App name should not be empty";
+    }
 }
 AppCreateDialogComponentComponent.ɵfac = function AppCreateDialogComponentComponent_Factory(t) { return new (t || AppCreateDialogComponentComponent)(i0.ɵɵdirectiveInject(i1$5.MatDialogRef)); };
-AppCreateDialogComponentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppCreateDialogComponentComponent, selectors: [["app-app-create-dialog-component"]], decls: 18, vars: 2, consts: [[1, "create-app-dialog", "relative"], ["svgIcon", "axo_popup_close", 1, "cursor-pointer", "absolute", "top-2", "right-2", 3, "click"], ["mat-dialog-title", ""], ["appearance", "fill"], ["matInput", "", "required", "", 3, "ngModel", "ngModelChange"], ["matInput", "", "placeholder", "Please provide a detailed description of your app so that our AI can assist you in building your apps faster.", 3, "ngModel", "ngModelChange"], ["mat-button", "", 1, "btn", "stroke-btn", 3, "click"], ["mat-button", "", 1, "btn", "fill-btn", 3, "click"]], template: function AppCreateDialogComponentComponent_Template(rf, ctx) { if (rf & 1) {
+AppCreateDialogComponentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AppCreateDialogComponentComponent, selectors: [["app-app-create-dialog-component"]], decls: 20, vars: 6, consts: [[1, "popup-container", "create-app-popup"], [1, "close-icon", 3, "click"], [1, "flex", "flex-col", "gap-2"], ["for", "app-name"], ["type", "text", "id", "app-name", "required", "", 1, "", 3, "ngModel", "ngClass", "ngModelChange", "blur", "input"], [1, "err-message-container"], ["class", "error-message", 4, "ngIf"], ["for", "app-desc"], ["id", "app-desc", "placeholder", "Please provide a detailed description of your app so that our AI can assist you in building your apps faster.", "rows", "5", 1, "", 3, "ngModel", "ngModelChange"], [1, "action-btn-container"], [1, "stroke-btn", 3, "click"], [1, "fill-btn", 3, "click"], [1, "error-message"]], template: function AppCreateDialogComponentComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "mat-icon", 1);
-        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_mat_icon_click_1_listener() { return ctx.onCancel(); });
+        i0.ɵɵelementStart(1, "button", 1);
+        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_button_click_1_listener() { return ctx.onCancel(); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "h2", 2);
+        i0.ɵɵelementStart(2, "h1");
         i0.ɵɵtext(3, "Create a New App");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "mat-dialog-content");
-        i0.ɵɵelementStart(5, "mat-form-field", 3);
-        i0.ɵɵelementStart(6, "mat-label");
+        i0.ɵɵelementStart(4, "div", 2);
+        i0.ɵɵelementStart(5, "div");
+        i0.ɵɵelementStart(6, "label", 3);
         i0.ɵɵtext(7, "App Name");
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(8, "input", 4);
-        i0.ɵɵlistener("ngModelChange", function AppCreateDialogComponentComponent_Template_input_ngModelChange_8_listener($event) { return ctx.name = $event; });
+        i0.ɵɵlistener("ngModelChange", function AppCreateDialogComponentComponent_Template_input_ngModelChange_8_listener($event) { return ctx.name = $event; })("blur", function AppCreateDialogComponentComponent_Template_input_blur_8_listener() { return ctx.onBlur(); })("input", function AppCreateDialogComponentComponent_Template_input_input_8_listener() { return ctx.onInput(); });
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "div", 5);
+        i0.ɵɵtemplate(10, AppCreateDialogComponentComponent_span_10_Template, 2, 1, "span", 6);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(9, "mat-form-field", 3);
-        i0.ɵɵelementStart(10, "mat-label");
-        i0.ɵɵtext(11, "Description");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "textarea", 5);
-        i0.ɵɵlistener("ngModelChange", function AppCreateDialogComponentComponent_Template_textarea_ngModelChange_12_listener($event) { return ctx.description = $event; });
+        i0.ɵɵelementStart(11, "div");
+        i0.ɵɵelementStart(12, "label", 7);
+        i0.ɵɵtext(13, "Description");
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(14, "textarea", 8);
+        i0.ɵɵlistener("ngModelChange", function AppCreateDialogComponentComponent_Template_textarea_ngModelChange_14_listener($event) { return ctx.description = $event; });
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(13, "mat-dialog-actions");
-        i0.ɵɵelementStart(14, "button", 6);
-        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_button_click_14_listener() { return ctx.onCancel(); });
-        i0.ɵɵtext(15, "Cancel");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(16, "button", 7);
-        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_button_click_16_listener() { return ctx.onSubmit(); });
-        i0.ɵɵtext(17, "Create");
+        i0.ɵɵelementStart(15, "div", 9);
+        i0.ɵɵelementStart(16, "button", 10);
+        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_button_click_16_listener() { return ctx.onCancel(); });
+        i0.ɵɵtext(17, "Cancel");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(18, "button", 11);
+        i0.ɵɵlistener("click", function AppCreateDialogComponentComponent_Template_button_click_18_listener() { return ctx.onSubmit(); });
+        i0.ɵɵtext(19, "Create");
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(8);
-        i0.ɵɵproperty("ngModel", ctx.name);
+        i0.ɵɵproperty("ngModel", ctx.name)("ngClass", i0.ɵɵpureFunction1(4, _c0$L, ctx.showErrMessge.name && ctx.errMessage.name));
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.showErrMessge.name && ctx.errMessage.name);
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("ngModel", ctx.description);
-    } }, directives: [i2$1.MatIcon, i1$5.MatDialogTitle, i1$5.MatDialogContent, i2$2.MatFormField, i2$2.MatLabel, i10.MatInput, i9.DefaultValueAccessor, i9.RequiredValidator, i9.NgControlStatus, i9.NgModel, i1$5.MatDialogActions], styles: [".create-app-dialog[_ngcontent-%COMP%]{min-width:300px;padding:.5rem}.custom-dialog-container[_ngcontent-%COMP%]{border-radius:8px;box-shadow:0 4px 8px #0003;padding:1rem;max-width:600px;min-height:300px}.custom-dialog-backdrop[_ngcontent-%COMP%]{background:rgba(0,0,0,.5)}h2.mat-dialog-title[_ngcontent-%COMP%]{color:#000;font-weight:500;font-size:1.2rem}mat-dialog-content[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:.1rem;font-size:1rem;color:#333;overflow:auto}mat-form-field[_ngcontent-%COMP%]{display:block}textarea[_ngcontent-%COMP%]{resize:vertical;min-height:100px}mat-dialog-actions[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;gap:.5rem}button.mat-button[_ngcontent-%COMP%]{color:#3f51b5}button.mat-button[_ngcontent-%COMP%]:hover{background-color:#e0e0e0}button.mat-button[_ngcontent-%COMP%]:first-of-type{color:#f44336}button.mat-button[_ngcontent-%COMP%]:first-of-type:hover{background-color:#ffebee}button.mat-button[_ngcontent-%COMP%]:last-of-type{background-color:#3f51b5;color:#fff}button.mat-button[_ngcontent-%COMP%]:last-of-type:hover{background-color:#303f9f}"] });
+    } }, directives: [i9.DefaultValueAccessor, i9.RequiredValidator, i9.NgControlStatus, i9.NgModel, i1$3.NgClass, i1$3.NgIf], styles: [".create-app-popup[_ngcontent-%COMP%]{min-width:30vw}", ".popup-container[_ngcontent-%COMP%]{min-width:20vw;min-height:fit-content;width:fit-content;height:fit-content;max-width:75vw;max-height:75vh;font-family:Inter var,Roboto;font-size:.875rem;position:relative}.popup-container[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%]{font-family:Inter var,Roboto!important;color:#1b2b4b;font-size:1.125rem;font-weight:500;line-height:28px;margin:0 0 1rem;text-transform:capitalize;width:fit-content}.popup-container[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{color:#475467;font-weight:400;margin:0;line-height:20px}.popup-container[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:block;color:#1b2b4b;font-weight:500;margin:0 0 .2rem}.popup-container[_ngcontent-%COMP%]   .close-icon[_ngcontent-%COMP%]{height:24px;width:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M18 6L6 18M6 6L18 18%22 stroke%3D%22%23667085%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");background-position:center;background-size:100%;position:absolute;top:0;right:0}.popup-container[_ngcontent-%COMP%]   .action-btn-container[_ngcontent-%COMP%]{display:flex;justify-content:right;gap:.5rem;margin:1.5rem 0 0}.popup-container[_ngcontent-%COMP%]   input[type=text][_ngcontent-%COMP%], .popup-container[_ngcontent-%COMP%]   input[type=number][_ngcontent-%COMP%], .popup-container[_ngcontent-%COMP%]   input[type=email][_ngcontent-%COMP%], .popup-container[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]{display:block;border:1px solid #D0D5DD;border-radius:.375rem;width:100%;padding:.5rem 1rem;color:#1b2b4b;resize:none}.popup-container[_ngcontent-%COMP%]   input[type=text][_ngcontent-%COMP%]::placeholder, .popup-container[_ngcontent-%COMP%]   input[type=number][_ngcontent-%COMP%]::placeholder, .popup-container[_ngcontent-%COMP%]   input[type=email][_ngcontent-%COMP%]::placeholder, .popup-container[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder{color:#a5a5a5}.popup-container[_ngcontent-%COMP%]   input[type=text][_ngcontent-%COMP%]:focus, .popup-container[_ngcontent-%COMP%]   input[type=number][_ngcontent-%COMP%]:focus, .popup-container[_ngcontent-%COMP%]   input[type=email][_ngcontent-%COMP%]:focus, .popup-container[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus{border:1px solid #6C52ED}.popup-container[_ngcontent-%COMP%]   .err-message-container[_ngcontent-%COMP%]{height:14px;line-height:12px;width:100%;margin-top:2px}.popup-container[_ngcontent-%COMP%]   .err-message-container[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]{color:#dc2626;font-size:12px;float:right}.popup-container[_ngcontent-%COMP%]   .invalid-input[_ngcontent-%COMP%]{border:1px solid #dc2626!important}.popup-container[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]{display:flex;justify-content:start;align-items:center}.popup-container[_ngcontent-%COMP%]   .checkbox-container[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%]{width:fit-content;margin:0 .5rem 0 0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppCreateDialogComponentComponent, [{
         type: Component,
-        args: [{ selector: 'app-app-create-dialog-component', template: "<div class=\"create-app-dialog relative\">\n  <mat-icon svgIcon=\"axo_popup_close\" class=\"cursor-pointer absolute top-2 right-2\" (click)=\"onCancel()\"></mat-icon>\n  <h2 mat-dialog-title>Create a New App</h2>\n  <mat-dialog-content>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>App Name</mat-label>\n      <input matInput [(ngModel)]=\"name\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label>Description</mat-label>\n      <textarea matInput [(ngModel)]=\"description\" placeholder=\"Please provide a detailed description of your app so that our AI can assist you in building your apps faster.\"></textarea>\n    </mat-form-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button (click)=\"onCancel()\" class=\"btn stroke-btn\">Cancel</button>\n    <button mat-button (click)=\"onSubmit()\"  class=\"btn fill-btn\">Create</button>\n  </mat-dialog-actions>\n</div>\n", styles: [".create-app-dialog{min-width:300px;padding:.5rem}.custom-dialog-container{border-radius:8px;box-shadow:0 4px 8px #0003;padding:1rem;max-width:600px;min-height:300px}.custom-dialog-backdrop{background:rgba(0,0,0,.5)}h2.mat-dialog-title{color:#000;font-weight:500;font-size:1.2rem}mat-dialog-content{display:flex;flex-direction:column;gap:.1rem;font-size:1rem;color:#333;overflow:auto}mat-form-field{display:block}textarea{resize:vertical;min-height:100px}mat-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}button.mat-button{color:#3f51b5}button.mat-button:hover{background-color:#e0e0e0}button.mat-button:first-of-type{color:#f44336}button.mat-button:first-of-type:hover{background-color:#ffebee}button.mat-button:last-of-type{background-color:#3f51b5;color:#fff}button.mat-button:last-of-type:hover{background-color:#303f9f}\n"] }]
+        args: [{ selector: 'app-app-create-dialog-component', template: "<div class=\"popup-container create-app-popup\">\n   <button class=\"close-icon\" (click)=\"onCancel()\"></button>\n  <h1>Create a New App</h1>\n  <div class=\"flex flex-col gap-2\">\n    <div>\n      <label for=\"app-name\">App Name</label>\n      <input type=\"text\" [(ngModel)]=\"name\" id=\"app-name\" class=\"\" (blur)=\"onBlur()\" (input)=\"onInput()\" [ngClass]=\"{'invalid-input': showErrMessge.name && errMessage.name}\" required />\n      <div class=\"err-message-container\"><span *ngIf=\"showErrMessge.name && errMessage.name\" class=\"error-message\">{{ errMessage.name }}</span></div>\n    </div>\n    <div>\n      <label for=\"app-desc\">Description</label>\n      <textarea [(ngModel)]=\"description\" id=\"app-desc\" placeholder=\"Please provide a detailed description of your app so that our AI can assist you in building your apps faster.\" class=\"\" rows=\"5\"></textarea>\n    </div>\n  </div>\n  <div class=\"action-btn-container\">\n    <button (click)=\"onCancel()\" class=\"stroke-btn\">Cancel</button>\n    <button (click)=\"onSubmit()\"  class=\"fill-btn\">Create</button>\n  </div>\n</div>", styles: [".create-app-popup{min-width:30vw}\n", ".popup-container{min-width:20vw;min-height:fit-content;width:fit-content;height:fit-content;max-width:75vw;max-height:75vh;font-family:Inter var,Roboto;font-size:.875rem;position:relative}.popup-container h1{font-family:Inter var,Roboto!important;color:#1b2b4b;font-size:1.125rem;font-weight:500;line-height:28px;margin:0 0 1rem;text-transform:capitalize;width:fit-content}.popup-container p{color:#475467;font-weight:400;margin:0;line-height:20px}.popup-container label{display:block;color:#1b2b4b;font-weight:500;margin:0 0 .2rem}.popup-container .close-icon{height:24px;width:24px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M18 6L6 18M6 6L18 18%22 stroke%3D%22%23667085%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");background-position:center;background-size:100%;position:absolute;top:0;right:0}.popup-container .action-btn-container{display:flex;justify-content:right;gap:.5rem;margin:1.5rem 0 0}.popup-container input[type=text],.popup-container input[type=number],.popup-container input[type=email],.popup-container textarea{display:block;border:1px solid #D0D5DD;border-radius:.375rem;width:100%;padding:.5rem 1rem;color:#1b2b4b;resize:none}.popup-container input[type=text]::placeholder,.popup-container input[type=number]::placeholder,.popup-container input[type=email]::placeholder,.popup-container textarea::placeholder{color:#a5a5a5}.popup-container input[type=text]:focus,.popup-container input[type=number]:focus,.popup-container input[type=email]:focus,.popup-container textarea:focus{border:1px solid #6C52ED}.popup-container .err-message-container{height:14px;line-height:12px;width:100%;margin-top:2px}.popup-container .err-message-container .error-message{color:#dc2626;font-size:12px;float:right}.popup-container .invalid-input{border:1px solid #dc2626!important}.popup-container .checkbox-container{display:flex;justify-content:start;align-items:center}.popup-container .checkbox-container input[type=checkbox]{width:fit-content;margin:0 .5rem 0 0}\n"] }]
     }], function () { return [{ type: i1$5.MatDialogRef }]; }, null); })();
 class DataViewFilter extends AxFilter {
@@ -45789,9 +45820,8 @@ function SubformComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "div", 7);
-    i0.ɵɵelementStart(8, "div", 8);
-    i0.ɵɵlistener("click", function SubformComponent_ng_container_0_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r10); const ctx_r17 = i0.ɵɵnextContext(); return ctx_r17.onClickForm(); });
-    i0.ɵɵelementEnd();
+    i0.ɵɵlistener("click", function SubformComponent_ng_container_0_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r17 = i0.ɵɵnextContext(); return ctx_r17.onClickForm(); });
+    i0.ɵɵelement(8, "div", 8);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(9, SubformComponent_ng_container_0_ng_container_9_Template, 2, 0, "ng-container", 0);
     i0.ɵɵelementEnd();
@@ -45986,11 +46016,11 @@ SubformComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SubformCom
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputField = _t.first);
     } }, hostBindings: function SubformComponent_HostBindings(rf, ctx) { if (rf & 1) {
         i0.ɵɵlistener("mouseenter", function SubformComponent_mouseenter_HostBindingHandler() { return ctx.onMouseEnter(); });
-    } }, inputs: { widget: "widget", group: "group" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "text-widget", 3, "formGroup", "id", "click"], [1, "flex", "gap-2", "justify-between"], [1, "flex", "gap-2", "justify-between", "items-center", 2, "width", "85%"], [1, "prompt", 3, "formGroupName"], ["matInput", "", "matTooltip", "Double Click to Edit", 1, "prompt-text", 3, "id", "ngModel", "formControlName", "readonly", "ngModelChange", "mousedown", "focus", "keydown.enter", "blur", "dblclick"], ["inputField", ""], [1, "chevron_right-parent", "flex", "justify-end", "items-start", 2, "width", "10%"], [1, "chevron_right", 3, "click"], ["class", "find-help", 3, "click", 4, "ngIf"], [1, "tooltip-container"], [1, "clipboard-icon", 3, "click"], ["svgIcon", "axo_sculptor_copy", "matTooltip", "Copy", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [1, "clipboard-icon", 3, "disabled", "click"], ["svgIcon", "axo_sculptor_paste", "matTooltip", "Paste", 1, "h-4", "min-h-4", "w-4", "min-w-4"], ["svgIcon", "axo_sculptor_delete", "matTooltip", "Delete", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click", 4, "ngIf"], ["svgIcon", "axo_sculptor_close_eye", 1, "h-4", "w-4", "min-w-4", "min-h-4"], [1, "find-help", 3, "click"], ["svgIcon", "axo_sculptor_help-text", "matTooltip", "Help", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click"]], template: function SubformComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { widget: "widget", group: "group" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "text-widget", 3, "formGroup", "id", "click"], [1, "flex", "gap-2", "justify-between"], [1, "flex", "gap-2", "justify-between", "items-center", 2, "width", "85%"], [1, "prompt", 3, "formGroupName"], ["matInput", "", "matTooltip", "Double Click to Edit", 1, "prompt-text", 3, "id", "ngModel", "formControlName", "readonly", "ngModelChange", "mousedown", "focus", "keydown.enter", "blur", "dblclick"], ["inputField", ""], [1, "chevron_right-parent", "flex", "justify-center", "items-start", "rounded-full", "h-6", "w-6", 2, "width", "10%", 3, "click"], [1, "chevron_right"], ["class", "find-help", 3, "click", 4, "ngIf"], [1, "tooltip-container"], [1, "clipboard-icon", 3, "click"], ["svgIcon", "axo_sculptor_copy", "matTooltip", "Copy", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [1, "clipboard-icon", 3, "disabled", "click"], ["svgIcon", "axo_sculptor_paste", "matTooltip", "Paste", 1, "h-4", "min-h-4", "w-4", "min-w-4"], ["svgIcon", "axo_sculptor_delete", "matTooltip", "Delete", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click", 4, "ngIf"], ["svgIcon", "axo_sculptor_close_eye", 1, "h-4", "w-4", "min-w-4", "min-h-4"], [1, "find-help", 3, "click"], ["svgIcon", "axo_sculptor_help-text", "matTooltip", "Help", 1, "h-4", "min-h-4", "w-4", "min-w-4"], [3, "click"]], template: function SubformComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, SubformComponent_ng_container_0_Template, 19, 14, "ng-container", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.widget);
-    } }, styles: ["lib-subform{width:100%}lib-subform .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:10px 28px!important;border-radius:10px;padding-top:10px;height:auto;box-sizing:border-box}lib-subform .text-widget:hover{background-color:#eaeaea}lib-subform .text-widget .form-field-input{border:none;border-radius:10px}lib-subform .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-subform .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-subform .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-subform .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-subform .text-widget .mat-icon{height:30px;width:30px}lib-subform .chevron_right-parent{padding:3px 3px 0 0}lib-subform .chevron_right-parent .chevron_right{margin-top:5px;border-top:2px solid;border-right:2px solid;rotate:45deg;height:8px!important;width:8px!important;stroke-width:2px;stroke:#000}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff}\n"], encapsulation: 2, data: { animation: [
+    } }, styles: ["lib-subform{width:100%}lib-subform .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:10px 28px!important;border-radius:10px;padding-top:10px;height:auto;box-sizing:border-box}lib-subform .text-widget:hover{background-color:#eaeaea}lib-subform .text-widget .form-field-input{border:none;border-radius:10px}lib-subform .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-subform .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-subform .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-subform .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-subform .text-widget .mat-icon{height:30px;width:30px}lib-subform .chevron_right-parent{padding:3px 3px 0 0}lib-subform .chevron_right-parent .chevron_right{margin-top:5px;border-top:2px solid;border-right:2px solid;rotate:45deg;height:8px!important;width:8px!important;stroke-width:2px;stroke:#000}lib-subform .chevron_right-parent:hover{background-color:#fff}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff}\n"], encapsulation: 2, data: { animation: [
             trigger('fadeInOut', [
                 state('void', style({
                     opacity: 0
@@ -46011,7 +46041,7 @@ SubformComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SubformCom
                             animate('1200ms')
                         ])
                     ])
-                ], template: "<!-- Subform widget -->\n<ng-container *ngIf=\"widget\">\n  <div [formGroup]=\"group\" class=\"text-widget\" [id]=\"widget.id\" [class.selected-widget]=\"widget.widgetSelect\" (click)=\"onWidgetClick()\">\n    <div class=\"flex gap-2 justify-between\">\n      <div class=\"flex gap-2 justify-between items-center\" style=\"width: 85%;\">\n        <form [formGroupName]=\"this.widget.id + '_group'\" class=\"prompt\" >\n                    <textarea matInput [id]=\"getTextAreaId()\" [(ngModel)]='widget.prompt' [formControlName]=\"widget.id + '_prompt'\"  #inputField (mousedown)=\"preventFocus($event)\"\n                    (focus)=\"onFocus($event)\" (keydown.enter)=\"updateIdentifier(); inputField.blur()\" (blur)=\"updateIdentifier()\"  class=\"prompt-text\" [readonly]=\"!isEditable\"\n                    (dblclick)=\"onDoubleClick()\" matTooltip=\"Double Click to Edit\"></textarea>\n        </form>\n      </div>\n      <div class=\"chevron_right-parent flex justify-end items-start\" style=\"width: 10%;\">\n        <div class=\"chevron_right\" (click)=\"onClickForm()\" [@fadeInOut]>\n          <!-- <mat-icon svgIcon=\"chevron_right\" class=\"chevron_right h-4 w-4 min-w-4 min-h-4\" (click)=\"onClickForm()\"></mat-icon> -->\n        </div>\n      </div>\n      <ng-container *ngIf=\"widget.isHidden\">\n        <mat-icon svgIcon=\"axo_sculptor_close_eye\" class=\"h-4 w-4 min-w-4 min-h-4\"></mat-icon>\n      </ng-container>\n    </div>\n\n    <!-- <div class='form-field-input'>\n      <div class=\"icon-input-container\">\n        <mat-icon svgIcon=\"axo_subform\" class=\"icon relative\"></mat-icon>\n        <input [placeholder]=\"widget.placeholder?widget.placeholder:'Enter your choice'\" readonly=true\n        [formControlName]=\"widget.id\" />\n      </div>\n    </div> -->\n    <button *ngIf=\"!isEditable\" class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button>\n  </div>\n  <div class=\"tooltip-container\">\n    <!-- <button class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button> -->\n    <!-- <button class=\"clipboard-icon\" (click)=\"cutWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_cut\" matTooltip=\"Cut\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button> -->\n    <button class=\"clipboard-icon\" (click)=\"copyWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_copy\" matTooltip=\"Copy\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n    <button class=\"clipboard-icon\" (click)=\"pasteWidget()\" [disabled]=\"isPasteInProgress\"> <mat-icon svgIcon=\"axo_sculptor_paste\" matTooltip=\"Paste\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n    <button class=\"clipboard-icon\" (click)=\"confirmbutton()\"><mat-icon svgIcon=\"axo_sculptor_delete\" matTooltip=\"Delete\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon>\n    </button>\n    <lib-confirmation-button *ngIf=\"showConfirmation\" (click)=\"delete()\"> </lib-confirmation-button>\n\n  </div>\n\n</ng-container>\n", styles: ["lib-subform{width:100%}lib-subform .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:10px 28px!important;border-radius:10px;padding-top:10px;height:auto;box-sizing:border-box}lib-subform .text-widget:hover{background-color:#eaeaea}lib-subform .text-widget .form-field-input{border:none;border-radius:10px}lib-subform .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-subform .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-subform .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-subform .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-subform .text-widget .mat-icon{height:30px;width:30px}lib-subform .chevron_right-parent{padding:3px 3px 0 0}lib-subform .chevron_right-parent .chevron_right{margin-top:5px;border-top:2px solid;border-right:2px solid;rotate:45deg;height:8px!important;width:8px!important;stroke-width:2px;stroke:#000}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff}\n"] }]
+                ], template: "<!-- Subform widget -->\n<ng-container *ngIf=\"widget\">\n  <div [formGroup]=\"group\" class=\"text-widget\" [id]=\"widget.id\" [class.selected-widget]=\"widget.widgetSelect\" (click)=\"onWidgetClick()\">\n    <div class=\"flex gap-2 justify-between\">\n      <div class=\"flex gap-2 justify-between items-center\" style=\"width: 85%;\">\n        <form [formGroupName]=\"this.widget.id + '_group'\" class=\"prompt\" >\n                    <textarea matInput [id]=\"getTextAreaId()\" [(ngModel)]='widget.prompt' [formControlName]=\"widget.id + '_prompt'\"  #inputField (mousedown)=\"preventFocus($event)\"\n                    (focus)=\"onFocus($event)\" (keydown.enter)=\"updateIdentifier(); inputField.blur()\" (blur)=\"updateIdentifier()\"  class=\"prompt-text\" [readonly]=\"!isEditable\"\n                    (dblclick)=\"onDoubleClick()\" matTooltip=\"Double Click to Edit\"></textarea>\n        </form>\n      </div>\n      <div class=\"chevron_right-parent flex justify-center items-start rounded-full h-6 w-6\" style=\"width: 10%;\" (click)=\"onClickForm()\">\n        <div class=\"chevron_right\" [@fadeInOut]>\n          <!-- <mat-icon svgIcon=\"chevron_right\" class=\"chevron_right h-4 w-4 min-w-4 min-h-4\" (click)=\"onClickForm()\"></mat-icon> -->\n        </div>\n      </div>\n      <ng-container *ngIf=\"widget.isHidden\">\n        <mat-icon svgIcon=\"axo_sculptor_close_eye\" class=\"h-4 w-4 min-w-4 min-h-4\"></mat-icon>\n      </ng-container>\n    </div>\n\n    <!-- <div class='form-field-input'>\n      <div class=\"icon-input-container\">\n        <mat-icon svgIcon=\"axo_subform\" class=\"icon relative\"></mat-icon>\n        <input [placeholder]=\"widget.placeholder?widget.placeholder:'Enter your choice'\" readonly=true\n        [formControlName]=\"widget.id\" />\n      </div>\n    </div> -->\n    <button *ngIf=\"!isEditable\" class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button>\n  </div>\n  <div class=\"tooltip-container\">\n    <!-- <button class=\"find-help\" (click)=\"onClickEditor()\"> <mat-icon svgIcon=\"axo_sculptor_help-text\" class=\"h-4 min-h-4 w-4 min-w-4\" matTooltip=\"Help\"></mat-icon></button> -->\n    <!-- <button class=\"clipboard-icon\" (click)=\"cutWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_cut\" matTooltip=\"Cut\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button> -->\n    <button class=\"clipboard-icon\" (click)=\"copyWidget(widget)\"> <mat-icon svgIcon=\"axo_sculptor_copy\" matTooltip=\"Copy\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n    <button class=\"clipboard-icon\" (click)=\"pasteWidget()\" [disabled]=\"isPasteInProgress\"> <mat-icon svgIcon=\"axo_sculptor_paste\" matTooltip=\"Paste\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon></button>\n    <button class=\"clipboard-icon\" (click)=\"confirmbutton()\"><mat-icon svgIcon=\"axo_sculptor_delete\" matTooltip=\"Delete\" class=\"h-4 min-h-4 w-4 min-w-4\"></mat-icon>\n    </button>\n    <lib-confirmation-button *ngIf=\"showConfirmation\" (click)=\"delete()\"> </lib-confirmation-button>\n\n  </div>\n\n</ng-container>\n", styles: ["lib-subform{width:100%}lib-subform .text-widget{background:#ffffff;border:1px solid #CED0DD;padding:10px 28px!important;border-radius:10px;padding-top:10px;height:auto;box-sizing:border-box}lib-subform .text-widget:hover{background-color:#eaeaea}lib-subform .text-widget .form-field-input{border:none;border-radius:10px}lib-subform .text-widget .form-field-input input{font-family:Noto Sans,sans-serif;height:38px;box-sizing:border-box;width:100%;cursor:pointer;margin-left:5px}lib-subform .text-widget .prompt-text{color:#000;font-size:14px!important;font-style:normal;font-weight:500;line-height:130%;font-family:Noto Sans,sans-serif;width:96%;resize:none;margin:0;padding:3px 3px 0}lib-subform .text-widget .icon-input-container input::placeholder{font-size:14px;font-weight:400;color:#575757}lib-subform .text-widget .icon-input-container{border:1px solid #bed0df!important;border-radius:10px;align-self:flex-end;position:relative;display:flex;flex-flow:row;align-items:center;margin:.5rem 0 0;padding:5px 10px;height:48px;width:100%}lib-subform .text-widget .mat-icon{height:30px;width:30px}lib-subform .chevron_right-parent{padding:3px 3px 0 0}lib-subform .chevron_right-parent .chevron_right{margin-top:5px;border-top:2px solid;border-right:2px solid;rotate:45deg;height:8px!important;width:8px!important;stroke-width:2px;stroke:#000}lib-subform .chevron_right-parent:hover{background-color:#fff}.text-widget div div form{line-height:13px!important}.text-widget div div form input{height:16px!important}.text-widget div div form :focus{outline:1px solid #9cbbe9;border-radius:4px;background-color:#fff}\n"] }]
     }], function () { return [{ type: PropertiesService }, { type: WidgetsService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: FormBuilderMasterService }, { type: WidgetDropListComponent }]; }, { widget: [{
             type: Input
         }], group: [{
@@ -46332,8 +46362,8 @@ class FormBuilderMasterService {
                 if (item.validityConditions) {
                     const validityConditions = typeof item.validityConditions == 'object' ? item.validityConditions : JSON.parse(item.validityConditions);
                     item.invalidityMsg = validityConditions.invalidity_msg;
-                    item.validityConditionJs = validityConditions.validity_conditions_js;
-                    item.validityConditions = validityConditions.validity_conditions;
+                    item.validityConditionJs = validityConditions.validity_conditions_js ?? item.validityConditionJs;
+                    item.validityConditions = validityConditions.validity_conditions ?? item.validityConditions;
                 }
                 if (!promptCode) {
                     item.promptMl = {
@@ -46733,6 +46763,9 @@ class FormBuilderMasterService {
                     getFormDetailsStorage.ff.forEach(val => {
                         // Push the identifier into the list array
                         list.push(val.identifier);
+                        if (val.markup && Array.isArray(val.markup)) {
+                            this.getSubFormIdentifiers(val.markup, list);
+                        }
                     });
                 }
                 else {
@@ -46746,6 +46779,9 @@ class FormBuilderMasterService {
                     getFormDetailsStorage.widgets.forEach(val => {
                         // Push the identifier into the list array
                         list.push(val.identifier);
+                        if (val.markup && val.markup && Array.isArray(val.markup)) {
+                            this.getSubFormIdentifiers(val.markup, list);
+                        }
                     });
                 }
                 else {
@@ -46756,6 +46792,14 @@ class FormBuilderMasterService {
         }
         return list;
     }
+    getSubFormIdentifiers(markup, list) {
+        markup.forEach(val => {
+            list.push(val.identifier);
+            if (val.markup && val.markup && Array.isArray(val.markup)) {
+                this.getSubFormIdentifiers(val.markup, list);
+            }
+        });
+    }
     /**
      * Get All List of location
      *
@@ -47290,14 +47334,18 @@ class WidgetsService {
             if (this.isValidIdentifier(response)) {
                 // Use a local variable to avoid repeated object access
                 let previousCount = this.previousIdentifiersMap[response];
+                const currResponse = response;
                 if (previousCount !== undefined) {
+                    const count = parseInt(response.split('_')[1], 10);
+                    response = response.split('_')[0];
+                    const n = previousCount + count;
                     previousCount++;
-                    response = `${response}_${previousCount}`;
+                    response = `${response}_${n}`;
                 }
                 else {
                     previousCount = 0;
                 }
-                this.previousIdentifiersMap[response] = previousCount;
+                this.previousIdentifiersMap[currResponse] = previousCount;
                 this.identifiersArray.push(response);
                 // Consider batching updates to localStorage
                 this.updateIdentifiersStorage();
@@ -49897,7 +49945,7 @@ class AppListComponent {
         const dialogRef = this.dialog.open(ConfirmationModalComponent, {
             width: '30%',
             data: {
-                title: 'Are you sure?',
+                title: 'Delete App',
                 message: 'Are you sure want to delete this app?',
                 confirmButtonText: 'Delete',
                 cancelButtonText: 'Cancel',
@@ -50032,7 +50080,7 @@ class AppListComponent {
         const dialogRef = this.dialog.open(ConfirmationModalComponent, {
             width: '30%',
             data: {
-                title: 'Are you sure?',
+                title: 'Disable QR',
                 message: 'Are you sure you want to disable QR for this form?',
                 confirmButtonText: 'Disable',
                 cancelButtonText: 'Cancel',
@@ -56024,7 +56072,7 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_
     i0.ɵɵtextInterpolate(agmOption_r1.note);
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_snazzy_info_window_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 11);
+    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 10);
     i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_snazzy_info_window_2_ng_template_1_Template, 2, 1, "ng-template");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56035,9 +56083,9 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_
 function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "ng-conatiner");
-    i0.ɵɵelementStart(1, "agm-marker", 9);
+    i0.ɵɵelementStart(1, "agm-marker", 8);
     i0.ɵɵlistener("markerClick", function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_Template_agm_marker_markerClick_1_listener() { i0.ɵɵrestoreView(_r16); const indexOfagm_r2 = i0.ɵɵnextContext(2).index; const ctx_r14 = i0.ɵɵnextContext(); return ctx_r14.openSnazzyInfoWindow(indexOfagm_r2); });
-    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_snazzy_info_window_2_Template, 2, 8, "agm-snazzy-info-window", 10);
+    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_agm_snazzy_info_window_2_Template, 2, 8, "agm-snazzy-info-window", 9);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56050,7 +56098,7 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_Temp
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ng-conatiner");
-    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_Template, 3, 4, "ng-conatiner", 8);
+    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_1_ng_conatiner_1_Template, 3, 4, "ng-conatiner", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const agmOption_r1 = i0.ɵɵnextContext().$implicit;
@@ -56067,7 +56115,7 @@ function ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_win
     i0.ɵɵtextInterpolate(agmOption_r1.note);
 } }
 function ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_window_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 14);
+    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 13);
     i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_window_2_ng_template_1_Template, 2, 1, "ng-template");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56077,9 +56125,9 @@ function ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_win
 function ImageMapViewComponent_ng_container_6_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "agm-polygon", 12);
+    i0.ɵɵelementStart(1, "agm-polygon", 11);
     i0.ɵɵlistener("polyClick", function ImageMapViewComponent_ng_container_6_ng_container_2_Template_agm_polygon_polyClick_1_listener() { i0.ɵɵrestoreView(_r25); const indexOfagm_r2 = i0.ɵɵnextContext().index; const ctx_r23 = i0.ɵɵnextContext(); return ctx_r23.openSnazzyInfoWindow(indexOfagm_r2); });
-    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_window_2_Template, 2, 7, "agm-snazzy-info-window", 13);
+    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_container_2_agm_snazzy_info_window_2_Template, 2, 7, "agm-snazzy-info-window", 12);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -56091,7 +56139,7 @@ function ImageMapViewComponent_ng_container_6_ng_container_2_Template(rf, ctx) {
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "agm-polyline-point", 16);
+    i0.ɵɵelement(1, "agm-polyline-point", 15);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const polylinePath_r29 = ctx.$implicit;
@@ -56108,7 +56156,7 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_win
     i0.ɵɵtextInterpolate(agmOption_r1.note);
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_window_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 14);
+    i0.ɵɵelementStart(0, "agm-snazzy-info-window", 13);
     i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_window_3_ng_template_1_Template, 2, 1, "ng-template");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56118,10 +56166,10 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_win
 function ImageMapViewComponent_ng_container_6_ng_conatiner_3_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "ng-conatiner");
-    i0.ɵɵelementStart(1, "agm-polyline", 15);
+    i0.ɵɵelementStart(1, "agm-polyline", 14);
     i0.ɵɵlistener("lineClick", function ImageMapViewComponent_ng_container_6_ng_conatiner_3_Template_agm_polyline_lineClick_1_listener() { i0.ɵɵrestoreView(_r35); const indexOfagm_r2 = i0.ɵɵnextContext().index; const ctx_r33 = i0.ɵɵnextContext(); return ctx_r33.openSnazzyInfoWindow(indexOfagm_r2); });
-    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_conatiner_3_ng_container_2_Template, 2, 2, "ng-container", 8);
-    i0.ɵɵtemplate(3, ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_window_3_Template, 2, 7, "agm-snazzy-info-window", 13);
+    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_conatiner_3_ng_container_2_Template, 2, 2, "ng-container", 7);
+    i0.ɵɵtemplate(3, ImageMapViewComponent_ng_container_6_ng_conatiner_3_agm_snazzy_info_window_3_Template, 2, 7, "agm-snazzy-info-window", 12);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56133,7 +56181,7 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_3_Template(rf, ctx) {
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "agm-circle", 17);
+    i0.ɵɵelement(1, "agm-circle", 16);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const circlePath_r38 = ctx.$implicit;
@@ -56143,7 +56191,7 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_4_ng_container_1_Temp
 } }
 function ImageMapViewComponent_ng_container_6_ng_conatiner_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ng-conatiner");
-    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_4_ng_container_1_Template, 2, 6, "ng-container", 8);
+    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_4_ng_container_1_Template, 2, 6, "ng-container", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const agmOption_r1 = i0.ɵɵnextContext().$implicit;
@@ -56151,11 +56199,11 @@ function ImageMapViewComponent_ng_container_6_ng_conatiner_4_Template(rf, ctx) {
     i0.ɵɵproperty("ngForOf", agmOption_r1.path);
 } }
 function ImageMapViewComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0, 6);
-    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_1_Template, 2, 1, "ng-conatiner", 7);
-    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_container_2_Template, 3, 2, "ng-container", 7);
-    i0.ɵɵtemplate(3, ImageMapViewComponent_ng_container_6_ng_conatiner_3_Template, 4, 2, "ng-conatiner", 7);
-    i0.ɵɵtemplate(4, ImageMapViewComponent_ng_container_6_ng_conatiner_4_Template, 2, 1, "ng-conatiner", 7);
+    i0.ɵɵelementContainerStart(0, 5);
+    i0.ɵɵtemplate(1, ImageMapViewComponent_ng_container_6_ng_conatiner_1_Template, 2, 1, "ng-conatiner", 6);
+    i0.ɵɵtemplate(2, ImageMapViewComponent_ng_container_6_ng_container_2_Template, 3, 2, "ng-container", 6);
+    i0.ɵɵtemplate(3, ImageMapViewComponent_ng_container_6_ng_conatiner_3_Template, 4, 2, "ng-conatiner", 6);
+    i0.ɵɵtemplate(4, ImageMapViewComponent_ng_container_6_ng_conatiner_4_Template, 2, 1, "ng-conatiner", 6);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const agmOption_r1 = ctx.$implicit;
@@ -56246,17 +56294,17 @@ class ImageMapViewComponent {
     }
 }
 ImageMapViewComponent.ɵfac = function ImageMapViewComponent_Factory(t) { return new (t || ImageMapViewComponent)(i0.ɵɵdirectiveInject(i1$5.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
-ImageMapViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImageMapViewComponent, selectors: [["lib-image-map-view"]], decls: 7, vars: 3, consts: [[1, "image-map-container", "relative", "min-w-full", "max-w-full", "min-h-full", "max-h-full"], ["mat-icon-button", "", 1, "close-button", 3, "click"], ["color", "warn", 1, "close-icon"], ["mat-dialog-content", "", 1, "image-map-body"], [3, "zoom", "fitBounds"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngFor", "ngForOf"], [3, "agmFitBounds", "latitude", "longitude", "markerClick"], [3, "panOnOpen", "latitude", "longitude", "maxWidth", "maxHeight", "closeWhenOthersOpen", "showCloseButton", "isOpen", 4, "ngIf"], [3, "panOnOpen", "latitude", "longitude", "maxWidth", "maxHeight", "closeWhenOthersOpen", "showCloseButton", "isOpen"], ["fillColor", "#8e8e8e", "fillOpacity", ".35", "strokeColor", "#32a1d0", 3, "paths", "polyClick"], [3, "panOnOpen", "latitude", "longitude", "closeWhenOthersOpen", "closeOnMapClick", "showCloseButton", "isOpen", 4, "ngIf"], [3, "panOnOpen", "latitude", "longitude", "closeWhenOthersOpen", "closeOnMapClick", "showCloseButton", "isOpen"], [3, "lineClick"], [3, "latitude", "longitude"], [3, "latitude", "longitude", "radius", "fillColor", "circleDraggable", "editable"]], template: function ImageMapViewComponent_Template(rf, ctx) { if (rf & 1) {
+ImageMapViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ImageMapViewComponent, selectors: [["lib-image-map-view"]], decls: 7, vars: 3, consts: [[1, "popup-container", "image-map-view-container"], [1, "close-icon", 3, "click"], [1, "image-map-body"], [3, "zoom", "fitBounds"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngFor", "ngForOf"], [3, "agmFitBounds", "latitude", "longitude", "markerClick"], [3, "panOnOpen", "latitude", "longitude", "maxWidth", "maxHeight", "closeWhenOthersOpen", "showCloseButton", "isOpen", 4, "ngIf"], [3, "panOnOpen", "latitude", "longitude", "maxWidth", "maxHeight", "closeWhenOthersOpen", "showCloseButton", "isOpen"], ["fillColor", "#8e8e8e", "fillOpacity", ".35", "strokeColor", "#32a1d0", 3, "paths", "polyClick"], [3, "panOnOpen", "latitude", "longitude", "closeWhenOthersOpen", "closeOnMapClick", "showCloseButton", "isOpen", 4, "ngIf"], [3, "panOnOpen", "latitude", "longitude", "closeWhenOthersOpen", "closeOnMapClick", "showCloseButton", "isOpen"], [3, "lineClick"], [3, "latitude", "longitude"], [3, "latitude", "longitude", "radius", "fillColor", "circleDraggable", "editable"]], template: function ImageMapViewComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "button", 1);
-        i0.ɵɵlistener("click", function ImageMapViewComponent_Template_button_click_1_listener() { return ctx.closeDialog(); });
-        i0.ɵɵelementStart(2, "mat-icon", 2);
-        i0.ɵɵtext(3, "close");
+        i0.ɵɵelementStart(1, "h1");
+        i0.ɵɵtext(2, "Image location");
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "button", 1);
+        i0.ɵɵlistener("click", function ImageMapViewComponent_Template_button_click_3_listener() { return ctx.closeDialog(); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "div", 3);
-        i0.ɵɵelementStart(5, "agm-map", 4);
-        i0.ɵɵtemplate(6, ImageMapViewComponent_ng_container_6_Template, 5, 5, "ng-container", 5);
+        i0.ɵɵelementStart(4, "div", 2);
+        i0.ɵɵelementStart(5, "agm-map", 3);
+        i0.ɵɵtemplate(6, ImageMapViewComponent_ng_container_6_Template, 5, 5, "ng-container", 4);
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
@@ -56265,10 +56313,10 @@ ImageMapViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Image
         i0.ɵɵproperty("zoom", ctx.zoom)("fitBounds", true);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngForOf", ctx.agmMangerOption);
-    } }, directives: [i8$1.MatButton, i2$1.MatIcon, i2$4.AgmMap, i1$3.NgForOf, i1$3.NgSwitch, i1$3.NgSwitchCase, i2$4.AgmMarker, i2$4.AgmFitBounds, i1$3.NgIf, i6$2.AgmSnazzyInfoWindow, i2$4.AgmPolygon, i2$4.AgmPolyline, i2$4.AgmPolylinePoint, i2$4.AgmCircle], styles: ["lib-image-map-view .mat-form-field.mat-form-field-appearance-fill{width:100%!important}lib-image-map-view .image-map-container .close-button{position:absolute;top:-31px;right:-27px}lib-image-map-view .image-map-container .close-icon{color:#000!important;font-size:14px;font-weight:600}lib-image-map-view agm-map{height:100%;width:100%}.image-map-box-container .mat-dialog-container{width:86%;height:86%;margin:auto}.image-map-box-container .image-map-container{display:flex;align-items:center;justify-content:center}.image-map-box-container .image-map-body{width:100%;height:100%;position:absolute}\n"], encapsulation: 2 });
+    } }, directives: [i2$4.AgmMap, i1$3.NgForOf, i1$3.NgSwitch, i1$3.NgSwitchCase, i2$4.AgmMarker, i2$4.AgmFitBounds, i1$3.NgIf, i4$3.AgmSnazzyInfoWindow, i2$4.AgmPolygon, i2$4.AgmPolyline, i2$4.AgmPolylinePoint, i2$4.AgmCircle], styles: [".image-map-view-container .image-map-body{width:fit-content;height:fit-content}.image-map-view-container .image-map-body agm-map{display:block;height:50vh;width:50vw}.cdk-global-overlay-wrapper:has(.image-map-box-container){justify-content:center!important;align-items:center!important}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageMapViewComponent, [{
         type: Component,
-        args: [{ selector: 'lib-image-map-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"image-map-container relative min-w-full max-w-full min-h-full max-h-full\">\n    <button mat-icon-button class=\"close-button\" (click)=\"closeDialog()\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <div mat-dialog-content class=\"image-map-body\">\n        <agm-map [zoom]=\"zoom\" [fitBounds]=\"true\">\n            <ng-container *ngFor=\"let agmOption of agmMangerOption;let indexOfagm=index;\"\n            [ngSwitch]=\"agmOption.type\">\n                <!-----------Markers shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'marker'\"> \n                    <ng-conatiner *ngFor=\"let pathsOfMarker of agmOption.path\">\n                        <agm-marker \n                            [agmFitBounds]=\"true\" \n                            [latitude]=\"pathsOfMarker.lat\" \n                            [longitude]=\"pathsOfMarker.lng\" \n                            (markerClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                            <agm-snazzy-info-window \n                                *ngIf=\"agmOption.note\"\n                                [panOnOpen]=\"true\" \n                                [latitude]=\"pathsOfMarker.lat\" \n                                [longitude]=\"pathsOfMarker.lng\"  \n                                [maxWidth]=\"400\" \n                                [maxHeight]=\"400\"\n                                [closeWhenOthersOpen]=\"true\" \n                                [showCloseButton]=\"true\" \n                                [isOpen]=\"agmOption.isOpen\">\n                                <ng-template>\n                                    <div>{{agmOption.note}}</div>\n                                </ng-template>\n                            </agm-snazzy-info-window>\n                        </agm-marker>\n                    </ng-conatiner>\n                </ng-conatiner>\n                <!-----------Polygon shapes content-->\n                <ng-container *ngSwitchCase=\"'polygon'\">\n                    <agm-polygon \n                        [paths]=\"agmOption.path\" \n                        fillColor=\"#8e8e8e\" \n                        fillOpacity=\".35\" \n                        strokeColor=\"#32a1d0\"\n                        (polyClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <agm-snazzy-info-window \n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\" \n                            [latitude]=\"agmOption.path[0].lat\" \n                            [longitude]=\"agmOption.path[0].lng\"  \n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\" \n                            [showCloseButton]=\"true\" \n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polygon>\n                </ng-container>\n                <!-----------Polyline shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'polyline'\">\n                    <agm-polyline (lineClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <ng-container *ngFor=\"let polylinePath of agmOption.path\">\n                            <agm-polyline-point [latitude]=\"polylinePath.lat\" [longitude]=\"polylinePath.lng\">\n                            </agm-polyline-point>\n                        </ng-container>\n                        <agm-snazzy-info-window \n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\" \n                            [latitude]=\"agmOption.path[0].lat\" \n                            [longitude]=\"agmOption.path[0].lng\"  \n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\" \n                            [showCloseButton]=\"true\" \n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polyline>\n                </ng-conatiner>\n                <!-----------Circle shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'circle'\">\n                    <ng-container *ngFor=\"let circlePath of agmOption.path\">\n                        <agm-circle \n                        [latitude]=\"circlePath.lat\" \n                        [longitude]=\"circlePath.lng\"\n                        [radius]=\"radius\"\n                        [fillColor]=\"'red'\"\n                        [circleDraggable]=\"false\"\n                        [editable]=\"false\">\n                        </agm-circle>\n                    </ng-container>\n                </ng-conatiner>\n            </ng-container>\n        </agm-map>\n    </div>\n</div>\n", styles: ["lib-image-map-view .mat-form-field.mat-form-field-appearance-fill{width:100%!important}lib-image-map-view .image-map-container .close-button{position:absolute;top:-31px;right:-27px}lib-image-map-view .image-map-container .close-icon{color:#000!important;font-size:14px;font-weight:600}lib-image-map-view agm-map{height:100%;width:100%}.image-map-box-container .mat-dialog-container{width:86%;height:86%;margin:auto}.image-map-box-container .image-map-container{display:flex;align-items:center;justify-content:center}.image-map-box-container .image-map-body{width:100%;height:100%;position:absolute}\n"] }]
+        args: [{ selector: 'lib-image-map-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"popup-container image-map-view-container\">\n    <h1>Image location</h1>\n    <button class=\"close-icon\" (click)=\"closeDialog()\"></button>\n    <div class=\"image-map-body\">\n        <agm-map [zoom]=\"zoom\" [fitBounds]=\"true\">\n            <ng-container *ngFor=\"let agmOption of agmMangerOption;let indexOfagm=index;\"\n            [ngSwitch]=\"agmOption.type\">\n                <!-----------Markers shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'marker'\"> \n                    <ng-conatiner *ngFor=\"let pathsOfMarker of agmOption.path\">\n                        <agm-marker \n                            [agmFitBounds]=\"true\" \n                            [latitude]=\"pathsOfMarker.lat\" \n                            [longitude]=\"pathsOfMarker.lng\" \n                            (markerClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                            <agm-snazzy-info-window \n                                *ngIf=\"agmOption.note\"\n                                [panOnOpen]=\"true\" \n                                [latitude]=\"pathsOfMarker.lat\" \n                                [longitude]=\"pathsOfMarker.lng\"  \n                                [maxWidth]=\"400\" \n                                [maxHeight]=\"400\"\n                                [closeWhenOthersOpen]=\"true\" \n                                [showCloseButton]=\"true\" \n                                [isOpen]=\"agmOption.isOpen\">\n                                <ng-template>\n                                    <div>{{agmOption.note}}</div>\n                                </ng-template>\n                            </agm-snazzy-info-window>\n                        </agm-marker>\n                    </ng-conatiner>\n                </ng-conatiner>\n                <!-----------Polygon shapes content-->\n                <ng-container *ngSwitchCase=\"'polygon'\">\n                    <agm-polygon \n                        [paths]=\"agmOption.path\" \n                        fillColor=\"#8e8e8e\" \n                        fillOpacity=\".35\" \n                        strokeColor=\"#32a1d0\"\n                        (polyClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <agm-snazzy-info-window \n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\" \n                            [latitude]=\"agmOption.path[0].lat\" \n                            [longitude]=\"agmOption.path[0].lng\"  \n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\" \n                            [showCloseButton]=\"true\" \n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polygon>\n                </ng-container>\n                <!-----------Polyline shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'polyline'\">\n                    <agm-polyline (lineClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <ng-container *ngFor=\"let polylinePath of agmOption.path\">\n                            <agm-polyline-point [latitude]=\"polylinePath.lat\" [longitude]=\"polylinePath.lng\">\n                            </agm-polyline-point>\n                        </ng-container>\n                        <agm-snazzy-info-window \n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\" \n                            [latitude]=\"agmOption.path[0].lat\" \n                            [longitude]=\"agmOption.path[0].lng\"  \n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\" \n                            [showCloseButton]=\"true\" \n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polyline>\n                </ng-conatiner>\n                <!-----------Circle shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'circle'\">\n                    <ng-container *ngFor=\"let circlePath of agmOption.path\">\n                        <agm-circle \n                        [latitude]=\"circlePath.lat\" \n                        [longitude]=\"circlePath.lng\"\n                        [radius]=\"radius\"\n                        [fillColor]=\"'red'\"\n                        [circleDraggable]=\"false\"\n                        [editable]=\"false\">\n                        </agm-circle>\n                    </ng-container>\n                </ng-conatiner>\n            </ng-container>\n        </agm-map>\n    </div>\n</div>\n", styles: [".image-map-view-container .image-map-body{width:fit-content;height:fit-content}.image-map-view-container .image-map-body agm-map{display:block;height:50vh;width:50vw}.cdk-global-overlay-wrapper:has(.image-map-box-container){justify-content:center!important;align-items:center!important}\n"] }]
     }], function () { return [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -56861,10 +56909,10 @@ ImageWidgetLightboxViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
         i0.ɵɵproperty("ngIf", ctx.annotation == null ? null : ctx.annotation.annotations.length);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", (ctx.annotation == null ? null : ctx.annotation.annotations.length) === 0 || (ctx.annotation == null ? null : ctx.annotation.annotations) === null);
-    } }, directives: [i1$3.NgClass, i3$2.DefaultClassDirective, i1$3.NgIf, i2$1.MatIcon, i1$3.NgForOf, i1$3.NgStyle, i3$2.DefaultStyleDirective, i5.MatCard], styles: ["lib-image-widget-lightbox-view .light-box-container{min-width:55vw;max-width:75vw;min-height:45vh;max-height:70vh}lib-image-widget-lightbox-view .mat-left-container{position:relative;flex:70%;width:70%;display:flex;justify-content:center;align-items:center;background-color:#10172b}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-left-arrow{position:absolute;top:50%;left:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-right-arrow{position:absolute;top:50%;right:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .loaders{display:inline-block;width:2rem;height:2rem;border-width:4px;border-radius:100%;color:#a855f7;position:absolute;inset:50%;z-index:0}lib-image-widget-lightbox-view .mat-right-container{width:30%;flex:30%}lib-image-widget-lightbox-view .mat-right-container #close-icon{right:0;top:0;font-size:16px}lib-image-widget-lightbox-view .mat-right-container .comment-box-container{font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper{display:flex;height:3.374rem;align-items:center}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper .image-lightbox-index{height:1.313rem;min-width:1.313rem;min-height:1.313rem;text-align:center;border-radius:100%;font-size:12px;font-weight:600;color:#fff;line-height:1.413rem}lib-image-widget-lightbox-view .mat-right-container .comment-box-container mat-card{background:#F2F4FA;border:none;box-shadow:none!important;font-size:.8rem;font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view #annotationsCanvas{max-width:100%}lib-image-widget-lightbox-view .mat-card{min-width:auto}@media only screen and (max-width: 600px){lib-image-widget-lightbox-view .mat-left-container{flex:100%;width:100%}lib-image-widget-lightbox-view .mat-right-container{flex:100%;width:100%}lib-image-widget-lightbox-view #close-icon{top:.5rem!important}}lib-image-widget-lightbox-view .comments{font-size:1rem;cursor:default}lib-image-widget-lightbox-view .lightbox-image-zoom-in-out{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;grid-row-gap:.5rem;row-gap:.5rem;justify-content:center;align-items:center;margin-right:.4rem;margin-bottom:.6rem}lib-image-widget-lightbox-view .comment-box{cursor:default}.imagelightbox-container mat-dialog-container{padding:24px}\n"], encapsulation: 2 });
+    } }, directives: [i1$3.NgClass, i3$2.DefaultClassDirective, i1$3.NgIf, i2$1.MatIcon, i1$3.NgForOf, i1$3.NgStyle, i3$2.DefaultStyleDirective, i5.MatCard], styles: ["lib-image-widget-lightbox-view .light-box-container{height:100%;width:100%}lib-image-widget-lightbox-view .mat-left-container{position:relative;flex:70%;width:70%;display:flex;justify-content:center;align-items:center;background-color:#10172b}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-left-arrow{position:absolute;top:50%;left:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-right-arrow{position:absolute;top:50%;right:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .loaders{display:inline-block;width:2rem;height:2rem;border-width:4px;border-radius:100%;color:#a855f7;position:absolute;inset:50%;z-index:0}lib-image-widget-lightbox-view .mat-right-container{width:30%;flex:30%}lib-image-widget-lightbox-view .mat-right-container #close-icon{right:0;top:0;font-size:16px}lib-image-widget-lightbox-view .mat-right-container .comment-box-container{font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper{display:flex;height:3.374rem;align-items:center}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper .image-lightbox-index{height:1.313rem;min-width:1.313rem;min-height:1.313rem;text-align:center;border-radius:100%;font-size:12px;font-weight:600;color:#fff;line-height:1.413rem}lib-image-widget-lightbox-view .mat-right-container .comment-box-container mat-card{background:#F2F4FA;border:none;box-shadow:none!important;font-size:.8rem;font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view #annotationsCanvas{max-width:100%}lib-image-widget-lightbox-view .mat-card{min-width:auto}@media only screen and (max-width: 600px){lib-image-widget-lightbox-view .mat-left-container{flex:100%;width:100%}lib-image-widget-lightbox-view .mat-right-container{flex:100%;width:100%}lib-image-widget-lightbox-view #close-icon{top:.5rem!important}}lib-image-widget-lightbox-view .comments{font-size:1rem;cursor:default}lib-image-widget-lightbox-view .lightbox-image-zoom-in-out{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;grid-row-gap:.5rem;row-gap:.5rem;justify-content:center;align-items:center;margin-right:.4rem;margin-bottom:.6rem}lib-image-widget-lightbox-view .comment-box{cursor:default}.cdk-overlay-pane:not(:has(.light-box-container)){height:auto!important;width:auto!important}.mat-dialog-container:has(.light-box-container){height:100%!important;width:100%!important;max-height:100%!important;max-width:100%!important}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageWidgetLightboxViewComponent, [{
         type: Component,
-        args: [{ selector: 'lib-image-widget-lightbox-view', encapsulation: ViewEncapsulation.None, template: "<div mat-dialog-content class=\"light-box-container flex h-full flex-col sm:flex-row relative\">\n<div class=\"mat-left-container\">\n    <canvas id=\"annotationsCanvas\" (click)=\"onCanvasClick($event)\" #canvas class=\"relative z-10\" [ngClass]=\"{'opacity-50': !imageLoaded}\">\n\n    </canvas>\n  <button *ngIf=\"!disablePreviousButton && imageLoaded\" (click)=\"showPreviousImage()\" [disabled]=\"!imageLoaded\"><mat-icon class=\"lightbox-image-left-arrow\" [svgIcon]=\"'axo_left_arrow'\" ></mat-icon></button>\n  <button *ngIf=\"!disableNextButton  && imageLoaded\" (click)=\"showNextImage()\"  [disabled]=\"!imageLoaded\"><mat-icon class=\"lightbox-image-right-arrow\" [svgIcon]=\"'axo_right_arrow'\" ></mat-icon></button>\n  <div class=\"lightbox-image-zoom-in-out\">\n    <mat-icon *ngIf=\"isImageWithAnnotations\" (click)=\"showImageWithoutAnnotations()\" [svgIcon]=\"showImage ?'axo_anotation_show':'axo_anotation_hide'\" class=\"cursor-pointer eye-icon z-20\"></mat-icon>\n    <mat-icon (click)=\"expandCanvas()\" [svgIcon]=\"isCanvasExpanded ?'axo_img_compress':'axo_fullscreen'\" class=\"cursor-pointer z-20\" [ngClass]=\"{'expand': isCanvasExpanded}\"></mat-icon>\n    <mat-icon (click)=\"imageZoomIn()\" [svgIcon]=\"'axo_zoom_in'\" class=\"cursor-pointer z-20\"></mat-icon>\n    <mat-icon  (click)=\"imageZoomOut()\"[svgIcon]=\"'axo_zoom_out'\" class=\"cursor-pointer z-20\"></mat-icon>\n  </div>\n  <div class=\"\n      spinner-border\n      animate-spin\n      loaders\n    \" role=\"status\" *ngIf=\"!imageLoaded\" [ngClass]=\"{'z-50': !imageLoaded}\">\n      <span class=\"visually-hidden\">Loading...</span>\n    </div>\n</div>\n\n  <div class=\"mat-right-container sm:relative bg-white customscroll pl-5\">\n    <div class=\"sticky top-0 pt-4 bg-white z-10 hidden sm:block\">\n      <mat-icon svgIcon=\"axo_popup_close\" id=\"close-icon\" (click)=\"closeDialog()\" class=\"absolute\"></mat-icon>\n      <div class=\"py-4 comments\">Comments</div>\n    </div>\n    <div class=\"block sm:hidden flex justify-between sticky top-0 z-10 bg-white\">\n      <div class=\"py-4 bg-white commments\">Comments</div>\n      <div class=\"block relative\">\n        <mat-icon id=\"close-icon\" (click)=\"closeDialog()\" class=\"absolute\">close</mat-icon>  \n      </div>\n    \n    </div>\n    <div class=\"comment-box axo-font text-sm\" *ngIf=\"annotation?.annotations.length\">\n      <div  class=\"comment-box-container flex gap-4 pb-4\" *ngFor=\"let item of annotation?.annotations; let i= index\">\n        <div class=\"image-lightbox-index-wrapper\">\n          <div class=\"image-lightbox-index\" [ngStyle]=\"{'background-color': item.color ,'border': (isAnnotationSelected && i === selectedAnnotationIndex && previouslySelectedAnnotationId === selectedAnnotationIndex) ?'1px solid #0000FF':''}\" (click)=\"selectAnnotation(i)\">{{i+1}}</div>\n        </div>\n        <mat-card class=\"w-full customscroll\"  [ngStyle]=\"{'border': (isAnnotationSelected && i === selectedAnnotationIndex && previouslySelectedAnnotationId === selectedAnnotationIndex) ?'1px solid #0000FF':''}\" (click)=\"selectAnnotation(i)\">{{item.notes}}</mat-card>  \n      </div>\n    </div>\n    <div class=\"comment-box\" *ngIf=\"annotation?.annotations.length === 0 || annotation?.annotations === null\">No comments available\n      \n    </div>\n  </div>\n</div>\n", styles: ["lib-image-widget-lightbox-view .light-box-container{min-width:55vw;max-width:75vw;min-height:45vh;max-height:70vh}lib-image-widget-lightbox-view .mat-left-container{position:relative;flex:70%;width:70%;display:flex;justify-content:center;align-items:center;background-color:#10172b}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-left-arrow{position:absolute;top:50%;left:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-right-arrow{position:absolute;top:50%;right:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .loaders{display:inline-block;width:2rem;height:2rem;border-width:4px;border-radius:100%;color:#a855f7;position:absolute;inset:50%;z-index:0}lib-image-widget-lightbox-view .mat-right-container{width:30%;flex:30%}lib-image-widget-lightbox-view .mat-right-container #close-icon{right:0;top:0;font-size:16px}lib-image-widget-lightbox-view .mat-right-container .comment-box-container{font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper{display:flex;height:3.374rem;align-items:center}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper .image-lightbox-index{height:1.313rem;min-width:1.313rem;min-height:1.313rem;text-align:center;border-radius:100%;font-size:12px;font-weight:600;color:#fff;line-height:1.413rem}lib-image-widget-lightbox-view .mat-right-container .comment-box-container mat-card{background:#F2F4FA;border:none;box-shadow:none!important;font-size:.8rem;font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view #annotationsCanvas{max-width:100%}lib-image-widget-lightbox-view .mat-card{min-width:auto}@media only screen and (max-width: 600px){lib-image-widget-lightbox-view .mat-left-container{flex:100%;width:100%}lib-image-widget-lightbox-view .mat-right-container{flex:100%;width:100%}lib-image-widget-lightbox-view #close-icon{top:.5rem!important}}lib-image-widget-lightbox-view .comments{font-size:1rem;cursor:default}lib-image-widget-lightbox-view .lightbox-image-zoom-in-out{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;grid-row-gap:.5rem;row-gap:.5rem;justify-content:center;align-items:center;margin-right:.4rem;margin-bottom:.6rem}lib-image-widget-lightbox-view .comment-box{cursor:default}.imagelightbox-container mat-dialog-container{padding:24px}\n"] }]
+        args: [{ selector: 'lib-image-widget-lightbox-view', encapsulation: ViewEncapsulation.None, template: "<div mat-dialog-content class=\"light-box-container flex h-full flex-col sm:flex-row relative\">\n<div class=\"mat-left-container\">\n    <canvas id=\"annotationsCanvas\" (click)=\"onCanvasClick($event)\" #canvas class=\"relative z-10\" [ngClass]=\"{'opacity-50': !imageLoaded}\">\n\n    </canvas>\n  <button *ngIf=\"!disablePreviousButton && imageLoaded\" (click)=\"showPreviousImage()\" [disabled]=\"!imageLoaded\"><mat-icon class=\"lightbox-image-left-arrow\" [svgIcon]=\"'axo_left_arrow'\" ></mat-icon></button>\n  <button *ngIf=\"!disableNextButton  && imageLoaded\" (click)=\"showNextImage()\"  [disabled]=\"!imageLoaded\"><mat-icon class=\"lightbox-image-right-arrow\" [svgIcon]=\"'axo_right_arrow'\" ></mat-icon></button>\n  <div class=\"lightbox-image-zoom-in-out\">\n    <mat-icon *ngIf=\"isImageWithAnnotations\" (click)=\"showImageWithoutAnnotations()\" [svgIcon]=\"showImage ?'axo_anotation_show':'axo_anotation_hide'\" class=\"cursor-pointer eye-icon z-20\"></mat-icon>\n    <mat-icon (click)=\"expandCanvas()\" [svgIcon]=\"isCanvasExpanded ?'axo_img_compress':'axo_fullscreen'\" class=\"cursor-pointer z-20\" [ngClass]=\"{'expand': isCanvasExpanded}\"></mat-icon>\n    <mat-icon (click)=\"imageZoomIn()\" [svgIcon]=\"'axo_zoom_in'\" class=\"cursor-pointer z-20\"></mat-icon>\n    <mat-icon  (click)=\"imageZoomOut()\"[svgIcon]=\"'axo_zoom_out'\" class=\"cursor-pointer z-20\"></mat-icon>\n  </div>\n  <div class=\"\n      spinner-border\n      animate-spin\n      loaders\n    \" role=\"status\" *ngIf=\"!imageLoaded\" [ngClass]=\"{'z-50': !imageLoaded}\">\n      <span class=\"visually-hidden\">Loading...</span>\n    </div>\n</div>\n\n  <div class=\"mat-right-container sm:relative bg-white customscroll pl-5\">\n    <div class=\"sticky top-0 pt-4 bg-white z-10 hidden sm:block\">\n      <mat-icon svgIcon=\"axo_popup_close\" id=\"close-icon\" (click)=\"closeDialog()\" class=\"absolute\"></mat-icon>\n      <div class=\"py-4 comments\">Comments</div>\n    </div>\n    <div class=\"block sm:hidden flex justify-between sticky top-0 z-10 bg-white\">\n      <div class=\"py-4 bg-white commments\">Comments</div>\n      <div class=\"block relative\">\n        <mat-icon id=\"close-icon\" (click)=\"closeDialog()\" class=\"absolute\">close</mat-icon>  \n      </div>\n    \n    </div>\n    <div class=\"comment-box axo-font text-sm\" *ngIf=\"annotation?.annotations.length\">\n      <div  class=\"comment-box-container flex gap-4 pb-4\" *ngFor=\"let item of annotation?.annotations; let i= index\">\n        <div class=\"image-lightbox-index-wrapper\">\n          <div class=\"image-lightbox-index\" [ngStyle]=\"{'background-color': item.color ,'border': (isAnnotationSelected && i === selectedAnnotationIndex && previouslySelectedAnnotationId === selectedAnnotationIndex) ?'1px solid #0000FF':''}\" (click)=\"selectAnnotation(i)\">{{i+1}}</div>\n        </div>\n        <mat-card class=\"w-full customscroll\"  [ngStyle]=\"{'border': (isAnnotationSelected && i === selectedAnnotationIndex && previouslySelectedAnnotationId === selectedAnnotationIndex) ?'1px solid #0000FF':''}\" (click)=\"selectAnnotation(i)\">{{item.notes}}</mat-card>  \n      </div>\n    </div>\n    <div class=\"comment-box\" *ngIf=\"annotation?.annotations.length === 0 || annotation?.annotations === null\">No comments available\n      \n    </div>\n  </div>\n</div>\n", styles: ["lib-image-widget-lightbox-view .light-box-container{height:100%;width:100%}lib-image-widget-lightbox-view .mat-left-container{position:relative;flex:70%;width:70%;display:flex;justify-content:center;align-items:center;background-color:#10172b}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-left-arrow{position:absolute;top:50%;left:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .lightbox-image-right-arrow{position:absolute;top:50%;right:1rem;cursor:pointer;z-index:20}lib-image-widget-lightbox-view .mat-left-container .loaders{display:inline-block;width:2rem;height:2rem;border-width:4px;border-radius:100%;color:#a855f7;position:absolute;inset:50%;z-index:0}lib-image-widget-lightbox-view .mat-right-container{width:30%;flex:30%}lib-image-widget-lightbox-view .mat-right-container #close-icon{right:0;top:0;font-size:16px}lib-image-widget-lightbox-view .mat-right-container .comment-box-container{font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper{display:flex;height:3.374rem;align-items:center}lib-image-widget-lightbox-view .mat-right-container .comment-box-container .image-lightbox-index-wrapper .image-lightbox-index{height:1.313rem;min-width:1.313rem;min-height:1.313rem;text-align:center;border-radius:100%;font-size:12px;font-weight:600;color:#fff;line-height:1.413rem}lib-image-widget-lightbox-view .mat-right-container .comment-box-container mat-card{background:#F2F4FA;border:none;box-shadow:none!important;font-size:.8rem;font-family:Open Sans,Arial,sans-serif}lib-image-widget-lightbox-view #annotationsCanvas{max-width:100%}lib-image-widget-lightbox-view .mat-card{min-width:auto}@media only screen and (max-width: 600px){lib-image-widget-lightbox-view .mat-left-container{flex:100%;width:100%}lib-image-widget-lightbox-view .mat-right-container{flex:100%;width:100%}lib-image-widget-lightbox-view #close-icon{top:.5rem!important}}lib-image-widget-lightbox-view .comments{font-size:1rem;cursor:default}lib-image-widget-lightbox-view .lightbox-image-zoom-in-out{position:absolute;bottom:0;right:0;display:flex;flex-direction:column;grid-row-gap:.5rem;row-gap:.5rem;justify-content:center;align-items:center;margin-right:.4rem;margin-bottom:.6rem}lib-image-widget-lightbox-view .comment-box{cursor:default}.cdk-overlay-pane:not(:has(.light-box-container)){height:auto!important;width:auto!important}.mat-dialog-container:has(.light-box-container){height:100%!important;width:100%!important;max-height:100%!important;max-width:100%!important}\n"] }]
     }], function () { return [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -60431,7 +60479,7 @@ GpsWidgetViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GpsW
     } if (rf & 2) {
         const _r1 = i0.ɵɵreference(2);
         i0.ɵɵproperty("ngIf", ctx.widget.value)("ngIfElse", _r1);
-    } }, directives: [i1$3.NgIf, i2$4.AgmMap, i1$3.NgForOf, i1$3.NgSwitch, i1$3.NgSwitchCase, i2$4.AgmMarker, i2$4.AgmFitBounds, i2$4.AgmInfoWindow, i2$4.AgmPolygon, i6$2.AgmSnazzyInfoWindow, i2$4.AgmPolyline, i2$4.AgmPolylinePoint, i2$1.MatIcon], styles: ["lib-gps-widget-view{display:block}lib-gps-widget-view agm-map{height:300px}lib-gps-widget-view .mat-form-field.mat-form-field-appearance-fill{width:100%!important}lib-gps-widget-view .gps-container{height:100%;width:100%}\n"], encapsulation: 2 });
+    } }, directives: [i1$3.NgIf, i2$4.AgmMap, i1$3.NgForOf, i1$3.NgSwitch, i1$3.NgSwitchCase, i2$4.AgmMarker, i2$4.AgmFitBounds, i2$4.AgmInfoWindow, i2$4.AgmPolygon, i4$3.AgmSnazzyInfoWindow, i2$4.AgmPolyline, i2$4.AgmPolylinePoint, i2$1.MatIcon], styles: ["lib-gps-widget-view{display:block}lib-gps-widget-view agm-map{height:300px}lib-gps-widget-view .mat-form-field.mat-form-field-appearance-fill{width:100%!important}lib-gps-widget-view .gps-container{height:100%;width:100%}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GpsWidgetViewComponent, [{
         type: Component,
         args: [{ selector: 'lib-gps-widget-view', encapsulation: ViewEncapsulation.None, template: "<!--- gps value  content-->\n<ng-container *ngIf=\"widget.value; else isWidgetValueEmpty\" >\n    <div class=\"gps-container\" *ngIf=\"widget.value\">\n        <agm-map [zoom]=\"zoom\" [scrollwheel]=\"false\"  [fitBounds]=\"true\" [restriction]=\"restriction\" [minZoom]=\"2\">\n            <ng-container *ngFor=\"let agmOption of agmMangerOption;let indexOfagm=index;\"\n            [ngSwitch]=\"agmOption.type\">\n                <!-----------Markers shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'marker'\">\n                    <ng-conatiner *ngFor=\"let pathsOfMarker of agmOption.path\">\n                        <agm-marker\n                            [agmFitBounds]=\"true\"\n                            [latitude]=\"pathsOfMarker.lat\"\n                            [longitude]=\"pathsOfMarker.lng\"\n                            (markerClick)=\"clickedMarker(infowindow)\">\n                            <agm-info-window #infowindow>\n                                <strong>\n                                    {{agmOption.note}}\n                                </strong>\n                            </agm-info-window>\n                        </agm-marker>\n                    </ng-conatiner>\n                </ng-conatiner>\n                <!-----------Polygon shapes content-->\n                <ng-container *ngSwitchCase=\"'polygon'\">\n                    <agm-polygon\n                        [paths]=\"agmOption.path\"\n                        fillColor=\"#8e8e8e\"\n                        fillOpacity=\".35\"\n                        strokeColor=\"#32a1d0\"\n                        (polyClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <agm-snazzy-info-window\n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\"\n                            [latitude]=\"agmOption.path[0].lat\"\n                            [longitude]=\"agmOption.path[0].lng\"\n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\"\n                            [showCloseButton]=\"true\"\n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polygon>\n                </ng-container>\n                <!-----------Polyline shapes content-->\n                <ng-conatiner *ngSwitchCase=\"'polyline'\">\n                    <agm-polyline (lineClick)=\"openSnazzyInfoWindow(indexOfagm)\">\n                        <ng-container *ngFor=\"let polylinePath of agmOption.path\">\n                            <agm-polyline-point [latitude]=\"polylinePath.lat\" [longitude]=\"polylinePath.lng\">\n                            </agm-polyline-point>\n                        </ng-container>\n                        <agm-snazzy-info-window\n                            *ngIf=\"agmOption.note\"\n                            [panOnOpen]=\"true\"\n                            [latitude]=\"agmOption.path[0].lat\"\n                            [longitude]=\"agmOption.path[0].lng\"\n                            [closeWhenOthersOpen]=\"true\"\n                            [closeOnMapClick]=\"true\"\n                            [showCloseButton]=\"true\"\n                            [isOpen]=\"agmOption.isOpen\">\n                            <ng-template>\n                                <div>{{agmOption.note}}</div>\n                            </ng-template>\n                        </agm-snazzy-info-window>\n                    </agm-polyline>\n                </ng-conatiner>\n            </ng-container>\n        </agm-map>\n    </div>\n</ng-container>\n<!--- gps value empty content-->\n<ng-template #isWidgetValueEmpty>\n    <div class=\"data-detail-infoc capture-container\">\n        <div class=\"data-detail-title flex text-sm\">\n            <mat-icon class=\"add-text\" svgIcon=\"axo_location\"></mat-icon>\n            <span *ngIf=\"section.showPrompt\" class=\"pl-2 text-sm\">{{widget.prompt}}<span class=\"colon\"> :</span></span>\n        </div>\n        <span class=\"flex justify-start\">-</span>\n    </div>\n</ng-template>\n", styles: ["lib-gps-widget-view{display:block}lib-gps-widget-view agm-map{height:300px}lib-gps-widget-view .mat-form-field.mat-form-field-appearance-fill{width:100%!important}lib-gps-widget-view .gps-container{height:100%;width:100%}\n"] }]