@posiwise/admin-module 0.0.255 → 0.0.257

package/fesm2022/posiwise-admin-module.mjs

@@ -11,16 +11,18 @@ import { AdminDataService, AdminService, AppAdmin, DEFAULT_PAYOUT_PROVIDER, ONBO
 import { AppConfigService } from "@posiwise/app-config-service";
 import * as i4$3 from "@posiwise/app-loader";
 import { AppLoaderModule } from "@posiwise/app-loader";
-import * as i2$2 from "@posiwise/common-services";
+import * as i2$1 from "@posiwise/common-services";
 import { FormHelperService, PermissionService, PrimeNgHelper, SubscriptionService, ValidationService } from "@posiwise/common-services";
+import * as i9 from "@posiwise/core-guards";
+import { PageAccessGuard, TrackDirtyFormDirective } from "@posiwise/core-guards";
 import { CoreTranslocoModule } from "@posiwise/core-transloco";
 import * as i8 from "@posiwise/directives";
 import { DirectivesModule } from "@posiwise/directives";
-import * as i9 from "@posiwise/pipes";
+import * as i9$1 from "@posiwise/pipes";
 import { PipesModule } from "@posiwise/pipes";
 import * as i6$2 from "@posiwise/shared-components";
 import { CollapsibleSidebarTriggerDirective, SharedComponentsModule } from "@posiwise/shared-components";
-import * as i12 from "@posiwise/utils";
+import * as i12$1 from "@posiwise/utils";
 import { CustomUploaderComponent, QuillHelper, ValidateForm, appendQueryParam, handleDateRangeSelection } from "@posiwise/utils";
 import * as i2 from "angular-plotly.js";
 import { PlotlyViaCDNModule } from "angular-plotly.js";
@@ -29,7 +31,7 @@ import { NgxDaterangepickerMd } from "ngx-daterangepicker-material";
 import * as i3$1 from "ngx-json-viewer";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
 import { NgxPaginationModule } from "ngx-pagination";
-import * as i11 from "ngx-quill";
+import * as i12 from "ngx-quill";
 import { QuillModule } from "ngx-quill";
 import * as i5 from "ngx-ui-switch";
 import { UiSwitchModule } from "ngx-ui-switch";
@@ -50,9 +52,9 @@ import * as i5$1 from "primeng/inputtext";
 import { InputTextModule } from "primeng/inputtext";
 import * as i4$2 from "primeng/multiselect";
 import { MultiSelectModule } from "primeng/multiselect";
-import * as i2$3 from "primeng/select";
+import * as i2$2 from "primeng/select";
 import { SelectModule } from "primeng/select";
-import * as i2$4 from "primeng/table";
+import * as i2$3 from "primeng/table";
 import { TableModule } from "primeng/table";
 import * as i3$3 from "primeng/tooltip";
 import { TooltipModule } from "primeng/tooltip";
@@ -61,13 +63,11 @@ import * as i3$2 from "@ng-bootstrap/ng-bootstrap";
 import { NgbActiveModal, NgbDatepickerModule, NgbModalModule, NgbNavModule, NgbTooltipModule } from "@ng-bootstrap/ng-bootstrap";
 import * as i7$2 from "@angular/router";
 import { RouterModule } from "@angular/router";
-import * as i2$1 from "@posiwise/core-guards";
-import { PageAccessGuard, unsavedChangesGuard } from "@posiwise/core-guards";
 import { AppBaseComponent } from "@posiwise/app-base-component";
 import * as i8$2 from "@jsverse/transloco";
 import { ADMIN_ROUTERS, PAGE_SIZE, PERMISSION_NAMES, SUBSCRIPTION_ANALYTICS_TYPES, TAG_ENTITY, TOKEN_HEADER_KEY } from "@posiwise/common-utilities";
 import { HelperService } from "@posiwise/helper-service";
-import * as i11$1 from "primeng/progressspinner";
+import * as i11 from "primeng/progressspinner";
 import { __decorate } from "tslib";
 import * as i14 from "@angular/cdk/drag-drop";
 import { moveItemInArray } from "@angular/cdk/drag-drop";
@@ -195,7 +195,7 @@ var AmbassadorPayoutDetailsComponent = class AmbassadorPayoutDetailsComponent ex
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -308,7 +308,7 @@ var AmbassadorPayoutDetailsComponent = class AmbassadorPayoutDetailsComponent ex
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -397,7 +397,7 @@ var AmbassadorPayoutDetailsComponent = class AmbassadorPayoutDetailsComponent ex
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -570,7 +570,7 @@ var AmbassadorPayoutsListComponent = class AmbassadorPayoutsListComponent extend
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -683,19 +683,19 @@ var AmbassadorPayoutsListComponent = class AmbassadorPayoutsListComponent extend
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -947,7 +947,7 @@ var AmbassadorPayoutsListComponent = class AmbassadorPayoutsListComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -1006,7 +1006,7 @@ var AmbassadorPayoutsListComponent = class AmbassadorPayoutsListComponent extend
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -1117,6 +1117,7 @@ var GlobalConfigDetailsComponent = class GlobalConfigDetailsComponent extends Ap
 		this.buttonBusy = true;
 		const data = this.form.value;
 		(this.id ? this.adminService.editGlobalConfig(this.id, data) : this.adminService.postGlobalConfig(data)).subscribe(() => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.GlobalConfigMessage.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -1164,7 +1165,7 @@ var GlobalConfigDetailsComponent = class GlobalConfigDetailsComponent extends Ap
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -1288,7 +1289,7 @@ var GlobalConfigDetailsComponent = class GlobalConfigDetailsComponent extends Ap
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -1354,6 +1355,11 @@ var GlobalConfigDetailsComponent = class GlobalConfigDetailsComponent extends Ap
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -1478,7 +1484,7 @@ var GlobalConfigListComponent = class GlobalConfigListComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -1591,19 +1597,19 @@ var GlobalConfigListComponent = class GlobalConfigListComponent extends AppBaseC
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -1686,7 +1692,7 @@ var GlobalConfigListComponent = class GlobalConfigListComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -1926,7 +1932,7 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -2039,19 +2045,19 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -2085,7 +2091,7 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -2204,7 +2210,7 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -2239,12 +2245,12 @@ var ContactUsListComponent = class ContactUsListComponent extends AppBaseCompone
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -2410,7 +2416,7 @@ var CredentialsComponent = class CredentialsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -2523,19 +2529,19 @@ var CredentialsComponent = class CredentialsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -2618,7 +2624,7 @@ var CredentialsComponent = class CredentialsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -2739,6 +2745,7 @@ var CredentialsDetailsComponent = class CredentialsDetailsComponent extends AppB
 		this.submitted = true;
 		(this.id ? this.adminService.updateCredentials(this.id, this.form.value) : this.adminService.saveCredentials(this.form.value)).subscribe((response) => {
 			this.form.patchValue(response);
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Credentials.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -2832,7 +2839,7 @@ var CredentialsDetailsComponent = class CredentialsDetailsComponent extends AppB
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -2917,6 +2924,11 @@ var CredentialsDetailsComponent = class CredentialsDetailsComponent extends AppB
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -3130,7 +3142,7 @@ var SubscriptionCredentialsComponent = class SubscriptionCredentialsComponent ex
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -3243,19 +3255,19 @@ var SubscriptionCredentialsComponent = class SubscriptionCredentialsComponent ex
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -3289,7 +3301,7 @@ var SubscriptionCredentialsComponent = class SubscriptionCredentialsComponent ex
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -3408,7 +3420,7 @@ var SubscriptionCredentialsComponent = class SubscriptionCredentialsComponent ex
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -3533,6 +3545,7 @@ var SubscriptionCredentialsDetailsComponent = class SubscriptionCredentialsDetai
 		this.submitted = true;
 		const data = this.form.value;
 		(this.id ? this.adminService.editSubscriptionCredential(this.id, data) : this.adminService.postSubscriptionCredential(data)).subscribe(() => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Credentials.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -3580,7 +3593,7 @@ var SubscriptionCredentialsDetailsComponent = class SubscriptionCredentialsDetai
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -3676,7 +3689,7 @@ var SubscriptionCredentialsDetailsComponent = class SubscriptionCredentialsDetai
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -3742,6 +3755,11 @@ var SubscriptionCredentialsDetailsComponent = class SubscriptionCredentialsDetai
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -4394,6 +4412,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 		data["cs_cta_iframe"] = this.form.value?.cs_cta_iframe ?? "";
 		data["trial_cta_iframe"] = this.form.value?.trial_cta_iframe ?? "";
 		(this.id ? this.adminService.updateDomainConfig(this.id, data) : this.adminService.createDomainConfig(data)).subscribe({ next: () => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.DomainConfig.UpdatedMessage"));
 			this.cdr.markForCheck();
 		} }).add(() => {
@@ -4411,7 +4430,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 			deps: [
 				{ token: i0.Injector },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i3$2.NgbModal },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i10.FormBuilder }
@@ -4584,7 +4603,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -4708,7 +4727,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -4722,7 +4741,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i12.ProfileImageCropperComponent,
+					type: i12$1.ProfileImageCropperComponent,
 					selector: "pw-image-cropper",
 					inputs: ["aspectRatio", "dynamicData"],
 					outputs: [
@@ -4733,7 +4752,7 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i12.CustomUploaderComponent,
+					type: i12$1.CustomUploaderComponent,
 					selector: "pw-custom-uploader",
 					inputs: [
 						"controlName",
@@ -4874,6 +4893,11 @@ var DomainConfigBuildComponent = class DomainConfigBuildComponent extends AppBas
 					selector: "[formArrayName]",
 					inputs: ["formArrayName"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -4900,7 +4924,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i3$2.NgbModal },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i10.FormBuilder }
@@ -4988,6 +5012,7 @@ var DomainConfigCoreComponent = class DomainConfigCoreComponent extends AppBaseC
 		};
 		if (!this.id) data.master_subscription_id = this.appConfig?.master_subscription?.subscription_id;
 		(this.id ? this.adminService.updateDomainConfig(this.id, data) : this.adminService.createDomainConfig(data)).subscribe({ next: (res) => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.DomainConfig.UpdatedMessage"));
 			this.router.navigate([`${this.routers.domainConfigDetails}${this.id ? this.id : res.id}`], { queryParams: {
 				tabId: "Organization",
@@ -5027,7 +5052,7 @@ var DomainConfigCoreComponent = class DomainConfigCoreComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -5123,7 +5148,7 @@ var DomainConfigCoreComponent = class DomainConfigCoreComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -5189,6 +5214,11 @@ var DomainConfigCoreComponent = class DomainConfigCoreComponent extends AppBaseC
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -5260,6 +5290,7 @@ var BaseDomainConfigComponent = class BaseDomainConfigComponent extends AppBaseC
 			subscription_id: this.subscriptionId
 		};
 		(this.id ? this.adminService.updateDomainConfig(this.id, data) : this.adminService.createDomainConfig(data)).subscribe({ next: (res) => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.DomainConfig.UpdatedMessage"));
 			this.router.navigate([`${this.routers.domainConfigDetails}${this.id ? this.id : res.id}`], { queryParams: {
 				tabId: this.getTabId(),
@@ -5384,7 +5415,7 @@ var DomainConfigOrganizationComponent = class DomainConfigOrganizationComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -5454,6 +5485,11 @@ var DomainConfigOrganizationComponent = class DomainConfigOrganizationComponent
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -5581,7 +5617,7 @@ var DomainConfigSecurityComponent = class DomainConfigSecurityComponent extends
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -5651,6 +5687,11 @@ var DomainConfigSecurityComponent = class DomainConfigSecurityComponent extends
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -5743,7 +5784,7 @@ var DomainConfigSocialComponent = class DomainConfigSocialComponent extends Base
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -5813,6 +5854,11 @@ var DomainConfigSocialComponent = class DomainConfigSocialComponent extends Base
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -5882,6 +5928,7 @@ var DomainConfigIntegrationsComponent = class DomainConfigIntegrationsComponent
 			subscription_id: this.subscriptionId
 		};
 		(this.id ? this.adminService.updateDomainConfig(this.id, data) : this.adminService.createDomainConfig(data)).subscribe({ next: (res) => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.DomainConfig.UpdatedMessage"));
 			this.router.navigate([`${this.routers.domainConfigDetails}${this.id ? this.id : res.id}`], { queryParams: {
 				tabId: "Login & SSO",
@@ -5947,7 +5994,7 @@ var DomainConfigIntegrationsComponent = class DomainConfigIntegrationsComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -6017,6 +6064,11 @@ var DomainConfigIntegrationsComponent = class DomainConfigIntegrationsComponent
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -6236,6 +6288,7 @@ var DomainConfigInterfaceComponent = class DomainConfigInterfaceComponent extend
 		};
 		const filteredData = Object.fromEntries(Object.entries(data).filter(([_key, value]) => value !== null && value !== ""));
 		(this.id ? this.adminService.updateDomainConfig(this.id, filteredData) : this.adminService.createDomainConfig(filteredData)).subscribe({ next: (res) => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.DomainConfig.UpdatedMessage"));
 			this.router.navigate([`${this.routers.domainConfigDetails}${this.id ? this.id : res.id}`], { queryParams: {
 				tabId: "Public Pages",
@@ -6307,7 +6360,7 @@ var DomainConfigInterfaceComponent = class DomainConfigInterfaceComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -6321,7 +6374,7 @@ var DomainConfigInterfaceComponent = class DomainConfigInterfaceComponent extend
 				},
 				{
 					kind: "component",
-					type: i12.CustomUploaderComponent,
+					type: i12$1.CustomUploaderComponent,
 					selector: "pw-custom-uploader",
 					inputs: [
 						"controlName",
@@ -6389,6 +6442,11 @@ var DomainConfigInterfaceComponent = class DomainConfigInterfaceComponent extend
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -6820,7 +6878,7 @@ var DomainConfigListComponent = class DomainConfigListComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -6933,19 +6991,19 @@ var DomainConfigListComponent = class DomainConfigListComponent extends AppBaseC
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -7028,7 +7086,7 @@ var DomainConfigListComponent = class DomainConfigListComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -7253,6 +7311,7 @@ var AddEditFaqComponent = class AddEditFaqComponent extends AppBaseComponent {
 		(this.isEdit ? this.adminService.putFaq({ ...payload }, this.subscriptionId) : this.adminService.postFaq(payload, this.subscriptionId)).subscribe(() => {
 			const key = this.isEdit ? "Admin.Faq.UpdatedMessage" : "Admin.Faq.AddMessage";
 			this.toast.success(this.translation.translate(key));
+			this.form.markAsPristine();
 			this.router.navigate([`${this.routers.faqConfig}`]);
 		}).add(() => {
 			this.buttonBusy = false;
@@ -7302,9 +7361,9 @@ var AddEditFaqComponent = class AddEditFaqComponent extends AppBaseComponent {
 			ngImport: i0,
 			type: AddEditFaqComponent,
 			deps: [
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -7331,7 +7390,7 @@ var AddEditFaqComponent = class AddEditFaqComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -7551,7 +7610,7 @@ var AddEditFaqComponent = class AddEditFaqComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -7617,9 +7676,14 @@ var AddEditFaqComponent = class AddEditFaqComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -7646,9 +7710,9 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	],
@@ -7881,9 +7945,9 @@ var FaqListComponent = class FaqListComponent extends AppBaseComponent {
 			ngImport: i0,
 			type: FaqListComponent,
 			deps: [
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -7911,7 +7975,7 @@ var FaqListComponent = class FaqListComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -8024,7 +8088,7 @@ var FaqListComponent = class FaqListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -8192,7 +8256,7 @@ var FaqListComponent = class FaqListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -8257,12 +8321,12 @@ var FaqListComponent = class FaqListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.RemoveHtmlPipe,
+					type: i9$1.RemoveHtmlPipe,
 					name: "removeHtml"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -8284,9 +8348,9 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -8349,22 +8413,19 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppBaseComponent {
-	constructor(injector, adminService, unsavedChanges) {
+	constructor(injector, adminService) {
 		super(injector);
 		this.adminService = adminService;
-		this.unsavedChanges = unsavedChanges;
 		this.form = AppAdmin.getFeatureFlagForm();
 		this.routers = ROUTERS;
 		this.id = 0;
 		this.isLoading = true;
 		this.submitted = false;
 		this.buttonBusy = false;
-		this.saved = false;
 		this.flagTypeOptions = [];
 		this.statusOptions = [];
 		this.allUsers = [];
 		this.filteredUsers = [];
-		this.unregisterUnsaved = null;
 	}
 	ngOnInit() {
 		this.subscriptionId = PermissionService.selectedSubscription?.id;
@@ -8375,14 +8436,6 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 			if (this.id) this.getFeatureFlag();
 			else this.isLoading = false;
 		});
-		this.unregisterUnsaved = this.unsavedChanges.watch(() => this.hasUnsavedChanges());
-	}
-	ngOnDestroy() {
-		this.unregisterUnsaved?.();
-		super.ngOnDestroy();
-	}
-	hasUnsavedChanges() {
-		return this.form.dirty && !this.saved;
 	}
 	loadSupportedOptions() {
 		this.adminService.getSupportedFeatureFlagOptions().subscribe((response) => {
@@ -8444,7 +8497,6 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 			next: () => {
 				this.toast.success(this.id ? "Feature flag updated successfully." : "Feature flag created successfully.");
 				this.form.markAsPristine();
-				this.saved = true;
 				this.router.navigate([this.routers.featureFlagsConfig]);
 			},
 			complete: () => {
@@ -8461,11 +8513,7 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 			version: "22.2.0",
 			ngImport: i0,
 			type: FeatureFlagDetailsComponent,
-			deps: [
-				{ token: i0.Injector },
-				{ token: i1$1.AdminService },
-				{ token: i2$1.UnsavedChangesService }
-			],
+			deps: [{ token: i0.Injector }, { token: i1$1.AdminService }],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
@@ -8561,7 +8609,7 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -8735,7 +8783,7 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -8814,6 +8862,11 @@ var FeatureFlagDetailsComponent = class FeatureFlagDetailsComponent extends AppB
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -8836,11 +8889,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: "<div class=\"container-fluid pw-tab\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a routerLink=\"/admin/feature-flags/list\" class=\"previous\" aria-label=\"Back to feature flags list\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Feature Flag</h3>\n      </div>\n\n      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progress-spinner strokeWidth=\"2\"></p-progress-spinner>\n        </div>\n      }\n\n      <div class=\"p-2 mt-3\">\n        @if (!isLoading) {\n        <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n          <div class=\"row\">\n            <pw-input-container class=\"col-lg-6\" label=\"Key\" name=\"key\" controlId=\"feature-flag-key\" errorMsg=\"Key is required\"\n              [showTooltip]=\"true\" [tooltipText]=\"'FeatureFlag.Tooltip.Key' | transloco\">\n              <input type=\"text\" id=\"feature-flag-key\" formControlName=\"key\" class=\"form-control\" [placeholder]=\"'FeatureFlag.Placeholder.Key' | transloco\" [ngClass]=\"{ 'is-invalid': submitted && f['key'].errors }\"\n                  aria-label=\"Key\" />\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-6\" label=\"Name\" name=\"name\" controlId=\"feature-flag-name\" errorMsg=\"Name is required\"\n              [showTooltip]=\"true\" [tooltipText]=\"'FeatureFlag.Tooltip.Name' | transloco\">\n              <input type=\"text\" id=\"feature-flag-name\" formControlName=\"name\" class=\"form-control\" [placeholder]=\"'FeatureFlag.Placeholder.Name' | transloco\" [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\"\n                  aria-label=\"Name\" />\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-12\" label=\"Description\" name=\"description\" controlId=\"feature-flag-description\">\n              <textarea id=\"feature-flag-description\" formControlName=\"description\" rows=\"4\" class=\"form-control\" [placeholder]=\"'FeatureFlag.Placeholder.Description' | transloco\"\n                  aria-label=\"Description\"></textarea>\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-3\" label=\"Type\" name=\"flag_type\" controlId=\"feature-flag-type\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select [options]=\"flagTypeOptions\" [attr.aria-labelledby]=\"'feature-flag-type-label'\" formControlName=\"flag_type\" class=\"dropdown-bg-transparent\" [placeholder]=\"'FeatureFlag.Placeholder.Type' | transloco\"></p-select>\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-3\" label=\"Status\" name=\"status\" controlId=\"feature-flag-status\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select [options]=\"statusOptions\" [attr.aria-labelledby]=\"'feature-flag-status-label'\" formControlName=\"status\" class=\"dropdown-bg-transparent\" [placeholder]=\"'FeatureFlag.Placeholder.Status' | transloco\"></p-select>\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-3\" label=\"Owner\" name=\"owner\" controlId=\"feature-flag-owner\" [useAriaLabelledbyOnly]=\"true\">\n              <p-auto-complete class=\"w-100\" appendTo=\"body\"\n                [suggestions]=\"filteredUsers\"\n                [attr.aria-labelledby]=\"'feature-flag-owner-label'\"\n                formControlName=\"owner\"\n                dataKey=\"id\"\n                optionLabel=\"displayName\"\n                [dropdown]=\"true\"\n                (completeMethod)=\"searchOwners($event)\"\n                [placeholder]=\"'FeatureFlag.Placeholder.Owner' | transloco\"\n                [multiple]=\"false\"\n                autocomplete=\"off\">\n                <ng-template let-item #item>\n                  <span [title]=\"item.displayName\">{{ item.displayName }}</span>\n                </ng-template>\n              </p-auto-complete>\n            </pw-input-container>\n\n            <pw-input-container class=\"col-lg-3\" label=\"Expires At\" name=\"expires_at\" controlId=\"feature-flag-expires_at\" [useAriaLabelledbyOnly]=\"true\">\n              <p-datepicker inputId=\"feature-flag-expires_at\" formControlName=\"expires_at\" [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\" [placeholder]=\"'FeatureFlag.Placeholder.ExpiresAt' | transloco\"></p-datepicker>\n            </pw-input-container>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 mt-4\">\n              <div class=\"mb-3 text-end\">\n                <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"onCancel()\">{{ 'Button.Cancel' | transloco }}</button>\n                <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n              </div>\n            </div>\n          </div>\n        </form>\n        }\n      </div>\n    </div>\n  </div>\n</div>"
 		}]
 	}],
-	ctorParameters: () => [
-		{ type: i0.Injector },
-		{ type: i1$1.AdminService },
-		{ type: i2$1.UnsavedChangesService }
-	]
+	ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AdminService }]
 });
 var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseComponent {
 	constructor(injector, adminService, cdr, confirmDialog) {
@@ -9004,7 +9053,7 @@ var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -9117,7 +9166,7 @@ var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseC
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -9151,7 +9200,7 @@ var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -9292,7 +9341,7 @@ var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -9381,6 +9430,11 @@ var FeatureFlagRulesComponent = class FeatureFlagRulesComponent extends AppBaseC
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -9516,7 +9570,7 @@ var FeatureFlagsListComponent = class FeatureFlagsListComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -9629,7 +9683,7 @@ var FeatureFlagsListComponent = class FeatureFlagsListComponent extends AppBaseC
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -9718,7 +9772,7 @@ var FeatureFlagsListComponent = class FeatureFlagsListComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -9887,6 +9941,7 @@ var FeedbackQuestionsDetailsComponent = class FeedbackQuestionsDetailsComponent
 		this.submitted = true;
 		const data = { ...this.form.value };
 		(this.id ? this.adminService.updateFeedbackQuestion(this.id, data) : this.adminService.createFeedbackQuestion(data)).subscribe({ next: () => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.FeedbackQuestions.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -9905,7 +9960,7 @@ var FeedbackQuestionsDetailsComponent = class FeedbackQuestionsDetailsComponent
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService }
+				{ token: i2$1.ProductService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -9989,6 +10044,11 @@ var FeedbackQuestionsDetailsComponent = class FeedbackQuestionsDetailsComponent
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -10016,7 +10076,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService }
+		{ type: i2$1.ProductService }
 	],
 	propDecorators: { onSave: [] }
 });
@@ -10097,7 +10157,7 @@ var FeedbackQuestionsListComponent = class FeedbackQuestionsListComponent extend
 			deps: [
 				{ token: i0.Injector },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
 			],
@@ -10118,7 +10178,7 @@ var FeedbackQuestionsListComponent = class FeedbackQuestionsListComponent extend
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -10231,19 +10291,19 @@ var FeedbackQuestionsListComponent = class FeedbackQuestionsListComponent extend
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -10326,7 +10386,7 @@ var FeedbackQuestionsListComponent = class FeedbackQuestionsListComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -10399,7 +10459,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
 	]
@@ -10755,6 +10815,7 @@ var AddEditIncidentComponent = class AddEditIncidentComponent extends AppBaseCom
 				subscription_id: this.subscriptionId
 			};
 			this.commonService.addIncident(data).subscribe(() => {
+				this.form.markAsPristine();
 				this.toast.success(this.translation.translate("Admin.Incident.AddMessage"));
 				this.router.navigate([`${this.routers.incidentConfig}`]);
 				this.cdr.markForCheck();
@@ -10774,6 +10835,7 @@ var AddEditIncidentComponent = class AddEditIncidentComponent extends AppBaseCom
 				subscription_id: this.subscriptionId
 			};
 			this.commonService.editIncident(this.id, data).subscribe(() => {
+				this.form.markAsPristine();
 				this.toast.success(this.translation.translate("Admin.Incident.UpdateMessage"));
 				this.router.navigate([`${this.routers.incidentConfig}`]);
 				this.cdr.markForCheck();
@@ -10797,7 +10859,7 @@ var AddEditIncidentComponent = class AddEditIncidentComponent extends AppBaseCom
 			deps: [
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.CommonService }
+				{ token: i2$1.CommonService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -10926,7 +10988,7 @@ var AddEditIncidentComponent = class AddEditIncidentComponent extends AppBaseCom
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -11005,9 +11067,14 @@ var AddEditIncidentComponent = class AddEditIncidentComponent extends AppBaseCom
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -11036,7 +11103,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.CommonService }
+		{ type: i2$1.CommonService }
 	],
 	propDecorators: { editForm: [{
 		type: ViewChild,
@@ -11126,7 +11193,7 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 			type: IncidentListComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
 			],
@@ -11147,7 +11214,7 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -11260,19 +11327,19 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -11355,7 +11422,7 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -11420,12 +11487,12 @@ var IncidentListComponent = class IncidentListComponent extends AppBaseComponent
 				},
 				{
 					kind: "pipe",
-					type: i9.RemoveHtmlPipe,
+					type: i9$1.RemoveHtmlPipe,
 					name: "removeHtml"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -11448,7 +11515,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
 	]
@@ -11506,19 +11573,16 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent extends AppBaseComponent {
-	constructor(injector, cdr, adminService, productService, unsavedChanges) {
+	constructor(injector, cdr, adminService, productService) {
 		super(injector);
 		this.cdr = cdr;
 		this.adminService = adminService;
 		this.productService = productService;
-		this.unsavedChanges = unsavedChanges;
 		this.submitted = false;
 		this.buttonBusy = false;
-		this.saved = false;
 		this.routers = ROUTERS;
 		this.isLoading = true;
 		this.featureKeys = [];
-		this.unregisterUnsaved = null;
 		this.form = AppAdmin.loginNotificationForm();
 	}
 	ngOnInit() {
@@ -11531,14 +11595,6 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 			else this.isLoading = false;
 			this.cdr.markForCheck();
 		});
-		this.unregisterUnsaved = this.unsavedChanges.watch(() => this.hasUnsavedChanges());
-	}
-	ngOnDestroy() {
-		this.unregisterUnsaved?.();
-		super.ngOnDestroy();
-	}
-	hasUnsavedChanges() {
-		return this.form.dirty && !this.saved;
 	}
 	get f() {
 		return this.form.controls;
@@ -11580,7 +11636,6 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 		(this.id ? this.adminService.updateLoginNotification(this.id, data) : this.adminService.createLoginNotification(data)).subscribe({ next: () => {
 			this.toast.success(this.translation.translate("Admin.LoginNotification.UpdatedMessage"));
 			this.form.markAsPristine();
-			this.saved = true;
 			this.back();
 			this.cdr.markForCheck();
 		} }).add(() => {
@@ -11599,8 +11654,7 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
-				{ token: i2$1.UnsavedChangesService }
+				{ token: i2$1.ProductService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -11619,7 +11673,7 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -11906,7 +11960,7 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -11985,6 +12039,11 @@ var LoginNotificationDetailsComponent = class LoginNotificationDetailsComponent
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i5$2.AsyncPipe,
@@ -12018,8 +12077,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
-		{ type: i2$1.UnsavedChangesService }
+		{ type: i2$1.ProductService }
 	],
 	propDecorators: { onSave: [] }
 });
@@ -12193,7 +12251,7 @@ var LoginNotificationsListComponent = class LoginNotificationsListComponent exte
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -12306,19 +12364,19 @@ var LoginNotificationsListComponent = class LoginNotificationsListComponent exte
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -12407,7 +12465,7 @@ var LoginNotificationsListComponent = class LoginNotificationsListComponent exte
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -12472,12 +12530,12 @@ var LoginNotificationsListComponent = class LoginNotificationsListComponent exte
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -12571,6 +12629,7 @@ var MailerDetailsComponent = class MailerDetailsComponent extends AppBaseCompone
 			subscription_id: this.subscriptionId
 		};
 		(this.id ? this.adminService.updateMailer(data, this.id) : this.adminService.addMailer(data)).subscribe({ next: (_) => {
+			this.form.markAsPristine();
 			this.id ? this.toast.success(this.translation.translate("Admin.Mailer.UpdatedMessage")) : this.toast.success(this.translation.translate("Admin.Mailer.AddedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -12610,7 +12669,7 @@ var MailerDetailsComponent = class MailerDetailsComponent extends AppBaseCompone
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -12706,7 +12765,7 @@ var MailerDetailsComponent = class MailerDetailsComponent extends AppBaseCompone
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -12785,9 +12844,14 @@ var MailerDetailsComponent = class MailerDetailsComponent extends AppBaseCompone
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -12902,7 +12966,7 @@ var MailerListComponent = class MailerListComponent extends AppBaseComponent {
 			type: MailerListComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.AuthService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -12923,7 +12987,7 @@ var MailerListComponent = class MailerListComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -13036,13 +13100,13 @@ var MailerListComponent = class MailerListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -13125,7 +13189,7 @@ var MailerListComponent = class MailerListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -13196,12 +13260,12 @@ var MailerListComponent = class MailerListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.RemoveHtmlPipe,
+					type: i9$1.RemoveHtmlPipe,
 					name: "removeHtml"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -13223,7 +13287,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.AuthService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -13326,6 +13390,7 @@ var NewsletterDetailsComponent = class NewsletterDetailsComponent extends AppBas
 		};
 		(this.id ? this.adminService.updateNewsletter(data, this.id) : this.adminService.addNewsletter(data)).subscribe({ next: (response) => {
 			this.form.patchValue(response);
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.Newsletter.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -13420,7 +13485,7 @@ var NewsletterDetailsComponent = class NewsletterDetailsComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -13499,6 +13564,11 @@ var NewsletterDetailsComponent = class NewsletterDetailsComponent extends AppBas
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -13664,6 +13734,7 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 		this.adminService.addNewsletterItem(data).subscribe((response) => {
 			this.data = response;
 			this.postTags();
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.Newsletter.AddedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -13680,6 +13751,7 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 		this.adminService.updateNewsletterItem(data, this.id).subscribe((response) => {
 			this.data = response;
 			this.postTags();
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.Newsletter.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -13746,9 +13818,9 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 			type: NewsletterItemDetailsComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.TagService },
-				{ token: i2$2.ProductService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.TagService },
+				{ token: i2$1.ProductService },
+				{ token: i2$1.AuthService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i3.DomSanitizer }
@@ -13854,7 +13926,7 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -14165,7 +14237,7 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -14252,9 +14324,14 @@ var NewsletterItemDetailsComponent = class NewsletterItemDetailsComponent extend
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -14282,9 +14359,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.TagService },
-		{ type: i2$2.ProductService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.TagService },
+		{ type: i2$1.ProductService },
+		{ type: i2$1.AuthService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i3.DomSanitizer }
@@ -14369,7 +14446,7 @@ var NewsletterUsersListComponent = class NewsletterUsersListComponent extends Ap
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -14482,19 +14559,19 @@ var NewsletterUsersListComponent = class NewsletterUsersListComponent extends Ap
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -14549,7 +14626,7 @@ var NewsletterUsersListComponent = class NewsletterUsersListComponent extends Ap
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -14609,12 +14686,12 @@ var NewsletterUsersListComponent = class NewsletterUsersListComponent extends Ap
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.IsOnlinePipe,
+					type: i9$1.IsOnlinePipe,
 					name: "isOnline"
 				}
 			]
@@ -14769,7 +14846,7 @@ var NewsletterInsightComponent = class NewsletterInsightComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -14945,7 +15022,7 @@ var NewslettersItemsComponent = class NewslettersItemsComponent extends AppBaseC
 			type: NewslettersItemsComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.AuthService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -14967,7 +15044,7 @@ var NewslettersItemsComponent = class NewslettersItemsComponent extends AppBaseC
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -15080,19 +15157,19 @@ var NewslettersItemsComponent = class NewslettersItemsComponent extends AppBaseC
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -15266,7 +15343,7 @@ var NewslettersItemsComponent = class NewslettersItemsComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -15337,17 +15414,17 @@ var NewslettersItemsComponent = class NewslettersItemsComponent extends AppBaseC
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.RemoveHtmlPipe,
+					type: i9$1.RemoveHtmlPipe,
 					name: "removeHtml"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -15370,7 +15447,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.AuthService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -15449,7 +15526,7 @@ var NewsLetterItemViewComponent = class NewsLetterItemViewComponent extends AppB
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -15568,7 +15645,7 @@ var NewslettersListComponent = class NewslettersListComponent extends AppBaseCom
 			type: NewslettersListComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.AuthService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -15589,7 +15666,7 @@ var NewslettersListComponent = class NewslettersListComponent extends AppBaseCom
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -15702,19 +15779,19 @@ var NewslettersListComponent = class NewslettersListComponent extends AppBaseCom
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -15797,7 +15874,7 @@ var NewslettersListComponent = class NewslettersListComponent extends AppBaseCom
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -15879,7 +15956,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.AuthService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -16022,7 +16099,7 @@ var OauthClientsComponent = class OauthClientsComponent extends AppBaseComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -16135,7 +16212,7 @@ var OauthClientsComponent = class OauthClientsComponent extends AppBaseComponent
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -16169,7 +16246,7 @@ var OauthClientsComponent = class OauthClientsComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -16240,19 +16317,16 @@ i0.ɵɵngDeclareClassMetadata({
 	]
 });
 var OauthClientsDetailsComponent = class OauthClientsDetailsComponent extends AppBaseComponent {
-	constructor(fb, oauthClientService, injector, cdr, unsavedChanges) {
+	constructor(fb, oauthClientService, injector, cdr) {
 		super(injector);
 		this.fb = fb;
 		this.oauthClientService = oauthClientService;
 		this.cdr = cdr;
-		this.unsavedChanges = unsavedChanges;
 		this.submitting = false;
-		this.saved = false;
 		this.editId = null;
 		this.loading = false;
 		this.createdClient = null;
 		this.routers = ROUTERS;
-		this.unregisterUnsaved = null;
 		this.form = this.fb.group({
 			name: ["", Validators.required],
 			redirect_uris: ["", Validators.required],
@@ -16266,14 +16340,6 @@ var OauthClientsDetailsComponent = class OauthClientsDetailsComponent extends Ap
 			this.editId = Number(id);
 			this.loadClient(this.editId);
 		}
-		this.unregisterUnsaved = this.unsavedChanges.watch(() => this.hasUnsavedChanges());
-	}
-	ngOnDestroy() {
-		this.unregisterUnsaved?.();
-		super.ngOnDestroy();
-	}
-	hasUnsavedChanges() {
-		return this.form.dirty && !this.saved;
 	}
 	loadClient(id) {
 		this.loading = true;
@@ -16338,7 +16404,6 @@ var OauthClientsDetailsComponent = class OauthClientsDetailsComponent extends Ap
 	}
 	markClean() {
 		this.form.markAsPristine();
-		this.saved = true;
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -16350,8 +16415,7 @@ var OauthClientsDetailsComponent = class OauthClientsDetailsComponent extends Ap
 				{ token: i10.FormBuilder },
 				{ token: i1$1.McpOauthClientService },
 				{ token: i0.Injector },
-				{ token: i0.ChangeDetectorRef },
-				{ token: i2$1.UnsavedChangesService }
+				{ token: i0.ChangeDetectorRef }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -16477,6 +16541,11 @@ var OauthClientsDetailsComponent = class OauthClientsDetailsComponent extends Ap
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -16503,8 +16572,7 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i10.FormBuilder },
 		{ type: i1$1.McpOauthClientService },
 		{ type: i0.Injector },
-		{ type: i0.ChangeDetectorRef },
-		{ type: i2$1.UnsavedChangesService }
+		{ type: i0.ChangeDetectorRef }
 	]
 });
 var OauthClientsTabsComponent = class OauthClientsTabsComponent {
@@ -16712,7 +16780,7 @@ var PermissionsDetailsComponent = class PermissionsDetailsComponent extends AppB
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -16797,6 +16865,11 @@ var PermissionsDetailsComponent = class PermissionsDetailsComponent extends AppB
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -16925,7 +16998,7 @@ var PermissionsListComponent = class PermissionsListComponent extends AppBaseCom
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -17038,19 +17111,19 @@ var PermissionsListComponent = class PermissionsListComponent extends AppBaseCom
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -17133,7 +17206,7 @@ var PermissionsListComponent = class PermissionsListComponent extends AppBaseCom
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -17491,7 +17564,7 @@ var RoleDetailsComponent = class RoleDetailsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -17563,6 +17636,11 @@ var RoleDetailsComponent = class RoleDetailsComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -17691,7 +17769,7 @@ var RolesListComponent = class RolesListComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -17804,19 +17882,19 @@ var RolesListComponent = class RolesListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -17899,7 +17977,7 @@ var RolesListComponent = class RolesListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -18073,7 +18151,7 @@ var OnboardingStepFormComponent = class OnboardingStepFormComponent {
 			isStandalone: false,
 			selector: "pw-onboarding-step-form",
 			ngImport: i0,
-			template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\" id=\"onboarding-step-form-title\">\n    {{ (step ? 'Admin.Onboarding.Form.EditTitle' : 'Admin.Onboarding.Form.AddTitle') | transloco }}\n  </h4>\n  <button type=\"button\" class=\"btn-close float-end\" [attr.aria-label]=\"'Button.Cancel' | transloco\" (click)=\"modal.dismiss()\"></button>\n</div>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\" aria-labelledby=\"onboarding-step-form-title\">\n  <div class=\"modal-body\">\n    <h3>{{ 'Admin.Onboarding.Form.Section.Step' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-8\" [label]=\"'Admin.Onboarding.Form.Title' | transloco\" name=\"title\"\n        controlId=\"onboarding-step-title\" [required]=\"true\" errorMsg=\"Admin.Onboarding.Error.Title\">\n        <input type=\"text\" id=\"onboarding-step-title\" class=\"form-control\" formControlName=\"title\" maxlength=\"120\"\n          [ngClass]=\"{ 'is-invalid': submitted && form.controls.title.invalid }\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Title' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-4\" [label]=\"'Admin.Onboarding.Form.Kind' | transloco\" name=\"kind\"\n        controlId=\"onboarding-step-kind\">\n        <p-select inputId=\"onboarding-step-kind\" formControlName=\"kind\" [options]=\"kinds\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Kind' | transloco\">\n          <ng-template #selectedItem let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n          <ng-template #item let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12\" [label]=\"'Admin.Onboarding.Form.Description' | transloco\" name=\"description\"\n        controlId=\"onboarding-step-description\">\n        <textarea id=\"onboarding-step-description\" class=\"form-control\" rows=\"2\" maxlength=\"500\" formControlName=\"description\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Description' | transloco\"></textarea>\n      </pw-input-container>\n    </div>\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Completion' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Check' | transloco\" name=\"check_key\"\n        controlId=\"onboarding-step-check\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Check' | transloco\">\n        <p-select inputId=\"onboarding-step-check\" formControlName=\"check_key\" [options]=\"checkOptions\" optionValue=\"check_key\"\n          appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Check' | transloco\">\n          <ng-template #selectedItem let-check>{{ check?.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n          <ng-template #item let-check>{{ check.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Plans' | transloco\" name=\"feature_keys\"\n        controlId=\"onboarding-step-plans\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Plans' | transloco\">\n        <p-multiselect inputId=\"onboarding-step-plans\" formControlName=\"feature_keys\" [options]=\"plans\" optionLabel=\"name\"\n          optionValue=\"feature_key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Plans' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.DependsOn' | transloco\" name=\"depends_on\"\n        controlId=\"onboarding-step-depends\">\n        <p-multiselect inputId=\"onboarding-step-depends\" formControlName=\"depends_on\" [options]=\"otherSteps\" optionLabel=\"title\"\n          optionValue=\"key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.DependsOn' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n    </div>\n    <div class=\"row pw-onboarding-step-form__toggles\">\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"activation\" id=\"onboarding-step-activation\"></ui-switch>\n        <label for=\"onboarding-step-activation\" class=\"mb-0\">\n          {{ 'Admin.Onboarding.Form.Activation' | transloco }}\n          <span class=\"info-circle tooltip-wrap ms-1\" [pTooltip]=\"'Admin.Onboarding.Tooltip.Activation' | transloco\"\n            tooltipPosition=\"top\" appendTo=\"body\"></span>\n        </label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"admin_only\" id=\"onboarding-step-admin-only\"></ui-switch>\n        <label for=\"onboarding-step-admin-only\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.AdminOnly' | transloco }}</label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"enabled\" id=\"onboarding-step-enabled\"></ui-switch>\n        <label for=\"onboarding-step-enabled\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.Enabled' | transloco }}</label>\n      </div>\n    </div>\n    @if (submitted && form.errors?.['systemNeedsCheck']) {\n      <p class=\"text-danger mt-2 mb-0\" role=\"alert\">{{ 'Admin.Onboarding.Error.SystemNeedsCheck' | transloco }}</p>\n    }\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Where' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Route' | transloco\" name=\"route\"\n        controlId=\"onboarding-step-route\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Route' | transloco\">\n        <input type=\"text\" id=\"onboarding-step-route\" class=\"form-control\" formControlName=\"route\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Route' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Faq' | transloco\" name=\"faq_slug\"\n        controlId=\"onboarding-step-faq\">\n        <p-select inputId=\"onboarding-step-faq\" formControlName=\"faq_slug\" [options]=\"faqs\" optionLabel=\"question\"\n          optionValue=\"slug\" [filter]=\"true\" [showClear]=\"true\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Faq' | transloco\"></p-select>\n      </pw-input-container>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-default\" (click)=\"modal.dismiss()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"btn btn-primary\">{{ 'Button.Save' | transloco }}</button>\n  </div>\n</form>\n",
+			template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\" id=\"onboarding-step-form-title\">\n    {{ (step ? 'Admin.Onboarding.Form.EditTitle' : 'Admin.Onboarding.Form.AddTitle') | transloco }}\n  </h4>\n  <button type=\"button\" class=\"btn-close float-end\" [attr.aria-label]=\"'Button.Cancel' | transloco\" (click)=\"modal.dismiss()\"></button>\n</div>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\" aria-labelledby=\"onboarding-step-form-title\">\n  <div class=\"modal-body\">\n    <h3>{{ 'Admin.Onboarding.Form.Section.Step' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-8\" [label]=\"'Admin.Onboarding.Form.Title' | transloco\" name=\"title\"\n        controlId=\"onboarding-step-title\" [required]=\"true\" errorMsg=\"Admin.Onboarding.Error.Title\">\n        <input type=\"text\" id=\"onboarding-step-title\" class=\"form-control\" formControlName=\"title\" maxlength=\"120\"\n          [ngClass]=\"{ 'is-invalid': submitted && form.controls.title.invalid }\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Title' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Title' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-4\" [label]=\"'Admin.Onboarding.Form.Kind' | transloco\" name=\"kind\"\n        controlId=\"onboarding-step-kind\">\n        <p-select inputId=\"onboarding-step-kind\" formControlName=\"kind\" [options]=\"kinds\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Kind' | transloco\">\n          <ng-template #selectedItem let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n          <ng-template #item let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12\" [label]=\"'Admin.Onboarding.Form.Description' | transloco\" name=\"description\"\n        controlId=\"onboarding-step-description\">\n        <textarea id=\"onboarding-step-description\" class=\"form-control\" rows=\"2\" maxlength=\"500\" formControlName=\"description\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Description' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Description' | transloco\"></textarea>\n      </pw-input-container>\n    </div>\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Completion' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Check' | transloco\" name=\"check_key\"\n        controlId=\"onboarding-step-check\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Check' | transloco\">\n        <p-select inputId=\"onboarding-step-check\" formControlName=\"check_key\" [options]=\"checkOptions\" optionValue=\"check_key\"\n          appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Check' | transloco\">\n          <ng-template #selectedItem let-check>{{ check?.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n          <ng-template #item let-check>{{ check.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Plans' | transloco\" name=\"feature_keys\"\n        controlId=\"onboarding-step-plans\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Plans' | transloco\">\n        <p-multiselect inputId=\"onboarding-step-plans\" formControlName=\"feature_keys\" [options]=\"plans\" optionLabel=\"name\"\n          optionValue=\"feature_key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Plans' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.DependsOn' | transloco\" name=\"depends_on\"\n        controlId=\"onboarding-step-depends\">\n        <p-multiselect inputId=\"onboarding-step-depends\" formControlName=\"depends_on\" [options]=\"otherSteps\" optionLabel=\"title\"\n          optionValue=\"key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.DependsOn' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n    </div>\n    <div class=\"row pw-onboarding-step-form__toggles\">\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"activation\" id=\"onboarding-step-activation\"></ui-switch>\n        <label for=\"onboarding-step-activation\" class=\"mb-0\">\n          {{ 'Admin.Onboarding.Form.Activation' | transloco }}\n          <span class=\"info-circle tooltip-wrap ms-1\" [pTooltip]=\"'Admin.Onboarding.Tooltip.Activation' | transloco\"\n            tooltipPosition=\"top\" appendTo=\"body\"></span>\n        </label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"admin_only\" id=\"onboarding-step-admin-only\"></ui-switch>\n        <label for=\"onboarding-step-admin-only\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.AdminOnly' | transloco }}</label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"enabled\" id=\"onboarding-step-enabled\"></ui-switch>\n        <label for=\"onboarding-step-enabled\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.Enabled' | transloco }}</label>\n      </div>\n    </div>\n    @if (submitted && form.errors?.['systemNeedsCheck']) {\n      <p class=\"text-danger mt-2 mb-0\" role=\"alert\">{{ 'Admin.Onboarding.Error.SystemNeedsCheck' | transloco }}</p>\n    }\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Where' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Route' | transloco\" name=\"route\"\n        controlId=\"onboarding-step-route\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Route' | transloco\">\n        <input type=\"text\" id=\"onboarding-step-route\" class=\"form-control\" formControlName=\"route\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Route' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Route' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Faq' | transloco\" name=\"faq_slug\"\n        controlId=\"onboarding-step-faq\">\n        <p-select inputId=\"onboarding-step-faq\" formControlName=\"faq_slug\" [options]=\"faqs\" optionLabel=\"question\"\n          optionValue=\"slug\" [filter]=\"true\" [showClear]=\"true\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Faq' | transloco\"></p-select>\n      </pw-input-container>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-default\" (click)=\"modal.dismiss()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"btn btn-primary\">{{ 'Button.Save' | transloco }}</button>\n  </div>\n</form>\n",
 			styles: [":host form h3{display:block;border-top:1px solid #e2e5ea;margin-top:1.5rem;padding-top:1rem}:host form .modal-body>h3:first-child{border-top:0;margin-top:0;padding-top:0}.pw-onboarding-step-form__toggles{row-gap:10px}.pw-onboarding-step-form__toggles .info-circle{margin-right:20px}\n"],
 			dependencies: [
 				{
@@ -18106,7 +18184,7 @@ var OnboardingStepFormComponent = class OnboardingStepFormComponent {
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -18361,6 +18439,11 @@ var OnboardingStepFormComponent = class OnboardingStepFormComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -18380,7 +18463,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-onboarding-step-form",
 			standalone: false,
-			template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\" id=\"onboarding-step-form-title\">\n    {{ (step ? 'Admin.Onboarding.Form.EditTitle' : 'Admin.Onboarding.Form.AddTitle') | transloco }}\n  </h4>\n  <button type=\"button\" class=\"btn-close float-end\" [attr.aria-label]=\"'Button.Cancel' | transloco\" (click)=\"modal.dismiss()\"></button>\n</div>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\" aria-labelledby=\"onboarding-step-form-title\">\n  <div class=\"modal-body\">\n    <h3>{{ 'Admin.Onboarding.Form.Section.Step' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-8\" [label]=\"'Admin.Onboarding.Form.Title' | transloco\" name=\"title\"\n        controlId=\"onboarding-step-title\" [required]=\"true\" errorMsg=\"Admin.Onboarding.Error.Title\">\n        <input type=\"text\" id=\"onboarding-step-title\" class=\"form-control\" formControlName=\"title\" maxlength=\"120\"\n          [ngClass]=\"{ 'is-invalid': submitted && form.controls.title.invalid }\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Title' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-4\" [label]=\"'Admin.Onboarding.Form.Kind' | transloco\" name=\"kind\"\n        controlId=\"onboarding-step-kind\">\n        <p-select inputId=\"onboarding-step-kind\" formControlName=\"kind\" [options]=\"kinds\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Kind' | transloco\">\n          <ng-template #selectedItem let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n          <ng-template #item let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12\" [label]=\"'Admin.Onboarding.Form.Description' | transloco\" name=\"description\"\n        controlId=\"onboarding-step-description\">\n        <textarea id=\"onboarding-step-description\" class=\"form-control\" rows=\"2\" maxlength=\"500\" formControlName=\"description\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Description' | transloco\"></textarea>\n      </pw-input-container>\n    </div>\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Completion' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Check' | transloco\" name=\"check_key\"\n        controlId=\"onboarding-step-check\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Check' | transloco\">\n        <p-select inputId=\"onboarding-step-check\" formControlName=\"check_key\" [options]=\"checkOptions\" optionValue=\"check_key\"\n          appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Check' | transloco\">\n          <ng-template #selectedItem let-check>{{ check?.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n          <ng-template #item let-check>{{ check.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Plans' | transloco\" name=\"feature_keys\"\n        controlId=\"onboarding-step-plans\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Plans' | transloco\">\n        <p-multiselect inputId=\"onboarding-step-plans\" formControlName=\"feature_keys\" [options]=\"plans\" optionLabel=\"name\"\n          optionValue=\"feature_key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Plans' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.DependsOn' | transloco\" name=\"depends_on\"\n        controlId=\"onboarding-step-depends\">\n        <p-multiselect inputId=\"onboarding-step-depends\" formControlName=\"depends_on\" [options]=\"otherSteps\" optionLabel=\"title\"\n          optionValue=\"key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.DependsOn' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n    </div>\n    <div class=\"row pw-onboarding-step-form__toggles\">\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"activation\" id=\"onboarding-step-activation\"></ui-switch>\n        <label for=\"onboarding-step-activation\" class=\"mb-0\">\n          {{ 'Admin.Onboarding.Form.Activation' | transloco }}\n          <span class=\"info-circle tooltip-wrap ms-1\" [pTooltip]=\"'Admin.Onboarding.Tooltip.Activation' | transloco\"\n            tooltipPosition=\"top\" appendTo=\"body\"></span>\n        </label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"admin_only\" id=\"onboarding-step-admin-only\"></ui-switch>\n        <label for=\"onboarding-step-admin-only\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.AdminOnly' | transloco }}</label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"enabled\" id=\"onboarding-step-enabled\"></ui-switch>\n        <label for=\"onboarding-step-enabled\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.Enabled' | transloco }}</label>\n      </div>\n    </div>\n    @if (submitted && form.errors?.['systemNeedsCheck']) {\n      <p class=\"text-danger mt-2 mb-0\" role=\"alert\">{{ 'Admin.Onboarding.Error.SystemNeedsCheck' | transloco }}</p>\n    }\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Where' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Route' | transloco\" name=\"route\"\n        controlId=\"onboarding-step-route\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Route' | transloco\">\n        <input type=\"text\" id=\"onboarding-step-route\" class=\"form-control\" formControlName=\"route\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Route' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Faq' | transloco\" name=\"faq_slug\"\n        controlId=\"onboarding-step-faq\">\n        <p-select inputId=\"onboarding-step-faq\" formControlName=\"faq_slug\" [options]=\"faqs\" optionLabel=\"question\"\n          optionValue=\"slug\" [filter]=\"true\" [showClear]=\"true\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Faq' | transloco\"></p-select>\n      </pw-input-container>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-default\" (click)=\"modal.dismiss()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"btn btn-primary\">{{ 'Button.Save' | transloco }}</button>\n  </div>\n</form>\n",
+			template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title\" id=\"onboarding-step-form-title\">\n    {{ (step ? 'Admin.Onboarding.Form.EditTitle' : 'Admin.Onboarding.Form.AddTitle') | transloco }}\n  </h4>\n  <button type=\"button\" class=\"btn-close float-end\" [attr.aria-label]=\"'Button.Cancel' | transloco\" (click)=\"modal.dismiss()\"></button>\n</div>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"save()\" aria-labelledby=\"onboarding-step-form-title\">\n  <div class=\"modal-body\">\n    <h3>{{ 'Admin.Onboarding.Form.Section.Step' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-8\" [label]=\"'Admin.Onboarding.Form.Title' | transloco\" name=\"title\"\n        controlId=\"onboarding-step-title\" [required]=\"true\" errorMsg=\"Admin.Onboarding.Error.Title\">\n        <input type=\"text\" id=\"onboarding-step-title\" class=\"form-control\" formControlName=\"title\" maxlength=\"120\"\n          [ngClass]=\"{ 'is-invalid': submitted && form.controls.title.invalid }\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Title' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Title' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-4\" [label]=\"'Admin.Onboarding.Form.Kind' | transloco\" name=\"kind\"\n        controlId=\"onboarding-step-kind\">\n        <p-select inputId=\"onboarding-step-kind\" formControlName=\"kind\" [options]=\"kinds\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Kind' | transloco\">\n          <ng-template #selectedItem let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n          <ng-template #item let-kind>{{ 'Admin.Onboarding.Kind.' + kind | transloco }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12\" [label]=\"'Admin.Onboarding.Form.Description' | transloco\" name=\"description\"\n        controlId=\"onboarding-step-description\">\n        <textarea id=\"onboarding-step-description\" class=\"form-control\" rows=\"2\" maxlength=\"500\" formControlName=\"description\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Description' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Description' | transloco\"></textarea>\n      </pw-input-container>\n    </div>\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Completion' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Check' | transloco\" name=\"check_key\"\n        controlId=\"onboarding-step-check\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Check' | transloco\">\n        <p-select inputId=\"onboarding-step-check\" formControlName=\"check_key\" [options]=\"checkOptions\" optionValue=\"check_key\"\n          appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Check' | transloco\">\n          <ng-template #selectedItem let-check>{{ check?.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n          <ng-template #item let-check>{{ check.title ?? ('Admin.Onboarding.Manual' | transloco) }}</ng-template>\n        </p-select>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Plans' | transloco\" name=\"feature_keys\"\n        controlId=\"onboarding-step-plans\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Plans' | transloco\">\n        <p-multiselect inputId=\"onboarding-step-plans\" formControlName=\"feature_keys\" [options]=\"plans\" optionLabel=\"name\"\n          optionValue=\"feature_key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.Plans' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.DependsOn' | transloco\" name=\"depends_on\"\n        controlId=\"onboarding-step-depends\">\n        <p-multiselect inputId=\"onboarding-step-depends\" formControlName=\"depends_on\" [options]=\"otherSteps\" optionLabel=\"title\"\n          optionValue=\"key\" display=\"chip\" appendTo=\"body\" [placeholder]=\"'Admin.Onboarding.Placeholder.DependsOn' | transloco\">\n        </p-multiselect>\n      </pw-input-container>\n    </div>\n    <div class=\"row pw-onboarding-step-form__toggles\">\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"activation\" id=\"onboarding-step-activation\"></ui-switch>\n        <label for=\"onboarding-step-activation\" class=\"mb-0\">\n          {{ 'Admin.Onboarding.Form.Activation' | transloco }}\n          <span class=\"info-circle tooltip-wrap ms-1\" [pTooltip]=\"'Admin.Onboarding.Tooltip.Activation' | transloco\"\n            tooltipPosition=\"top\" appendTo=\"body\"></span>\n        </label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"admin_only\" id=\"onboarding-step-admin-only\"></ui-switch>\n        <label for=\"onboarding-step-admin-only\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.AdminOnly' | transloco }}</label>\n      </div>\n      <div class=\"col-12 d-flex align-items-center gap-2\">\n        <ui-switch size=\"small\" formControlName=\"enabled\" id=\"onboarding-step-enabled\"></ui-switch>\n        <label for=\"onboarding-step-enabled\" class=\"mb-0\">{{ 'Admin.Onboarding.Form.Enabled' | transloco }}</label>\n      </div>\n    </div>\n    @if (submitted && form.errors?.['systemNeedsCheck']) {\n      <p class=\"text-danger mt-2 mb-0\" role=\"alert\">{{ 'Admin.Onboarding.Error.SystemNeedsCheck' | transloco }}</p>\n    }\n\n    <h3>{{ 'Admin.Onboarding.Form.Section.Where' | transloco }}</h3>\n    <div class=\"row\">\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Route' | transloco\" name=\"route\"\n        controlId=\"onboarding-step-route\" [showTooltip]=\"true\" [tooltipText]=\"'Admin.Onboarding.Tooltip.Route' | transloco\">\n        <input type=\"text\" id=\"onboarding-step-route\" class=\"form-control\" formControlName=\"route\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Route' | transloco\"\n          [attr.aria-label]=\"'Admin.Onboarding.Form.Route' | transloco\" />\n      </pw-input-container>\n      <pw-input-container class=\"col-12 col-md-6\" [label]=\"'Admin.Onboarding.Form.Faq' | transloco\" name=\"faq_slug\"\n        controlId=\"onboarding-step-faq\">\n        <p-select inputId=\"onboarding-step-faq\" formControlName=\"faq_slug\" [options]=\"faqs\" optionLabel=\"question\"\n          optionValue=\"slug\" [filter]=\"true\" [showClear]=\"true\" appendTo=\"body\"\n          [placeholder]=\"'Admin.Onboarding.Placeholder.Faq' | transloco\"></p-select>\n      </pw-input-container>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-outline-default\" (click)=\"modal.dismiss()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"submit\" class=\"btn btn-primary\">{{ 'Button.Save' | transloco }}</button>\n  </div>\n</form>\n",
 			styles: [":host form h3{display:block;border-top:1px solid #e2e5ea;margin-top:1.5rem;padding-top:1rem}:host form .modal-body>h3:first-child{border-top:0;margin-top:0;padding-top:0}.pw-onboarding-step-form__toggles{row-gap:10px}.pw-onboarding-step-form__toggles .info-circle{margin-right:20px}\n"]
 		}]
 	}]
@@ -18410,6 +18493,16 @@ function loadFaqs(commonService, subscriptionId) {
 	};
 	return commonService.getFaq(params).pipe(map((response) => response?.faqs ?? []), catchError(() => of([])));
 }
+function labelledFamilies(families, sources) {
+	const labelOf = (key) => sources?.find((source) => source.permissionKey === key)?.label;
+	return families.map((family) => ({
+		...family,
+		label: labelOf(family.permission_key) ?? ""
+	})).filter((family) => !!family.label);
+}
+function stepsIn(response) {
+	return response?.onboarding_steps;
+}
 var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseComponent {
 	constructor(injector, onboarding, commonService, confirmDialog, modal, cdr, sources) {
 		super(injector);
@@ -18436,19 +18529,16 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 		return PermissionService.selectedSubscription?.id;
 	}
 	ngOnInit() {
-		this.onboarding.getFamilies(this.subscriptionId).pipe(finalize(() => this.refresh())).subscribe({
+		this.onboarding.getFamilies(this.subscriptionId).pipe(finalize(() => this.cdr.markForCheck())).subscribe({
 			next: ({ families }) => {
-				this.families = families.map((family) => ({
-					...family,
-					label: this.source(family.permission_key)?.label ?? ""
-				})).filter((family) => !!family.label);
+				this.families = labelledFamilies(families, this.sources);
 				this.selectFamily(this.families[0]?.permission_key ?? null);
 			},
 			error: () => this.loadFailed = true
 		});
 	}
 	get plans() {
-		return this.families.find((family) => family.permission_key === this.permissionKey)?.plans ?? [];
+		return this.families.find((item) => item.permission_key === this.permissionKey)?.plans ?? [];
 	}
 	get visibleSteps() {
 		return stepsForPlan(this.steps, this.planFilter);
@@ -18466,7 +18556,7 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 			steps: this.onboarding.getSteps(this.subscriptionId, permissionKey),
 			catalogue: this.source(permissionKey).load(),
 			faqs: loadFaqs(this.commonService, this.subscriptionId)
-		}).pipe(finalize(() => (this.loading = false, this.refresh()))).subscribe({
+		}).pipe(finalize(() => this.settle("loading"))).subscribe({
 			next: ({ steps, catalogue, faqs }) => {
 				this.steps = steps.onboarding_steps;
 				this.catalogue = catalogue;
@@ -18516,15 +18606,17 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 	}
 	run(request) {
 		this.busy = true;
-		request.pipe(finalize(() => (this.busy = false, this.refresh()))).subscribe({ next: (response) => {
-			const steps = response?.onboarding_steps;
-			return steps ? this.steps = steps : this.selectFamily(this.permissionKey);
-		} });
+		request.pipe(finalize(() => this.settle("busy"))).subscribe((response) => {
+			const steps = stepsIn(response);
+			if (steps) this.steps = steps;
+			else this.selectFamily(this.permissionKey);
+		});
 	}
 	source(permissionKey) {
 		return (this.sources ?? []).find((source) => source.permissionKey === permissionKey);
 	}
-	refresh() {
+	settle(flag) {
+		this[flag] = false;
 		this.cdr.markForCheck();
 	}
 	static {
@@ -18536,7 +18628,7 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 			deps: [
 				{ token: i0.Injector },
 				{ token: i1$1.OnboardingAdminService },
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i6$2.ConfirmDialogService },
 				{ token: i3$2.NgbModal },
 				{ token: i0.ChangeDetectorRef },
@@ -18557,12 +18649,12 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 			selector: "pw-onboarding-steps",
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline gap-2\">\n    <h2 class=\"card-title p-0\">{{ 'Admin.Onboarding.Title' | transloco }}</h2>\n    @if (!loading && !loadFailed && permissionKey && steps.length) {\n      <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n      </button>\n    }\n  </div>\n</div>\n<p class=\"pw-onboarding-admin__intro\">{{ 'Admin.Onboarding.Intro' | transloco }}</p>\n\n<pw-loader [isVisible]=\"loading\"></pw-loader>\n\n@if (!loading) {\n  @if (loadFailed) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.LoadFailed' | transloco\"></pw-no-data>\n  } @else if (!families.length) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.NoFamilies' | transloco\"></pw-no-data>\n  } @else {\n    <div class=\"row pw-onboarding-admin__filters\">\n      @if (families.length > 1) {\n        <pw-input-container class=\"col-12 col-sm-6 col-lg-4\" [label]=\"'Admin.Onboarding.Family' | transloco\"\n          controlId=\"onboarding-family\">\n          <p-select inputId=\"onboarding-family\" [options]=\"families\" optionLabel=\"label\" optionValue=\"permission_key\"\n            [ngModel]=\"permissionKey\" (ngModelChange)=\"selectFamily($event)\" appendTo=\"body\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Family' | transloco\"></p-select>\n        </pw-input-container>\n      }\n      @if (steps.length) {\n        <div class=\"col-12 col-sm-6 col-lg-4 align-self-end mb-3\">\n          <p-select inputId=\"onboarding-plan-filter\" [options]=\"plans\" optionLabel=\"name\" optionValue=\"feature_key\"\n            [(ngModel)]=\"planFilter\" [showClear]=\"true\" appendTo=\"body\"\n            [ariaLabel]=\"'Admin.Onboarding.Filter.Product' | transloco\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Product' | transloco\"></p-select>\n        </div>\n      }\n    </div>\n\n    @if (!steps.length) {\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.Empty.Message' | transloco\"\n        [description]=\"'Admin.Onboarding.Empty.Description' | transloco\">\n        <div #content class=\"d-flex flex-wrap justify-content-center gap-2\">\n          @if (catalogue.recommended.length) {\n            <button type=\"button\" class=\"btn btn-primary\" [buttonBusy]=\"busy\" (click)=\"install()\">\n              {{ 'Admin.Onboarding.Button.Install' | transloco }}\n            </button>\n          }\n          <button type=\"button\" class=\"btn btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n            {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n          </button>\n        </div>\n      </pw-no-data>\n    } @else {\n      <div class=\"primeng-datatable-container table-responsive mt-0 pw-onboarding-admin__table\">\n        <p-table [value]=\"visibleSteps\" dataKey=\"id\">\n          <ng-template #header>\n            <tr>\n              <th scope=\"col\" class=\"pw-onboarding-admin__order\">#</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Step' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Type' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.CompletedBy' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Plans' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Enabled' | transloco }}</th>\n              <th scope=\"col\" class=\"actions-list-four\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template #body let-step let-index=\"rowIndex\">\n            <tr [class.pw-onboarding-admin__off]=\"!step.enabled\">\n              <td data-head=\"#\" class=\"pw-onboarding-admin__order\">{{ index + 1 }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Step' | transloco\">\n                <span class=\"pw-onboarding-admin__title\">{{ step.title }}</span>\n                @if (step.description) {\n                  <span class=\"pw-onboarding-admin__muted\">{{ step.description }}</span>\n                }\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Type' | transloco\">\n                <span class=\"badge\" [class.bg-cyan]=\"step.kind === 'required'\" [class.bg-blue-grey]=\"step.kind === 'optional'\"\n                  [class.bg-warning]=\"step.kind === 'system'\">{{ 'Admin.Onboarding.Kind.' + step.kind | transloco }}</span>\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.CompletedBy' | transloco\">{{ completedBy(step) ?? ('Admin.Onboarding.Manual' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Plans' | transloco\">{{ planNames(step) ?? ('Admin.Onboarding.AllPlans' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Enabled' | transloco\">\n                <ui-switch size=\"small\" [checked]=\"step.enabled\" [disabled]=\"busy\" (change)=\"toggle(step, $event)\"\n                  [attr.aria-label]=\"('Admin.Onboarding.Form.Enabled' | transloco) + ': ' + step.title\"></ui-switch>\n              </td>\n              <td [attr.data-head]=\"'Label.Actions' | transloco\">\n                <ul class=\"list-unstyled list-inline list-action mb-0\">\n                  <li class=\"me-2\" [class.invisible]=\"index === 0\" [pTooltip]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                    tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\" (click)=\"move(index, -1)\" (keydown.enter)=\"move(index, -1)\">\n                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li class=\"me-2\" [class.invisible]=\"index === visibleSteps.length - 1\" [pTooltip]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                    tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\" (click)=\"move(index, 1)\" (keydown.enter)=\"move(index, 1)\">\n                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li class=\"me-2\" [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\"\n                    (click)=\"edit(step)\" (keydown.enter)=\"edit(step)\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\"\n                    (click)=\"remove(step)\" (keydown.enter)=\"remove(step)\">\n                    <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                </ul>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <pw-records-summary [showing]=\"visibleSteps.length\" [total]=\"steps.length\" />\n      </div>\n    }\n  }\n}\n",
-			styles: [".pw-onboarding-admin__intro{max-width:720px;margin-bottom:16px}.pw-onboarding-admin__filters{margin-bottom:8px}.pw-onboarding-admin__order{width:40px;font-variant-numeric:tabular-nums}.pw-onboarding-admin__title,.pw-onboarding-admin__muted{display:block}.pw-onboarding-admin__muted{color:var(--text-muted, #6c757d)}.pw-onboarding-admin__off td:not(:last-child):not(:nth-last-child(2)){opacity:.55}.pw-onboarding-admin__table td{word-break:normal;overflow-wrap:break-word}\n"],
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline gap-2\">\n    <h2 class=\"card-title p-0\">{{ 'Admin.Onboarding.Title' | transloco }}</h2>\n    @if (!loading && !loadFailed && permissionKey && steps.length) {\n      <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n      </button>\n    }\n  </div>\n</div>\n<p class=\"pw-onboarding-admin__intro\">{{ 'Admin.Onboarding.Intro' | transloco }}</p>\n\n<pw-loader [isVisible]=\"loading\"></pw-loader>\n\n@if (!loading) {\n  @if (loadFailed) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.LoadFailed' | transloco\"></pw-no-data>\n  } @else if (!families.length) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.NoFamilies' | transloco\"></pw-no-data>\n  } @else {\n    <div class=\"row pw-onboarding-admin__filters\">\n      @if (families.length > 1) {\n        <pw-input-container class=\"col-12 col-sm-6 col-lg-4\" [label]=\"'Admin.Onboarding.Family' | transloco\"\n          controlId=\"onboarding-family\">\n          <p-select inputId=\"onboarding-family\" [options]=\"families\" optionLabel=\"label\" optionValue=\"permission_key\"\n            [ngModel]=\"permissionKey\" (ngModelChange)=\"selectFamily($event)\" appendTo=\"body\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Family' | transloco\"></p-select>\n        </pw-input-container>\n      }\n      @if (steps.length) {\n        <div class=\"col-12 col-sm-6 col-lg-4 align-self-end mb-3\">\n          <p-select inputId=\"onboarding-plan-filter\" [options]=\"plans\" optionLabel=\"name\" optionValue=\"feature_key\"\n            [(ngModel)]=\"planFilter\" [showClear]=\"true\" appendTo=\"body\"\n            [ariaLabel]=\"'Admin.Onboarding.Filter.Product' | transloco\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Product' | transloco\"></p-select>\n        </div>\n      }\n    </div>\n\n    @if (!steps.length) {\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.Empty.Message' | transloco\"\n        [description]=\"'Admin.Onboarding.Empty.Description' | transloco\">\n        <div #content class=\"d-flex flex-wrap justify-content-center gap-2\">\n          @if (catalogue.recommended.length) {\n            <button type=\"button\" class=\"btn btn-primary\" [buttonBusy]=\"busy\" (click)=\"install()\">\n              {{ 'Admin.Onboarding.Button.Install' | transloco }}\n            </button>\n          }\n          <button type=\"button\" class=\"btn btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n            {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n          </button>\n        </div>\n      </pw-no-data>\n    } @else {\n      <div class=\"primeng-datatable-container table-responsive mt-0 pw-onboarding-admin__table\">\n        <p-table [value]=\"visibleSteps\" dataKey=\"id\">\n          <ng-template #header>\n            <tr>\n              <th scope=\"col\" class=\"pw-onboarding-admin__order\">#</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Step' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Type' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.CompletedBy' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Plans' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Enabled' | transloco }}</th>\n              <th scope=\"col\" class=\"actions-list-four\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template #body let-step let-index=\"rowIndex\">\n            <tr [class.pw-onboarding-admin__off]=\"!step.enabled\">\n              <td data-head=\"#\" class=\"pw-onboarding-admin__order\">{{ index + 1 }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Step' | transloco\">\n                <span class=\"pw-onboarding-admin__title\">{{ step.title }}</span>\n                @if (step.description) {\n                  <span class=\"pw-onboarding-admin__muted\">{{ step.description }}</span>\n                }\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Type' | transloco\">\n                <span class=\"badge\" [class.bg-cyan]=\"step.kind === 'required'\" [class.bg-blue-grey]=\"step.kind === 'optional'\"\n                  [class.bg-warning]=\"step.kind === 'system'\">{{ 'Admin.Onboarding.Kind.' + step.kind | transloco }}</span>\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.CompletedBy' | transloco\">{{ completedBy(step) ?? ('Admin.Onboarding.Manual' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Plans' | transloco\">{{ planNames(step) ?? ('Admin.Onboarding.AllPlans' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Enabled' | transloco\">\n                <ui-switch size=\"small\" [checked]=\"step.enabled\" [disabled]=\"busy\" (change)=\"toggle(step, $event)\"\n                  [attr.aria-label]=\"('Admin.Onboarding.Form.Enabled' | transloco) + ': ' + step.title\"></ui-switch>\n              </td>\n              <td [attr.data-head]=\"'Label.Actions' | transloco\">\n                <ul class=\"list-unstyled list-inline list-action mb-0\">\n                  <li class=\"me-2\" [class.invisible]=\"index === 0\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                      (click)=\"move(index, -1)\">\n                      <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li class=\"me-2\" [class.invisible]=\"index === visibleSteps.length - 1\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                      (click)=\"move(index, 1)\">\n                      <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li class=\"me-2\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Button.Edit' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Button.Edit' | transloco\" (click)=\"edit(step)\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li>\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Button.Delete' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Button.Delete' | transloco\" (click)=\"remove(step)\">\n                      <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                </ul>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <pw-records-summary [showing]=\"visibleSteps.length\" [total]=\"steps.length\" />\n      </div>\n    }\n  }\n}\n",
+			styles: [".pw-onboarding-admin__intro{max-width:720px;margin-bottom:16px}.pw-onboarding-admin__filters{margin-bottom:8px}.pw-onboarding-admin__order{width:40px;font-variant-numeric:tabular-nums}.pw-onboarding-admin__title,.pw-onboarding-admin__muted{display:block}.pw-onboarding-admin__muted{color:var(--text-muted, #6c757d)}.pw-onboarding-admin__off td:not(:last-child):not(:nth-last-child(2)){opacity:.55}.pw-onboarding-admin__table td{word-break:normal;overflow-wrap:break-word}.pw-onboarding-admin__action{padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit}\n"],
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -18703,7 +18795,7 @@ var OnboardingStepsComponent = class OnboardingStepsComponent extends AppBaseCom
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -18891,14 +18983,14 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-onboarding-steps",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline gap-2\">\n    <h2 class=\"card-title p-0\">{{ 'Admin.Onboarding.Title' | transloco }}</h2>\n    @if (!loading && !loadFailed && permissionKey && steps.length) {\n      <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n      </button>\n    }\n  </div>\n</div>\n<p class=\"pw-onboarding-admin__intro\">{{ 'Admin.Onboarding.Intro' | transloco }}</p>\n\n<pw-loader [isVisible]=\"loading\"></pw-loader>\n\n@if (!loading) {\n  @if (loadFailed) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.LoadFailed' | transloco\"></pw-no-data>\n  } @else if (!families.length) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.NoFamilies' | transloco\"></pw-no-data>\n  } @else {\n    <div class=\"row pw-onboarding-admin__filters\">\n      @if (families.length > 1) {\n        <pw-input-container class=\"col-12 col-sm-6 col-lg-4\" [label]=\"'Admin.Onboarding.Family' | transloco\"\n          controlId=\"onboarding-family\">\n          <p-select inputId=\"onboarding-family\" [options]=\"families\" optionLabel=\"label\" optionValue=\"permission_key\"\n            [ngModel]=\"permissionKey\" (ngModelChange)=\"selectFamily($event)\" appendTo=\"body\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Family' | transloco\"></p-select>\n        </pw-input-container>\n      }\n      @if (steps.length) {\n        <div class=\"col-12 col-sm-6 col-lg-4 align-self-end mb-3\">\n          <p-select inputId=\"onboarding-plan-filter\" [options]=\"plans\" optionLabel=\"name\" optionValue=\"feature_key\"\n            [(ngModel)]=\"planFilter\" [showClear]=\"true\" appendTo=\"body\"\n            [ariaLabel]=\"'Admin.Onboarding.Filter.Product' | transloco\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Product' | transloco\"></p-select>\n        </div>\n      }\n    </div>\n\n    @if (!steps.length) {\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.Empty.Message' | transloco\"\n        [description]=\"'Admin.Onboarding.Empty.Description' | transloco\">\n        <div #content class=\"d-flex flex-wrap justify-content-center gap-2\">\n          @if (catalogue.recommended.length) {\n            <button type=\"button\" class=\"btn btn-primary\" [buttonBusy]=\"busy\" (click)=\"install()\">\n              {{ 'Admin.Onboarding.Button.Install' | transloco }}\n            </button>\n          }\n          <button type=\"button\" class=\"btn btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n            {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n          </button>\n        </div>\n      </pw-no-data>\n    } @else {\n      <div class=\"primeng-datatable-container table-responsive mt-0 pw-onboarding-admin__table\">\n        <p-table [value]=\"visibleSteps\" dataKey=\"id\">\n          <ng-template #header>\n            <tr>\n              <th scope=\"col\" class=\"pw-onboarding-admin__order\">#</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Step' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Type' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.CompletedBy' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Plans' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Enabled' | transloco }}</th>\n              <th scope=\"col\" class=\"actions-list-four\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template #body let-step let-index=\"rowIndex\">\n            <tr [class.pw-onboarding-admin__off]=\"!step.enabled\">\n              <td data-head=\"#\" class=\"pw-onboarding-admin__order\">{{ index + 1 }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Step' | transloco\">\n                <span class=\"pw-onboarding-admin__title\">{{ step.title }}</span>\n                @if (step.description) {\n                  <span class=\"pw-onboarding-admin__muted\">{{ step.description }}</span>\n                }\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Type' | transloco\">\n                <span class=\"badge\" [class.bg-cyan]=\"step.kind === 'required'\" [class.bg-blue-grey]=\"step.kind === 'optional'\"\n                  [class.bg-warning]=\"step.kind === 'system'\">{{ 'Admin.Onboarding.Kind.' + step.kind | transloco }}</span>\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.CompletedBy' | transloco\">{{ completedBy(step) ?? ('Admin.Onboarding.Manual' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Plans' | transloco\">{{ planNames(step) ?? ('Admin.Onboarding.AllPlans' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Enabled' | transloco\">\n                <ui-switch size=\"small\" [checked]=\"step.enabled\" [disabled]=\"busy\" (change)=\"toggle(step, $event)\"\n                  [attr.aria-label]=\"('Admin.Onboarding.Form.Enabled' | transloco) + ': ' + step.title\"></ui-switch>\n              </td>\n              <td [attr.data-head]=\"'Label.Actions' | transloco\">\n                <ul class=\"list-unstyled list-inline list-action mb-0\">\n                  <li class=\"me-2\" [class.invisible]=\"index === 0\" [pTooltip]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                    tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\" (click)=\"move(index, -1)\" (keydown.enter)=\"move(index, -1)\">\n                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li class=\"me-2\" [class.invisible]=\"index === visibleSteps.length - 1\" [pTooltip]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                    tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\" (click)=\"move(index, 1)\" (keydown.enter)=\"move(index, 1)\">\n                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li class=\"me-2\" [pTooltip]=\"'Button.Edit' | transloco\" tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\"\n                    (click)=\"edit(step)\" (keydown.enter)=\"edit(step)\">\n                    <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                  <li [pTooltip]=\"'Button.Delete' | transloco\" tooltipPosition=\"top\" appendTo=\"body\" tabindex=\"0\"\n                    (click)=\"remove(step)\" (keydown.enter)=\"remove(step)\">\n                    <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                  </li>\n                </ul>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <pw-records-summary [showing]=\"visibleSteps.length\" [total]=\"steps.length\" />\n      </div>\n    }\n  }\n}\n",
-			styles: [".pw-onboarding-admin__intro{max-width:720px;margin-bottom:16px}.pw-onboarding-admin__filters{margin-bottom:8px}.pw-onboarding-admin__order{width:40px;font-variant-numeric:tabular-nums}.pw-onboarding-admin__title,.pw-onboarding-admin__muted{display:block}.pw-onboarding-admin__muted{color:var(--text-muted, #6c757d)}.pw-onboarding-admin__off td:not(:last-child):not(:nth-last-child(2)){opacity:.55}.pw-onboarding-admin__table td{word-break:normal;overflow-wrap:break-word}\n"]
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline gap-2\">\n    <h2 class=\"card-title p-0\">{{ 'Admin.Onboarding.Title' | transloco }}</h2>\n    @if (!loading && !loadFailed && permissionKey && steps.length) {\n      <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n      </button>\n    }\n  </div>\n</div>\n<p class=\"pw-onboarding-admin__intro\">{{ 'Admin.Onboarding.Intro' | transloco }}</p>\n\n<pw-loader [isVisible]=\"loading\"></pw-loader>\n\n@if (!loading) {\n  @if (loadFailed) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.LoadFailed' | transloco\"></pw-no-data>\n  } @else if (!families.length) {\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.NoFamilies' | transloco\"></pw-no-data>\n  } @else {\n    <div class=\"row pw-onboarding-admin__filters\">\n      @if (families.length > 1) {\n        <pw-input-container class=\"col-12 col-sm-6 col-lg-4\" [label]=\"'Admin.Onboarding.Family' | transloco\"\n          controlId=\"onboarding-family\">\n          <p-select inputId=\"onboarding-family\" [options]=\"families\" optionLabel=\"label\" optionValue=\"permission_key\"\n            [ngModel]=\"permissionKey\" (ngModelChange)=\"selectFamily($event)\" appendTo=\"body\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Family' | transloco\"></p-select>\n        </pw-input-container>\n      }\n      @if (steps.length) {\n        <div class=\"col-12 col-sm-6 col-lg-4 align-self-end mb-3\">\n          <p-select inputId=\"onboarding-plan-filter\" [options]=\"plans\" optionLabel=\"name\" optionValue=\"feature_key\"\n            [(ngModel)]=\"planFilter\" [showClear]=\"true\" appendTo=\"body\"\n            [ariaLabel]=\"'Admin.Onboarding.Filter.Product' | transloco\"\n            [placeholder]=\"'Admin.Onboarding.Placeholder.Product' | transloco\"></p-select>\n        </div>\n      }\n    </div>\n\n    @if (!steps.length) {\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Onboarding.Empty.Message' | transloco\"\n        [description]=\"'Admin.Onboarding.Empty.Description' | transloco\">\n        <div #content class=\"d-flex flex-wrap justify-content-center gap-2\">\n          @if (catalogue.recommended.length) {\n            <button type=\"button\" class=\"btn btn-primary\" [buttonBusy]=\"busy\" (click)=\"install()\">\n              {{ 'Admin.Onboarding.Button.Install' | transloco }}\n            </button>\n          }\n          <button type=\"button\" class=\"btn btn-outline-primary\" [disabled]=\"busy\" (click)=\"edit(null)\">\n            {{ 'Admin.Onboarding.Button.AddStep' | transloco }}\n          </button>\n        </div>\n      </pw-no-data>\n    } @else {\n      <div class=\"primeng-datatable-container table-responsive mt-0 pw-onboarding-admin__table\">\n        <p-table [value]=\"visibleSteps\" dataKey=\"id\">\n          <ng-template #header>\n            <tr>\n              <th scope=\"col\" class=\"pw-onboarding-admin__order\">#</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Step' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Type' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.CompletedBy' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Plans' | transloco }}</th>\n              <th scope=\"col\">{{ 'Admin.Onboarding.Column.Enabled' | transloco }}</th>\n              <th scope=\"col\" class=\"actions-list-four\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template #body let-step let-index=\"rowIndex\">\n            <tr [class.pw-onboarding-admin__off]=\"!step.enabled\">\n              <td data-head=\"#\" class=\"pw-onboarding-admin__order\">{{ index + 1 }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Step' | transloco\">\n                <span class=\"pw-onboarding-admin__title\">{{ step.title }}</span>\n                @if (step.description) {\n                  <span class=\"pw-onboarding-admin__muted\">{{ step.description }}</span>\n                }\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Type' | transloco\">\n                <span class=\"badge\" [class.bg-cyan]=\"step.kind === 'required'\" [class.bg-blue-grey]=\"step.kind === 'optional'\"\n                  [class.bg-warning]=\"step.kind === 'system'\">{{ 'Admin.Onboarding.Kind.' + step.kind | transloco }}</span>\n              </td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.CompletedBy' | transloco\">{{ completedBy(step) ?? ('Admin.Onboarding.Manual' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Plans' | transloco\">{{ planNames(step) ?? ('Admin.Onboarding.AllPlans' | transloco) }}</td>\n              <td [attr.data-head]=\"'Admin.Onboarding.Column.Enabled' | transloco\">\n                <ui-switch size=\"small\" [checked]=\"step.enabled\" [disabled]=\"busy\" (change)=\"toggle(step, $event)\"\n                  [attr.aria-label]=\"('Admin.Onboarding.Form.Enabled' | transloco) + ': ' + step.title\"></ui-switch>\n              </td>\n              <td [attr.data-head]=\"'Label.Actions' | transloco\">\n                <ul class=\"list-unstyled list-inline list-action mb-0\">\n                  <li class=\"me-2\" [class.invisible]=\"index === 0\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Admin.Onboarding.Action.MoveUp' | transloco\"\n                      (click)=\"move(index, -1)\">\n                      <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li class=\"me-2\" [class.invisible]=\"index === visibleSteps.length - 1\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Admin.Onboarding.Action.MoveDown' | transloco\"\n                      (click)=\"move(index, 1)\">\n                      <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li class=\"me-2\">\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Button.Edit' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Button.Edit' | transloco\" (click)=\"edit(step)\">\n                      <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                  <li>\n                    <button type=\"button\" class=\"pw-onboarding-admin__action\" [pTooltip]=\"'Button.Delete' | transloco\"\n                      tooltipPosition=\"top\" appendTo=\"body\" [attr.aria-label]=\"'Button.Delete' | transloco\" (click)=\"remove(step)\">\n                      <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                    </button>\n                  </li>\n                </ul>\n              </td>\n            </tr>\n          </ng-template>\n        </p-table>\n        <pw-records-summary [showing]=\"visibleSteps.length\" [total]=\"steps.length\" />\n      </div>\n    }\n  }\n}\n",
+			styles: [".pw-onboarding-admin__intro{max-width:720px;margin-bottom:16px}.pw-onboarding-admin__filters{margin-bottom:8px}.pw-onboarding-admin__order{width:40px;font-variant-numeric:tabular-nums}.pw-onboarding-admin__title,.pw-onboarding-admin__muted{display:block}.pw-onboarding-admin__muted{color:var(--text-muted, #6c757d)}.pw-onboarding-admin__off td:not(:last-child):not(:nth-last-child(2)){opacity:.55}.pw-onboarding-admin__table td{word-break:normal;overflow-wrap:break-word}.pw-onboarding-admin__action{padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit}\n"]
 		}]
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i1$1.OnboardingAdminService },
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i6$2.ConfirmDialogService },
 		{ type: i3$2.NgbModal },
 		{ type: i0.ChangeDetectorRef },
@@ -18963,7 +19055,7 @@ var ProductBackupCardComponent = class ProductBackupCardComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -19117,6 +19209,11 @@ var ProductBackupCardComponent = class ProductBackupCardComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -19329,6 +19426,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 					};
 					this.adminService.saveProductRoles(this.subscriptionsRolesData).subscribe();
 				}
+				this.form.markAsPristine();
 				this.back();
 			}
 			this.cdr.markForCheck();
@@ -19348,6 +19446,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 		this.productService.updateProduct(data, this.id).subscribe((response) => {
 			if (!response.error) {
 				this.form.patchValue(response);
+				this.form.markAsPristine();
 				this.back();
 			}
 			this.cdr.markForCheck();
@@ -19472,7 +19571,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 			deps: [
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i3$2.NgbModal },
 				{ token: i1$1.AdminService }
 			],
@@ -19556,7 +19655,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -19795,7 +19894,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -19809,7 +19908,7 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i12.ProfileImageCropperComponent,
+					type: i12$1.ProfileImageCropperComponent,
 					selector: "pw-image-cropper",
 					inputs: ["aspectRatio", "dynamicData"],
 					outputs: [
@@ -19882,9 +19981,14 @@ var ProductDetailsComponent = class ProductDetailsComponent extends AppBaseCompo
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -19929,7 +20033,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i3$2.NgbModal },
 		{ type: i1$1.AdminService }
 	],
@@ -19971,7 +20075,7 @@ var ProductInsightComponent = class ProductInsightComponent extends AppBaseCompo
 			ngImport: i0,
 			type: ProductInsightComponent,
 			deps: [
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -20064,7 +20168,7 @@ var ProductInsightComponent = class ProductInsightComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -20095,7 +20199,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	]
@@ -20214,8 +20318,8 @@ var ProductsListComponent = class ProductsListComponent extends AppBaseComponent
 			ngImport: i0,
 			type: ProductsListComponent,
 			deps: [
-				{ token: i2$2.ProductService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.ProductService },
+				{ token: i2$1.AuthService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -20242,7 +20346,7 @@ var ProductsListComponent = class ProductsListComponent extends AppBaseComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -20355,19 +20459,19 @@ var ProductsListComponent = class ProductsListComponent extends AppBaseComponent
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -20542,7 +20646,7 @@ var ProductsListComponent = class ProductsListComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -20630,8 +20734,8 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.ProductService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.ProductService },
+		{ type: i2$1.AuthService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	],
@@ -20754,7 +20858,7 @@ var UsersListForProductComponent = class UsersListForProductComponent extends Ap
 			ngImport: i0,
 			type: UsersListForProductComponent,
 			deps: [
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -20774,7 +20878,7 @@ var UsersListForProductComponent = class UsersListForProductComponent extends Ap
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -20887,19 +20991,19 @@ var UsersListForProductComponent = class UsersListForProductComponent extends Ap
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -21034,12 +21138,12 @@ var UsersListForProductComponent = class UsersListForProductComponent extends Ap
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.IsOnlinePipe,
+					type: i9$1.IsOnlinePipe,
 					name: "isOnline"
 				}
 			]
@@ -21060,7 +21164,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	]
@@ -21110,7 +21214,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 	}
 	ngOnInit() {
 		this.filterData = history.state;
-		this.isBlogAdmin = this.permissionService.evaluatePermissions(`${PermissionService.selectedProduct?.permission}.${PermissionService.selectedProduct?.feature_key}.Blog.Admin`);
+		this.isBlogAdmin = this.permissionService.evaluatePermissions(PermissionService.productPermission("Blog", "Admin"));
 		this.isSubscriptionSuperAdmin = this.permissionService.isUserSubscriptionSuperAdmin();
 		if (!this.isSubscriptionSuperAdmin) this.form.get("author_id").disable();
 		if (!this.isBlogAdmin) this.form.get("accepted_at").disable();
@@ -21213,6 +21317,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 		if (!data.rectangular_picture) delete data.rectangular_picture;
 		delete data.id;
 		this.adminService.addPost(data).pipe(switchMap((response) => this.postTags(response.id))).subscribe(() => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Resource.AddedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -21262,6 +21367,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 	}
 	updatePost(data) {
 		this.adminService.updatePost(data, this.id).pipe(switchMap(() => this.postTags(this.blog.id))).subscribe(() => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Resource.UpdatedMessage"));
 			this.navigateToResourceList({ resetSearch: true });
 			this.cdr.markForCheck();
@@ -21351,8 +21457,8 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 				{ token: i1$1.AdminService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.TagService },
-				{ token: i2$2.SubscriptionService }
+				{ token: i2$1.TagService },
+				{ token: i2$1.SubscriptionService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -21450,7 +21556,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -21671,7 +21777,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -21685,7 +21791,7 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 				},
 				{
 					kind: "component",
-					type: i12.ProfileImageCropperComponent,
+					type: i12$1.ProfileImageCropperComponent,
 					selector: "pw-image-cropper",
 					inputs: ["aspectRatio", "dynamicData"],
 					outputs: [
@@ -21747,9 +21853,14 @@ var ResourceAdminDetailsComponent = class ResourceAdminDetailsComponent extends
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -21783,8 +21894,8 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i1$1.AdminService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.TagService },
-		{ type: i2$2.SubscriptionService }
+		{ type: i2$1.TagService },
+		{ type: i2$1.SubscriptionService }
 	],
 	propDecorators: { onSave: [] }
 });
@@ -21849,6 +21960,12 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [{ type: i0.Injector }]
 });
 var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseComponent {
+	get blogPermission() {
+		return PermissionService.productPermission("Blog");
+	}
+	get isBlogAdmin() {
+		return PermissionService.productPermission("Blog", "Admin");
+	}
 	constructor(adminService, tagService, injector, cdr, confirmDialog) {
 		super(injector);
 		this.adminService = adminService;
@@ -21876,8 +21993,6 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 			this.searchTextItems = typeof state.searchTextItems === "string" ? state.searchTextItems : "";
 		}
 		this.getUserSubscriptionId().subscribe((_) => {
-			this.blogPermission = `${PermissionService.selectedProduct?.permission}.${PermissionService.selectedProduct?.feature_key}.Blog`;
-			this.isBlogAdmin = `${PermissionService.selectedProduct?.permission}.${PermissionService.selectedProduct?.feature_key}.Blog.Admin`;
 			this.cdr.markForCheck();
 		});
 		this.getUserSubscription().subscribe((response) => {
@@ -21970,7 +22085,7 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 			type: ResourcesIndexComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.TagService },
+				{ token: i2$1.TagService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -21992,7 +22107,7 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -22105,19 +22220,19 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -22291,7 +22406,7 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -22367,12 +22482,12 @@ var ResourcesIndexComponent = class ResourcesIndexComponent extends AppBaseCompo
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.IfNameNullShowEmailPipe,
+					type: i9$1.IfNameNullShowEmailPipe,
 					name: "ifNameNullShowEmail"
 				}
 			]
@@ -22395,7 +22510,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.TagService },
+		{ type: i2$1.TagService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -22529,7 +22644,7 @@ var ResourcesInsightComponent = class ResourcesInsightComponent extends AppBaseC
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -22631,7 +22746,7 @@ var ResourcesListsInsightComponent = class ResourcesListsInsightComponent extend
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -22744,7 +22859,7 @@ var ResourcesListsInsightComponent = class ResourcesListsInsightComponent extend
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -22799,7 +22914,7 @@ var ResourcesListsInsightComponent = class ResourcesListsInsightComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -22963,6 +23078,7 @@ var AgentDetailsComponent = class AgentDetailsComponent extends AppBaseComponent
 			...Object.keys(details).length ? { payout_details: details } : {}
 		};
 		this.groupService.updateAgent(this.subscriptionId, this.agentId, data).subscribe(() => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("User.Subscriptions.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -23001,7 +23117,7 @@ var AgentDetailsComponent = class AgentDetailsComponent extends AppBaseComponent
 			type: AgentDetailsComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.GroupService },
+				{ token: i2$1.GroupService },
 				{ token: i3$2.NgbDatepickerConfig },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
@@ -23102,7 +23218,7 @@ var AgentDetailsComponent = class AgentDetailsComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -23226,7 +23342,7 @@ var AgentDetailsComponent = class AgentDetailsComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -23322,6 +23438,11 @@ var AgentDetailsComponent = class AgentDetailsComponent extends AppBaseComponent
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "directive",
 					type: i3$2.NgbInputDatepicker,
@@ -23383,7 +23504,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.GroupService },
+		{ type: i2$1.GroupService },
 		{ type: i3$2.NgbDatepickerConfig },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
@@ -23445,10 +23566,10 @@ var SubscriptionProductsComponent = class SubscriptionProductsComponent extends
 			ngImport: i0,
 			type: SubscriptionProductsComponent,
 			deps: [
-				{ token: i2$2.SubscriptionService },
+				{ token: i2$1.SubscriptionService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.ProductService }
+				{ token: i2$1.ProductService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -23466,7 +23587,7 @@ var SubscriptionProductsComponent = class SubscriptionProductsComponent extends
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -23579,7 +23700,7 @@ var SubscriptionProductsComponent = class SubscriptionProductsComponent extends
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -23662,7 +23783,7 @@ var SubscriptionProductsComponent = class SubscriptionProductsComponent extends
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -23753,10 +23874,10 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.SubscriptionService },
+		{ type: i2$1.SubscriptionService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.ProductService }
+		{ type: i2$1.ProductService }
 	]
 });
 var AddMembersComponent = class AddMembersComponent extends AppBaseComponent {
@@ -23872,6 +23993,7 @@ var AddMembersComponent = class AddMembersComponent extends AppBaseComponent {
 					this.subscriptionService.addMembersToSubscription(this.id, data).subscribe((response) => {
 						if (response?.status === StatusCodes.OK) {
 							this.membersAdded.emit();
+							this.form.markAsPristine();
 							this.toast.success(response.message);
 							this.form.setControl("emailsFormArray", this.formBuilder.array([this.createItem()]));
 						} else this.toast.error(response.error.message);
@@ -23894,8 +24016,8 @@ var AddMembersComponent = class AddMembersComponent extends AppBaseComponent {
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i10.UntypedFormBuilder },
-				{ token: i2$2.SubscriptionService },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.SubscriptionService },
+				{ token: i2$1.AuthService },
 				{ token: i6$2.ConfirmDialogService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -23984,6 +24106,11 @@ var AddMembersComponent = class AddMembersComponent extends AppBaseComponent {
 					selector: "[formArrayName]",
 					inputs: ["formArrayName"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -24011,8 +24138,8 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i10.UntypedFormBuilder },
-		{ type: i2$2.SubscriptionService },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.SubscriptionService },
+		{ type: i2$1.AuthService },
 		{ type: i6$2.ConfirmDialogService }
 	],
 	propDecorators: {
@@ -24198,13 +24325,13 @@ var SubscriptionUsersComponent = class SubscriptionUsersComponent extends AppBas
 			ngImport: i0,
 			type: SubscriptionUsersComponent,
 			deps: [
-				{ token: i2$2.SubscriptionService },
+				{ token: i2$1.SubscriptionService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.AuthService },
-				{ token: i2$2.WindowService },
+				{ token: i2$1.AuthService },
+				{ token: i2$1.WindowService },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.CustomToastService },
+				{ token: i2$1.CustomToastService },
 				{ token: i6$2.ConfirmDialogService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -24239,12 +24366,12 @@ var SubscriptionUsersComponent = class SubscriptionUsersComponent extends AppBas
 			],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner></p-progress-spinner>\n  }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n  <div class=\"text-end mb-2\">\n    <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n    </button>\n  </div>\n}\n@if (!isAddEnabled) {\n  <section id=\"members\"\n    >\n    <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n      class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n      <p-table #dt\n        stateKey=\"pw-table.admin-subscription-users\"\n        stateStorage=\"session\"\n        [resizableColumns]=\"true\"\n        columnResizeMode=\"expand\"\n        [value]=\"subscriptionMembers\"\n        [paginator]=\"totalRecords !== 0\"\n        [rows]=\"PAGE_SIZE\"\n        [lazy]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        [customSort]=\"true\"\n        (onLazyLoad)=\"onLazyLoad($event)\">\n        <ng-template #caption>\n          <div class=\"text-end\">\n            <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input id=\"subscription-users-search\"\n                name=\"subscription-users-search\"\n                [(ngModel)]=\"searchText\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                type=\"text\"\n                pInputText\n                placeholder=\"Search subscription users...\"\n                aria-label=\"Search subscription users...\" />\n            </p-iconfield>\n          </div>\n        </ng-template>\n        <ng-template #header>\n          <tr>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"id\">\n              {{ 'Admin.Users.Id' | transloco }}\n              <p-sort-icon field=\"id\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"first_name\">\n              {{ 'Label.FirstName' | transloco }}\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_name\">\n              {{ 'Label.LastName' | transloco }}\n              <p-sort-icon field=\"last_name\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"email\">\n              {{ 'Label.Email' | transloco }}\n              <p-sort-icon field=\"email\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"slug\">\n              {{ 'Admin.Subscriptions.NickName' | transloco }}\n              <p-sort-icon field=\"slug\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"has_password\">\n              {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n              <p-sort-icon field=\"has_password\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_sign_in_at\">\n              {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n              <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n            </th>\n            <th scope=\"true\" class=\"actions-list-two\">\n              {{ 'Label.Actions' | transloco }}\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template #body\n          let-user>\n          <tr>\n            <td data-head=\"Id\">{{ user.id }}</td>\n            <td data-head=\"First Name\">\n              <span class=\"first-name\">{{ user.first_name }}</span>\n              @if (subscriptionOwnerUserId === user.id) {\n                <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n              }\n              @if (subscriptionAdmins?.includes(user?.id)) {\n                <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n              }\n              \n            </td>\n            <td data-head=\"Last Name\">\n              {{ user.last_name }}\n              @if (user?.alpha) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n                </span>\n              }\n              @if (user?.beta) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n                </span>\n              }\n              @if (user?.cognito_sso_activated) {\n                <span\n                  class=\"ms-2\"\n                  [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa fa-cloud success\" ></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Email\">{{ user.email }}</td>\n            <td data-head=\"Nick Name\">\n              <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n            </td>\n            <td data-head=\"Email Confirm\">\n              <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n                color=\"success-danger\"\n                class=\"badge\">\n                {{ user?.has_password ? 'Yes' : 'No' }}\n              </span>\n              @if (user?.blocked) {\n                <span\n                  [pTooltip]=\"'This user has been blocked'\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Last Login\">\n              @if (user?.current_sign_in_at | isOnline) {\n                <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n              } @else if (user?.current_sign_in_at) {\n                <span>\n                  <span>\n                    {{ user.current_sign_in_at | dateFormat }}\n                  </span>\n                  <span>\n                    &nbsp;({{ user.current_sign_in_at | sinceAgo }})\n                  </span>\n                </span>\n              } @else {\n                <span>\n                  <span>\n                    {{ user.last_sign_in_at | dateFormat }}\n                  </span>\n                  @if (user.last_sign_in_at) {\n                    <span>\n                      &nbsp;({{ user.last_sign_in_at | sinceAgo }})\n                    </span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                  <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n                </li>\n                @if (subscriptionOwnerUserId !== user.id) {\n                  <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                    <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (user?.enable_two_factor_authenticator) {\n                  <li *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"disable2fa(user?.id)\"\n                    (keydown.enter)=\"disable2fa(user?.id)\"\n                    pTooltip=\"Disable 2FA\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3 success\">\n                    <i class=\"fa fa-lock\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n                  <!-- Make Admin -->\n                  @if (!subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Make Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(user, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Remove Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(user, false)\"\n                        (click)=\"makeAdmin(user, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (canShowSubscriptionActions) {\n                  <li\n                    [routerLink]=\"[routers.usersDetails + user.id]\"\n                    pTooltip=\"Edit\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-edit edit-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n                  <li\n                    pTooltip=\"Remove user from subscription\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i (click)=\"onDelete(user)\"\n                      (keydown.enter)=\"onDelete(user)\"\n                      class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n    @if (totalUnfilteredCount === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <pw-add-members (membersAdded)=\"onMembersAdded()\"\n    ></pw-add-members>\n  </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner></p-progress-spinner>\n  }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n  <div class=\"text-end mb-2\">\n    <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n    </button>\n  </div>\n}\n@if (!isAddEnabled) {\n  <section id=\"members\"\n    >\n    <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n      class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n      <p-table #dt\n        stateKey=\"pw-table.admin-subscription-users\"\n        stateStorage=\"session\"\n        [resizableColumns]=\"true\"\n        columnResizeMode=\"expand\"\n        [value]=\"subscriptionMembers\"\n        [paginator]=\"totalRecords !== 0\"\n        [rows]=\"PAGE_SIZE\"\n        [lazy]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        [customSort]=\"true\"\n        (onLazyLoad)=\"onLazyLoad($event)\">\n        <ng-template #caption>\n          <div class=\"text-end\">\n            <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input id=\"subscription-users-search\"\n                name=\"subscription-users-search\"\n                [(ngModel)]=\"searchText\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                type=\"text\"\n                pInputText\n                placeholder=\"Search subscription users...\"\n                aria-label=\"Search subscription users...\" />\n            </p-iconfield>\n          </div>\n        </ng-template>\n        <ng-template #header>\n          <tr>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"id\">\n              {{ 'Admin.Users.Id' | transloco }}\n              <p-sort-icon field=\"id\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"first_name\">\n              {{ 'Label.FirstName' | transloco }}\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_name\">\n              {{ 'Label.LastName' | transloco }}\n              <p-sort-icon field=\"last_name\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"email\">\n              {{ 'Label.Email' | transloco }}\n              <p-sort-icon field=\"email\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"slug\">\n              {{ 'Admin.Subscriptions.NickName' | transloco }}\n              <p-sort-icon field=\"slug\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"has_password\">\n              {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n              <p-sort-icon field=\"has_password\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_sign_in_at\">\n              {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n              <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n            </th>\n            <th scope=\"true\" class=\"actions-list-two\">\n              {{ 'Label.Actions' | transloco }}\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template #body\n          let-user>\n          <tr>\n            <td data-head=\"Id\">{{ user.id }}</td>\n            <td data-head=\"First Name\">\n              <span class=\"first-name\">{{ user.first_name }}</span>\n              @if (subscriptionOwnerUserId === user.id) {\n                <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n              }\n              @if (subscriptionAdmins?.includes(user?.id)) {\n                <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n              }\n              \n            </td>\n            <td data-head=\"Last Name\">\n              {{ user.last_name }}\n              @if (user?.alpha) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n                </span>\n              }\n              @if (user?.beta) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n                </span>\n              }\n              @if (user?.cognito_sso_activated) {\n                <span\n                  class=\"ms-2\"\n                  [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa fa-cloud success\" ></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Email\">{{ user.email }}</td>\n            <td data-head=\"Nick Name\">\n              <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n            </td>\n            <td data-head=\"Email Confirm\">\n              <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n                color=\"success-danger\"\n                class=\"badge\">\n                {{ user?.has_password ? 'Yes' : 'No' }}\n              </span>\n              @if (user?.blocked) {\n                <span\n                  [pTooltip]=\"'This user has been blocked'\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Last Login\">\n              @if (user?.current_sign_in_at | isOnline) {\n                <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n              } @else if (user?.current_sign_in_at) {\n                <span>\n                  <span>\n                    {{ user.current_sign_in_at | dateFormat }}\n                  </span>\n                  <span>\n                    &nbsp;({{ user.current_sign_in_at | sinceAgo }})\n                  </span>\n                </span>\n              } @else {\n                <span>\n                  <span>\n                    {{ user.last_sign_in_at | dateFormat }}\n                  </span>\n                  @if (user.last_sign_in_at) {\n                    <span>\n                      &nbsp;({{ user.last_sign_in_at | sinceAgo }})\n                    </span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                  <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n                </li>\n                @if (subscriptionOwnerUserId !== user.id) {\n                  <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                    <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (user?.enable_two_factor_authenticator) {\n                  <li *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"disable2fa(user?.id)\"\n                    (keydown.enter)=\"disable2fa(user?.id)\"\n                    pTooltip=\"Disable 2FA\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3 success\">\n                    <i class=\"fa fa-lock\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n                  <!-- Make Admin -->\n                  @if (!subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Make Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(user, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <!-- Remove Admin -->\n                  @if (subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Remove Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(user, false)\"\n                        (click)=\"makeAdmin(user, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n                @if (canShowSubscriptionActions) {\n                  <li\n                    [routerLink]=\"[routers.usersDetails + user.id]\"\n                    pTooltip=\"Edit\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-edit edit-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n                  <li\n                    pTooltip=\"Remove user from subscription\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i (click)=\"onDelete(user)\"\n                      (keydown.enter)=\"onDelete(user)\"\n                      class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n    @if (totalUnfilteredCount === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <pw-add-members (membersAdded)=\"onMembersAdded()\"\n    ></pw-add-members>\n  </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"],
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -24357,19 +24484,19 @@ var SubscriptionUsersComponent = class SubscriptionUsersComponent extends AppBas
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -24459,7 +24586,7 @@ var SubscriptionUsersComponent = class SubscriptionUsersComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -24542,17 +24669,17 @@ var SubscriptionUsersComponent = class SubscriptionUsersComponent extends AppBas
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.SinceAgoPipe,
+					type: i9$1.SinceAgoPipe,
 					name: "sinceAgo"
 				},
 				{
 					kind: "pipe",
-					type: i9.IsOnlinePipe,
+					type: i9$1.IsOnlinePipe,
 					name: "isOnline"
 				}
 			]
@@ -24569,18 +24696,18 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-subscription-users",
 			standalone: false,
-			template: "<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner></p-progress-spinner>\n  }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n  <div class=\"text-end mb-2\">\n    <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n    </button>\n  </div>\n}\n@if (!isAddEnabled) {\n  <section id=\"members\"\n    >\n    <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n      class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n      <p-table #dt\n        stateKey=\"pw-table.admin-subscription-users\"\n        stateStorage=\"session\"\n        [resizableColumns]=\"true\"\n        columnResizeMode=\"expand\"\n        [value]=\"subscriptionMembers\"\n        [paginator]=\"totalRecords !== 0\"\n        [rows]=\"PAGE_SIZE\"\n        [lazy]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        [customSort]=\"true\"\n        (onLazyLoad)=\"onLazyLoad($event)\">\n        <ng-template #caption>\n          <div class=\"text-end\">\n            <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input id=\"subscription-users-search\"\n                name=\"subscription-users-search\"\n                [(ngModel)]=\"searchText\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                type=\"text\"\n                pInputText\n                placeholder=\"Search subscription users...\"\n                aria-label=\"Search subscription users...\" />\n            </p-iconfield>\n          </div>\n        </ng-template>\n        <ng-template #header>\n          <tr>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"id\">\n              {{ 'Admin.Users.Id' | transloco }}\n              <p-sort-icon field=\"id\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"first_name\">\n              {{ 'Label.FirstName' | transloco }}\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_name\">\n              {{ 'Label.LastName' | transloco }}\n              <p-sort-icon field=\"last_name\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"email\">\n              {{ 'Label.Email' | transloco }}\n              <p-sort-icon field=\"email\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"slug\">\n              {{ 'Admin.Subscriptions.NickName' | transloco }}\n              <p-sort-icon field=\"slug\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"has_password\">\n              {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n              <p-sort-icon field=\"has_password\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_sign_in_at\">\n              {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n              <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n            </th>\n            <th scope=\"true\" class=\"actions-list-two\">\n              {{ 'Label.Actions' | transloco }}\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template #body\n          let-user>\n          <tr>\n            <td data-head=\"Id\">{{ user.id }}</td>\n            <td data-head=\"First Name\">\n              <span class=\"first-name\">{{ user.first_name }}</span>\n              @if (subscriptionOwnerUserId === user.id) {\n                <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n              }\n              @if (subscriptionAdmins?.includes(user?.id)) {\n                <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n              }\n              \n            </td>\n            <td data-head=\"Last Name\">\n              {{ user.last_name }}\n              @if (user?.alpha) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n                </span>\n              }\n              @if (user?.beta) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n                </span>\n              }\n              @if (user?.cognito_sso_activated) {\n                <span\n                  class=\"ms-2\"\n                  [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa fa-cloud success\" ></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Email\">{{ user.email }}</td>\n            <td data-head=\"Nick Name\">\n              <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n            </td>\n            <td data-head=\"Email Confirm\">\n              <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n                color=\"success-danger\"\n                class=\"badge\">\n                {{ user?.has_password ? 'Yes' : 'No' }}\n              </span>\n              @if (user?.blocked) {\n                <span\n                  [pTooltip]=\"'This user has been blocked'\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Last Login\">\n              @if (user?.current_sign_in_at | isOnline) {\n                <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n              } @else if (user?.current_sign_in_at) {\n                <span>\n                  <span>\n                    {{ user.current_sign_in_at | dateFormat }}\n                  </span>\n                  <span>\n                    &nbsp;({{ user.current_sign_in_at | sinceAgo }})\n                  </span>\n                </span>\n              } @else {\n                <span>\n                  <span>\n                    {{ user.last_sign_in_at | dateFormat }}\n                  </span>\n                  @if (user.last_sign_in_at) {\n                    <span>\n                      &nbsp;({{ user.last_sign_in_at | sinceAgo }})\n                    </span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                  <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n                </li>\n                @if (subscriptionOwnerUserId !== user.id) {\n                  <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                    <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (user?.enable_two_factor_authenticator) {\n                  <li *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"disable2fa(user?.id)\"\n                    (keydown.enter)=\"disable2fa(user?.id)\"\n                    pTooltip=\"Disable 2FA\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3 success\">\n                    <i class=\"fa fa-lock\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n                  <!-- Make Admin -->\n                  @if (!subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Make Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(user, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Remove Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(user, false)\"\n                        (click)=\"makeAdmin(user, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (canShowSubscriptionActions) {\n                  <li\n                    [routerLink]=\"[routers.usersDetails + user.id]\"\n                    pTooltip=\"Edit\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-edit edit-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n                  <li\n                    pTooltip=\"Remove user from subscription\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i (click)=\"onDelete(user)\"\n                      (keydown.enter)=\"onDelete(user)\"\n                      class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n    @if (totalUnfilteredCount === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <pw-add-members (membersAdded)=\"onMembersAdded()\"\n    ></pw-add-members>\n  </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner></p-progress-spinner>\n  }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n  <div class=\"text-end mb-2\">\n    <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n    </button>\n  </div>\n}\n@if (!isAddEnabled) {\n  <section id=\"members\"\n    >\n    <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n      class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n      <p-table #dt\n        stateKey=\"pw-table.admin-subscription-users\"\n        stateStorage=\"session\"\n        [resizableColumns]=\"true\"\n        columnResizeMode=\"expand\"\n        [value]=\"subscriptionMembers\"\n        [paginator]=\"totalRecords !== 0\"\n        [rows]=\"PAGE_SIZE\"\n        [lazy]=\"true\"\n        [totalRecords]=\"totalRecords\"\n        [loading]=\"loading\"\n        [filterDelay]=\"1000\"\n        [customSort]=\"true\"\n        (onLazyLoad)=\"onLazyLoad($event)\">\n        <ng-template #caption>\n          <div class=\"text-end\">\n            <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input id=\"subscription-users-search\"\n                name=\"subscription-users-search\"\n                [(ngModel)]=\"searchText\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                type=\"text\"\n                pInputText\n                placeholder=\"Search subscription users...\"\n                aria-label=\"Search subscription users...\" />\n            </p-iconfield>\n          </div>\n        </ng-template>\n        <ng-template #header>\n          <tr>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"id\">\n              {{ 'Admin.Users.Id' | transloco }}\n              <p-sort-icon field=\"id\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"first_name\">\n              {{ 'Label.FirstName' | transloco }}\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_name\">\n              {{ 'Label.LastName' | transloco }}\n              <p-sort-icon field=\"last_name\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"email\">\n              {{ 'Label.Email' | transloco }}\n              <p-sort-icon field=\"email\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"slug\">\n              {{ 'Admin.Subscriptions.NickName' | transloco }}\n              <p-sort-icon field=\"slug\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"has_password\">\n              {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n              <p-sort-icon field=\"has_password\"></p-sort-icon>\n            </th>\n            <th pResizableColumn scope=\"true\"\n              pSortableColumn=\"last_sign_in_at\">\n              {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n              <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n            </th>\n            <th scope=\"true\" class=\"actions-list-two\">\n              {{ 'Label.Actions' | transloco }}\n            </th>\n          </tr>\n        </ng-template>\n        <ng-template #body\n          let-user>\n          <tr>\n            <td data-head=\"Id\">{{ user.id }}</td>\n            <td data-head=\"First Name\">\n              <span class=\"first-name\">{{ user.first_name }}</span>\n              @if (subscriptionOwnerUserId === user.id) {\n                <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n              }\n              @if (subscriptionAdmins?.includes(user?.id)) {\n                <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n              }\n              \n            </td>\n            <td data-head=\"Last Name\">\n              {{ user.last_name }}\n              @if (user?.alpha) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n                </span>\n              }\n              @if (user?.beta) {\n                <span\n                  [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n                </span>\n              }\n              @if (user?.cognito_sso_activated) {\n                <span\n                  class=\"ms-2\"\n                  [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa fa-cloud success\" ></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Email\">{{ user.email }}</td>\n            <td data-head=\"Nick Name\">\n              <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n            </td>\n            <td data-head=\"Email Confirm\">\n              <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n                color=\"success-danger\"\n                class=\"badge\">\n                {{ user?.has_password ? 'Yes' : 'No' }}\n              </span>\n              @if (user?.blocked) {\n                <span\n                  [pTooltip]=\"'This user has been blocked'\"\n                  class=\"ms-2\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\">\n                  <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n                </span>\n              }\n            </td>\n            <td data-head=\"Last Login\">\n              @if (user?.current_sign_in_at | isOnline) {\n                <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n              } @else if (user?.current_sign_in_at) {\n                <span>\n                  <span>\n                    {{ user.current_sign_in_at | dateFormat }}\n                  </span>\n                  <span>\n                    &nbsp;({{ user.current_sign_in_at | sinceAgo }})\n                  </span>\n                </span>\n              } @else {\n                <span>\n                  <span>\n                    {{ user.last_sign_in_at | dateFormat }}\n                  </span>\n                  @if (user.last_sign_in_at) {\n                    <span>\n                      &nbsp;({{ user.last_sign_in_at | sinceAgo }})\n                    </span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline list-action\">\n                <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                  <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n                </li>\n                @if (subscriptionOwnerUserId !== user.id) {\n                  <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n                    <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (user?.enable_two_factor_authenticator) {\n                  <li *rbacAllow=\"'Pages.Alpha'\"\n                    (click)=\"disable2fa(user?.id)\"\n                    (keydown.enter)=\"disable2fa(user?.id)\"\n                    pTooltip=\"Disable 2FA\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3 success\">\n                    <i class=\"fa fa-lock\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n                  <!-- Make Admin -->\n                  @if (!subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Make Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(user, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <!-- Remove Admin -->\n                  @if (subscriptionAdmins?.includes(user.id)) {\n                    <li pTooltip=\"Remove Admin\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(user, false)\"\n                        (click)=\"makeAdmin(user, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n                @if (canShowSubscriptionActions) {\n                  <li\n                    [routerLink]=\"[routers.usersDetails + user.id]\"\n                    pTooltip=\"Edit\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i class=\"fa fa-edit edit-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n                @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n                  <li\n                    pTooltip=\"Remove user from subscription\"\n                    tooltipPosition=\"top\"\n                    appendTo=\"body\"\n                    class=\"me-2 me-sm-3\">\n                    <i (click)=\"onDelete(user)\"\n                      (keydown.enter)=\"onDelete(user)\"\n                      class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"></i>\n                  </li>\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n        <div>\n          <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n          </pw-no-data>\n        </div>\n      }\n      @if (totalRecords !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n      }\n    </div>\n    @if (totalUnfilteredCount === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <pw-add-members (membersAdded)=\"onMembersAdded()\"\n    ></pw-add-members>\n  </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"]
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.SubscriptionService },
+		{ type: i2$1.SubscriptionService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.AuthService },
-		{ type: i2$2.WindowService },
+		{ type: i2$1.AuthService },
+		{ type: i2$1.WindowService },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.CustomToastService },
+		{ type: i2$1.CustomToastService },
 		{ type: i6$2.ConfirmDialogService }
 	],
 	propDecorators: {
@@ -24750,7 +24877,7 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -24863,7 +24990,7 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -24976,7 +25103,7 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -25110,7 +25237,7 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -25216,6 +25343,11 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "directive",
 					type: i3$2.NgbInputDatepicker,
@@ -25258,7 +25390,7 @@ var SubscriptionAgentsListComponent = class SubscriptionAgentsListComponent exte
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -25397,7 +25529,7 @@ var SubscriptionInvoicesComponent = class SubscriptionInvoicesComponent extends
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -25510,7 +25642,7 @@ var SubscriptionInvoicesComponent = class SubscriptionInvoicesComponent extends
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -25544,7 +25676,7 @@ var SubscriptionInvoicesComponent = class SubscriptionInvoicesComponent extends
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -25693,7 +25825,7 @@ var SubscriptionInvoicesComponent = class SubscriptionInvoicesComponent extends
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -25876,6 +26008,7 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
 				company_url: formValue.company_url
 			};
 			this.subscriptionService.updateSubscription(this.id, data).subscribe(() => {
+				this.form.markAsPristine();
 				this.router.navigate(["/admin/subscriptions/list"]);
 				this.toast.success(this.translation.translate("Admin.Subscriptions.UpdatedMessage"));
 				this.getAgentsDetails(this.id);
@@ -25924,11 +26057,11 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
 			ngImport: i0,
 			type: SubscriptionDetailsComponent,
 			deps: [
-				{ token: i2$2.SubscriptionService },
+				{ token: i2$1.SubscriptionService },
 				{ token: i1$1.AdminService },
 				{ token: i5$2.DatePipe },
-				{ token: i2$2.CommonService },
-				{ token: i2$2.NgbDateCustomParserFormatter },
+				{ token: i2$1.CommonService },
+				{ token: i2$1.NgbDateCustomParserFormatter },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -25977,7 +26110,7 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -26256,7 +26389,7 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -26341,6 +26474,11 @@ var SubscriptionDetailsComponent = class SubscriptionDetailsComponent extends Ap
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "directive",
 					type: i3$2.NgbInputDatepicker,
@@ -26425,11 +26563,11 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.SubscriptionService },
+		{ type: i2$1.SubscriptionService },
 		{ type: i1$1.AdminService },
 		{ type: i5$2.DatePipe },
-		{ type: i2$2.CommonService },
-		{ type: i2$2.NgbDateCustomParserFormatter },
+		{ type: i2$1.CommonService },
+		{ type: i2$1.NgbDateCustomParserFormatter },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	]
@@ -26555,6 +26693,7 @@ var SubscriptionProductDetailsComponent = class SubscriptionProductDetailsCompon
 		if (this.form.value?.new_product_id) data["new_product_id"] = this.form.value?.new_product_id?.id ?? null;
 		if (this.form.value.purchased_units) data["purchased_units"] = this.form.value.purchased_units;
 		this.adminService.updateSubscriptionProduct(data).subscribe({ next: () => {
+			this.form.markAsPristine();
 			this.toast.success(this.translation.translate("Admin.Subscriptions.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -26587,8 +26726,8 @@ var SubscriptionProductDetailsComponent = class SubscriptionProductDetailsCompon
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
-				{ token: i2$2.NgbDateCustomParserFormatter },
+				{ token: i2$1.ProductService },
+				{ token: i2$1.NgbDateCustomParserFormatter },
 				{ token: i5$2.DatePipe }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -26757,7 +26896,7 @@ var SubscriptionProductDetailsComponent = class SubscriptionProductDetailsCompon
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -26817,6 +26956,11 @@ var SubscriptionProductDetailsComponent = class SubscriptionProductDetailsCompon
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "directive",
 					type: i3$2.NgbInputDatepicker,
@@ -26879,8 +27023,8 @@ i0.ɵɵngDeclareClassMetadata({
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
-		{ type: i2$2.NgbDateCustomParserFormatter },
+		{ type: i2$1.ProductService },
+		{ type: i2$1.NgbDateCustomParserFormatter },
 		{ type: i5$2.DatePipe }
 	],
 	propDecorators: {
@@ -27020,7 +27164,7 @@ var InsightComponent = class InsightComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -27132,7 +27276,7 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 			deps: [
 				{ token: i1$1.AdminService },
 				{ token: i0.Injector },
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i3$2.NgbModal },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -27159,7 +27303,7 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -27272,19 +27416,19 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -27396,7 +27540,7 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -27451,7 +27595,7 @@ var SubscriptionInsightNpsComponent = class SubscriptionInsightNpsComponent exte
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -27474,7 +27618,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
 		{ type: i0.Injector },
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i3$2.NgbModal },
 		{ type: i0.ChangeDetectorRef }
 	],
@@ -27672,7 +27816,7 @@ var SubscriptionInsightAveragePriceComponent = class SubscriptionInsightAverageP
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -27821,7 +27965,7 @@ var SubscriptionInsightProcuctSessionComponent = class SubscriptionInsightProcuc
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -27970,7 +28114,7 @@ var SubscriptionInsightUserSessionComponent = class SubscriptionInsightUserSessi
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -28119,7 +28263,7 @@ var SubscriptionInsightAverageUserComponent = class SubscriptionInsightAverageUs
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -28282,7 +28426,7 @@ var SubscriptionInsightRevenueComponent = class SubscriptionInsightRevenueCompon
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -28445,7 +28589,7 @@ var SubscriptionInsightChurnComponent = class SubscriptionInsightChurnComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -28812,9 +28956,9 @@ var InviteUsersComponent = class InviteUsersComponent extends AppBaseComponent {
 			deps: [
 				{ token: i10.UntypedFormBuilder },
 				{ token: i1$1.AdminService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i0.ChangeDetectorRef }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -28919,7 +29063,7 @@ var InviteUsersComponent = class InviteUsersComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -29078,6 +29222,11 @@ var InviteUsersComponent = class InviteUsersComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i5$2.AsyncPipe,
@@ -29109,9 +29258,9 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i10.UntypedFormBuilder },
 		{ type: i1$1.AdminService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i0.ChangeDetectorRef }
 	],
 	propDecorators: { refProduct: [{
@@ -29406,12 +29555,12 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 			ngImport: i0,
 			type: SubscriptionsListComponent,
 			deps: [
-				{ token: i2$2.ProductService },
+				{ token: i2$1.ProductService },
 				{ token: i1$1.AdminService },
 				{ token: i10.UntypedFormBuilder },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.CommonService },
+				{ token: i2$1.CommonService },
 				{ token: i6$2.ConfirmDialogService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -29442,7 +29591,7 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -29555,19 +29704,19 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -29601,7 +29750,7 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -29818,7 +29967,7 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -29899,17 +30048,17 @@ var SubscriptionsListComponent = class SubscriptionsListComponent extends AppBas
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.SinceAgoPipe,
+					type: i9$1.SinceAgoPipe,
 					name: "sinceAgo"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				},
 				{
@@ -29936,12 +30085,12 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.ProductService },
+		{ type: i2$1.ProductService },
 		{ type: i1$1.AdminService },
 		{ type: i10.UntypedFormBuilder },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.CommonService },
+		{ type: i2$1.CommonService },
 		{ type: i6$2.ConfirmDialogService }
 	],
 	propDecorators: {
@@ -30139,8 +30288,8 @@ var TagsCategoryComponent = class TagsCategoryComponent extends AppBaseComponent
 			type: TagsCategoryComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.TagService },
-				{ token: i2$2.CustomToastService },
+				{ token: i2$1.TagService },
+				{ token: i2$1.CustomToastService },
 				{ token: i3$2.NgbModal },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
@@ -30162,7 +30311,7 @@ var TagsCategoryComponent = class TagsCategoryComponent extends AppBaseComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -30275,19 +30424,19 @@ var TagsCategoryComponent = class TagsCategoryComponent extends AppBaseComponent
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -30394,7 +30543,7 @@ var TagsCategoryComponent = class TagsCategoryComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -30459,8 +30608,8 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.TagService },
-		{ type: i2$2.CustomToastService },
+		{ type: i2$1.TagService },
+		{ type: i2$1.CustomToastService },
 		{ type: i3$2.NgbModal },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
@@ -30585,7 +30734,7 @@ var TagDetailsComponent = class TagDetailsComponent extends AppBaseComponent {
 			type: TagDetailsComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.TagService },
+				{ token: i2$1.TagService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i3$2.NgbModal }
 			],
@@ -30605,7 +30754,7 @@ var TagDetailsComponent = class TagDetailsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -30729,7 +30878,7 @@ var TagDetailsComponent = class TagDetailsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i12.ProfileImageCropperComponent,
+					type: i12$1.ProfileImageCropperComponent,
 					selector: "pw-image-cropper",
 					inputs: ["aspectRatio", "dynamicData"],
 					outputs: [
@@ -30791,6 +30940,11 @@ var TagDetailsComponent = class TagDetailsComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -30817,7 +30971,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.TagService },
+		{ type: i2$1.TagService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i3$2.NgbModal }
 	]
@@ -30935,7 +31089,7 @@ var TagsListComponent = class TagsListComponent extends AppBaseComponent {
 			deps: [
 				{ token: i0.Injector },
 				{ token: i3$2.NgbModal },
-				{ token: i2$2.TagService },
+				{ token: i2$1.TagService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i6$2.ConfirmDialogService }
 			],
@@ -30956,7 +31110,7 @@ var TagsListComponent = class TagsListComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -31069,19 +31223,19 @@ var TagsListComponent = class TagsListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -31164,7 +31318,7 @@ var TagsListComponent = class TagsListComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -31254,7 +31408,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i3$2.NgbModal },
-		{ type: i2$2.TagService },
+		{ type: i2$1.TagService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i6$2.ConfirmDialogService }
 	]
@@ -31364,6 +31518,7 @@ var TipComponent = class TipComponent extends AppBaseComponent {
 	onSave() {
 		this.buttonBusy = true;
 		(this.id ? this.tipService.saveTips(this.id, this.form.value, this.subscriptionId) : this.tipService.addTips(this.form.value, this.subscriptionId)).subscribe(() => {
+			this.form.markAsPristine();
 			this.router.navigate(["../list"], { relativeTo: this.route });
 			this.toast.success(this.translation.translate("Admin.Tips.UpdatedMessage"));
 			this.cdr.markForCheck();
@@ -31382,7 +31537,7 @@ var TipComponent = class TipComponent extends AppBaseComponent {
 			ngImport: i0,
 			type: TipComponent,
 			deps: [
-				{ token: i2$2.TipsService },
+				{ token: i2$1.TipsService },
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -31451,7 +31606,7 @@ var TipComponent = class TipComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -31517,6 +31672,11 @@ var TipComponent = class TipComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i8$2.TranslocoPipe,
@@ -31542,7 +31702,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.TipsService },
+		{ type: i2$1.TipsService },
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef }
 	],
@@ -31583,7 +31743,7 @@ var TipsComponent = class TipsComponent extends AppBaseComponent {
 			ngImport: i0,
 			type: TipsComponent,
 			deps: [
-				{ token: i2$2.TipsService },
+				{ token: i2$1.TipsService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i0.Injector }
 			],
@@ -31603,7 +31763,7 @@ var TipsComponent = class TipsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -31716,7 +31876,7 @@ var TipsComponent = class TipsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -31750,7 +31910,7 @@ var TipsComponent = class TipsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -31815,7 +31975,7 @@ var TipsComponent = class TipsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -31836,7 +31996,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}],
 	ctorParameters: () => [
-		{ type: i2$2.TipsService },
+		{ type: i2$1.TipsService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i0.Injector }
 	]
@@ -31983,7 +32143,7 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -32096,19 +32256,19 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -32191,7 +32351,7 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -32251,12 +32411,12 @@ var TermsOfServiceComponent = class TermsOfServiceComponent extends AppBaseCompo
 				},
 				{
 					kind: "pipe",
-					type: i9.RemoveHtmlPipe,
+					type: i9$1.RemoveHtmlPipe,
 					name: "removeHtml"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -32285,15 +32445,12 @@ i0.ɵɵngDeclareClassMetadata({
 	]
 });
 var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extends AppBaseComponent {
-	constructor(adminService, injector, cdr, unsavedChanges) {
+	constructor(adminService, injector, cdr) {
 		super(injector);
 		this.adminService = adminService;
 		this.cdr = cdr;
-		this.unsavedChanges = unsavedChanges;
 		this.isLoading = true;
 		this.submitted = false;
-		this.saved = false;
-		this.unregisterUnsaved = null;
 		QuillHelper.init();
 		this.editorConfig = QuillHelper.getEditorConfig();
 		this.form = AppAdmin.getTosForm();
@@ -32305,10 +32462,6 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 			else this.isLoading = false;
 			this.cdr.markForCheck();
 		});
-		this.unregisterUnsaved = this.unsavedChanges.watch(() => this.hasUnsavedChanges());
-	}
-	hasUnsavedChanges() {
-		return this.form.dirty && !this.saved;
 	}
 	ngAfterViewInit() {
 		HelperService.subscribeToEditorChanges(this.form, "privacy");
@@ -32334,7 +32487,6 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 		(this.id ? this.adminService.updateTos(this.id, data) : this.adminService.postTos(data)).subscribe((response) => {
 			this.form.patchValue(response);
 			this.form.markAsPristine();
-			this.saved = true;
 			this.toast.success(this.translation.translate("Tos.UpdatedMessage"));
 			this.back();
 			this.cdr.markForCheck();
@@ -32357,10 +32509,6 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 			this.cdr.markForCheck();
 		});
 	}
-	ngOnDestroy() {
-		this.unregisterUnsaved?.();
-		super.ngOnDestroy();
-	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -32370,8 +32518,7 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 			deps: [
 				{ token: i1$1.AdminService },
 				{ token: i0.Injector },
-				{ token: i0.ChangeDetectorRef },
-				{ token: i2$1.UnsavedChangesService }
+				{ token: i0.ChangeDetectorRef }
 			],
 			target: i0.ɵɵFactoryTarget.Component
 		});
@@ -32494,7 +32641,7 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -32573,9 +32720,14 @@ var TermsOfServiceDetailsComponent = class TermsOfServiceDetailsComponent extend
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "component",
-					type: i11.QuillEditorComponent,
+					type: i12.QuillEditorComponent,
 					selector: "quill-editor"
 				},
 				{
@@ -32605,8 +32757,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
 		{ type: i0.Injector },
-		{ type: i0.ChangeDetectorRef },
-		{ type: i2$1.UnsavedChangesService }
+		{ type: i0.ChangeDetectorRef }
 	],
 	propDecorators: { onSave: [] }
 });
@@ -32824,7 +32975,7 @@ var AhoyEventsComponent = class AhoyEventsComponent extends AppBaseComponent {
 			deps: [
 				{ token: i0.Injector },
 				{ token: i3$2.NgbModal },
-				{ token: i2$2.AhoyService },
+				{ token: i2$1.AhoyService },
 				{ token: i1$1.AdminDataService },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -32851,7 +33002,7 @@ var AhoyEventsComponent = class AhoyEventsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -32964,25 +33115,25 @@ var AhoyEventsComponent = class AhoyEventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -33275,7 +33426,7 @@ var AhoyEventsComponent = class AhoyEventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -33340,7 +33491,7 @@ var AhoyEventsComponent = class AhoyEventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -33364,7 +33515,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i3$2.NgbModal },
-		{ type: i2$2.AhoyService },
+		{ type: i2$1.AhoyService },
 		{ type: i1$1.AdminDataService },
 		{ type: i0.ChangeDetectorRef }
 	],
@@ -33520,7 +33671,7 @@ var AhoyMessagesComponent = class AhoyMessagesComponent extends AppBaseComponent
 			type: AhoyMessagesComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.AhoyService },
+				{ token: i2$1.AhoyService },
 				{ token: i0.ChangeDetectorRef },
 				{ token: i1$1.AdminDataService }
 			],
@@ -33541,7 +33692,7 @@ var AhoyMessagesComponent = class AhoyMessagesComponent extends AppBaseComponent
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -33654,25 +33805,25 @@ var AhoyMessagesComponent = class AhoyMessagesComponent extends AppBaseComponent
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -33954,7 +34105,7 @@ var AhoyMessagesComponent = class AhoyMessagesComponent extends AppBaseComponent
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -34014,12 +34165,12 @@ var AhoyMessagesComponent = class AhoyMessagesComponent extends AppBaseComponent
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -34042,7 +34193,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.AhoyService },
+		{ type: i2$1.AhoyService },
 		{ type: i0.ChangeDetectorRef },
 		{ type: i1$1.AdminDataService }
 	]
@@ -34194,7 +34345,7 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 			type: AhoyVisitsComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.AhoyService },
+				{ token: i2$1.AhoyService },
 				{ token: i1$1.AdminDataService },
 				{ token: i0.ChangeDetectorRef }
 			],
@@ -34215,7 +34366,7 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -34328,19 +34479,19 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -34374,7 +34525,7 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -34656,7 +34807,7 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -34716,12 +34867,12 @@ var AhoyVisitsComponent = class AhoyVisitsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.TextTruncatePipe,
+					type: i9$1.TextTruncatePipe,
 					name: "textTruncate"
 				}
 			]
@@ -34744,7 +34895,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.AhoyService },
+		{ type: i2$1.AhoyService },
 		{ type: i1$1.AdminDataService },
 		{ type: i0.ChangeDetectorRef }
 	]
@@ -34898,7 +35049,7 @@ var EventsComponent = class EventsComponent extends AppBaseComponent {
 			deps: [
 				{ token: i0.Injector },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.AhoyService },
+				{ token: i2$1.AhoyService },
 				{ token: i1$1.AdminDataService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -34918,7 +35069,7 @@ var EventsComponent = class EventsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -35031,25 +35182,25 @@ var EventsComponent = class EventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -35331,7 +35482,7 @@ var EventsComponent = class EventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -35391,7 +35542,7 @@ var EventsComponent = class EventsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -35415,7 +35566,7 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => [
 		{ type: i0.Injector },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.AhoyService },
+		{ type: i2$1.AhoyService },
 		{ type: i1$1.AdminDataService }
 	]
 });
@@ -35659,7 +35810,7 @@ var VersionsComponent = class VersionsComponent extends AppBaseComponent {
 			type: VersionsComponent,
 			deps: [
 				{ token: i0.Injector },
-				{ token: i2$2.AhoyService },
+				{ token: i2$1.AhoyService },
 				{ token: i3$2.NgbModal },
 				{ token: i1$1.AdminDataService },
 				{ token: i0.ChangeDetectorRef }
@@ -35681,7 +35832,7 @@ var VersionsComponent = class VersionsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -35794,25 +35945,25 @@ var VersionsComponent = class VersionsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
 				{
 					kind: "component",
-					type: i2$3.Select,
+					type: i2$2.Select,
 					selector: "p-select",
 					inputs: [
 						"id",
@@ -36105,7 +36256,7 @@ var VersionsComponent = class VersionsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -36176,7 +36327,7 @@ var VersionsComponent = class VersionsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -36199,7 +36350,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [
 		{ type: i0.Injector },
-		{ type: i2$2.AhoyService },
+		{ type: i2$1.AhoyService },
 		{ type: i3$2.NgbModal },
 		{ type: i1$1.AdminDataService },
 		{ type: i0.ChangeDetectorRef }
@@ -36373,7 +36524,7 @@ var UserDetailsComponent = class UserDetailsComponent extends AppBaseComponent {
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -36486,7 +36637,7 @@ var UserDetailsComponent = class UserDetailsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
@@ -36574,7 +36725,7 @@ var UserDetailsComponent = class UserDetailsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -36670,6 +36821,11 @@ var UserDetailsComponent = class UserDetailsComponent extends AppBaseComponent {
 					],
 					outputs: ["ngModelChange"]
 				},
+				{
+					kind: "directive",
+					type: i9.TrackDirtyFormDirective,
+					selector: "[formGroup]:not([formGroupSkipDirty])"
+				},
 				{
 					kind: "pipe",
 					type: i5$2.CurrencyPipe,
@@ -36682,7 +36838,7 @@ var UserDetailsComponent = class UserDetailsComponent extends AppBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				}
 			]
@@ -36838,7 +36994,7 @@ var UserInsightComponent = class UserInsightComponent extends AppBaseComponent {
 				},
 				{
 					kind: "component",
-					type: i11$1.ProgressSpinner,
+					type: i11.ProgressSpinner,
 					selector: "p-progress-spinner, p-progressspinner",
 					inputs: [
 						"value",
@@ -37037,7 +37193,7 @@ var UsersListBaseComponent = class extends AppBaseComponent {
 		});
 	}
 	getUsers(paging) {
-		this.isLoaded = false;
+		this.loading = true;
 		const params = {
 			product_ids: this.filterByProducts.join() || "",
 			role_ids: this.filterByRoles.join() || "",
@@ -37047,18 +37203,22 @@ var UsersListBaseComponent = class extends AppBaseComponent {
 		if (this.filterByAlphaBeta.includes("alpha")) params.alpha = true;
 		if (this.filterByAlphaBeta.includes("beta")) params.beta = true;
 		if (this.showAmbassadorsOnly) params.is_ambassador = true;
-		this.adminService.getUsers(paging, params).subscribe((response) => {
+		this.adminService.getUsers(paging, params).pipe(finalize(() => {
+			this.loading = false;
+			this.isLoaded = true;
+			this.cdr.markForCheck();
+		})).subscribe((response) => {
 			this.users = response.users;
 			this.allUsers = [...this.users];
 			this.totalRecords = response.object_count;
 			this.totalRecordsUnFiltered = response?.unfiltered_count;
-			this.loading = false;
-			this.isLoaded = true;
-			this.cdr.markForCheck();
 		});
 	}
 };
 var UserListComponent = class UserListComponent extends UsersListBaseComponent {
+	get chatPermission() {
+		return PermissionService.productPermission("Chat");
+	}
 	constructor(adminService, toaster, productService, injector, authService, cdr, windowService, sidebarService) {
 		super(adminService, productService, injector, cdr, sidebarService);
 		this.toaster = toaster;
@@ -37068,7 +37228,6 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 	}
 	ngOnInit() {
 		this.subscriptionId = PermissionService.selectedSubscription?.id;
-		this.chatPermission = `${PermissionService.selectedProduct?.permission}.${PermissionService.selectedProduct?.feature_key}`;
 		this.getRoles();
 		this.getProducts();
 		this.userStore().subscribe((response) => {
@@ -37183,12 +37342,12 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 			type: UserListComponent,
 			deps: [
 				{ token: i1$1.AdminService },
-				{ token: i2$2.CustomToastService },
-				{ token: i2$2.ProductService },
+				{ token: i2$1.CustomToastService },
+				{ token: i2$1.ProductService },
 				{ token: i0.Injector },
-				{ token: i2$2.AuthService },
+				{ token: i2$1.AuthService },
 				{ token: i0.ChangeDetectorRef },
-				{ token: i2$2.WindowService },
+				{ token: i2$1.WindowService },
 				{ token: i6$2.CollapsibleSidebarService }
 			],
 			target: i0.ɵɵFactoryTarget.Component
@@ -37223,12 +37382,12 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 			],
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner> </p-progress-spinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"],
 			dependencies: [
 				{
 					kind: "component",
-					type: i2$4.Table,
+					type: i2$3.Table,
 					selector: "p-table",
 					inputs: [
 						"frozenColumns",
@@ -37341,19 +37500,19 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 				},
 				{
 					kind: "directive",
-					type: i2$4.SortableColumn,
+					type: i2$3.SortableColumn,
 					selector: "[pSortableColumn]",
 					inputs: ["pSortableColumn", "pSortableColumnDisabled"]
 				},
 				{
 					kind: "directive",
-					type: i2$4.ResizableColumn,
+					type: i2$3.ResizableColumn,
 					selector: "[pResizableColumn]",
 					inputs: ["pResizableColumnDisabled"]
 				},
 				{
 					kind: "component",
-					type: i2$4.SortIcon,
+					type: i2$3.SortIcon,
 					selector: "p-sort-icon, p-sorticon",
 					inputs: ["field"]
 				},
@@ -37496,6 +37655,19 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 					selector: "p-inputicon",
 					inputs: ["hostName"]
 				},
+				{
+					kind: "component",
+					type: i4$3.SkeletonTableComponent,
+					selector: "pw-skeleton-table",
+					inputs: [
+						"rows",
+						"columns",
+						"showHeader",
+						"showCaption",
+						"density",
+						"delay"
+					]
+				},
 				{
 					kind: "directive",
 					type: i5$2.NgClass,
@@ -37560,20 +37732,6 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 					inputs: ["confirmMessage", "destructive"],
 					outputs: ["successEvent"]
 				},
-				{
-					kind: "component",
-					type: i11$1.ProgressSpinner,
-					selector: "p-progress-spinner, p-progressspinner",
-					inputs: [
-						"value",
-						"strokeWidth",
-						"animationDuration",
-						"min",
-						"max",
-						"ariaLabel",
-						"fill"
-					]
-				},
 				{
 					kind: "component",
 					type: i6$2.OnlineIndicatorComponent,
@@ -37639,12 +37797,12 @@ var UserListComponent = class UserListComponent extends UsersListBaseComponent {
 				},
 				{
 					kind: "pipe",
-					type: i9.DateFormatPipe,
+					type: i9$1.DateFormatPipe,
 					name: "dateFormat"
 				},
 				{
 					kind: "pipe",
-					type: i9.IsOnlinePipe,
+					type: i9$1.IsOnlinePipe,
 					name: "isOnline"
 				}
 			]
@@ -37661,18 +37819,18 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "pw-admin-user-list",
 			standalone: false,
-			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n  @if (!isLoaded) {\n    <p-progress-spinner> </p-progress-spinner>\n  }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
+			template: "<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n    <h2 class=\"card-title p-0\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n    </a>\n  </div>\n</div>\n@if (!isLoaded) {\n  <div class=\"w-100 mt-0\">\n    <pw-skeleton-table [rows]=\"8\" [columns]=\"10\" [showCaption]=\"true\"></pw-skeleton-table>\n  </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.d-none]=\"!isLoaded\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      stateKey=\"pw-table.admin-users-list\"\n      stateStorage=\"session\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      (onStateRestore)=\"onTableStateRestore($event)\"\n      [customSort]=\"true\">\n      <ng-template #caption>\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event); dt.filter($event.value, 'filterSource', 'equals')\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiselect>\n          </div>\n          @if (selectedOption) {\n            <div class=\"col-4\"\n              >\n              <p-multiselect class=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n                [options]=\"searchDataSource\"\n                (onChange)=\"onSearchCriteria($event); dt.filter($event.value, 'criteria', 'equals')\"\n                [showToggleAll]=\"true\"\n                [(ngModel)]=\"criteria\"\n                [showHeader]=\"true\"\n                placeholder=\"Filter by {{ selectedOption.value }}s\"\n                maxSelectedLabels=\"2\"\n                appendTo=\"body\">\n              </p-multiselect>\n            </div>\n          }\n          <div class=\"col-auto d-flex align-items-center\">\n            <span class=\"ambassadors-only-toggle\"\n              [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n              tooltipPosition=\"top\" appendTo=\"body\">\n              <ui-switch\n                [checked]=\"showAmbassadorsOnly\"\n                (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle(); dt.filter($event, 'ambassadors', 'equals')\"\n                [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n              </ui-switch>\n            </span>\n          </div>\n          <div class=\"text-end\">\n            <label for=\"users-list-search\" class=\"visually-hidden\">Search User</label>\n            <p-iconfield iconPosition=\"left\">\n              <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n              <input type=\"text\"\n                id=\"users-list-search\"\n                name=\"users-list-search\"\n                [(ngModel)]=\"searchText\"\n                pInputText\n                placeholder=\"Search users...\"\n                data-cy=\"user-search\"\n                (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n                class=\"wd-90\"\n                aria-label=\"Search users...\" />\n            </p-iconfield>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #header>\n        <tr>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sort-icon field=\"id\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sort-icon field=\"first_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sort-icon field=\"last_name\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sort-icon field=\"email\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sort-icon field=\"slug\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sort-icon field=\"encrypted_password\"></p-sort-icon>\n          </th>\n\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sort-icon field=\"sessions_last_month\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sort-icon field=\"last_sign_in_at\"></p-sort-icon>\n          </th>\n          <th pResizableColumn scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sort-icon field=\"signed_up_at\"></p-sort-icon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template #body\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            @if (user?.alpha) {\n              <span\n                [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n              </span>\n            }\n            @if (user?.beta) {\n              <span class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n              </span>\n            }\n            @if (user?.cognito_sso_activated) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-cloud success\" ></i>\n              </span>\n            }\n            @if (user?.ambassador_count > 0) {\n              <span\n                class=\"ms-2\"\n                [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n                tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n            @if (user?.blocked) {\n              <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\" appendTo=\"body\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n            }\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            @if (user?.current_sign_in_at | isOnline) {\n              <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n            } @else if (user?.current_sign_in_at) {\n              <span>\n                {{ user.current_sign_in_at  | dateFormat }}\n              </span>\n            } @else {\n              {{ user.last_sign_in_at | dateFormat }}\n            }\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fas fa-people-arrows fa-lg\"\n                  (click)=\"onImpersonate(user)\"\n                  (keydown.enter)=\"onImpersonate(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n              @if (user?.enable_two_factor_authenticator) {\n                <li pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\n                  (click)=\"disable2fa(user?.id)\"\n                  (keydown.enter)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              @if (currentUser && user.id !== currentUser.id) {\n                <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                  class=\"fa fa-trash delete-icon\"\n                  (keydown.enter)=\"onDelete(user)\"\n                  (keydown.space)=\"onDelete(user)\"\n                  (click)=\"onDelete(user)\"\n                  aria-hidden=\"true\"\n                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\">\n        </pw-no-data>\n      </div>\n    }\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n</div>\n@if (!loading && totalRecordsUnFiltered === 0) {\n  <div>\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  [destructive]=\"true\"\n  (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n",
 			styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"]
 		}]
 	}],
 	ctorParameters: () => [
 		{ type: i1$1.AdminService },
-		{ type: i2$2.CustomToastService },
-		{ type: i2$2.ProductService },
+		{ type: i2$1.CustomToastService },
+		{ type: i2$1.ProductService },
 		{ type: i0.Injector },
-		{ type: i2$2.AuthService },
+		{ type: i2$1.AuthService },
 		{ type: i0.ChangeDetectorRef },
-		{ type: i2$2.WindowService },
+		{ type: i2$1.WindowService },
 		{ type: i6$2.CollapsibleSidebarService }
 	],
 	propDecorators: {
@@ -37712,7 +37870,7 @@ var UserTabComponent = class UserTabComponent {
 			version: "22.2.0",
 			ngImport: i0,
 			type: UserTabComponent,
-			deps: [{ token: i2$2.PermissionService }],
+			deps: [{ token: i2$1.PermissionService }],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
@@ -37750,7 +37908,7 @@ i0.ɵɵngDeclareClassMetadata({
 			styles: [".search-input input{width:100%}\n"]
 		}]
 	}],
-	ctorParameters: () => [{ type: i2$2.PermissionService }]
+	ctorParameters: () => [{ type: i2$1.PermissionService }]
 });
 const routes = [{
 	path: "",
@@ -37842,7 +38000,6 @@ const routes = [{
 				{
 					path: "add",
 					component: FeatureFlagDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Add Feature Flag",
 						permission: "Pages.Admin"
@@ -37851,7 +38008,6 @@ const routes = [{
 				{
 					path: ":id",
 					component: FeatureFlagDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Edit Feature Flag",
 						permission: "Pages.Admin"
@@ -37993,7 +38149,6 @@ const routes = [{
 				{
 					path: "add",
 					component: LoginNotificationDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Dashboard Notification Add",
 						permission: "Pages.Admin.LoginNotification || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager"
@@ -38002,7 +38157,6 @@ const routes = [{
 				{
 					path: ":id",
 					component: LoginNotificationDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Dashboard Notification Edit",
 						permission: "Pages.Admin.LoginNotification || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager"
@@ -38472,7 +38626,6 @@ const routes = [{
 				{
 					path: "add",
 					component: TermsOfServiceDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Tos",
 						permission: "Pages.Admin.Tos"
@@ -38481,7 +38634,6 @@ const routes = [{
 				{
 					path: ":id",
 					component: TermsOfServiceDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Tos",
 						permission: "Pages.Admin.Tos"
@@ -38598,7 +38750,6 @@ const routes = [{
 				{
 					path: "add",
 					component: OauthClientsDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Add MCP OAuth Client",
 						permission: "Pages.Admin"
@@ -38607,7 +38758,6 @@ const routes = [{
 				{
 					path: "edit/:id",
 					component: OauthClientsDetailsComponent,
-					canDeactivate: [unsavedChangesGuard],
 					data: {
 						title: "Edit MCP OAuth Client",
 						permission: "Pages.Admin"
@@ -38909,10 +39059,11 @@ var AdminModule = class AdminModule {
 				NgbModalModule,
 				FormsModule,
 				ReactiveFormsModule,
+				TrackDirtyFormDirective,
 				NgxPaginationModule,
 				NgbNavModule,
 				NgbDatepickerModule,
-				i11.QuillModule
+				i12.QuillModule
 			]
 		});
 	}
@@ -39114,6 +39265,7 @@ i0.ɵɵngDeclareClassMetadata({
 				NgbModalModule,
 				FormsModule,
 				ReactiveFormsModule,
+				TrackDirtyFormDirective,
 				NgxPaginationModule,
 				NgbNavModule,
 				NgbDatepickerModule,
@@ -39172,10 +39324,10 @@ var AdminGuardService = class AdminGuardService {
 			ngImport: i0,
 			type: AdminGuardService,
 			deps: [
-				{ token: i2$2.UserService },
+				{ token: i2$1.UserService },
 				{ token: i7$2.Router },
-				{ token: i2$2.FeatureFlagService },
-				{ token: i2$2.PermissionService }
+				{ token: i2$1.FeatureFlagService },
+				{ token: i2$1.PermissionService }
 			],
 			target: i0.ɵɵFactoryTarget.Injectable
 		});
@@ -39196,10 +39348,10 @@ i0.ɵɵngDeclareClassMetadata({
 	type: AdminGuardService,
 	decorators: [{ type: Injectable }],
 	ctorParameters: () => [
-		{ type: i2$2.UserService },
+		{ type: i2$1.UserService },
 		{ type: i7$2.Router },
-		{ type: i2$2.FeatureFlagService },
-		{ type: i2$2.PermissionService }
+		{ type: i2$1.FeatureFlagService },
+		{ type: i2$1.PermissionService }
 	]
 });
 export { AddEditFaqComponent, AdminGuardService, AdminModule, AdminRoutingModule, AgentDetailsComponent, AhoyEventsComponent, AhoyMessagesComponent, AhoyVisitsComponent, ContactUsListComponent, ContactUsTabsComponent, CredentialsComponent, CredentialsDetailsComponent, CredentialsTabComponent, DomainConfigBuildComponent, DomainConfigCoreComponent, DomainConfigDetailsComponent, DomainConfigIntegrationsComponent, DomainConfigInterfaceComponent, DomainConfigListComponent, DomainConfigOrganizationComponent, DomainConfigSecurityComponent, DomainConfigSocialComponent, DomainConfigTabsComponent, EventsComponent, FaqListComponent, FaqTabsComponent, FeedbackQuestionsDetailsComponent, FeedbackQuestionsListComponent, GeneralTabsComponent, GenericInsightComponent, GenericMiscComponent, GlobalConfigDetailsComponent, GlobalConfigListComponent, GlobalConfigTabsComponent, InsightComponent, LoginNotificationDetailsComponent, LoginNotificationTabsComponent, LoginNotificationsListComponent, NewsletterComponent, NewsletterDetailsComponent, NewsletterInsightComponent, NewsletterItemDetailsComponent, NewsletterUsersListComponent, NewslettersItemsComponent, NewslettersListComponent, PermissionsDetailsComponent, PermissionsListComponent, PermissionsTabsComponent, ProductDetailsComponent, ProductInsightComponent, ProductsListComponent, ProductsTabComponent, ROUTERS, RoleDetailsComponent, RolesListComponent, SubscriptionAgentsListComponent, SubscriptionComponent, SubscriptionCredentialsComponent, SubscriptionCredentialsDetailsComponent, SubscriptionDetailsComponent, SubscriptionInsightNpsComponent, SubscriptionInsightRevenueComponent, SubscriptionInsightTabsComponent, SubscriptionProductDetailsComponent, SubscriptionProductsComponent, SubscriptionUsersComponent, SubscriptionsListComponent, TagsCategoryComponent, TagsListComponent, TagsTabsComponent, TermsOfServiceComponent, TermsOfServiceDetailsComponent, TermsOfServiceTabsComponent, TipComponent, TipsComponent, TipsTabsComponent, TrackingComponent, UserDetailsComponent, UserInsightComponent, UserListComponent, UserTabComponent, UsersListForProductComponent, VersionsComponent };