npm - @posiwise/admin-module - Versions diffs - 0.0.117 → 0.0.118 - Mend

@posiwise/admin-module 0.0.117 → 0.0.118

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

Files changed (22) hide show

package/fesm2022/posiwise-admin-module.mjs CHANGED Viewed

@@ -983,12 +983,11 @@ class DomainConfigBuildComponent extends AppBaseComponent {
         };
         data.cs_product_id = this.form.get('cs_product_id').value?.id || null;
         data.trial_product_id = this.form.get('trial_product_id').value?.id || null;
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
-        filteredData['cs_cta_iframe'] = this.form.value?.cs_cta_iframe || '';
-        filteredData['trial_cta_iframe'] = this.form.value?.trial_cta_iframe || '';
+        data['cs_cta_iframe'] = this.form.value?.cs_cta_iframe || '';
+        data['trial_cta_iframe'] = this.form.value?.trial_cta_iframe || '';
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: () => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1059,10 +1058,9 @@ class DomainConfigCoreComponent extends AppBaseComponent {
         if (!this.id) {
             data.master_subscription_id = this.appConfig?.master_subscription?.subscription_id;
         }
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: res => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1078,7 +1076,7 @@ class DomainConfigCoreComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigCoreComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigCoreComponent, selector: "pw-domain-config-core", usesInheritance: true, ngImport: i0, template: "<h3>Core Config</h3>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\" *ngIf=\"!isLoading\">\n  <div class=\"row\">\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n        name=\"host_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"host_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n        name=\"internal_path\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"internal_path\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n        name=\"shard_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n        name=\"shard_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\"\n        name=\"company_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\"\n        name=\"company_email\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_email\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\"\n        name=\"company_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"col-12 text-end mt-3\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default me-2\"\n      (click)=\"back()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigCoreComponent, selector: "pw-domain-config-core", usesInheritance: true, ngImport: i0, template: "<h3>Core Config</h3>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\" *ngIf=\"!isLoading\">\n  <div class=\"row\">\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n        name=\"host_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"host_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n        name=\"internal_path\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"internal_path\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n        name=\"shard_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n        name=\"shard_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" />\n      </pw-input-container>\n    </div>\n\n\n\n\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n        name=\"intraservices_token\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"intraservices_token\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n        name=\"webhook_token\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"webhook_token\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\"\n        name=\"frontend_repo_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"frontend_repo_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.Description' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\"\n        name=\"description\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"description\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" />\n      </pw-input-container>\n    </div>\n\n\n\n\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\"\n        name=\"company_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\"\n        name=\"company_email\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_email\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\"\n        name=\"company_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n      </pw-input-container>\n    </div>\n\n  </div>\n  <div class=\"col-12 text-end mt-3\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default me-2\"\n      (click)=\"back()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -1088,7 +1086,7 @@ __decorate([
 ], DomainConfigCoreComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigCoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-core', template: "<h3>Core Config</h3>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\" *ngIf=\"!isLoading\">\n  <div class=\"row\">\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n        name=\"host_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"host_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n        name=\"internal_path\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"internal_path\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n        name=\"shard_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n        name=\"shard_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\"\n        name=\"company_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\"\n        name=\"company_email\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_email\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\"\n        name=\"company_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"col-12 text-end mt-3\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default me-2\"\n      (click)=\"back()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'pw-domain-config-core', template: "<h3>Core Config</h3>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\" *ngIf=\"!isLoading\">\n  <div class=\"row\">\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.HostName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.HostName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.HostName' | transloco\"\n        name=\"host_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"host_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['host_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.InternalPath' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.InternalPath' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.InternalPath' | transloco\"\n        name=\"internal_path\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"internal_path\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['internal_path'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardName' | transloco\"\n        name=\"shard_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.ShardUrl' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.ShardUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.ShardUrl' | transloco\"\n        name=\"shard_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"shard_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['shard_url'].errors }\" />\n      </pw-input-container>\n    </div>\n\n\n\n\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.IntraServicesToken' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.IntraServicesToken'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.IntraServicesToken' | transloco\"\n        name=\"intraservices_token\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"intraservices_token\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['intraservices_token'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.WebhookToken' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.WebhookToken'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.WebhookToken' | transloco\"\n        name=\"webhook_token\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"webhook_token\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['webhook_token'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.FrontendRepoName' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.FrontendRepoName'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.FrontendRepoName' | transloco\"\n        name=\"frontend_repo_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"frontend_repo_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['frontend_repo_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [showTooltip]=\"true\"\n        [label]=\"'Admin.DomainConfig.Description' | transloco\"\n        [tooltipText]=\"'Admin.DomainConfig.Tooltip.Description'| transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.Description' | transloco\"\n        name=\"description\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"description\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors }\" />\n      </pw-input-container>\n    </div>\n\n\n\n\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyName' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyName' | transloco\"\n        name=\"company_name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_name\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_name'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyEmail' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyEmail' | transloco\"\n        name=\"company_email\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_email\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_email'].errors }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"col-12 col-sm-3\">\n      <pw-input-container [label]=\"'Admin.DomainConfig.CompanyUrl' | transloco\"\n        [errorMsg]=\"'Admin.DomainConfig.Validation.CompanyUrl' | transloco\"\n        name=\"company_url\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"company_url\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['company_url'].errors }\" />\n      </pw-input-container>\n    </div>\n\n  </div>\n  <div class=\"col-12 text-end mt-3\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default me-2\"\n      (click)=\"back()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n      class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
 class DomainConfigOrganizationComponent extends AppBaseComponent {
@@ -1131,10 +1129,9 @@ class DomainConfigOrganizationComponent extends AppBaseComponent {
             ...this.form.value,
             subscription_id: this.subscriptionId
         };
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: res => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1203,10 +1200,9 @@ class DomainConfigSecurityComponent extends AppBaseComponent {
             ...this.form.value,
             subscription_id: this.subscriptionId
         };
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: res => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1275,10 +1271,9 @@ class DomainConfigSocialComponent extends AppBaseComponent {
             ...this.form.value,
             subscription_id: this.subscriptionId
         };
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: res => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1347,10 +1342,9 @@ class DomainConfigIntegrationsComponent extends AppBaseComponent {
             ...this.form.value,
             subscription_id: this.subscriptionId
         };
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([_, v]) => v !== null && v !== ''));
         const sub$ = this.id
-            ? this.adminService.updateDomainConfig(this.id, filteredData)
-            : this.adminService.createDomainConfig(filteredData);
+            ? this.adminService.updateDomainConfig(this.id, data)
+            : this.adminService.createDomainConfig(data);
         sub$.subscribe({
             next: res => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
@@ -1543,6 +1537,8 @@ class DomainConfigListComponent extends AppBaseComponent {
         this.searchText = '';
         this.loading = true;
         this.isLoaded = true;
+        this.shardNames = [];
+        this.frontendRepoNames = [];
         this.page = 1;
         this.routers = ROUTERS;
     }
@@ -1568,6 +1564,12 @@ class DomainConfigListComponent extends AppBaseComponent {
         this.adminService
             .getAllDomainConfig(paging, this.subscriptionId)
             .subscribe((response) => {
+            this.shardNames = response?.domains?.map(domain => {
+                return domain?.shard_name;
+            });
+            this.frontendRepoNames = response?.domains?.map(domain => {
+                return domain?.frontend_repo_name;
+            });
             this.data = response;
         })
             .add(() => {
@@ -1593,11 +1595,11 @@ class DomainConfigListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigListComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigListComponent, selector: "pw-domain-config-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n    <h2 class=\"card-title p-0 float-start\">Domain Configs</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Domain Config\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search\"\n          [(ngModel)]=\"searchText\"\n          (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sortIcon field=\"host_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sortIcon field=\"internal_path\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sortIcon field=\"shard_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sortIcon field=\"shard_url\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sortIcon field=\"company_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_email\">\n          {{ 'Admin.DomainConfig.CompanyUrl' | transloco }}\n          <p-sortIcon field=\"company_email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sortIcon field=\"social_login_enabled\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">{{ item?.host_name }}</td>\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\">{{ item?.shard_name }}</td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"company_email\">{{ item?.company_email }}</td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"onDelete(item?.id)\">\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<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">Total: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigListComponent, selector: "pw-domain-config-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n    <h2 class=\"card-title p-0 float-start\">Domain Configs</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Domain Config\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search\"\n          [(ngModel)]=\"searchText\"\n          (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sortIcon field=\"host_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sortIcon field=\"internal_path\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sortIcon field=\"shard_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sortIcon field=\"shard_url\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sortIcon field=\"company_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        pSortableColumn=\"frontend_repo\">\n        {{ 'Admin.DomainConfig.Frontend' | transloco }}\n        <p-sortIcon field=\"frontend_repo\"></p-sortIcon>\n      </th>\n        <th scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sortIcon field=\"social_login_enabled\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            <i class=\"fas fa-info-circle info-icon ms-2\" *ngIf=\"item?.description\"\n               [ngbTooltip]=\"item?.description\"></i>\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n         <td data-head=\"shard_name\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n            class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: frontendRepoNames,\n                            item: item?.frontend_repo_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n        </td>\n        <td data-head=\"active\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"onDelete(item?.id)\">\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<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">Total: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n    <h2 class=\"card-title p-0 float-start\">Domain Configs</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Domain Config\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search\"\n          [(ngModel)]=\"searchText\"\n          (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sortIcon field=\"host_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sortIcon field=\"internal_path\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sortIcon field=\"shard_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sortIcon field=\"shard_url\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sortIcon field=\"company_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_email\">\n          {{ 'Admin.DomainConfig.CompanyUrl' | transloco }}\n          <p-sortIcon field=\"company_email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sortIcon field=\"social_login_enabled\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">{{ item?.host_name }}</td>\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n        <td data-head=\"shard_name\">{{ item?.shard_name }}</td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"company_email\">{{ item?.company_email }}</td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"onDelete(item?.id)\">\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<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">Total: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-domain-config-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n    <h2 class=\"card-title p-0 float-start\">Domain Configs</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.domainConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Domain Config\n    </button>\n  </div>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.domains\"\n    [paginator]=\"data.object_count !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <!--sort order should be default empty when page load-->\n\n    <!-- Caption Header, Search Bar -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search\"\n          [(ngModel)]=\"searchText\"\n          (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"host_name\">\n          {{ 'Admin.DomainConfig.HostName' | transloco }}\n          <p-sortIcon field=\"host_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"internal_path\">\n          {{ 'Admin.DomainConfig.InternalPath' | transloco }}\n          <p-sortIcon field=\"internal_path\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_name\">\n          {{ 'Admin.DomainConfig.ShardName' | transloco }}\n          <p-sortIcon field=\"shard_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"shard_url\">\n          {{ 'Admin.DomainConfig.ShardUrl' | transloco }}\n          <p-sortIcon field=\"shard_url\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"company_name\">\n          {{ 'Admin.DomainConfig.CompanyName' | transloco }}\n          <p-sortIcon field=\"company_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n        pSortableColumn=\"frontend_repo\">\n        {{ 'Admin.DomainConfig.Frontend' | transloco }}\n        <p-sortIcon field=\"frontend_repo\"></p-sortIcon>\n      </th>\n        <th scope=\"true\" pSortableColumn=\"active\">\n          {{ 'Admin.DomainConfig.Active' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"social_login_enabled\">\n          {{ 'Admin.DomainConfig.SocialLoginEnabled' | transloco }}\n          <p-sortIcon field=\"social_login_enabled\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"host_name\">\n          <div class=\"d-flex align-items-center\">\n            <a [href]=\"'http://' + item?.host_name\" target=\"_blank\" class=\"text-nowrap\">\n              {{ item?.host_name }}\n            </a>\n            <i class=\"fas fa-info-circle info-icon ms-2\" *ngIf=\"item?.description\"\n               [ngbTooltip]=\"item?.description\"></i>\n          </div>\n        </td>\n\n\n\n        <td data-head=\"internal_path\">{{ item?.internal_path }}</td>\n         <td data-head=\"shard_name\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: shardNames,\n                            item: item?.shard_name\n                        }\"\n            color=\"blue-grey\"\n            class=\"badge\">{{ item?.shard_name }}</span>\n        </td>\n        <td data-head=\"shard_url\">{{ item?.shard_url }}</td>\n        <td data-head=\"company_name\">{{ item?.company_name }}</td>\n        <td data-head=\"frontend_repo\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: frontendRepoNames,\n                            item: item?.frontend_repo_name\n                        }\"\n            color=\"cyan\"\n            class=\"badge\">{{ item?.frontend_repo_name }}</span>\n        </td>\n        <td data-head=\"active\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.active\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"social_login_enabled\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: item?.social_login_enabled\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.social_login_enabled ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.domainConfigDetails + item?.id]\"\n              class=\"me-2 me-sm-3\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"onDelete(item?.id)\">\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<div *ngIf=\"data.object_count === 0 && data.unfiltered_count !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n</div>\n  <span class=\"total-records-count\"  *ngIf=\"data.object_count !== 0\">Total: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }] });
 class DomainConfigTabsComponent {
@@ -1701,7 +1703,7 @@ class FaqListComponent extends AppBaseComponent {
             this.categoryForBadges = response.available_category.map(x => x.key);
             categories.forEach(element => {
                 this.categories.push({
-                    label: element.name,
+                    label: element.name || '',
                     value: element.key
                 });
             });
@@ -1740,7 +1742,7 @@ class FaqListComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element
+                        label: element || ''
                     };
                 });
             }
@@ -3474,7 +3476,7 @@ class ProductDetailsComponent extends AppBaseComponent {
                 this.productsList = resp.products.map(element => {
                     return {
                         value: element.id,
-                        label: element.name
+                        label: element.name || ''
                     };
                 });
             }
@@ -3515,7 +3517,7 @@ class ProductDetailsComponent extends AppBaseComponent {
             if (response && response.categories) {
                 response.categories.forEach(element => {
                     const item = {
-                        label: element,
+                        label: element || '',
                         value: element
                     };
                     this.categories.push(item);
@@ -3802,7 +3804,7 @@ class ProductsListComponent extends AppBaseComponent {
                 this.featureKeysList = response.products.map(element => {
                     return {
                         value: element.feature_key,
-                        label: element.feature_key
+                        label: element.feature_key || ''
                     };
                 });
                 this.featureKeysList = uniqBy(this.featureKeysList, 'label');
@@ -4979,7 +4981,7 @@ class SubscriptionsListComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element
+                    label: element || ''
                 };
             });
         });
@@ -5079,11 +5081,11 @@ class SubscriptionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionsListComponent, deps: [{ token: i1.AdminService }, { token: i3.UntypedFormBuilder }, { token: i1$1.ProductService }, { token: i1$1.CommonService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionsListComponent, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a new user\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <select class=\"form-select\"\n              (change)=\"filterByStatus($event)\">\n              <option [value]=\"\">Select status</option>\n              <option *ngFor=\"let option of subscriptionStatus\"\n                [value]=\"option\"\n                [selected]=\"option === status\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                (click)=\"onDelete(item)\">\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    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}\n"], dependencies: [{ kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionsListComponent, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a new user\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <select class=\"form-select\"\n              (change)=\"filterByStatus($event)\">\n              <option [value]=\"\">Select status</option>\n              <option *ngFor=\"let option of subscriptionStatus\"\n                [value]=\"option\"\n                [selected]=\"option === status\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                (click)=\"onDelete(item)\">\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    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}\n"], dependencies: [{ kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscriptions-list', template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a new user\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <select class=\"form-select\"\n              (change)=\"filterByStatus($event)\">\n              <option [value]=\"\">Select status</option>\n              <option *ngFor=\"let option of subscriptionStatus\"\n                [value]=\"option\"\n                [selected]=\"option === status\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                (click)=\"onDelete(item)\">\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    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}\n"] }]
+            args: [{ selector: 'pw-subscriptions-list', template: "<div class=\"row\">\n  <div\n    class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      [routerLink]=\"[routers.inviteUsers]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a new user\n    </a>\n  </div>\n</div>\n<div class=\"p-2 mt-3\">\n  <div class=\"w-100 text-center mt-3\">\n    <ng-template [ngIf]=\"!isLoaded\">\n      <p-progressSpinner> </p-progressSpinner>\n    </ng-template>\n  </div>\n  <div class=\"primeng-datatable-container table-responsive mt-0\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"subscriptions\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <ng-container *ngIf=\"subscriptionInsights\">\n          <div class=\"row mb-4\">\n            <ng-container *ngFor=\"let temp of objectKeys(subscriptionInsights)\">\n              <div class=\"col-12 col-lg-3 mt-2 summary\">\n                <div class=\"card\">\n                  <div class=\"card-body\">\n                    <ng-container *ngFor=\"let item of subscriptionInsights[temp]\">\n                      <div>\n                        <p class=\"mb-0 px-2\">{{ item?.title }}\n                          <span *ngIf=\"item?.info\"\n                            [pTooltip]=\"item?.info\">\n                            <i class=\"fas fa-info-circle\"></i>\n                          </span>\n                        </p>\n                        <h4 class=\"fw-bold mt-2 mb-2\">\n                          {{ item?.value }}\n                        </h4>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n        <div class=\"search-filter\">\n          <div class=\"col-12 col-sm-4\">\n            <p-multiSelect placeholder=\"Select Feature Keys\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              [(ngModel)]=\"selectedFeatureKeys\"\n              [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-12 col-sm-4\">\n            <select class=\"form-select\"\n              (change)=\"filterByStatus($event)\">\n              <option [value]=\"\">Select status</option>\n              <option *ngFor=\"let option of subscriptionStatus\"\n                [value]=\"option\"\n                [selected]=\"option === status\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2 d-none\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"30\"\n              placeholder=\"Search Subscription...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Subscriptions.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"organisation\">\n            {{ 'Admin.Subscriptions.Organization' | transloco }}\n            <p-sortIcon field=\"organisation\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_name\">\n            {{ 'Admin.Subscriptions.ContactName' | transloco }}\n            <p-sortIcon field=\"contact_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"contact_email\">\n            {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n            <p-sortIcon field=\"contact_email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n          <th scope=\"true\"\n            pSortableColumn=\"stripe_customer_id\">\n            {{ 'Admin.Subscriptions.Paid' | transloco }}\n            <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"expires-at-width\">\n            {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_total\">\n            {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n            <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"sessions_last_month\">\n            {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n            <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"deleted_at\">\n            {{ 'Admin.Subscriptions.Deleted' | transloco }}\n            <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n          </th>\n          <th class=\"actions-list-two\"\n            scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr>\n          <td data-head=\"id\">{{ item.id }}</td>\n          <td data-head=\"Organization\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.organisation\"\n              tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n          </td>\n          <td data-head=\"ContactName\"\n            class=\"custom-break-word\">\n            {{ item.contact_name }}\n          </td>\n          <td data-head=\"ContactEmail\">{{ item.contact_email }}</td>\n          <td data-head=\"Name\">\n            <span class=\"cursor-pointer custom-break-word\"\n              [pTooltip]=\"item.productName\"\n              tooltipPosition=\"top\">{{ item.productName }}</span>\n          </td>\n          <td data-head=\"Currency\">\n            <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n              color=\"blue-grey\"\n              class=\"badge\">{{ item.currency }}</span>\n          </td>\n          <td data-head=\"Price/M\">\n            <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n              <i\n                              class=\"fa fa-info-circle\"\n                              *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                              aria-hidden=\"true\"\n                              [pTooltip]=\"item?.discount | json\"\n                              tooltipPosition=\"top\"\n                          ></i>\n            </span>\n          </td>\n          <td data-head=\"Paid\">\n            <ng-container *ngIf=\"item?.unsubscribed_at\">\n              <span class=\"badge bg-warning\">Unsub</span>\n            </ng-container>\n            <ng-container *ngIf=\"!item?.unsubscribed_at\">\n              <ng-template [ngIf]=\"item?.stripe_customer_id || item?.external_payment\"\n                [ngIfElse]=\"noBlock\">\n                <span class=\"badge bg-success\">Yes</span>\n              </ng-template>\n              <ng-template #noBlock>\n                <span class=\"badge bg-blue-grey\">No</span>\n              </ng-template>\n            </ng-container>\n            <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n              class=\"ms-2\"\n              [pTooltip]=\"item?.pause_collection | json\"\n              tooltipPosition=\"top\">\n              <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n            </span>\n          </td>\n          <td data-head=\"Billing\">\n            <span class=\"badge\"\n              [appDynamicBadge]=\"{\n                              itemsArray: billingFrequency,\n                              item: item?.billingFrequency\n                          }\"\n              color=\"blue-grey\">{{ item.billingFrequency }}</span>\n          </td>\n          <td data-head=\"Expires\">\n            <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span><br />\n            <span>{{item?.created_at | sinceAgo}}</span>\n          </td>\n          <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': item?.sessions_last_month < 3\n                          }\">{{ item?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Deleted\">\n            <span *ngIf=\"item?.deleted_at\"\n              class=\"badge bg-danger\">Yes</span>\n            <span *ngIf=\"!item?.deleted_at\"\n              class=\"badge bg-blue-grey\">No</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\"\n                *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n                (click)=\"onDelete(item)\">\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    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n      </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n</pw-no-data>\n", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary .card{padding-bottom:0}.summary .card .card-body{padding-top:20px;text-align:center}.summary .card .card-body p,.summary .card .card-body h4{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i3.UntypedFormBuilder }, { type: i1$1.ProductService }, { type: i1$1.CommonService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']
@@ -5317,7 +5319,7 @@ class TagsListComponent extends AppBaseComponent {
         this.tagService.getAvailableTagType(this.subscriptionId).subscribe(response => {
             response.available_tag_types.forEach(element => {
                 this.tagTypes.push({
-                    label: element,
+                    label: element || '',
                     value: element
                 });
             });
@@ -6716,13 +6718,13 @@ class UserListComponent extends AppBaseComponent {
                 this.productList = resp.products.map(element => {
                     return {
                         value: element.id,
-                        label: element.name
+                        label: element.name || ''
                     };
                 });
                 this.featureKeysList = resp.products.map(element => {
                     return {
                         value: element.feature_key,
-                        label: element.feature_key
+                        label: element.feature_key || ''
                     };
                 });
                 this.productList.unshift({
@@ -7230,7 +7232,7 @@ class AddFaqComponent extends AppBaseComponent {
             });
             this.categoryForBadges = response.available_category.map(x => x.key);
             this.categories = response.available_category.map(element => {
-                return { label: element.name, value: element.key };
+                return { label: element.name || '', value: element.key };
             });
             this.allFaqs = this.faqs;
             this.faqList = this.faqs;
@@ -7269,7 +7271,7 @@ class AddFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element
+                        label: element || ''
                     };
                 });
             }
@@ -7473,7 +7475,7 @@ class InviteUsersComponent extends AppBaseComponent {
             this.searchOptions = featureKeys.map(element => {
                 return {
                     id: element,
-                    label: element
+                    label: element || ''
                 };
             });
         });
@@ -7557,11 +7559,11 @@ class InviteUsersComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InviteUsersComponent, deps: [{ token: i1.AdminService }, { token: i3.UntypedFormBuilder }, { token: i1$1.ProductService }, { token: i1$1.CommonService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InviteUsersComponent, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"\">Invite New User</h3>\n          <p>Here you can send an invitation to a new user to try any of our products</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\">\n  <div class=\"row\">\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"first_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"first_name\"\n          [ngClass]=\"{\n                        'is-invalid':\n                            form.get('first_name').touched && form.get('first_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.LastName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"last_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"last_name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Email' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"email\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"email\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('email').touched && form.get('email').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Product' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n        name=\"product_id\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n        <p-autoComplete #refProduct\n        [suggestions]=\"filteredProducts\"\n          formControlName=\"product_id\"\n          dataKey=\"id\"\n          field=\"label\"\n          [dropdown]=\"true\"\n          [delay]=\"1000\"\n          [type]=\"'search'\"\n          (completeMethod)=\"searchProduct($event)\"\n          (onSelect)=\"onProductChange($event)\"\n          (onClear)=\"onProductClear($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Product\"\n          [inputStyle]=\"\n                        form.get('product_id').touched && form.get('product_id').invalid\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n        <input type=\"number\"\n          class=\"form-control\"\n          formControlName=\"units\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('units').touched && form.get('units').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n        [showTooltip]=\"true\"\n        name=\"min_units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n        <input type=\"number\"\n          min=\"0\"\n          [max]=\"form.get('units').value\"\n          class=\"form-control\"\n          formControlName=\"min_units\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationIndustries$ | async as industries\">\n      <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n        name=\"organization_industry_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n        <select formControlName=\"organization_industry_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of industries['organization_industries']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('name').touched && form.get('name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationTypes$ | async as types\">\n      <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n        name=\"organization_type_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n        <select formControlName=\"organization_type_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of types['organization_types']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationSizes$ | async as sizes\">\n      <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n        name=\"organization_size_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n        <select formControlName=\"organization_size_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of sizes['organization_sizes']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 text-end\">\n      <input type=\"button\"\n        class=\"btn btn-outline-primary me-3\"\n        value=\"Cancel\"\n        (click)=\"form.reset(); totalRecordsUnFiltered = 0\" />\n      <button type=\"submit\"\n        [buttonBusy]=\"buttonBusy\"\n        [disabled]=\"buttonBusy\"\n        class=\"btn btn-primary\">Invite</button>\n    </div>\n  </div>\n</form>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: InviteUsersComponent, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"\">Invite New User</h3>\n          <p>Here you can send an invitation to a new user to try any of our products</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\">\n  <div class=\"row\">\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"first_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"first_name\"\n          [ngClass]=\"{\n                        'is-invalid':\n                            form.get('first_name').touched && form.get('first_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.LastName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"last_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"last_name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Email' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"email\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"email\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('email').touched && form.get('email').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Product' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n        name=\"product_id\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n        <p-autoComplete #refProduct\n        [suggestions]=\"filteredProducts\"\n          formControlName=\"product_id\"\n          dataKey=\"id\"\n          field=\"label\"\n          [dropdown]=\"true\"\n          [delay]=\"1000\"\n          [type]=\"'search'\"\n          (completeMethod)=\"searchProduct($event)\"\n          (onSelect)=\"onProductChange($event)\"\n          (onClear)=\"onProductClear($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Product\"\n          [inputStyle]=\"\n                        form.get('product_id').touched && form.get('product_id').invalid\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n        <input type=\"number\"\n          class=\"form-control\"\n          formControlName=\"units\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('units').touched && form.get('units').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n        [showTooltip]=\"true\"\n        name=\"min_units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n        <input type=\"number\"\n          min=\"0\"\n          [max]=\"form.get('units').value\"\n          class=\"form-control\"\n          formControlName=\"min_units\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationIndustries$ | async as industries\">\n      <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n        name=\"organization_industry_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n        <select formControlName=\"organization_industry_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of industries['organization_industries']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('name').touched && form.get('name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationTypes$ | async as types\">\n      <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n        name=\"organization_type_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n        <select formControlName=\"organization_type_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of types['organization_types']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationSizes$ | async as sizes\">\n      <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n        name=\"organization_size_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n        <select formControlName=\"organization_size_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of sizes['organization_sizes']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 text-end\">\n      <input type=\"button\"\n        class=\"btn btn-outline-primary me-3\"\n        value=\"Cancel\"\n        (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\" />\n      <button type=\"submit\"\n        [buttonBusy]=\"buttonBusy\"\n        [disabled]=\"buttonBusy\"\n        class=\"btn btn-primary\">Invite</button>\n    </div>\n  </div>\n</form>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: InviteUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-invite-users', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"\">Invite New User</h3>\n          <p>Here you can send an invitation to a new user to try any of our products</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\">\n  <div class=\"row\">\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"first_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"first_name\"\n          [ngClass]=\"{\n                        'is-invalid':\n                            form.get('first_name').touched && form.get('first_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.LastName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"last_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"last_name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Email' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"email\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"email\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('email').touched && form.get('email').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Product' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n        name=\"product_id\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n        <p-autoComplete #refProduct\n        [suggestions]=\"filteredProducts\"\n          formControlName=\"product_id\"\n          dataKey=\"id\"\n          field=\"label\"\n          [dropdown]=\"true\"\n          [delay]=\"1000\"\n          [type]=\"'search'\"\n          (completeMethod)=\"searchProduct($event)\"\n          (onSelect)=\"onProductChange($event)\"\n          (onClear)=\"onProductClear($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Product\"\n          [inputStyle]=\"\n                        form.get('product_id').touched && form.get('product_id').invalid\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n        <input type=\"number\"\n          class=\"form-control\"\n          formControlName=\"units\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('units').touched && form.get('units').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n        [showTooltip]=\"true\"\n        name=\"min_units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n        <input type=\"number\"\n          min=\"0\"\n          [max]=\"form.get('units').value\"\n          class=\"form-control\"\n          formControlName=\"min_units\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationIndustries$ | async as industries\">\n      <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n        name=\"organization_industry_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n        <select formControlName=\"organization_industry_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of industries['organization_industries']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('name').touched && form.get('name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationTypes$ | async as types\">\n      <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n        name=\"organization_type_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n        <select formControlName=\"organization_type_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of types['organization_types']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationSizes$ | async as sizes\">\n      <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n        name=\"organization_size_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n        <select formControlName=\"organization_size_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of sizes['organization_sizes']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 text-end\">\n      <input type=\"button\"\n        class=\"btn btn-outline-primary me-3\"\n        value=\"Cancel\"\n        (click)=\"form.reset(); totalRecordsUnFiltered = 0\" />\n      <button type=\"submit\"\n        [buttonBusy]=\"buttonBusy\"\n        [disabled]=\"buttonBusy\"\n        class=\"btn btn-primary\">Invite</button>\n    </div>\n  </div>\n</form>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
+            args: [{ selector: 'pw-invite-users', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"\">Invite New User</h3>\n          <p>Here you can send an invitation to a new user to try any of our products</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n  (ngSubmit)=\"onSave()\">\n  <div class=\"row\">\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"first_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"first_name\"\n          [ngClass]=\"{\n                        'is-invalid':\n                            form.get('first_name').touched && form.get('first_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.LastName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"last_name\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"last_name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Email' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"email\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"email\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('email').touched && form.get('email').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Label.Product' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n        name=\"product_id\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n        <p-autoComplete #refProduct\n        [suggestions]=\"filteredProducts\"\n          formControlName=\"product_id\"\n          dataKey=\"id\"\n          field=\"label\"\n          [dropdown]=\"true\"\n          [delay]=\"1000\"\n          [type]=\"'search'\"\n          (completeMethod)=\"searchProduct($event)\"\n          (onSelect)=\"onProductChange($event)\"\n          (onClear)=\"onProductClear($event)\"\n          styleClass=\"w-100\"\n          placeholder=\"Search Product\"\n          [inputStyle]=\"\n                        form.get('product_id').touched && form.get('product_id').invalid\n                            ? { border: '1px solid #ff586b' }\n                            : { border: '1px solid gray' }\n                    \"\n          [multiple]=\"false\">\n        </p-autoComplete>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n        <input type=\"number\"\n          class=\"form-control\"\n          formControlName=\"units\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('units').touched && form.get('units').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n        [showTooltip]=\"true\"\n        name=\"min_units\"\n        [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n        <input type=\"number\"\n          min=\"0\"\n          [max]=\"form.get('units').value\"\n          class=\"form-control\"\n          formControlName=\"min_units\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationIndustries$ | async as industries\">\n      <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n        name=\"organization_industry_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n        <select formControlName=\"organization_industry_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of industries['organization_industries']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\">\n      <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n        class=\"col-md-6 p-0\"\n        name=\"name\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          [ngClass]=\"{\n                        'is-invalid': form.get('name').touched && form.get('name').invalid\n                    }\" />\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationTypes$ | async as types\">\n      <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n        name=\"organization_type_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n        <select formControlName=\"organization_type_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of types['organization_types']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n    <div class=\"mb-3 col-sm-4\"\n      *ngIf=\"organizationSizes$ | async as sizes\">\n      <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n        name=\"organization_size_id\"\n        [showTooltip]=\"true\"\n        [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n        <select formControlName=\"organization_size_id\"\n          class=\"form-control form-select\">\n          <option *ngFor=\"let option of sizes['organization_sizes']\"\n            [value]=\"option.id\">\n            {{ option.name }}\n          </option>\n        </select>\n      </pw-input-container>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-12 text-end\">\n      <input type=\"button\"\n        class=\"btn btn-outline-primary me-3\"\n        value=\"Cancel\"\n        (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\" />\n      <button type=\"submit\"\n        [buttonBusy]=\"buttonBusy\"\n        [disabled]=\"buttonBusy\"\n        class=\"btn btn-primary\">Invite</button>\n    </div>\n  </div>\n</form>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":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_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i3.UntypedFormBuilder }, { type: i1$1.ProductService }, { type: i1$1.CommonService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']
@@ -7617,7 +7619,7 @@ class EditFaqComponent extends AppBaseComponent {
         this.categories = [];
         this.commonService.getFaqCategories(this.subscriptionId).subscribe(response => {
             this.categories = response.map(element => {
-                return { label: element.name, value: element.key };
+                return { label: element.name || '', value: element.key };
             });
         });
     }
@@ -7662,7 +7664,7 @@ class EditFaqComponent extends AppBaseComponent {
                 this.featureKeysList = featureKeys.map(element => {
                     return {
                         value: element,
-                        label: element
+                        label: element || ''
                     };
                 });
             }