npm - @posiwise/admin-module - Versions diffs - 0.0.131 → 0.0.132 - Mend

@posiwise/admin-module 0.0.131 → 0.0.132

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 (83) hide show

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

@@ -129,7 +129,7 @@ class TermsOfServiceDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceDetailsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceDetailsComponent, selector: "pw-terms-of-service-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</span>\n        </h3>\n      </div>\n\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor class=\"d-block\" id=\"privacyEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor  class=\"d-block\" id=\"tosEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\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\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\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: "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: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceDetailsComponent, selector: "pw-terms-of-service-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</span>\n        </h3>\n      </div>\n\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor class=\"d-block\" id=\"privacyEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'quill-container': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor  class=\"d-block\" id=\"tosEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'quill-container': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\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\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\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: "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: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -139,7 +139,7 @@ __decorate([
 ], TermsOfServiceDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-terms-of-service-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</span>\n        </h3>\n      </div>\n\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor class=\"d-block\" id=\"privacyEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor  class=\"d-block\" id=\"tosEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\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\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-terms-of-service-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</span>\n        </h3>\n      </div>\n\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor class=\"d-block\" id=\"privacyEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'quill-container': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger required-icon\">*</span></label>\n                <quill-editor  class=\"d-block\" id=\"tosEditor\"  [styles]=\"{ height: '450px' }\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'quill-container': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\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\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
 class TermsOfServiceTabsComponent {
@@ -171,6 +171,7 @@ const ROUTERS = {
     adminCredentialsDetails: `${baseUrl}/credentials/`,
     subscriptionCredentialDetails: `${baseUrl}/credentials/subscription/`,
     newsletter: `${baseUrl}/newsletter`,
+    mailerDetails: `${baseUrl}/mailers/`,
     newsletterItemDetails: `${baseUrl}/newsletter/item/`,
     newsletterItemView: `${baseUrl}/newsletter/items/`,
     newslettersUserList: `${baseUrl}/newsletter/items/users-list/`,
@@ -264,11 +265,11 @@ class TermsOfServiceComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceComponent, selector: "pw-terms-of-service", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SuperAdmin'\" class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"create-Tos\"\n      [routerLink]=\"[routers.tosAndPrivacyDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Terms of Services </button>\n  </div>\n</div>\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 mt table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [customSort]=\"true\" [value]=\"data.product_privacy_services\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\">\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\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search Tos...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sortIcon field=\"title\"></p-sortIcon></th>\n        <th scope=\"true\" data-head=\"Privacy\">Privacy</th>\n        <th scope=\"true\" data-head=\"Terms of Services\">Terms of Services</th>\n        <th class=\"actions-list-two\" scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-tos>\n      <tr>\n\n        <td data-head=\"Title\" ><a ngbTooltip=\"{{tos.title}}\" [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">{{\n          tos.title | textTruncate : 30\n      }}</a></td>\n        <td data-head=\"Name\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n        <td data-head=\"Terms of Services\"> {{ tos.tos | removeHtml: 'quill' | textTruncate: 220 }} </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <!-- Show only to SubscriptionSuperAdmin or SubscriptionOwner -->\n            <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\" *rbacAllow=\"'SuperAdmin'\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"View TOS\"\n                class=\"me-2 me-sm-3\">\n                <a [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\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)}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\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.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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceComponent, selector: "pw-terms-of-service", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SuperAdmin'\" class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"create-Tos\"\n      [routerLink]=\"[routers.tosAndPrivacyDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Terms of Services </button>\n  </div>\n</div>\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 mt table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [customSort]=\"true\" [value]=\"data.product_privacy_services\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\">\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\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search Tos...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sortIcon field=\"title\"></p-sortIcon></th>\n        <th scope=\"true\" data-head=\"Privacy\">Privacy</th>\n        <th scope=\"true\" data-head=\"Terms of Services\">Terms of Services</th>\n        <th class=\"actions-list-two\" scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-tos>\n      <tr>\n\n        <td data-head=\"Title\" ><a ngbTooltip=\"{{tos.title}}\" [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">{{\n          tos.title | textTruncate : 30\n      }}</a></td>\n        <td data-head=\"Name\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n        <td data-head=\"Terms of Services\"> {{ tos.tos | removeHtml: 'quill' | textTruncate: 220 }} </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <!-- Show only to SubscriptionSuperAdmin or SubscriptionOwner -->\n            <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\" *rbacAllow=\"'SuperAdmin'\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"View TOS\"\n                class=\"me-2 me-sm-3\">\n                <a [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\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)}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\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.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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-terms-of-service', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SuperAdmin'\" class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"create-Tos\"\n      [routerLink]=\"[routers.tosAndPrivacyDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Terms of Services </button>\n  </div>\n</div>\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 mt table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [customSort]=\"true\" [value]=\"data.product_privacy_services\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\">\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\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search Tos...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sortIcon field=\"title\"></p-sortIcon></th>\n        <th scope=\"true\" data-head=\"Privacy\">Privacy</th>\n        <th scope=\"true\" data-head=\"Terms of Services\">Terms of Services</th>\n        <th class=\"actions-list-two\" scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-tos>\n      <tr>\n\n        <td data-head=\"Title\" ><a ngbTooltip=\"{{tos.title}}\" [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">{{\n          tos.title | textTruncate : 30\n      }}</a></td>\n        <td data-head=\"Name\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n        <td data-head=\"Terms of Services\"> {{ tos.tos | removeHtml: 'quill' | textTruncate: 220 }} </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <!-- Show only to SubscriptionSuperAdmin or SubscriptionOwner -->\n            <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\" *rbacAllow=\"'SuperAdmin'\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"View TOS\"\n                class=\"me-2 me-sm-3\">\n                <a [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\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)}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
+            args: [{ selector: 'pw-terms-of-service', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Terms of Services & Privacy Policy</h2>\n    <button *rbacAllow=\"'SuperAdmin'\" class=\"btn btn-sm btn-outline-primary float-end\" data-cy=\"create-Tos\"\n      [routerLink]=\"[routers.tosAndPrivacyDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Terms of Services </button>\n  </div>\n</div>\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 mt table-responsive\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt [customSort]=\"true\" [value]=\"data.product_privacy_services\" [paginator]=\"data.object_count !== 0\" [lazy]=\"true\" [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\" [loading]=\"loading\" [filterDelay]=\"1000\" (onLazyLoad)=\"onLazyLoad($event)\">\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\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search Tos...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th pSortableColumn=\"title\" scope=\"true\" data-head=\"Title\" >{{ 'Label.Title' | transloco }} <p-sortIcon field=\"title\"></p-sortIcon></th>\n        <th scope=\"true\" data-head=\"Privacy\">Privacy</th>\n        <th scope=\"true\" data-head=\"Terms of Services\">Terms of Services</th>\n        <th class=\"actions-list-two\" scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\" let-tos>\n      <tr>\n\n        <td data-head=\"Title\" ><a ngbTooltip=\"{{tos.title}}\" [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">{{\n          tos.title | textTruncate : 30\n      }}</a></td>\n        <td data-head=\"Name\">{{ tos.privacy | removeHtml: 'quill' | textTruncate: 220 }}</td>\n        <td data-head=\"Terms of Services\"> {{ tos.tos | removeHtml: 'quill' | textTruncate: 220 }} </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <!-- Show only to SubscriptionSuperAdmin or SubscriptionOwner -->\n            <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-3\" *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[routers.tosAndPrivacyDetails + tos.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\" *rbacAllow=\"'SuperAdmin'\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onDelete(tos.id)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"View TOS\"\n                class=\"me-2 me-sm-3\">\n                <a [routerLink]=\"[routers.tosAndPrivacyView + tos.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Tos.NoDataMessage' | transloco\"> </pw-no-data>\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)}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class GlobalConfigDetailsComponent extends AppBaseComponent {
@@ -396,11 +397,11 @@ class GlobalConfigListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GlobalConfigListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GlobalConfigListComponent, selector: "pw-global-config-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Global Configs</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-global-config\"\n      [routerLink]=\"[routers.globalConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.GlobalConfigMessage.AddGlobalConfig' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.global_configs\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search global configs...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Admin.GlobalConfigMessage.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field_type\">\n          {{ 'Admin.GlobalConfigMessage.FieldType' | transloco }}\n          <p-sortIcon field=\"field_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"default\">\n          {{ 'Admin.GlobalConfigMessage.Default' | transloco }}\n          <p-sortIcon field=\"default\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-config>\n      <tr>\n        <td data-head=\"Name\">{{ config.name }}</td>\n        <td data-head=\"Field Type\">\n          <span [appDynamicBadge]=\"{ itemsArray: fieldTypes, item: config?.field_type }\"\n            color=\"cyan\"\n            class=\"badge\">\n            {{ config.field_type }}\n          </span>\n        </td>\n        <td data-head=\"Default\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: config?.default }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ config?.default ? 'Yes' : '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.globalConfigDetails + config.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              <i\n                                (click)=\"onDelete(config.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.GlobalConfigMessage.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: GlobalConfigListComponent, selector: "pw-global-config-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Global Configs</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-global-config\"\n      [routerLink]=\"[routers.globalConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.GlobalConfigMessage.AddGlobalConfig' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.global_configs\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search global configs...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Admin.GlobalConfigMessage.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field_type\">\n          {{ 'Admin.GlobalConfigMessage.FieldType' | transloco }}\n          <p-sortIcon field=\"field_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"default\">\n          {{ 'Admin.GlobalConfigMessage.Default' | transloco }}\n          <p-sortIcon field=\"default\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-config>\n      <tr>\n        <td data-head=\"Name\">{{ config.name }}</td>\n        <td data-head=\"Field Type\">\n          <span [appDynamicBadge]=\"{ itemsArray: fieldTypes, item: config?.field_type }\"\n            color=\"cyan\"\n            class=\"badge\">\n            {{ config.field_type }}\n          </span>\n        </td>\n        <td data-head=\"Default\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: config?.default }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ config?.default ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.globalConfigDetails + config.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              <i\n                                (click)=\"onDelete(config.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.GlobalConfigMessage.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: GlobalConfigListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-global-config-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Global Configs</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-global-config\"\n      [routerLink]=\"[routers.globalConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.GlobalConfigMessage.AddGlobalConfig' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.global_configs\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search global configs...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Admin.GlobalConfigMessage.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field_type\">\n          {{ 'Admin.GlobalConfigMessage.FieldType' | transloco }}\n          <p-sortIcon field=\"field_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"default\">\n          {{ 'Admin.GlobalConfigMessage.Default' | transloco }}\n          <p-sortIcon field=\"default\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-config>\n      <tr>\n        <td data-head=\"Name\">{{ config.name }}</td>\n        <td data-head=\"Field Type\">\n          <span [appDynamicBadge]=\"{ itemsArray: fieldTypes, item: config?.field_type }\"\n            color=\"cyan\"\n            class=\"badge\">\n            {{ config.field_type }}\n          </span>\n        </td>\n        <td data-head=\"Default\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: config?.default }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ config?.default ? 'Yes' : '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.globalConfigDetails + config.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              <i\n                                (click)=\"onDelete(config.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.GlobalConfigMessage.NoDataMessage' | transloco\" > </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-global-config-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Global Configs</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"add-global-config\"\n      [routerLink]=\"[routers.globalConfigDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.GlobalConfigMessage.AddGlobalConfig' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.global_configs\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search global configs...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Admin.GlobalConfigMessage.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field_type\">\n          {{ 'Admin.GlobalConfigMessage.FieldType' | transloco }}\n          <p-sortIcon field=\"field_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"default\">\n          {{ 'Admin.GlobalConfigMessage.Default' | transloco }}\n          <p-sortIcon field=\"default\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-config>\n      <tr>\n        <td data-head=\"Name\">{{ config.name }}</td>\n        <td data-head=\"Field Type\">\n          <span [appDynamicBadge]=\"{ itemsArray: fieldTypes, item: config?.field_type }\"\n            color=\"cyan\"\n            class=\"badge\">\n            {{ config.field_type }}\n          </span>\n        </td>\n        <td data-head=\"Default\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: config?.default }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ config?.default ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.globalConfigDetails + config.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              <i\n                                (click)=\"onDelete(config.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.GlobalConfigMessage.NoDataMessage' | transloco\" > </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class GlobalConfigTabsComponent {
@@ -498,11 +499,11 @@ class ContactUsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ContactUsListComponent, 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: ContactUsListComponent, selector: "pw-contact-us-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\">Contact Us</h2>\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.contact_request\"\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=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <select class=\"form-select\"\n            (change)=\"filterClosed($event.target.value)\">\n            <option value=\"\">Select</option>\n            <option [value]=\"false\">Open</option>\n            <option [value]=\"true\">Closed</option>\n          </select>\n        </div>\n        <div class=\"text-end ms-auto\">\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      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sortIcon field=\"subject\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sortIcon field=\"message\"></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=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [ngbTooltip]=\"item?.message\"\n            container=\"body\"\n            tooltipClass=\"custom-tooltip\"\n            placement=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li *ngIf=\"!item.closed\"\n              ngbTooltip=\"Close\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, true)\">\n              <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"item.closed\"\n              ngbTooltip=\"Re Open\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, false)\">\n              <i class=\"fa fa-retweet edit-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=\"No Contact Requests\"> </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.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: "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: 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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ContactUsListComponent, selector: "pw-contact-us-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\">Contact Us</h2>\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.contact_request\"\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=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <select class=\"form-select\"\n            (change)=\"filterClosed($event.target.value)\">\n            <option value=\"\">Select</option>\n            <option [value]=\"false\">Open</option>\n            <option [value]=\"true\">Closed</option>\n          </select>\n        </div>\n        <div class=\"text-end ms-auto\">\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      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sortIcon field=\"subject\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sortIcon field=\"message\"></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=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [ngbTooltip]=\"item?.message\"\n            container=\"body\"\n            tooltipClass=\"custom-tooltip\"\n            placement=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li *ngIf=\"!item.closed\"\n              ngbTooltip=\"Close\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, true)\">\n              <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"item.closed\"\n              ngbTooltip=\"Re Open\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, false)\">\n              <i class=\"fa fa-retweet edit-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=\"No Contact Requests\"> </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.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: "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: 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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ContactUsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-contact-us-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\">Contact Us</h2>\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.contact_request\"\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=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <select class=\"form-select\"\n            (change)=\"filterClosed($event.target.value)\">\n            <option value=\"\">Select</option>\n            <option [value]=\"false\">Open</option>\n            <option [value]=\"true\">Closed</option>\n          </select>\n        </div>\n        <div class=\"text-end ms-auto\">\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      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sortIcon field=\"subject\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sortIcon field=\"message\"></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=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [ngbTooltip]=\"item?.message\"\n            container=\"body\"\n            tooltipClass=\"custom-tooltip\"\n            placement=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li *ngIf=\"!item.closed\"\n              ngbTooltip=\"Close\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, true)\">\n              <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"item.closed\"\n              ngbTooltip=\"Re Open\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, false)\">\n              <i class=\"fa fa-retweet edit-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=\"No Contact Requests\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-contact-us-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\">Contact Us</h2>\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.contact_request\"\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=\"d-flex\">\n        <div class=\"col-sm-3\">\n          <select class=\"form-select\"\n            (change)=\"filterClosed($event.target.value)\">\n            <option value=\"\">Select</option>\n            <option [value]=\"false\">Open</option>\n            <option [value]=\"true\">Closed</option>\n          </select>\n        </div>\n        <div class=\"text-end ms-auto\">\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      </div>\n    </ng-template>\n\n    <!-- Column Header -->\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"subject\">\n          {{ 'Admin.ContactUs.Subject' | transloco }}\n          <p-sortIcon field=\"subject\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"message\">\n          {{ 'Admin.ContactUs.Message' | transloco }}\n          <p-sortIcon field=\"message\"></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=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"name\">{{ item?.name }}</td>\n        <td data-head=\"email\">\n          <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n        </td>\n        <td data-head=\"subject\">{{ item?.subject }}</td>\n        <td data-head=\"message\">\n          <span\n            [ngbTooltip]=\"item?.message\"\n            container=\"body\"\n            tooltipClass=\"custom-tooltip\"\n            placement=\"bottom\"\n            >\n            {{ item?.message | textTruncate: 200 }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li *ngIf=\"!item.closed\"\n              ngbTooltip=\"Close\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, true)\">\n              <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li *ngIf=\"item.closed\"\n              ngbTooltip=\"Re Open\"\n              class=\"me-2 me-sm-3\"\n              (click)=\"toggleRecord(item.id, false)\">\n              <i class=\"fa fa-retweet edit-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=\"No Contact Requests\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }] });
 class ContactUsTabsComponent {
@@ -681,11 +682,11 @@ class CredentialsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CredentialsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CredentialsComponent, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Credential\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          <ng-template [ngIf]=\"credential?.description\"\n            [ngIfElse]=\"noDescription\">\n            <span class=\"info-circle\">{{ credential.field\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                credential.description\n                            }}</span></span>\n          </ng-template>\n          <ng-template #noDescription>\n            {{ credential.field }}\n          </ng-template>\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n                      </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.is_visible ? 'Yes' : '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.adminCredentialsDetails + credential.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              <i\n                                (click)=\"onDelete(credential)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.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: CredentialsComponent, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Credential\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          <ng-template [ngIf]=\"credential?.description\"\n            [ngIfElse]=\"noDescription\">\n            <span class=\"info-circle\">{{ credential.field\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                credential.description\n                            }}</span></span>\n          </ng-template>\n          <ng-template #noDescription>\n            {{ credential.field }}\n          </ng-template>\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n                      </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.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              <i\n                                (click)=\"onDelete(credential)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.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: CredentialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-credentials', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Credential\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          <ng-template [ngIf]=\"credential?.description\"\n            [ngIfElse]=\"noDescription\">\n            <span class=\"info-circle\">{{ credential.field\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                credential.description\n                            }}</span></span>\n          </ng-template>\n          <ng-template #noDescription>\n            {{ credential.field }}\n          </ng-template>\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n                      </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.is_visible ? 'Yes' : '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.adminCredentialsDetails + credential.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              <i\n                                (click)=\"onDelete(credential)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-credentials', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Credential\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.Credentials.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_required\">\n          {{ 'Admin.Credentials.Required' | transloco }}\n          <p-sortIcon field=\"is_required\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential.name }}</td>\n        <td data-head=\"Field\">\n          <ng-template [ngIf]=\"credential?.description\"\n            [ngIfElse]=\"noDescription\">\n            <span class=\"info-circle\">{{ credential.field\n                            }}<span class=\"tooltiptext gradient-custom-branding\">{{\n                                credential.description\n                            }}</span></span>\n          </ng-template>\n          <ng-template #noDescription>\n            {{ credential.field }}\n          </ng-template>\n        </td>\n        <td data-head=\"Required\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_required\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">\n            {{ !!credential?.is_required }}\n                      </span>\n        </td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Is Visible\">\n          <span [appDynamicBadge]=\"{\n                            itemsArray: [true, false],\n                            item: credential?.is_visible\n                        }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.adminCredentialsDetails + credential.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              <i\n                                (click)=\"onDelete(credential)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class SubscriptionCredentialsDetailsComponent extends AppBaseComponent {
@@ -830,11 +831,11 @@ class SubscriptionCredentialsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionCredentialsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionCredentialsComponent, selector: "pw-subscription-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-subscription-credential\"\n      [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.subscription_credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n          <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"credential_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n          <p-sortIcon field=\"credential_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Admin.SubscriptionCredentialMessages.Visible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></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-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n        <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n        <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n        <td data-head=\"Value\">{{ credential.value }}</td>\n        <td data-head=\"Is Active\">\n          <span *ngIf=\"credential?.is_visible\"\n            class=\"badge bg-success\">yes</span>\n          <span *ngIf=\"!credential?.is_visible\"\n            class=\"badge bg-danger\">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.subscriptionCredentialDetails + credential.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              <i\n                                (click)=\"onDelete(credential.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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\n    </pw-no-data>\n</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.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: 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: SubscriptionCredentialsComponent, selector: "pw-subscription-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-subscription-credential\"\n      [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.subscription_credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n          <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"credential_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n          <p-sortIcon field=\"credential_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Admin.SubscriptionCredentialMessages.Visible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></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-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n        <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n        <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n        <td data-head=\"Value\">{{ credential.value }}</td>\n        <td data-head=\"Is Active\">\n          <span *ngIf=\"credential?.is_visible\"\n            class=\"badge bg-success\">yes</span>\n          <span *ngIf=\"!credential?.is_visible\"\n            class=\"badge bg-danger\">No</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.subscriptionCredentialDetails + credential.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              <i\n                                (click)=\"onDelete(credential.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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\n    </pw-no-data>\n</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.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: 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: SubscriptionCredentialsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-credentials', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-subscription-credential\"\n      [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.subscription_credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n          <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"credential_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n          <p-sortIcon field=\"credential_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Admin.SubscriptionCredentialMessages.Visible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></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-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n        <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n        <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n        <td data-head=\"Value\">{{ credential.value }}</td>\n        <td data-head=\"Is Active\">\n          <span *ngIf=\"credential?.is_visible\"\n            class=\"badge bg-success\">yes</span>\n          <span *ngIf=\"!credential?.is_visible\"\n            class=\"badge bg-danger\">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.subscriptionCredentialDetails + credential.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              <i\n                                (click)=\"onDelete(credential.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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\n    </pw-no-data>\n</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-subscription-credentials', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-subscription-credential\"\n      [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n      {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\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 mt table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.subscription_credentials\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Credentials...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"subscription_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n          <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"credential_id\">\n          {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n          <p-sortIcon field=\"credential_id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"field\">\n          {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n          <p-sortIcon field=\"field\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"is_visible\">\n          {{ 'Admin.SubscriptionCredentialMessages.Visible' | transloco }}\n          <p-sortIcon field=\"is_visible\"></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-credential>\n      <tr>\n        <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n        <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n        <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n        <td data-head=\"Value\">{{ credential.value }}</td>\n        <td data-head=\"Is Active\">\n          <span *ngIf=\"credential?.is_visible\"\n            class=\"badge bg-success\">yes</span>\n          <span *ngIf=\"!credential?.is_visible\"\n            class=\"badge bg-danger\">No</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.subscriptionCredentialDetails + credential.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              <i\n                                (click)=\"onDelete(credential.id)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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\n    </pw-no-data>\n</div>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class DomainConfigBuildComponent extends AppBaseComponent {
@@ -1611,11 +1612,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=\"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" }] }); }
+    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 list-action\">\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=\"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" }]
+            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 list-action\">\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 {
@@ -1880,11 +1881,11 @@ class FaqListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FaqListComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FaqListComponent, selector: "pw-admin-faq-list", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n    *ngIf=\"showList\">\n    <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n    <a href=\"javascript:void(0)\" [routerLink]=\"[routers.faqDetails + 'add']\"\n      class=\"btn btn-sm btn-outline-primary float-end\" role=\"button\" aria-expanded=\"false\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n  </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row faqlist primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n  <div class=\"col-12 px-0\">\n    <p-table #dt\n    [value]=\"faqs\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n              placeholder=\"Search by Feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search FAQ...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Faq.Question' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-faq>\n        <tr>\n          <td data-head=\"Question\">{{ faq.question }} </td>\n          <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n          <td data-head=\"Position\">{{faq.position}}</td>\n          <td data-head=\"Category\">\n            <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n              class=\"badge ms-1\">\n              <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n            </span>\n            <span class=\"ms-1 badge bg-warning\" *ngIf=\"faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq\">Super\n              FAQ</span>\n          </td>\n          <td data-head=\"Visible\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.visible }}</span>\n          </td>\n          <td data-head=\"Public\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.public }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-edit edit-icon\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"View faq\" *ngIf=\"faq?.visible\">\n                <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | 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)}.faq-item{background-color:#eee;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width: 1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width: 768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\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: i4$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: i5$1.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.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" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FaqListComponent, selector: "pw-admin-faq-list", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n    *ngIf=\"showList\">\n    <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n    <a href=\"javascript:void(0)\" [routerLink]=\"[routers.faqDetails + 'add']\"\n      class=\"btn btn-sm btn-outline-primary float-end\" role=\"button\" aria-expanded=\"false\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n  </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row faqlist primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n  <div class=\"col-12 px-0\">\n    <p-table #dt\n    [value]=\"faqs\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n              placeholder=\"Search by Feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search FAQ...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Faq.Question' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-faq>\n        <tr>\n          <td data-head=\"Question\">{{ faq.question }} </td>\n          <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n          <td data-head=\"Position\">{{faq.position}}</td>\n          <td data-head=\"Category\">\n            <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n              class=\"badge ms-1\">\n              <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n            </span>\n            <span class=\"ms-1 badge bg-warning\" *ngIf=\"faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq\">Super\n              FAQ</span>\n          </td>\n          <td data-head=\"Visible\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.visible }}</span>\n          </td>\n          <td data-head=\"Public\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.public }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-edit edit-icon\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"View faq\" *ngIf=\"faq?.visible\">\n                <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | 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)}.faq-item{background-color:#fafafa;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width: 1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width: 768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\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: i4$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: i5$1.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.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" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FaqListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-faq-list', template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n    *ngIf=\"showList\">\n    <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n    <a href=\"javascript:void(0)\" [routerLink]=\"[routers.faqDetails + 'add']\"\n      class=\"btn btn-sm btn-outline-primary float-end\" role=\"button\" aria-expanded=\"false\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n  </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row faqlist primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n  <div class=\"col-12 px-0\">\n    <p-table #dt\n    [value]=\"faqs\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n              placeholder=\"Search by Feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search FAQ...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Faq.Question' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-faq>\n        <tr>\n          <td data-head=\"Question\">{{ faq.question }} </td>\n          <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n          <td data-head=\"Position\">{{faq.position}}</td>\n          <td data-head=\"Category\">\n            <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n              class=\"badge ms-1\">\n              <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n            </span>\n            <span class=\"ms-1 badge bg-warning\" *ngIf=\"faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq\">Super\n              FAQ</span>\n          </td>\n          <td data-head=\"Visible\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.visible }}</span>\n          </td>\n          <td data-head=\"Public\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.public }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-edit edit-icon\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"View faq\" *ngIf=\"faq?.visible\">\n                <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | 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)}.faq-item{background-color:#eee;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width: 1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width: 768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"] }]
+            args: [{ selector: 'pw-admin-faq-list', template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n    *ngIf=\"showList\">\n    <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n    <a href=\"javascript:void(0)\" [routerLink]=\"[routers.faqDetails + 'add']\"\n      class=\"btn btn-sm btn-outline-primary float-end\" role=\"button\" aria-expanded=\"false\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n  </div>\n</div>\n\n<div class=\"w-100 text-center mt-3\" *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"row faqlist primeng-datatable-container mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n  <div class=\"col-12 px-0\">\n    <p-table #dt\n    [value]=\"faqs\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n              placeholder=\"Search by Feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\" [(ngModel)]=\"searchText\" pInputText size=\"50\" placeholder=\"Search FAQ...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" class=\"mw-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Faq.Question' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\" let-faq>\n        <tr>\n          <td data-head=\"Question\">{{ faq.question }} </td>\n          <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n          <td data-head=\"Position\">{{faq.position}}</td>\n          <td data-head=\"Category\">\n            <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n              class=\"badge ms-1\">\n              <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n                }}</span>\n            </span>\n            <span class=\"ms-1 badge bg-warning\" *ngIf=\"faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq\">Super\n              FAQ</span>\n          </td>\n          <td data-head=\"Visible\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.visible }}</span>\n          </td>\n          <td data-head=\"Public\">\n            <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n              class=\"badge\">{{ faq?.public }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-edit edit-icon\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n                <i class=\"fa fa-trash delete-icon\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"View faq\" *ngIf=\"faq?.visible\">\n                <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\">\n                  <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                </a>\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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  totalRecords }}</span>\n  </div>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Faq.NoDataMessage' | 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)}.faq-item{background-color:#fafafa;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width: 1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width: 768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -2053,11 +2054,11 @@ class FeedbackQuestionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FeedbackQuestionsListComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FeedbackQuestionsListComponent, selector: "pw-feedback-questions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\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      <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n    </div>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n      [queryParams]=\"{ product_id: productId }\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\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.feedback_questions\"\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=\"question\">\n          {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n          <p-sortIcon field=\"question\"></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=\"question\">{{ item?.question }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n              [queryParams]=\"{ product_id: productId }\"\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.FeedbackQuestions.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: 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: FeedbackQuestionsListComponent, selector: "pw-feedback-questions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\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      <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n    </div>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n      [queryParams]=\"{ product_id: productId }\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\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.feedback_questions\"\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=\"question\">\n          {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n          <p-sortIcon field=\"question\"></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=\"question\">{{ item?.question }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n              [queryParams]=\"{ product_id: productId }\"\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.FeedbackQuestions.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: 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: FeedbackQuestionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-feedback-questions-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\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      <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n    </div>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n      [queryParams]=\"{ product_id: productId }\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\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.feedback_questions\"\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=\"question\">\n          {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n          <p-sortIcon field=\"question\"></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=\"question\">{{ item?.question }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n              [queryParams]=\"{ product_id: productId }\"\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.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-feedback-questions-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center text-end my-3\">\n    <div class=\"float-start d-flex align-items-baseline\">\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      <h2 class=\"card-title p-0\">Feedback Questions for product {{ productData?.name }}</h2>\n    </div>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.feedbackQuestionsDetails + 'add']\"\n      [queryParams]=\"{ product_id: productId }\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create feedback question\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.feedback_questions\"\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=\"question\">\n          {{ 'Admin.FeedbackQuestions.Question' | transloco }}\n          <p-sortIcon field=\"question\"></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=\"question\">{{ item?.question }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.feedbackQuestionsDetails + item?.id]\"\n              [queryParams]=\"{ product_id: productId }\"\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.FeedbackQuestions.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.ChangeDetectorRef }] });
 class GenericInsightComponent {
@@ -2252,6 +2253,7 @@ class LoginNotificationDetailsComponent extends AppBaseComponent {
                 visible_from: data?.visible_from ? new Date(data?.visible_from) : '',
                 feature_keys: data?.feature_keys || [],
                 notification_type: data?.notification_type,
+                is_permanent: data?.is_permanent,
                 body: data?.body
             });
         });
@@ -2288,7 +2290,7 @@ class LoginNotificationDetailsComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoginNotificationDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$1.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LoginNotificationDetailsComponent, selector: "pw-login-notification-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.loginNotifications]\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>{{ id ? 'Edit' : 'Add New' }}: Login Notification</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-4 col-md-3\"\n              *ngIf=\"loginNotificationTypes$ | async as types\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.NotificationType' | transloco\"\n                [label]=\"'Admin.LoginNotification.NotificationType' | transloco\"\n                name=\"notification_type\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.NotificationType'\n                                        | transloco\n                                \">\n\n                <select id=\"type\"\n                  class=\"form-select mt-2 no-radius\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['notification_type'].errors\n                                    }\"\n                  formControlName=\"notification_type\">\n                  <option value=\"\">Select Type</option>\n                  <option *ngFor=\"let item of types['available_types']\"\n                    [value]=\"item\">\n                    {{ item }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <!-- Feature keys -->\n            <div class=\"mb-3 col-12 col-sm-4 col-md-3\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.LoginNotification.Features' | transloco\"\n                name=\"feature_keys\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.Features' | transloco\n                                \">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- visible_from -->\n            <div class=\"col-12 col-sm-4 col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleFrom' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n                  name=\"visible_from\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleFrom' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_from\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_from'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- visible_until -->\n            <div class=\"col-12 col-sm-4 col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleUntil' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n                  name=\"visible_until\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleUntil'\n                                            | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_until\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- body -->\n            <div class=\"col-12 col-sm-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Body' | transloco\"\n                [label]=\"'Admin.LoginNotification.Body' | transloco\"\n                name=\"body\"\n                [errorMsg]=\"'Admin.LoginNotification.Validation.Body' | transloco\">\n                <textarea rows=\"3\"\n                  type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"body\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\"></textarea>\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\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i5$1.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: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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.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: 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.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: LoginNotificationDetailsComponent, selector: "pw-login-notification-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.loginNotifications]\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>{{ id ? 'Edit' : 'Add New' }}: Login Notification</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-4 col-md-3\"\n              *ngIf=\"loginNotificationTypes$ | async as types\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.NotificationType' | transloco\"\n                [label]=\"'Admin.LoginNotification.NotificationType' | transloco\"\n                name=\"notification_type\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.NotificationType'\n                                        | transloco\n                                \">\n\n                <select id=\"type\"\n                  class=\"form-select no-radius\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['notification_type'].errors\n                                    }\"\n                  formControlName=\"notification_type\">\n                  <option value=\"\">Select Type</option>\n                  <option *ngFor=\"let item of types['available_types']\"\n                    [value]=\"item\">\n                    {{ item }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <!-- Feature keys -->\n            <div class=\"mb-3 col-12 col-sm-4 col-md-3\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.LoginNotification.Features' | transloco\"\n                name=\"feature_keys\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.Features' | transloco\n                                \">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- visible_from -->\n            <div class=\"col-12 col-sm-4 col-md-2 mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleFrom' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n                  name=\"visible_from\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleFrom' | transloco\n                                    \">\n                    <p-calendar formControlName=\"visible_from\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_from'].errors\n                                            }\">\n                    </p-calendar>\n                </pw-input-container>\n            </div>\n            <!-- visible_until -->\n            <div class=\"col-12 col-sm-4 col-md-2 mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleUntil' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n                  name=\"visible_until\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleUntil'\n                                            | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_until\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-sm-4 col-md-2\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Permanent'|transloco\"\n                [label]=\"'Admin.LoginNotification.IsPermanent' | transloco\"\n                name=\"is_permanent\">\n                <ui-switch formControlName=\"is_permanent\"\n                  name=\"is_permanent\">\n                </ui-switch>\n              </pw-input-container>\n            </div>\n            <!-- body -->\n            <div class=\"col-12 col-sm-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Body' | transloco\"\n                [label]=\"'Admin.LoginNotification.Body' | transloco\"\n                name=\"body\"\n                [errorMsg]=\"'Admin.LoginNotification.Validation.Body' | transloco\">\n                <textarea rows=\"3\"\n                  type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"body\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\"></textarea>\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\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".form-select{border-radius:5px!important;border:1px solid #ced4da;height:36px!important}\n"], dependencies: [{ kind: "component", type: i5$1.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: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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.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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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.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" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2298,7 +2300,7 @@ __decorate([
 ], LoginNotificationDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoginNotificationDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-login-notification-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.loginNotifications]\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>{{ id ? 'Edit' : 'Add New' }}: Login Notification</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-4 col-md-3\"\n              *ngIf=\"loginNotificationTypes$ | async as types\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.NotificationType' | transloco\"\n                [label]=\"'Admin.LoginNotification.NotificationType' | transloco\"\n                name=\"notification_type\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.NotificationType'\n                                        | transloco\n                                \">\n\n                <select id=\"type\"\n                  class=\"form-select mt-2 no-radius\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['notification_type'].errors\n                                    }\"\n                  formControlName=\"notification_type\">\n                  <option value=\"\">Select Type</option>\n                  <option *ngFor=\"let item of types['available_types']\"\n                    [value]=\"item\">\n                    {{ item }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <!-- Feature keys -->\n            <div class=\"mb-3 col-12 col-sm-4 col-md-3\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.LoginNotification.Features' | transloco\"\n                name=\"feature_keys\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.Features' | transloco\n                                \">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- visible_from -->\n            <div class=\"col-12 col-sm-4 col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleFrom' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n                  name=\"visible_from\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleFrom' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_from\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_from'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- visible_until -->\n            <div class=\"col-12 col-sm-4 col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleUntil' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n                  name=\"visible_until\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleUntil'\n                                            | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_until\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- body -->\n            <div class=\"col-12 col-sm-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Body' | transloco\"\n                [label]=\"'Admin.LoginNotification.Body' | transloco\"\n                name=\"body\"\n                [errorMsg]=\"'Admin.LoginNotification.Validation.Body' | transloco\">\n                <textarea rows=\"3\"\n                  type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"body\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\"></textarea>\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\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-login-notification-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.loginNotifications]\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>{{ id ? 'Edit' : 'Add New' }}: Login Notification</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-4 col-md-3\"\n              *ngIf=\"loginNotificationTypes$ | async as types\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.NotificationType' | transloco\"\n                [label]=\"'Admin.LoginNotification.NotificationType' | transloco\"\n                name=\"notification_type\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.NotificationType'\n                                        | transloco\n                                \">\n\n                <select id=\"type\"\n                  class=\"form-select no-radius\"\n                  [ngClass]=\"{\n                                        'is-invalid': submitted && f['notification_type'].errors\n                                    }\"\n                  formControlName=\"notification_type\">\n                  <option value=\"\">Select Type</option>\n                  <option *ngFor=\"let item of types['available_types']\"\n                    [value]=\"item\">\n                    {{ item }}\n                  </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <!-- Feature keys -->\n            <div class=\"mb-3 col-12 col-sm-4 col-md-3\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.LoginNotification.Features' | transloco\"\n                name=\"feature_keys\"\n                [errorMsg]=\"\n                                    'Admin.LoginNotification.Validation.Features' | transloco\n                                \">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- visible_from -->\n            <div class=\"col-12 col-sm-4 col-md-2 mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleFrom' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleFrom' | transloco\"\n                  name=\"visible_from\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleFrom' | transloco\n                                    \">\n                    <p-calendar formControlName=\"visible_from\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_from'].errors\n                                            }\">\n                    </p-calendar>\n                </pw-input-container>\n            </div>\n            <!-- visible_until -->\n            <div class=\"col-12 col-sm-4 col-md-2 mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.LoginNotification.Tooltip.VisibleUntil' | transloco\"\n                  [label]=\"'Admin.LoginNotification.VisibleUntil' | transloco\"\n                  name=\"visible_until\"\n                  [errorMsg]=\"\n                                        'Admin.LoginNotification.Validation.VisibleUntil'\n                                            | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"visible_until\"\n                      [showIcon]=\"true\"\n                      [showTime]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Visible Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['visible_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-sm-4 col-md-2\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Permanent'|transloco\"\n                [label]=\"'Admin.LoginNotification.IsPermanent' | transloco\"\n                name=\"is_permanent\">\n                <ui-switch formControlName=\"is_permanent\"\n                  name=\"is_permanent\">\n                </ui-switch>\n              </pw-input-container>\n            </div>\n            <!-- body -->\n            <div class=\"col-12 col-sm-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.LoginNotification.Tooltip.Body' | transloco\"\n                [label]=\"'Admin.LoginNotification.Body' | transloco\"\n                name=\"body\"\n                [errorMsg]=\"'Admin.LoginNotification.Validation.Body' | transloco\">\n                <textarea rows=\"3\"\n                  type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"body\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\"></textarea>\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\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".form-select{border-radius:5px!important;border:1px solid #ced4da;height:36px!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$1.ProductService }], propDecorators: { onSave: [] } });
 class LoginNotificationTabsComponent {
@@ -2388,11 +2390,11 @@ class LoginNotificationsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoginNotificationsListComponent, 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: LoginNotificationsListComponent, selector: "pw-login-notifications-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\">Login Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create\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.notifications\"\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=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sortIcon field=\"notification_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sortIcon field=\"visible_from\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sortIcon field=\"visible_until\"></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=\"notification_type\">{{ item?.notification_type }}</td>\n        <td data-head=\"body\">{{ item?.body | textTruncate: 30 }}</td>\n        <td data-head=\"feature_keys\">\n          <span *ngFor=\"let data of item?.feature_keys\"\n            class=\"badge m-1\"\n            [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n            color=\"cyan\">{{ data }}</span>\n        </td>\n        <td data-head=\"visible_from\">{{ item?.visible_from | dateFormat }}</td>\n        <td data-head=\"visible_until\">{{ item?.visible_until | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.loginNotifications + 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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.LoginNotification.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LoginNotificationsListComponent, selector: "pw-login-notifications-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\">Login Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create\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.notifications\"\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=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sortIcon field=\"notification_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sortIcon field=\"visible_from\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sortIcon field=\"visible_until\"></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=\"notification_type\">{{ item?.notification_type }}</td>\n        <td data-head=\"body\">{{ item?.body | textTruncate: 30 }}</td>\n\n\n        <td data-head=\"Is Permanent\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\">\n          <span *ngFor=\"let data of item?.feature_keys\"\n            class=\"badge m-1\"\n            [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n            color=\"cyan\">{{ data }}</span>\n        </td>\n        <td data-head=\"visible_from\">{{ item?.visible_from | dateFormat }}</td>\n        <td data-head=\"visible_until\">{{ item?.visible_until | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.loginNotifications + 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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.LoginNotification.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LoginNotificationsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-login-notifications-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\">Login Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create\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.notifications\"\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=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sortIcon field=\"notification_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sortIcon field=\"visible_from\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sortIcon field=\"visible_until\"></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=\"notification_type\">{{ item?.notification_type }}</td>\n        <td data-head=\"body\">{{ item?.body | textTruncate: 30 }}</td>\n        <td data-head=\"feature_keys\">\n          <span *ngFor=\"let data of item?.feature_keys\"\n            class=\"badge m-1\"\n            [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n            color=\"cyan\">{{ data }}</span>\n        </td>\n        <td data-head=\"visible_from\">{{ item?.visible_from | dateFormat }}</td>\n        <td data-head=\"visible_until\">{{ item?.visible_until | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.loginNotifications + 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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-login-notifications-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\">Login Notifications</h2>\n    <button class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.loginNotifications + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create\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.notifications\"\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=\"notification_type\">\n          {{ 'Admin.LoginNotification.NotificationType' | transloco }}\n          <p-sortIcon field=\"notification_type\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"body\">\n          {{ 'Admin.LoginNotification.Body' | transloco }}\n          <p-sortIcon field=\"body\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Admin.LoginNotification.IsPermanent' | transloco }}\n        </th>\n        <th scope=\"true\"\n          class=\"w-25\">\n          {{ 'Admin.LoginNotification.FeatureKeys' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_from\">\n          {{ 'Admin.LoginNotification.VisibleFrom' | transloco }}\n          <p-sortIcon field=\"visible_from\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible_until\">\n          {{ 'Admin.LoginNotification.VisibleUntil' | transloco }}\n          <p-sortIcon field=\"visible_until\"></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=\"notification_type\">{{ item?.notification_type }}</td>\n        <td data-head=\"body\">{{ item?.body | textTruncate: 30 }}</td>\n\n\n        <td data-head=\"Is Permanent\">\n          <span [appDynamicBadge]=\"{\n                              itemsArray: [true, false],\n                              item: item?.is_permanent\n                          }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_permanent ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"feature_keys\">\n          <span *ngFor=\"let data of item?.feature_keys\"\n            class=\"badge m-1\"\n            [appDynamicBadge]=\"{ itemsArray: item?.feature_keys, item: data }\"\n            color=\"cyan\">{{ data }}</span>\n        </td>\n        <td data-head=\"visible_from\">{{ item?.visible_from | dateFormat }}</td>\n        <td data-head=\"visible_until\">{{ item?.visible_until | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              [routerLink]=\"[routers.loginNotifications + 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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.LoginNotification.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }] });
 class NewsletterDetailsComponent extends AppBaseComponent {
@@ -2701,7 +2703,7 @@ class NewsletterItemDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsletterItemDetailsComponent, deps: [{ token: i1.AdminService }, { token: i1$1.TagService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsletterItemDetailsComponent, selector: "pw-newsletter-item-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\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        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\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\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4$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: i5.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: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i15.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsletterItemDetailsComponent, selector: "pw-newsletter-item-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\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        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'quill-container': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\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\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4$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: i5.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: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i15.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2711,7 +2713,7 @@ __decorate([
 ], NewsletterItemDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsletterItemDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-newsletter-item-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\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        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\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\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-newsletter-item-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ isLoading ? '' : (data?.title ? data?.title : 'Add New') }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\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        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'quill-container': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\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\"\n                [buttonBusy]=\"buttonBusy\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.TagService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i3$2.DomSanitizer }], propDecorators: { placesRef: [{
                 type: ViewChild,
                 args: ['ngxPlaces']
@@ -3025,11 +3027,11 @@ class NewslettersListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewslettersListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewslettersListComponent, selector: "pw-newsletters-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\">Newsletters</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n      class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.newsletterDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Newsletter\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-3\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.newsletters\"\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=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"visible\"></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=\"Name\">\n          <a (click)=\"navigateNewsletterItems(item.id)\">\n            <span class=\"item-hoverable\">{{ item.name }}</span>\n          </a>\n        </td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Visible\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.visible }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\"\n            *rbacAllow=\"'SubscriptionSuperAdmin'\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.newsletterDetails + 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              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Newsletter Items\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"'/admin/newsletter/items'\"\n              [queryParams]=\"{ newsletter_id: item.id }\">\n              <i class=\"fa fa-tasks cta1-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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Newsletter.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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewslettersListComponent, selector: "pw-newsletters-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\">Newsletters</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n      class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.newsletterDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Newsletter\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-3\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.newsletters\"\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=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"visible\"></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=\"Name\">\n          <a (click)=\"navigateNewsletterItems(item.id)\">\n            <span class=\"item-hoverable\">{{ item.name }}</span>\n          </a>\n        </td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Visible\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.visible }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\"\n            *rbacAllow=\"'SubscriptionSuperAdmin'\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.newsletterDetails + 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              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Newsletter Items\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"'/admin/newsletter/items'\"\n              [queryParams]=\"{ newsletter_id: item.id }\">\n              <i class=\"fa fa-tasks cta1-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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Newsletter.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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewslettersListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-newsletters-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\">Newsletters</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n      class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.newsletterDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Newsletter\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-3\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.newsletters\"\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=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"visible\"></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=\"Name\">\n          <a (click)=\"navigateNewsletterItems(item.id)\">\n            <span class=\"item-hoverable\">{{ item.name }}</span>\n          </a>\n        </td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Visible\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.visible }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\"\n            *rbacAllow=\"'SubscriptionSuperAdmin'\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.newsletterDetails + 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              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Newsletter Items\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"'/admin/newsletter/items'\"\n              [queryParams]=\"{ newsletter_id: item.id }\">\n              <i class=\"fa fa-tasks cta1-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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Newsletter.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-newsletters-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\">Newsletters</h2>\n    <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n      class=\"btn btn-outline-primary btn-sm float-end m-0\"\n      [routerLink]=\"[routers.newsletterDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Newsletter\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-3\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #tt\n    [value]=\"data.newsletters\"\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=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Label.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"visible\">\n          {{ 'Label.IsVisible' | transloco }}\n          <p-sortIcon field=\"visible\"></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=\"Name\">\n          <a (click)=\"navigateNewsletterItems(item.id)\">\n            <span class=\"item-hoverable\">{{ item.name }}</span>\n          </a>\n        </td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Visible\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.visible }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.visible ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\"\n            *rbacAllow=\"'SubscriptionSuperAdmin'\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.newsletterDetails + 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              (click)=\"onDelete(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Newsletter Items\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"'/admin/newsletter/items'\"\n              [queryParams]=\"{ newsletter_id: item.id }\">\n              <i class=\"fa fa-tasks cta1-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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n</div>\n<div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Newsletter.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class NewsletterComponent extends AppBaseComponent {
@@ -3219,11 +3221,11 @@ class PermissionsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PermissionsListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PermissionsListComponent, selector: "pw-permissions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\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 mt table-responsive -0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : '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.permissionsDetails + permissions.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              <i\n                                (click)=\"onDelete(permissions)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"!loading && data.unfiltered_count === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessagee' | transloco\"> </pw-no-data>\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)}\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: PermissionsListComponent, selector: "pw-permissions-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\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 mt table-responsive -0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.permissionsDetails + permissions.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              <i\n                                (click)=\"onDelete(permissions)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"!loading && data.unfiltered_count === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessagee' | transloco\"> </pw-no-data>\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)}\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: PermissionsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-permissions-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\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 mt table-responsive -0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : '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.permissionsDetails + permissions.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              <i\n                                (click)=\"onDelete(permissions)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"!loading && data.unfiltered_count === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessagee' | transloco\"> </pw-no-data>\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)}\n"] }]
+            args: [{ selector: 'pw-permissions-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Permissions</h2>\n    <button class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.permissionsDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Permissions\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 mt table-responsive -0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.permissions\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Permissions...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Permissions.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-permissions>\n      <tr>\n        <td data-head=\"Name\">{{ permissions.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: permissions?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ permissions?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.permissionsDetails + permissions.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              <i\n                                (click)=\"onDelete(permissions)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ data.object_count }}</span>\n</div>\n<div *ngIf=\"!loading && data.unfiltered_count === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessagee' | transloco\"> </pw-no-data>\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)}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class PermissionsTabsComponent {
@@ -3443,11 +3445,11 @@ class RolesListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RolesListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RolesListComponent, selector: "pw-admin-roles-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\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 mt-0 table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : '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.rolesDetails + role.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              <i\n                                (click)=\"onDeleteRole(role)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\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)}\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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RolesListComponent, selector: "pw-admin-roles-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\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 mt-0 table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.rolesDetails + role.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              <i\n                                (click)=\"onDeleteRole(role)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\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)}\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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RolesListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-roles-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\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 mt-0 table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : '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.rolesDetails + role.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              <i\n                                (click)=\"onDeleteRole(role)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\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)}\n"] }]
+            args: [{ selector: 'pw-admin-roles-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Roles</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      data-cy=\"create-role\"\n      [routerLink]=\"[routers.rolesDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Role\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 mt-0 table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"roles\"\n    [paginator]=\"totalRecords !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Role...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"active\">\n          {{ 'Admin.Roles.IsActive' | transloco }}\n          <p-sortIcon field=\"active\"></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-role>\n      <tr>\n        <td data-head=\"Name\">{{ role.name }}</td>\n        <td data-head=\"Is Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: role?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ role?.active ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.rolesDetails + role.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              <i\n                                (click)=\"onDeleteRole(role)\"\n                                class=\"fa fa-trash delete-icon\"\n                                aria-hidden=\"true\"\n                            ></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 *ngIf=\"totalRecords !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Permissions.NoDataMessage' | transloco\"> </pw-no-data>\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)}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 class ProductDetailsComponent extends AppBaseComponent {
@@ -3757,7 +3759,7 @@ class ProductDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$1.ProductService }, { token: i11.NgbModal }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n      <div class=\"my-4\" *ngIf=\"!isLoading\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"descriptionEditor\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupInstructionsEditor\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupEmployeesEditor\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$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: i4$3.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i4$3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { 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: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { 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: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n      <div class=\"my-4\" *ngIf=\"!isLoading\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"descriptionEditor\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupInstructionsEditor\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupEmployeesEditor\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$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: i4$3.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i4$3.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { 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: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -3767,7 +3769,7 @@ __decorate([
 ], ProductDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProductDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-product-details', template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n      <div class=\"my-4\" *ngIf=\"!isLoading\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"descriptionEditor\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupInstructionsEditor\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupEmployeesEditor\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
+            args: [{ selector: 'pw-product-details', template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n    <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n      <div class=\"my-4\" *ngIf=\"!isLoading\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"descriptionEditor\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupInstructionsEditor\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" id=\"signupEmployeesEditor\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.ProductService }, { type: i11.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
 class ProductInsightComponent extends AppBaseComponent {
@@ -3986,11 +3988,11 @@ class UsersListForProductComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UsersListForProductComponent, deps: [{ token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UsersListForProductComponent, selector: "pw-users-list-for-product", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n        Users list for Product ({{ productName }})\n      </h3>\n    </div>\n  </div>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\">\n  <p-table #dt\n    [value]=\"users\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n    [globalFilterFields]=\"['first_name', 'email']\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search User...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"joined_at\">\n          {{ 'Admin.Products.JoinedAt' | transloco }}\n          <p-sortIcon field=\"joined_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Products.LastSignInAt' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th 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=\"Name\">\n          <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n        </td>\n        <td data-head=\"Email\">{{ item.email }}</td>\n        <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n        <td data-head=\"Last Sign In At\">{{ item?.last_sign_in_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-template [ngIf]=\"currentUser && item.id !== currentUser.id\">\n              <li ngbTooltip=\"Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\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: "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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UsersListForProductComponent, selector: "pw-users-list-for-product", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n        Users list for Product ({{ productName }})\n      </h3>\n    </div>\n  </div>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\">\n  <p-table #dt\n    [value]=\"users\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n    [globalFilterFields]=\"['first_name', 'email']\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search User...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"joined_at\">\n          {{ 'Admin.Products.JoinedAt' | transloco }}\n          <p-sortIcon field=\"joined_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Products.LastSignInAt' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th 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=\"Name\">\n          <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n        </td>\n        <td data-head=\"Email\">{{ item.email }}</td>\n        <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n        <td data-head=\"Last Sign In At\">{{ item?.last_sign_in_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <ng-template [ngIf]=\"currentUser && item.id !== currentUser.id\">\n              <li ngbTooltip=\"Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\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: "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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UsersListForProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-users-list-for-product', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n        Users list for Product ({{ productName }})\n      </h3>\n    </div>\n  </div>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\">\n  <p-table #dt\n    [value]=\"users\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n    [globalFilterFields]=\"['first_name', 'email']\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search User...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"joined_at\">\n          {{ 'Admin.Products.JoinedAt' | transloco }}\n          <p-sortIcon field=\"joined_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Products.LastSignInAt' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th 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=\"Name\">\n          <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n        </td>\n        <td data-head=\"Email\">{{ item.email }}</td>\n        <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n        <td data-head=\"Last Sign In At\">{{ item?.last_sign_in_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-template [ngIf]=\"currentUser && item.id !== currentUser.id\">\n              <li ngbTooltip=\"Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n" }]
+            args: [{ selector: 'pw-users-list-for-product', template: "<div class=\"row\">\n  <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n        Users list for Product ({{ productName }})\n      </h3>\n    </div>\n  </div>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\">\n  <p-table #dt\n    [value]=\"users\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n    [globalFilterFields]=\"['first_name', 'email']\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search User...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr class=\"head\">\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"first_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"joined_at\">\n          {{ 'Admin.Products.JoinedAt' | transloco }}\n          <p-sortIcon field=\"joined_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Products.LastSignInAt' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th 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=\"Name\">\n          <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n        </td>\n        <td data-head=\"Email\">{{ item.email }}</td>\n        <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n        <td data-head=\"Last Sign In At\">{{ item?.last_sign_in_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <ng-template [ngIf]=\"currentUser && item.id !== currentUser.id\">\n              <li ngbTooltip=\"Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i0.Injector }] });
 class AgentDetailsComponent extends AppBaseComponent {
@@ -4137,11 +4139,11 @@ class SubscriptionProductsComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionProductsComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i0.Injector }, { token: i1$1.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionProductsComponent, selector: "pw-subscription-products", usesInheritance: true, ngImport: i0, template: "<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]=\"subscriptionProducts\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</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=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </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=\"Billing Frequency\">\n          {{ item.billing_frequency }}\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=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </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: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionProductsComponent, selector: "pw-subscription-products", usesInheritance: true, ngImport: i0, template: "<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]=\"subscriptionProducts\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</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=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </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=\"Billing Frequency\">\n          {{ item.billing_frequency }}\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=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </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: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: 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: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionProductsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-products', template: "<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]=\"subscriptionProducts\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</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=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </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=\"Billing Frequency\">\n          {{ item.billing_frequency }}\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=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-subscription-products', template: "<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]=\"subscriptionProducts\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</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=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </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=\"Billing Frequency\">\n          {{ item.billing_frequency }}\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=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i0.Injector }, { type: i1$1.ProductService }] });
 class SubscriptionUsersComponent extends AppBaseComponent {
@@ -4242,11 +4244,11 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.AuthService }, { token: i1$1.WindowService }, { token: i1.AdminService }, { token: i1$1.CustomToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t{{ user.first_name }}\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline\">\n            <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onImpersonate(user)\" class=\"fas fa-people-arrows\" aria-hidden=\"true\"></i>\n            </li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2fa\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{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: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t{{ user.first_name }}\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n            <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onImpersonate(user)\" class=\"fas fa-people-arrows\" aria-hidden=\"true\"></i>\n            </li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2fa\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{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: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { 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: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t{{ user.first_name }}\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline\">\n            <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onImpersonate(user)\" class=\"fas fa-people-arrows\" aria-hidden=\"true\"></i>\n            </li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2fa\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
+            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t{{ user.first_name }}\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n            <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n              <i (click)=\"onImpersonate(user)\" class=\"fas fa-people-arrows\" aria-hidden=\"true\"></i>\n            </li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2fa\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AuthService }, { type: i1$1.WindowService }, { type: i1.AdminService }, { type: i1$1.CustomToastService }], propDecorators: { passwordValidationModalForImpersonate: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForImpersonate', { static: false }]
@@ -4364,11 +4366,11 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionAgentsListComponent, deps: [{ token: i1.AdminService }, { token: i11.NgbDateParserFormatter }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!newEmbass\">\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\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]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\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            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Ambassadors...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</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]=\"[\n                                    '/admin/subscription/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\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(agent?.user_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    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecords === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"newEmbass\">\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassador\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" />\n          </div>\n          <div class=\"col\">\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n              <div class=\"input-group-append\">\n                <button class=\"btn btn-primary\"\n                  (click)=\"d.toggle()\"\n                  type=\"button\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center mt-2\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n        class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n</ng-container>\n", styles: ["#mainFrom{padding-bottom:144px}\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: "component", type: i5.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: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: "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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!newEmbass\">\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\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]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\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            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Ambassadors...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscription/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\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(agent?.user_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    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecords === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"newEmbass\">\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassador\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" />\n          </div>\n          <div class=\"col\">\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n              <div class=\"input-group-append\">\n                <button class=\"btn btn-primary\"\n                  (click)=\"d.toggle()\"\n                  type=\"button\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center mt-2\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n        class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n</ng-container>\n", styles: ["#mainFrom{padding-bottom:144px}\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: "component", type: i5.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: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: "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" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionAgentsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-agents-list', template: "<ng-container *ngIf=\"!newEmbass\">\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\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]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\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            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Ambassadors...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</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]=\"[\n                                    '/admin/subscription/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\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(agent?.user_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    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecords === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"newEmbass\">\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassador\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" />\n          </div>\n          <div class=\"col\">\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n              <div class=\"input-group-append\">\n                <button class=\"btn btn-primary\"\n                  (click)=\"d.toggle()\"\n                  type=\"button\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center mt-2\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n        class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n</ng-container>\n", styles: ["#mainFrom{padding-bottom:144px}\n"] }]
+            args: [{ selector: 'pw-subscription-agents-list', template: "<ng-container *ngIf=\"!newEmbass\">\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\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]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\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            [(ngModel)]=\"searchText\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Ambassadors...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            class=\"mw-90\" />\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscription/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\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(agent?.user_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    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecords === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"newEmbass\">\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            field=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassador\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" />\n          </div>\n          <div class=\"col\">\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n              <div class=\"input-group-append\">\n                <button class=\"btn btn-primary\"\n                  (click)=\"d.toggle()\"\n                  type=\"button\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"text-center mt-2\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n        class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n</ng-container>\n", styles: ["#mainFrom{padding-bottom:144px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i11.NgbDateParserFormatter }, { type: i0.Injector }] });
 class SubscriptionDetailsComponent extends AppBaseComponent {
@@ -4849,11 +4851,11 @@ class SubscriptionInsightNpsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionInsightNpsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i1$1.CommonService }, { token: i11.NgbModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionInsightNpsComponent, selector: "pw-subscription-insight-nps", viewQueries: [{ propertyName: "content", first: true, predicate: ["showComment"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- select date -->\n<div class=\"mb-3\">\n  <h5 class=\"mb-4\">Select a date</h5>\n  <div class=\"row\">\n    <!-- startDate -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"start date\"\n          [(ngModel)]=\"startDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #d=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"d.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- end date -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"end date\"\n          [(ngModel)]=\"endDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #c=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"c.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- end -->\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"graphLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<ng-template [ngIf]=\"graph\">\n  <plotly-plot [data]=\"graph?.data\"\n    [layout]=\"graph?.layout\"></plotly-plot>\n</ng-template>\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\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]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">User Name</th>\n        <th scope=\"true\">Product Name</th>\n        <th scope=\"true\">Feedback Question Name</th>\n        <th scope=\"true\">Comment</th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          <button *ngIf=\"item?.comment\"\n            class=\"btn btn-sm btn-info\"\n            (click)=\"openComment(item?.comment)\">\n            Display\n          </button>\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-template [ngIf]=\"currentUser && item.user_id !== currentUser.id\">\n              <li ngbTooltip=\"Send Chat Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">Total: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n</div>\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\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: "component", type: i2$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { 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.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.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i11.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionInsightNpsComponent, selector: "pw-subscription-insight-nps", viewQueries: [{ propertyName: "content", first: true, predicate: ["showComment"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- select date -->\n<div class=\"mb-3\">\n  <h5 class=\"mb-4\">Select a date</h5>\n  <div class=\"row\">\n    <!-- startDate -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"start date\"\n          [(ngModel)]=\"startDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #d=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"d.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- end date -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"end date\"\n          [(ngModel)]=\"endDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #c=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"c.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- end -->\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"graphLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<ng-template [ngIf]=\"graph\">\n  <plotly-plot [data]=\"graph?.data\"\n    [layout]=\"graph?.layout\"></plotly-plot>\n</ng-template>\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\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]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">User Name</th>\n        <th scope=\"true\">Product Name</th>\n        <th scope=\"true\">Feedback Question Name</th>\n        <th scope=\"true\">Comment</th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          <button *ngIf=\"item?.comment\"\n            class=\"btn btn-sm btn-info\"\n            (click)=\"openComment(item?.comment)\">\n            Display\n          </button>\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <ng-template [ngIf]=\"currentUser && item.user_id !== currentUser.id\">\n              <li ngbTooltip=\"Send Chat Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">Total: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n</div>\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\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: "component", type: i2$2.PlotlyComponent, selector: "plotly-plot", inputs: ["data", "layout", "config", "frames", "style", "theme", "divId", "revision", "className", "debug", "useResizeHandler", "updateOnLayoutChange", "updateOnDataChange", "updateOnlyWithRevision"], outputs: ["initialized", "update", "purge", "error", "afterExport", "afterPlot", "animated", "animatingFrame", "animationInterrupted", "autoSize", "beforeExport", "beforeHover", "buttonClicked", "click", "plotlyClick", "clickAnnotation", "deselect", "doubleClick", "framework", "hover", "legendClick", "legendDoubleClick", "react", "relayout", "relayouting", "restyle", "redraw", "selected", "selecting", "sliderChange", "sliderEnd", "sliderStart", "sunburstclick", "transitioning", "transitionInterrupted", "unhover", "treemapclick", "webglcontextlost"] }, { 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.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.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i11.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: i13.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionInsightNpsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-insight-nps', template: "<!-- select date -->\n<div class=\"mb-3\">\n  <h5 class=\"mb-4\">Select a date</h5>\n  <div class=\"row\">\n    <!-- startDate -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"start date\"\n          [(ngModel)]=\"startDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #d=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"d.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- end date -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"end date\"\n          [(ngModel)]=\"endDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #c=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"c.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- end -->\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"graphLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<ng-template [ngIf]=\"graph\">\n  <plotly-plot [data]=\"graph?.data\"\n    [layout]=\"graph?.layout\"></plotly-plot>\n</ng-template>\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\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]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">User Name</th>\n        <th scope=\"true\">Product Name</th>\n        <th scope=\"true\">Feedback Question Name</th>\n        <th scope=\"true\">Comment</th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          <button *ngIf=\"item?.comment\"\n            class=\"btn btn-sm btn-info\"\n            (click)=\"openComment(item?.comment)\">\n            Display\n          </button>\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <ng-template [ngIf]=\"currentUser && item.user_id !== currentUser.id\">\n              <li ngbTooltip=\"Send Chat Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">Total: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n</div>\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pw-subscription-insight-nps', template: "<!-- select date -->\n<div class=\"mb-3\">\n  <h5 class=\"mb-4\">Select a date</h5>\n  <div class=\"row\">\n    <!-- startDate -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"start date\"\n          [(ngModel)]=\"startDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #d=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"d.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <!-- end date -->\n    <div class=\"col-12 col-sm-3\">\n      <div class=\"input-group\">\n        <input class=\"form-control\"\n          placeholder=\"end date\"\n          [(ngModel)]=\"endDate\"\n          (dateSelect)=\"onDateSelect()\"\n          ngbDatepicker\n          #c=\"ngbDatepicker\" />\n        <div class=\"input-group-append\">\n          <button class=\"btn btn-primary\"\n            (click)=\"c.toggle()\"\n            type=\"button\">\n            <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- end -->\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"graphLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<ng-template [ngIf]=\"graph\">\n  <plotly-plot [data]=\"graph?.data\"\n    [layout]=\"graph?.layout\"></plotly-plot>\n</ng-template>\n\n<div class=\"row m-0\">\n  <h2 class=\"card-title p-0 my-4\">User Feedbacks</h2>\n</div>\n\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]=\"totalRecords === 0\">\n  <p-table #tt\n    [value]=\"feedbacks\"\n    [paginator]=\"totalRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [lazy]=\"true\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"created_at\">\n          Created At\n          <p-sortIcon field=\"created_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">User Name</th>\n        <th scope=\"true\">Product Name</th>\n        <th scope=\"true\">Feedback Question Name</th>\n        <th scope=\"true\">Comment</th>\n        <th scope=\"true\"\n          pSortableColumn=\"value\">\n          Value\n          <p-sortIcon field=\"value\"></p-sortIcon>\n        </th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">Action</th>\n      </tr>\n    </ng-template>\n    <!-- Table Body -->\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n        <td data-head=\"user_name\">\n          <a [routerLink]=\"['/members/' + item.user_slug]\">{{ item?.user_name }}</a>\n        </td>\n        <td data-head=\"product_name\">{{ item?.product_name }}</td>\n        <td data-head=\"feedback_question_name\">{{ item?.feedback_question_name }}</td>\n        <td data-head=\"comment\">\n          <button *ngIf=\"item?.comment\"\n            class=\"btn btn-sm btn-info\"\n            (click)=\"openComment(item?.comment)\">\n            Display\n          </button>\n        </td>\n        <td data-head=\"value\">\n          <span [ngClass]=\"{'fw-bold text-danger':item?.value <= 6,'fw-bold text-success':item.value>8}\">\n            {{ item?.value }}\n          </span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <ng-template [ngIf]=\"currentUser && item.user_id !== currentUser.id\">\n              <li ngbTooltip=\"Send Chat Message\"\n                *rbacAllow=\"'Pages.Chat'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"['/message']\"\n                [fragment]=\"item.user_slug\">\n                <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ng-template>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">Total: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" message=\"No Feedback Found\"> </pw-no-data>\n</div>\n\n<ng-template #showComment\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"mb-0\">Comment</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h6 class=\"text-center modal-basic-title\">{{ commentToShow }}</h6>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i1$1.CommonService }, { type: i11.NgbModal }, { type: i0.ChangeDetectorRef }], propDecorators: { content: [{
                 type: ViewChild,
                 args: ['showComment', { static: true }]
@@ -5151,11 +5153,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<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: i4$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: i5$1.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 list-action\">\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: i4$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: i5$1.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<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"] }]
+            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 list-action\">\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']
@@ -5316,11 +5318,11 @@ class TagsCategoryComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsCategoryComponent, deps: [{ token: i0.Injector }, { token: i1$1.TagService }, { token: i1$1.CustomToastService }, { token: i11.NgbModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagsCategoryComponent, selector: "pw-admin-tags-category", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Categories</h2>\n    <button data-cy=\"create-category\" *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\" (click)=\"onCategoryEdit(tagCategoryModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Category </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>Tags needs to be associated to \"categories\". You can create them here.</p>\n</div>\n<div class=\"w-100 text-center p-2 mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"tagCategories\"\n    [paginator]=\"totalCategoryRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalCategoryRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Category...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></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=\"Name\">{{ item?.name }}</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              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onCategoryEdit(tagCategoryModal, item)\">\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.Roles.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=\"totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalCategoryRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalCategoryRecords }}</span>\n</div>\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- Category Template -->\n<ng-template #tagCategoryModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Category</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form action=\"\"\n      #editForm=\"ngForm\">\n      <input type=\"text\"\n        class=\"form-control\"\n        data-cy=\"category-field\"\n        name=\"name\"\n        placeholder=\"Category Name\"\n        [(ngModel)]=\"categoryModel.name\"\n        #name=\"ngModel\"\n        required />\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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)}\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.ɵ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: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagsCategoryComponent, selector: "pw-admin-tags-category", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Categories</h2>\n    <button data-cy=\"create-category\" *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\" (click)=\"onCategoryEdit(tagCategoryModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Category </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>Tags needs to be associated to \"categories\". You can create them here.</p>\n</div>\n<div class=\"w-100 text-center p-2 mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"tagCategories\"\n    [paginator]=\"totalCategoryRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalCategoryRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Category...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onCategoryEdit(tagCategoryModal, item)\">\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.Roles.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=\"totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalCategoryRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalCategoryRecords }}</span>\n</div>\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- Category Template -->\n<ng-template #tagCategoryModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Category</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form action=\"\"\n      #editForm=\"ngForm\">\n      <input type=\"text\"\n        class=\"form-control\"\n        data-cy=\"category-field\"\n        name=\"name\"\n        placeholder=\"Category Name\"\n        [(ngModel)]=\"categoryModel.name\"\n        #name=\"ngModel\"\n        required />\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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)}\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.ɵ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: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-tags-category', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Categories</h2>\n    <button data-cy=\"create-category\" *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\" (click)=\"onCategoryEdit(tagCategoryModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Category </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>Tags needs to be associated to \"categories\". You can create them here.</p>\n</div>\n<div class=\"w-100 text-center p-2 mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"tagCategories\"\n    [paginator]=\"totalCategoryRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalCategoryRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Category...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></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=\"Name\">{{ item?.name }}</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              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onCategoryEdit(tagCategoryModal, item)\">\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.Roles.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=\"totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalCategoryRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalCategoryRecords }}</span>\n</div>\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- Category Template -->\n<ng-template #tagCategoryModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Category</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form action=\"\"\n      #editForm=\"ngForm\">\n      <input type=\"text\"\n        class=\"form-control\"\n        data-cy=\"category-field\"\n        name=\"name\"\n        placeholder=\"Category Name\"\n        [(ngModel)]=\"categoryModel.name\"\n        #name=\"ngModel\"\n        required />\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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)}\n"] }]
+            args: [{ selector: 'pw-admin-tags-category', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Categories</h2>\n    <button data-cy=\"create-category\" *rbacAllow=\"'Pages.Admin.Roles.Create'\"\n      class=\"btn btn-sm btn-outline-primary float-end\" (click)=\"onCategoryEdit(tagCategoryModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Category </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>Tags needs to be associated to \"categories\". You can create them here.</p>\n</div>\n<div class=\"w-100 text-center p-2 mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <p-table #dt\n    [value]=\"tagCategories\"\n    [paginator]=\"totalCategoryRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalCategoryRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Category...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onCategoryEdit(tagCategoryModal, item)\">\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.Roles.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=\"totalCategoryRecords === 0 && totalRecordsUnFiltered !== 0\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" />\n  </div>\n  <span class=\"total-records-count\" *ngIf=\"totalCategoryRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalCategoryRecords }}</span>\n</div>\n<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.NoCategoryDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- Category Template -->\n<ng-template #tagCategoryModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Category</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form action=\"\"\n      #editForm=\"ngForm\">\n      <input type=\"text\"\n        class=\"form-control\"\n        data-cy=\"category-field\"\n        name=\"name\"\n        placeholder=\"Category Name\"\n        [(ngModel)]=\"categoryModel.name\"\n        #name=\"ngModel\"\n        required />\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close()\">\n      {{ 'Button.Cancel' | transloco }}\n    </button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.TagService }, { type: i1$1.CustomToastService }, { type: i11.NgbModal }, { type: i0.ChangeDetectorRef }] });
 class TagsListComponent extends AppBaseComponent {
@@ -5458,11 +5460,11 @@ class TagsListComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsListComponent, deps: [{ token: i0.Injector }, { token: i11.NgbModal }, { token: i1$1.TagService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TagsListComponent, selector: "pw-admin-tags-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n      (click)=\"onTagEdit(tagModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">{{ item?.category_name }}</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              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onTagEdit(tagModal, item)\">\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.Roles.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=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 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=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n<!-- Tag Modal Template -->\n<ng-template #tagModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Tag</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form [formGroup]=\"form\">\n      <div class=\"mb-3\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          placeholder=\"Tag Name\" />\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagTypes\"\n          formControlName=\"tag_type\"\n          placeholder=\"Tag Types\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagCategories\"\n          formControlName=\"tag_category_id\"\n          placeholder=\"Category\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close(); form.reset()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: "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: TagsListComponent, selector: "pw-admin-tags-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n      (click)=\"onTagEdit(tagModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">{{ item?.category_name }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onTagEdit(tagModal, item)\">\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.Roles.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=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 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=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n<!-- Tag Modal Template -->\n<ng-template #tagModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Tag</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form [formGroup]=\"form\">\n      <div class=\"mb-3\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          placeholder=\"Tag Name\" />\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagTypes\"\n          formControlName=\"tag_type\"\n          placeholder=\"Tag Types\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagCategories\"\n          formControlName=\"tag_category_id\"\n          placeholder=\"Category\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close(); form.reset()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\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: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { 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: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { 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: "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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TagsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-tags-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n      (click)=\"onTagEdit(tagModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">{{ item?.category_name }}</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              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onTagEdit(tagModal, item)\">\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.Roles.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=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 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=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n<!-- Tag Modal Template -->\n<ng-template #tagModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Tag</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form [formGroup]=\"form\">\n      <div class=\"mb-3\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          placeholder=\"Tag Name\" />\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagTypes\"\n          formControlName=\"tag_type\"\n          placeholder=\"Tag Types\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagCategories\"\n          formControlName=\"tag_category_id\"\n          placeholder=\"Category\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close(); form.reset()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pw-admin-tags-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Tags</h2>\n    <button *rbacAllow=\"'Pages.Admin.Roles.Create'\" data-cy=\"create-tag\" class=\"btn btn-sm btn-outline-primary float-end\"\n      (click)=\"onTagEdit(tagModal, null)\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tag </button>\n  </div>\n</div>\n\n<div class=\"p-2\">\n  <p>\n    Here you can define the tags to be used site-wide.<br /> Tags need to be associated to categories (definable in the\n    \"category\" tab).<br /> Tags also need to be associated to a \"tag_type\", which is the entity you want to associate the\n    tag to, for example \"user\".\n  </p>\n</div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalTagRecordsUnFilter === 0\">\n  <p-table #dt\n    [value]=\"tags\"\n    [paginator]=\"totalTagRecords !== 0\"\n    [rows]=\"PAGE_SIZE\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalTagRecords\"\n    [filterDelay]=\"1000\"\n    [customSort]=\"true\"\n    [loading]=\"loading\">\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          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search Tag...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"name\">\n          {{ 'Label.Name' | transloco }}\n          <p-sortIcon field=\"name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"tag_category_id\">\n          {{ 'Admin.Tags.Category' | transloco }}\n          <p-sortIcon field=\"tag_category_id\"></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=\"Name\">{{ item?.name }}</td>\n        <td data-head=\"Category\">{{ item?.category_name }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Roles.Edit'\"\n              (click)=\"onTagEdit(tagModal, item)\">\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.Roles.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=\"totalTagRecords === 0 && totalTagRecordsUnFilter !== 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=\"totalTagRecords !== 0\" >{{ 'Label.Total' | transloco }}: {{ totalTagRecords }}</span>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tags.Category' | transloco\"\n  *ngIf=\"totalTagRecordsUnFilter === 0 && !loading\">\n</pw-no-data>\n<!-- Tag Modal Template -->\n<ng-template #tagModal\n  let-modal>\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title\"\n      id=\"modal-basic-title\">Tag</h4>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <form [formGroup]=\"form\">\n      <div class=\"mb-3\">\n        <input type=\"text\"\n          class=\"form-control\"\n          formControlName=\"name\"\n          placeholder=\"Tag Name\" />\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagTypes\"\n          formControlName=\"tag_type\"\n          placeholder=\"Tag Types\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n      <div class=\"mb-3\">\n        <p-dropdown [options]=\"tagCategories\"\n          formControlName=\"tag_category_id\"\n          placeholder=\"Category\"\n          [style]=\"{ width: '100%' }\">\n        </p-dropdown>\n      </div>\n    </form>\n  </div>\n  <div class=\"modal-footer\">\n    <button type=\"button\"\n      class=\"btn btn-outline-default\"\n      (click)=\"modal.close(); form.reset()\">{{ 'Button.Cancel' | transloco }}</button>\n    <button type=\"button\"\n      class=\"btn btn-primary\"\n      [buttonBusy]=\"buttonBusy\"\n      (click)=\"onSave()\">\n      {{ 'Button.Save' | transloco }}\n    </button>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i11.NgbModal }, { type: i1$1.TagService }, { type: i0.ChangeDetectorRef }] });
 class TagsTabsComponent {
@@ -5593,11 +5595,11 @@ class TipsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TipsComponent, deps: [{ token: i1$1.TipsService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TipsComponent, selector: "pw-tips-list", usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end\">\n  <h2 class=\"card-title float-start\">Tours</h2>\n  <a data-cy=\"create-tip\"\n    *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.tipsDetails + '/add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tour\n  </a>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive w-100\"\n  *ngIf=\"isLoaded\">\n  <p-table [value]=\"data.tips\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Instructions' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.IsActive' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Updated' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-tip>\n      <tr>\n        <td data-head=\"Name\">{{ tip.name }}</td>\n        <td data-head=\"Instructions\"\n          class=\"w-md-50\">{{ tip.instructions }}</td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: tip?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ tip?.active }}</span>\n        </td>\n        <td data-head=\"Updated On\">{{ tip.updated_at | dateFormat }}</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              *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n              [routerLink]=\"[routers.tipsDetails + tip.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tips.NoDataMessage' | transloco\"\n  *ngIf=\"data.tips.length === 0 && isLoaded\">\n</pw-no-data>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TipsComponent, selector: "pw-tips-list", usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end\">\n  <h2 class=\"card-title float-start\">Tours</h2>\n  <a data-cy=\"create-tip\"\n    *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.tipsDetails + '/add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tour\n  </a>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive w-100\"\n  *ngIf=\"isLoaded\">\n  <p-table [value]=\"data.tips\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Instructions' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.IsActive' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Updated' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-tip>\n      <tr>\n        <td data-head=\"Name\">{{ tip.name }}</td>\n        <td data-head=\"Instructions\"\n          class=\"w-md-50\">{{ tip.instructions }}</td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: tip?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ tip?.active }}</span>\n        </td>\n        <td data-head=\"Updated On\">{{ tip.updated_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n              [routerLink]=\"[routers.tipsDetails + tip.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tips.NoDataMessage' | transloco\"\n  *ngIf=\"data.tips.length === 0 && isLoaded\">\n</pw-no-data>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-tips-list', template: "<div class=\"col-xs-12 text-end\">\n  <h2 class=\"card-title float-start\">Tours</h2>\n  <a data-cy=\"create-tip\"\n    *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.tipsDetails + '/add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tour\n  </a>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive w-100\"\n  *ngIf=\"isLoaded\">\n  <p-table [value]=\"data.tips\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Instructions' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.IsActive' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Updated' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-tip>\n      <tr>\n        <td data-head=\"Name\">{{ tip.name }}</td>\n        <td data-head=\"Instructions\"\n          class=\"w-md-50\">{{ tip.instructions }}</td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: tip?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ tip?.active }}</span>\n        </td>\n        <td data-head=\"Updated On\">{{ tip.updated_at | dateFormat }}</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              *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n              [routerLink]=\"[routers.tipsDetails + tip.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tips.NoDataMessage' | transloco\"\n  *ngIf=\"data.tips.length === 0 && isLoaded\">\n</pw-no-data>\n" }]
+            args: [{ selector: 'pw-tips-list', template: "<div class=\"col-xs-12 text-end\">\n  <h2 class=\"card-title float-start\">Tours</h2>\n  <a data-cy=\"create-tip\"\n    *rbacAllow=\"'Pages.Admin.Product.Create'\"\n    class=\"btn btn-sm btn-outline-primary\"\n    [routerLink]=\"[routers.tipsDetails + '/add']\">\n    <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Tour\n  </a>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n\n<div class=\"primeng-datatable-container table-responsive w-100\"\n  *ngIf=\"isLoaded\">\n  <p-table [value]=\"data.tips\">\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Instructions' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.IsActive' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Tips.Updated' | transloco }}</th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-tip>\n      <tr>\n        <td data-head=\"Name\">{{ tip.name }}</td>\n        <td data-head=\"Instructions\"\n          class=\"w-md-50\">{{ tip.instructions }}</td>\n        <td data-head=\"Active\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: tip?.active }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ tip?.active }}</span>\n        </td>\n        <td data-head=\"Updated On\">{{ tip.updated_at | dateFormat }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n              [routerLink]=\"[routers.tipsDetails + tip.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n<pw-no-data [withImage]=\"true\" [message]=\"'Admin.Tips.NoDataMessage' | transloco\"\n  *ngIf=\"data.tips.length === 0 && isLoaded\">\n</pw-no-data>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TipsService }, { type: i0.Injector }] });
 class TipsTabsComponent {
@@ -7026,11 +7028,11 @@ class UserListComponent extends AppBaseComponent {
         this.adminService.remove2fa(this.remove2faUserId, this.subscriptionId).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserListComponent, deps: [{ token: i1.AdminService }, { token: i1$1.CustomToastService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i1$1.AuthService }, { token: i0.ChangeDetectorRef }, { token: i1$1.WindowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserListComponent, selector: "pw-admin-user-list", viewQueries: [{ propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create User\n    </a>\n  </div>\n</div>\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 mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-4\"\n            *ngIf=\"selectedOption\">\n            <p-multiSelect [options]=\"searchDataSource\"\n              (onChange)=\"onSearchCriteria($event)\"\n              [showToggleAll]=\"true\"\n              [(ngModel)]=\"criteria\"\n              [showHeader]=\"true\"\n              placeholder=\"Select {{ selectedOption.value }}s\"\n              maxSelectedLabels=\"2\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search User...\"\n              data-cy=\"user-search\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"wd-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sortIcon field=\"first_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sortIcon field=\"last_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sortIcon field=\"email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sortIcon field=\"slug\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n          </th>\n\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=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            <span *ngIf=\"user?.alpha\"\n              [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n            </span>\n            <span class=\"ms-2\"\n              *ngIf=\"user?.beta\"\n              [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n              <span class=\"ms-2\" *ngIf=\"user?.blocked\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            <span *ngIf=\"user?.current_sign_in_at;else lastSignin\">\n              {{ user.current_sign_in_at  | dateFormat }}\n            </span>\n            <ng-template #lastSignin>\n              {{ user.last_sign_in_at | dateFormat }}\n            </ng-template>\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Impersonate this user\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                  class=\"fas fa-people-arrows\"\n                                  (click)=\"onImpersonate(user)\"\n                                  aria-hidden=\"true\"\n                              ></i>\n              </li>\n              <ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n                <li ngbTooltip=\"Disable 2fa\"\n                  (click)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <ng-template [ngIf]=\"currentUser && user.id !== currentUser.id\">\n                <li ngbTooltip=\"Message\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <li ngbTooltip=\"Edit\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(user)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <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<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  (successEvent)=\"deleteUser($event)\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n      <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n    </div>\n  </div>\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [":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)}.search-input input{width:100%}.w-150{width:150px}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{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: i4$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: i5$1.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.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: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: UserListComponent, selector: "pw-admin-user-list", viewQueries: [{ propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create User\n    </a>\n  </div>\n</div>\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 mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-4\"\n            *ngIf=\"selectedOption\">\n            <p-multiSelect [options]=\"searchDataSource\"\n              (onChange)=\"onSearchCriteria($event)\"\n              [showToggleAll]=\"true\"\n              [(ngModel)]=\"criteria\"\n              [showHeader]=\"true\"\n              placeholder=\"Select {{ selectedOption.value }}s\"\n              maxSelectedLabels=\"2\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search User...\"\n              data-cy=\"user-search\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"wd-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sortIcon field=\"first_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sortIcon field=\"last_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sortIcon field=\"email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sortIcon field=\"slug\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n          </th>\n\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=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            <span *ngIf=\"user?.alpha\"\n              [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n            </span>\n            <span class=\"ms-2\"\n              *ngIf=\"user?.beta\"\n              [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n              <span class=\"ms-2\" *ngIf=\"user?.blocked\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            <span *ngIf=\"user?.current_sign_in_at;else lastSignin\">\n              {{ user.current_sign_in_at  | dateFormat }}\n            </span>\n            <ng-template #lastSignin>\n              {{ user.last_sign_in_at | dateFormat }}\n            </ng-template>\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Impersonate this user\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                  class=\"fas fa-people-arrows\"\n                                  (click)=\"onImpersonate(user)\"\n                                  aria-hidden=\"true\"\n                              ></i>\n              </li>\n              <ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n                <li ngbTooltip=\"Disable 2fa\"\n                  (click)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <ng-template [ngIf]=\"currentUser && user.id !== currentUser.id\">\n                <li ngbTooltip=\"Message\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <li ngbTooltip=\"Edit\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(user)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <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<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  (successEvent)=\"deleteUser($event)\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n      <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n    </div>\n  </div>\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [":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)}.search-input input{width:100%}.w-150{width:150px}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{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: i4$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: i5$1.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.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: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-user-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create User\n    </a>\n  </div>\n</div>\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 mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-4\"\n            *ngIf=\"selectedOption\">\n            <p-multiSelect [options]=\"searchDataSource\"\n              (onChange)=\"onSearchCriteria($event)\"\n              [showToggleAll]=\"true\"\n              [(ngModel)]=\"criteria\"\n              [showHeader]=\"true\"\n              placeholder=\"Select {{ selectedOption.value }}s\"\n              maxSelectedLabels=\"2\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search User...\"\n              data-cy=\"user-search\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"wd-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sortIcon field=\"first_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sortIcon field=\"last_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sortIcon field=\"email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sortIcon field=\"slug\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n          </th>\n\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=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            <span *ngIf=\"user?.alpha\"\n              [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n            </span>\n            <span class=\"ms-2\"\n              *ngIf=\"user?.beta\"\n              [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n              <span class=\"ms-2\" *ngIf=\"user?.blocked\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            <span *ngIf=\"user?.current_sign_in_at;else lastSignin\">\n              {{ user.current_sign_in_at  | dateFormat }}\n            </span>\n            <ng-template #lastSignin>\n              {{ user.last_sign_in_at | dateFormat }}\n            </ng-template>\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline\">\n              <li ngbTooltip=\"Impersonate this user\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                  class=\"fas fa-people-arrows\"\n                                  (click)=\"onImpersonate(user)\"\n                                  aria-hidden=\"true\"\n                              ></i>\n              </li>\n              <ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n                <li ngbTooltip=\"Disable 2fa\"\n                  (click)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <ng-template [ngIf]=\"currentUser && user.id !== currentUser.id\">\n                <li ngbTooltip=\"Message\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <li ngbTooltip=\"Edit\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(user)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <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<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  (successEvent)=\"deleteUser($event)\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n      <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n    </div>\n  </div>\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [":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)}.search-input input{width:100%}.w-150{width:150px}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
+            args: [{ selector: 'pw-admin-user-list', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">Users</h2>\n    <a class=\"btn btn-sm btn-outline-primary float-end\"\n      id=\"btn-create\"\n      *rbacAllow=\"'SuperAdmin'\"\n      [routerLink]=\"[routers.usersDetails + 'add']\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create User\n    </a>\n  </div>\n</div>\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 mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n  <div class=\"user-management-table table-responsive\">\n    <p-table #dt\n      [value]=\"users\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      (onLazyLoad)=\"onLazyLoad($event)\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-filter\">\n          <div class=\"col-sm-4\">\n            <p-multiSelect [options]=\"searchOptions\"\n              (onChange)=\"onSearchOptionChange($event)\"\n              placeholder=\"Filter users by role, product, or feature\"\n              [selectionLimit]=\"1\"\n              [(ngModel)]=\"filterSource\"\n              [showToggleAll]=\"true\"\n              [showHeader]=\"true\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"col-4\"\n            *ngIf=\"selectedOption\">\n            <p-multiSelect [options]=\"searchDataSource\"\n              (onChange)=\"onSearchCriteria($event)\"\n              [showToggleAll]=\"true\"\n              [(ngModel)]=\"criteria\"\n              [showHeader]=\"true\"\n              placeholder=\"Select {{ selectedOption.value }}s\"\n              maxSelectedLabels=\"2\"\n              appendTo=\"body\">\n            </p-multiSelect>\n          </div>\n          <div class=\"text-end\">\n            <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              size=\"50\"\n              placeholder=\"Search User...\"\n              data-cy=\"user-search\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n              class=\"wd-90\" />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\"\n            pSortableColumn=\"id\">\n            {{ 'Admin.Users.Id' | transloco }}\n            <p-sortIcon field=\"id\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"first_name\">\n            {{ 'Label.FirstName' | transloco }}\n            <p-sortIcon field=\"first_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"last_name\">\n            {{ 'Label.LastName' | transloco }}\n            <p-sortIcon field=\"last_name\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"email\">\n            {{ 'Label.Email' | transloco }}\n            <p-sortIcon field=\"email\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"slug\">\n            {{ 'Admin.Users.Slug' | transloco }}\n            <p-sortIcon field=\"slug\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"encrypted_password\">\n            {{ 'Admin.Users.EmailConfirm' | transloco }}\n            <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n          </th>\n\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=\"last_sign_in_at\">\n            {{ 'Admin.Users.LastLogin' | transloco }}\n            <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"signed_up_at\">\n            {{ 'Admin.Users.RegisteredOn' | transloco }}\n            <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n          </th>\n          <th scope=\"true\"\n            class=\"actions-list-four\">\n            {{ 'Label.Actions' | transloco }}\n          </th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-user>\n        <tr>\n          <td data-head=\"id\"> {{ user.id }}</td>\n          <td data-head=\"First Name\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n          <td data-head=\"Last Name\">{{ user.last_name }}\n            <span *ngIf=\"user?.alpha\"\n              [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n            </span>\n            <span class=\"ms-2\"\n              *ngIf=\"user?.beta\"\n              [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n              tooltipPosition=\"top\">\n              <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ user.email }}</td>\n          <td data-head=\"Slug\">{{ user.slug }}</td>\n          <td data-head=\"Email Confirm\">\n            <span [appDynamicBadge]=\"{\n                                itemsArray: [true, false],\n                                item: user?.has_password\n                            }\"\n              color=\"success-danger\"\n              class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n              <span class=\"ms-2\" *ngIf=\"user?.blocked\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n              </span>\n          </td>\n          <td data-head=\"S/m #\">\n            <span [ngClass]=\"{\n                              'text-danger fw-bold': user?.sessions_last_month < 3\n                          }\">{{ user?.sessions_last_month }}</span>\n          </td>\n          <td data-head=\"Last Login\">\n            <span *ngIf=\"user?.current_sign_in_at;else lastSignin\">\n              {{ user.current_sign_in_at  | dateFormat }}\n            </span>\n            <ng-template #lastSignin>\n              {{ user.last_sign_in_at | dateFormat }}\n            </ng-template>\n          </td>\n          <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Impersonate this user\"\n                *rbacAllow=\"'Pages.Alpha'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                  class=\"fas fa-people-arrows\"\n                                  (click)=\"onImpersonate(user)\"\n                                  aria-hidden=\"true\"\n                              ></i>\n              </li>\n              <ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n                <li ngbTooltip=\"Disable 2fa\"\n                  (click)=\"disable2fa(user?.id)\"\n                  *rbacAllow=\"'Pages.Alpha'\"\n                  class=\"me-2 me-sm-3\">\n                  <i class=\"fa fa-lock\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <ng-template [ngIf]=\"currentUser && user.id !== currentUser.id\">\n                <li ngbTooltip=\"Message\"\n                  *rbacAllow=\"chatPermission\"\n                  class=\"me-2 me-sm-3\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"user.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n              </ng-template>\n              <li ngbTooltip=\"Edit\"\n                *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.usersDetails + user.id]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (click)=\"onDelete(user)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <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<div *ngIf=\"!loading && totalRecordsUnFiltered === 0\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n</div>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n  (successEvent)=\"deleteUser($event)\">\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <p>{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}</p>\n      <p>{{ 'User.Account.Message.ConfirmPassword' | transloco }}</p>\n    </div>\n  </div>\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n  (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [":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)}.search-input input{width:100%}.w-150{width:150px}@media (min-width: 767px){.table-responsive td,.table-responsive th{font-size:11px!important}}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.CustomToastService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i1$1.AuthService }, { type: i0.ChangeDetectorRef }, { type: i1$1.WindowService }], propDecorators: { passwordValidationModalForUserDelete: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForUserDelete', { static: false }]
@@ -7182,11 +7184,11 @@ class IncidentListComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: IncidentListComponent, deps: [{ token: i0.Injector }, { token: i1$1.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: IncidentListComponent, selector: "pw-admin-incident-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n\t<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n\t\t<h2 class=\"card-title p-0 float-start\">Incidents</h2>\n\t\t<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n\t\t\t(click)=\"showList = !showList\"\n\t\t\thref=\"javascript:void(0)\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n\t\t\trole=\"button\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t{{ 'Label.AddNew' | transloco }} Incident\n\t\t</a>\n\t</div>\n</div>\n<div *ngIf=\"!isLoaded\"\n\tclass=\"w-100 text-center mt-3\">\n\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div *ngIf=\"showList\"\n\tclass=\"row faqlist primeng-datatable-container mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n\t<div class=\"col-12 px-0\">\n\t\t<p-table #tt\n\t\t\t[paginator]=\"totalRecords !== 0\"\n\t\t\t[rows]=\"PAGE_SIZE\"\n\t\t\t[totalRecords]=\"totalRecords\"\n\t\t\t[loading]=\"loading\"\n\t\t\t[lazy]=\"true\"\n\t\t\t[filterDelay]=\"1000\"\n\t\t\t[customSort]=\"true\"\n\t\t\t[value]=\"openIncidents\"\n\t\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t\t<ng-template pTemplate=\"caption\">\n\t\t\t\t<div class=\"search-filter justify-content-end\">\n\t\t\t\t\t<div class=\"text-end\">\n\t\t\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\tsize=\"50\"\n\t\t\t\t\t\t\tplaceholder=\"Search Incident...\"\n\t\t\t\t\t\t\tdata-cy=\"incident-search\"\n\t\t\t\t\t\t\tclass=\"wd-90\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"header\">\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Description' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"started_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.StartedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"started_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"resolved_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ResolvedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"resolved_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"last_check_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"last_check_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Duration' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tclass=\"actions-list-two\">\n\t\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"body\"\n\t\t\t\tlet-incident>\n\t\t\t\t<tr>\n\t\t\t\t\t<td data-head=\"description\"\n\t\t\t\t\t\tclass=\"description\">\n\t\t\t\t\t\t{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"serviceImpacted\">\n\t\t\t\t\t\t{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"startedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.started_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"resolvedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.resolved_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"lastCheckedAt\">\n\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t{{ incident?.last_check_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Duration\">\n\t\t\t\t\t\t<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n\t\t\t\t\t\t{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t\t<ul class=\"list-unstyled list-inline\">\n\t\t\t\t\t\t\t<li ngbTooltip=\"Edit\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"navigateToEdit(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li ngbTooltip=\"Delete\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t</p-table>\n    <div *ngIf=\"openIncidents.length === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n        [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n\t<span class=\"total-records-count\"*ngIf=\"openIncidents.length !== 0\" >Total: {{openIncidents.length }}</span>\n\t</div>\n</div>\n<pw-no-data [withImage]=\"true\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\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)}.incidents-wrapper .table thead th{border:0;border-bottom:1px solid rgb(222,226,230)}.incident-item{color:#3f3f44;font-size:14px;line-height:1.42857;padding:10px 0}.incident-item .description{color:var(--first)}.incident-item:last-child{border-bottom:0!important}.ql-editor.safe-html{margin:0;font-size:13px;padding:0}.safe-html p{margin:0;font-size:13px}\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.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.DatePipe, name: "date" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: IncidentListComponent, selector: "pw-admin-incident-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n\t<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n\t\t<h2 class=\"card-title p-0 float-start\">Incidents</h2>\n\t\t<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n\t\t\t(click)=\"showList = !showList\"\n\t\t\thref=\"javascript:void(0)\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n\t\t\trole=\"button\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t{{ 'Label.AddNew' | transloco }} Incident\n\t\t</a>\n\t</div>\n</div>\n<div *ngIf=\"!isLoaded\"\n\tclass=\"w-100 text-center mt-3\">\n\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div *ngIf=\"showList\"\n\tclass=\"row faqlist primeng-datatable-container mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n\t<div class=\"col-12 px-0\">\n\t\t<p-table #tt\n\t\t\t[paginator]=\"totalRecords !== 0\"\n\t\t\t[rows]=\"PAGE_SIZE\"\n\t\t\t[totalRecords]=\"totalRecords\"\n\t\t\t[loading]=\"loading\"\n\t\t\t[lazy]=\"true\"\n\t\t\t[filterDelay]=\"1000\"\n\t\t\t[customSort]=\"true\"\n\t\t\t[value]=\"openIncidents\"\n\t\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t\t<ng-template pTemplate=\"caption\">\n\t\t\t\t<div class=\"search-filter justify-content-end\">\n\t\t\t\t\t<div class=\"text-end\">\n\t\t\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\tsize=\"50\"\n\t\t\t\t\t\t\tplaceholder=\"Search Incident...\"\n\t\t\t\t\t\t\tdata-cy=\"incident-search\"\n\t\t\t\t\t\t\tclass=\"wd-90\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"header\">\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Description' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"started_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.StartedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"started_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"resolved_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ResolvedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"resolved_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"last_check_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"last_check_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Duration' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tclass=\"actions-list-two\">\n\t\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"body\"\n\t\t\t\tlet-incident>\n\t\t\t\t<tr>\n\t\t\t\t\t<td data-head=\"description\"\n\t\t\t\t\t\tclass=\"description\">\n\t\t\t\t\t\t{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"serviceImpacted\">\n\t\t\t\t\t\t{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"startedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.started_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"resolvedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.resolved_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"lastCheckedAt\">\n\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t{{ incident?.last_check_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Duration\">\n\t\t\t\t\t\t<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n\t\t\t\t\t\t{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t\t<li ngbTooltip=\"Edit\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"navigateToEdit(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li ngbTooltip=\"Delete\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t</p-table>\n    <div *ngIf=\"openIncidents.length === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n        [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n\t<span class=\"total-records-count\"*ngIf=\"openIncidents.length !== 0\" >Total: {{openIncidents.length }}</span>\n\t</div>\n</div>\n<pw-no-data [withImage]=\"true\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\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)}.incidents-wrapper .table thead th{border:0;border-bottom:1px solid rgb(222,226,230)}.incident-item{color:#3f3f44;font-size:14px;line-height:1.42857;padding:10px 0}.incident-item .description{color:var(--first)}.incident-item:last-child{border-bottom:0!important}.ql-editor.safe-html{margin:0;font-size:13px;padding:0}.safe-html p{margin:0;font-size:13px}\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.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.DatePipe, name: "date" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: IncidentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-incident-list', template: "<div class=\"row\">\n\t<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n\t\t<h2 class=\"card-title p-0 float-start\">Incidents</h2>\n\t\t<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n\t\t\t(click)=\"showList = !showList\"\n\t\t\thref=\"javascript:void(0)\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n\t\t\trole=\"button\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t{{ 'Label.AddNew' | transloco }} Incident\n\t\t</a>\n\t</div>\n</div>\n<div *ngIf=\"!isLoaded\"\n\tclass=\"w-100 text-center mt-3\">\n\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div *ngIf=\"showList\"\n\tclass=\"row faqlist primeng-datatable-container mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n\t<div class=\"col-12 px-0\">\n\t\t<p-table #tt\n\t\t\t[paginator]=\"totalRecords !== 0\"\n\t\t\t[rows]=\"PAGE_SIZE\"\n\t\t\t[totalRecords]=\"totalRecords\"\n\t\t\t[loading]=\"loading\"\n\t\t\t[lazy]=\"true\"\n\t\t\t[filterDelay]=\"1000\"\n\t\t\t[customSort]=\"true\"\n\t\t\t[value]=\"openIncidents\"\n\t\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t\t<ng-template pTemplate=\"caption\">\n\t\t\t\t<div class=\"search-filter justify-content-end\">\n\t\t\t\t\t<div class=\"text-end\">\n\t\t\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\tsize=\"50\"\n\t\t\t\t\t\t\tplaceholder=\"Search Incident...\"\n\t\t\t\t\t\t\tdata-cy=\"incident-search\"\n\t\t\t\t\t\t\tclass=\"wd-90\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"header\">\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Description' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"started_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.StartedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"started_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"resolved_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ResolvedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"resolved_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"last_check_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"last_check_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Duration' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tclass=\"actions-list-two\">\n\t\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"body\"\n\t\t\t\tlet-incident>\n\t\t\t\t<tr>\n\t\t\t\t\t<td data-head=\"description\"\n\t\t\t\t\t\tclass=\"description\">\n\t\t\t\t\t\t{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"serviceImpacted\">\n\t\t\t\t\t\t{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"startedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.started_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"resolvedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.resolved_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"lastCheckedAt\">\n\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t{{ incident?.last_check_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Duration\">\n\t\t\t\t\t\t<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n\t\t\t\t\t\t{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t\t<ul class=\"list-unstyled list-inline\">\n\t\t\t\t\t\t\t<li ngbTooltip=\"Edit\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"navigateToEdit(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li ngbTooltip=\"Delete\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t</p-table>\n    <div *ngIf=\"openIncidents.length === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n        [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n\t<span class=\"total-records-count\"*ngIf=\"openIncidents.length !== 0\" >Total: {{openIncidents.length }}</span>\n\t</div>\n</div>\n<pw-no-data [withImage]=\"true\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\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)}.incidents-wrapper .table thead th{border:0;border-bottom:1px solid rgb(222,226,230)}.incident-item{color:#3f3f44;font-size:14px;line-height:1.42857;padding:10px 0}.incident-item .description{color:var(--first)}.incident-item:last-child{border-bottom:0!important}.ql-editor.safe-html{margin:0;font-size:13px;padding:0}.safe-html p{margin:0;font-size:13px}\n"] }]
+            args: [{ selector: 'pw-admin-incident-list', template: "<div class=\"row\">\n\t<div *rbacAllow=\"'Pages.Admin.Incident.Create'\"\n\t\tclass=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n\t\t<h2 class=\"card-title p-0 float-start\">Incidents</h2>\n\t\t<a [routerLink]=\"[routers.incidentDetails + 'add']\"\n\t\t\t(click)=\"showList = !showList\"\n\t\t\thref=\"javascript:void(0)\"\n\t\t\tclass=\"btn btn-sm btn-outline-primary float-end\"\n\t\t\trole=\"button\"\n\t\t\taria-expanded=\"false\">\n\t\t\t<i class=\"fa fa-plus-circle\"\n\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t{{ 'Label.AddNew' | transloco }} Incident\n\t\t</a>\n\t</div>\n</div>\n<div *ngIf=\"!isLoaded\"\n\tclass=\"w-100 text-center mt-3\">\n\t<p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n</div>\n<div *ngIf=\"showList\"\n\tclass=\"row faqlist primeng-datatable-container mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n\t<div class=\"col-12 px-0\">\n\t\t<p-table #tt\n\t\t\t[paginator]=\"totalRecords !== 0\"\n\t\t\t[rows]=\"PAGE_SIZE\"\n\t\t\t[totalRecords]=\"totalRecords\"\n\t\t\t[loading]=\"loading\"\n\t\t\t[lazy]=\"true\"\n\t\t\t[filterDelay]=\"1000\"\n\t\t\t[customSort]=\"true\"\n\t\t\t[value]=\"openIncidents\"\n\t\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t\t<ng-template pTemplate=\"caption\">\n\t\t\t\t<div class=\"search-filter justify-content-end\">\n\t\t\t\t\t<div class=\"text-end\">\n\t\t\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t\t\t(input)=\"tt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\tpInputText\n\t\t\t\t\t\t\tsize=\"50\"\n\t\t\t\t\t\t\tplaceholder=\"Search Incident...\"\n\t\t\t\t\t\t\tdata-cy=\"incident-search\"\n\t\t\t\t\t\t\tclass=\"wd-90\">\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"header\">\n\t\t\t\t<tr>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Description' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ServiceImpacted' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"started_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.StartedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"started_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"resolved_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.ResolvedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"resolved_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tpSortableColumn=\"last_check_at\">\n\t\t\t\t\t\t{{ 'Admin.Incident.LastCheckedAt' | transloco }}\n\t\t\t\t\t\t<p-sortIcon field=\"last_check_at\"></p-sortIcon>\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t\t{{ 'Admin.Incident.Duration' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t\t<th scope=\"true\"\n\t\t\t\t\t\tclass=\"actions-list-two\">\n\t\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t\t<ng-template pTemplate=\"body\"\n\t\t\t\tlet-incident>\n\t\t\t\t<tr>\n\t\t\t\t\t<td data-head=\"description\"\n\t\t\t\t\t\tclass=\"description\">\n\t\t\t\t\t\t{{(incident?.description | removeHtml: 'quill')|textTruncate: 200}}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"serviceImpacted\">\n\t\t\t\t\t\t{{ incident?.service_impacted ? incident?.service_impacted :\n            incident?.url_impacted }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"startedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.started_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"resolvedAt\">\n\t\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t\t{{ incident?.resolved_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"lastCheckedAt\">\n\t\t\t\t\t<span class=\"text-nowrap\">\n\t\t\t\t\t\t{{ incident?.last_check_at | date: 'dd-MMM-YYYY, h:mm a' }}\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Duration\">\n\t\t\t\t\t\t<!-- {{ calculateDuration(incident?.resolved_at ? incident?.resolved_at :\n            incident?.last_check_at, incident?.started_at) }} -->\n\t\t\t\t\t\t{{ calculateDuration(incident?.resolved_at,\n            incident?.started_at) }}\n\t\t\t\t\t</td>\n\t\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t\t<li ngbTooltip=\"Edit\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"navigateToEdit(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li ngbTooltip=\"Delete\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-2\">\n\t\t\t\t\t\t\t\t<i (click)=\"onDelete(incident)\"\n\t\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</ng-template>\n\t\t</p-table>\n    <div *ngIf=\"openIncidents.length === 0 && totalRecordsUnFiltered !== 0\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"\n        [description]=\"'Search.NoDataDescription' | transloco\">\n      </pw-no-data>\n    </div>\n\t<span class=\"total-records-count\"*ngIf=\"openIncidents.length !== 0\" >Total: {{openIncidents.length }}</span>\n\t</div>\n</div>\n<pw-no-data [withImage]=\"true\" *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\"\n  [message]=\"'Admin.Incident.NoDataMessage' | transloco\">\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)}.incidents-wrapper .table thead th{border:0;border-bottom:1px solid rgb(222,226,230)}.incident-item{color:#3f3f44;font-size:14px;line-height:1.42857;padding:10px 0}.incident-item .description{color:var(--first)}.incident-item:last-child{border-bottom:0!important}.ql-editor.safe-html{margin:0;font-size:13px;padding:0}.safe-html p{margin:0;font-size:13px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.CommonService }] });
 class AddEditIncidentComponent extends AppBaseComponent {
@@ -7307,11 +7309,11 @@ class AddEditIncidentComponent extends AppBaseComponent {
         this.router.navigate([`${this.routers.incidentConfig}`]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddEditIncidentComponent, deps: [{ token: i0.Injector }, { token: i1$1.CommonService }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddEditIncidentComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"isLoading\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\" *ngIf=\"!isLoading\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\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)}\n"], dependencies: [{ kind: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: "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.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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddEditIncidentComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"isLoading\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\" *ngIf=\"!isLoading\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\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)}\n"], dependencies: [{ kind: "component", type: i7$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { 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: "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.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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddEditIncidentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-add-edit-incident', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"isLoading\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\" *ngIf=\"!isLoading\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\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)}\n"] }]
+            args: [{ selector: 'pw-admin-add-edit-incident', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"w-100 text-center mt-3\"\n            *ngIf=\"isLoading\">\n            <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\" *ngIf=\"!isLoading\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\" [modules]=\"editorConfig\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd-M-yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.CommonService }, { type: i3$2.DomSanitizer }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -7504,11 +7506,11 @@ class AddFaqComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddFaqComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddFaqComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Add New FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"], dependencies: [{ kind: "directive", type: i4$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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddFaqComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Add New FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'quill-container': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"], dependencies: [{ kind: "directive", type: i4$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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddFaqComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-add-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Add New FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"] }]
+            args: [{ selector: 'pw-admin-add-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Add New FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'quill-container': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -7896,11 +7898,11 @@ class EditFaqComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFaqComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditFaqComponent, selector: "pw-admin-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\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=\"p-2 mt-3\" *ngIf=\"!isLoaded\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"], dependencies: [{ kind: "directive", type: i4$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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditFaqComponent, selector: "pw-admin-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\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=\"p-2 mt-3\" *ngIf=\"!isLoaded\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'quill-container': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"], dependencies: [{ kind: "directive", type: i4$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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i5$1.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: 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { 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: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFaqComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\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=\"p-2 mt-3\" *ngIf=\"!isLoaded\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"] }]
+            args: [{ selector: 'pw-admin-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\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=\"p-2 mt-3\" *ngIf=\"!isLoaded\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'quill-container': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\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)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -7946,13 +7948,215 @@ class NewsLetterItemViewComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsLetterItemViewComponent, deps: [{ token: i0.Injector }, { token: i3$2.DomSanitizer }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsLetterItemViewComponent, selector: "newsletters-items-view-detail", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"onBackNavigation()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h2 class=\"mt-2 mb-0\">Newsletter</h2>\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 *ngIf=\"isLoaded\">\n  <div class=\"container-fluid pw-tab overflow-hidden mt-3\" *ngIf=\"communicationDetails\">\n    <div class=\"card pb-0\">\n      <div class=\"card-body p-4\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n              </span>\n              <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n              </span>\n            </div>\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n              <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 mb-3 ms-2\">\n            <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n          </div>\n          <div class=\"col-12 mb-3 ms-2\">\n            <h1>{{ communicationDetails?.title }}</h1>\n          </div>\n          <div class=\"col-12 ms-2\">\n            <div class=\"ql-container ql-snow body-quill\">\n              <div class=\"ql-editor\"\n              [innerHTML]=\"communicationDetails?.body\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsLetterItemViewComponent, selector: "newsletters-items-view-detail", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"onBackNavigation()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h2 class=\"mt-2 mb-0\">Newsletter</h2>\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 *ngIf=\"isLoaded\">\n  <div class=\"content-quill-wrapper container-fluid pw-tab overflow-hidden mt-3\" *ngIf=\"communicationDetails\">\n    <div class=\"pb-0\">\n      <div class=\"card-body p-4\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n              </span>\n              <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n              </span>\n            </div>\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n              <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 mb-3 ms-2\">\n            <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n          </div>\n          <div class=\"col-12 mb-3 ms-2\">\n            <h1>{{ communicationDetails?.title }}</h1>\n          </div>\n          <div class=\"col-12 ms-2\">\n            <div class=\"ql-container ql-snow body-quill\">\n              <div class=\"ql-editor\"\n              [innerHTML]=\"communicationDetails?.body\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}.ql-container{resize:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsLetterItemViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'newsletters-items-view-detail', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"onBackNavigation()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h2 class=\"mt-2 mb-0\">Newsletter</h2>\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 *ngIf=\"isLoaded\">\n  <div class=\"container-fluid pw-tab overflow-hidden mt-3\" *ngIf=\"communicationDetails\">\n    <div class=\"card pb-0\">\n      <div class=\"card-body p-4\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n              </span>\n              <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n              </span>\n            </div>\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n              <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 mb-3 ms-2\">\n            <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n          </div>\n          <div class=\"col-12 mb-3 ms-2\">\n            <h1>{{ communicationDetails?.title }}</h1>\n          </div>\n          <div class=\"col-12 ms-2\">\n            <div class=\"ql-container ql-snow body-quill\">\n              <div class=\"ql-editor\"\n              [innerHTML]=\"communicationDetails?.body\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}\n"] }]
+            args: [{ selector: 'newsletters-items-view-detail', template: "<div class=\"row\">\n  <div class=\"col-12 d-flex\">\n    <a href=\"javascript:void(0)\"\n      (click)=\"onBackNavigation()\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n      <h2 class=\"mt-2 mb-0\">Newsletter</h2>\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 *ngIf=\"isLoaded\">\n  <div class=\"content-quill-wrapper container-fluid pw-tab overflow-hidden mt-3\" *ngIf=\"communicationDetails\">\n    <div class=\"pb-0\">\n      <div class=\"card-body p-4\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center mb-md-2\">\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span [ngClass]=\"communicationDetails?.is_pushed ? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_pushed ? 'Pushed' : 'Not Pushed' }}\n              </span>\n              <span [ngClass]=\"communicationDetails?.is_sent? 'badge bg-success' : 'badge bg-danger'\" class=\"me-2 mb-2 mb-md-0\">\n                {{ communicationDetails?.is_sent ? 'Sent' : 'Not Sent' }}\n              </span>\n            </div>\n            <div class=\"d-flex flex-wrap mb-3 mb-md-0\">\n              <span class=\"badge bg-blue-grey mb-2 me-2 mb-md-0\">{{ 'Send At (' + (communicationDetails?.send_at | date: 'dd-MMM-YYYY') + ')' }}</span>\n              <span class=\"badge bg-grey mb-2 mb-md-0\">{{ 'Send Until (' + (communicationDetails?.send_until | date: 'dd-MMM-YYYY') + ')' }}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 mb-3 ms-2\">\n            <span><i class=\"fas fa-map-marker-alt\"></i> <span class=\"ms-2\">{{ communicationDetails?.location || 'Not set' }}</span></span>\n          </div>\n          <div class=\"col-12 mb-3 ms-2\">\n            <h1>{{ communicationDetails?.title }}</h1>\n          </div>\n          <div class=\"col-12 ms-2\">\n            <div class=\"ql-container ql-snow body-quill\">\n              <div class=\"ql-editor\"\n              [innerHTML]=\"communicationDetails?.body\">\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".badge-success,.badge-danger{padding:.5rem 1rem;border:1px solid black;font-size:1rem;display:inline-block;text-align:center}.badge-success{background-color:green;color:#fff}.badge-danger{background-color:red;color:#fff}.date-span{padding:.5rem 1rem;font-size:1rem;border:1px solid black;display:inline-block;text-align:center}.light-gray{background-color:#d3d3d3;color:#fff}.gray{background-color:gray;color:#fff}.card-body{padding:1.5rem}h4,h5{font-weight:700;margin-bottom:.5rem}p{margin-bottom:1rem}.d-flex{display:flex;align-items:center}.me-3{margin-right:1rem}.container-fluid{padding:0}.mb-3{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.button-width{width:100px}.ql-container{resize:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i3$2.DomSanitizer }, { type: i1.AdminService }] });
+class MailerComponent extends AppBaseComponent {
+    constructor(injector) {
+        super(injector);
+        this.items = [
+            {
+                id: 'mailer',
+                label: 'Mailers',
+                icon: 'fa fa-fw fa-envelope',
+                routerLink: ['/admin/mailers']
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MailerComponent, selector: "pw-mailer", usesInheritance: true, ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, styles: [".text-truncate{max-width:150px}.card-body{min-height:65vh}\n"], dependencies: [{ kind: "component", type: i9.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-mailer', template: `<pw-tabs [items]="items"></pw-tabs>`, styles: [".text-truncate{max-width:150px}.card-body{min-height:65vh}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+class MailerListComponent extends AppBaseComponent {
+    constructor(adminService, injector, cdr) {
+        super(injector);
+        this.adminService = adminService;
+        this.cdr = cdr;
+        this.data = {
+            custom_emails: [],
+            object_count: 0,
+            unfiltered_count: 0
+        };
+        this.searchText = '';
+        this.loading = true;
+        this.isLoaded = false;
+        this.page = 1;
+        this.routers = ROUTERS;
+    }
+    ngOnInit() {
+        this.localStorage.getItem$(TOKEN_KEY).subscribe(res => {
+            this.userLoggedIn = !!res;
+            if (this.userLoggedIn) {
+                this.subscriptionId = PermissionService.selectedSubscription?.id;
+            }
+        });
+        this.getMailers({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: '',
+            order_direction: '',
+            search: this.searchText
+        });
+    }
+    ngAfterViewChecked() {
+        this.cdr.detectChanges();
+    }
+    onLazyLoad(event) {
+        const pageDetails = HelperService.onTableLazyLoad(event);
+        this.page = pageDetails.page;
+        this.getMailers({
+            page: this.page,
+            page_size: PAGE_SIZE,
+            order_by: pageDetails.sortField,
+            order_direction: pageDetails.sortOrder,
+            search: this.searchText
+        });
+    }
+    getMailers(paging) {
+        this.isLoaded = false;
+        this.adminService.getMailers(paging, this.subscriptionId || null).subscribe(response => {
+            this.data = response;
+            this.availableMailerTypes = response?.custom_emails?.map(email => email.template_name);
+            this.loading = false;
+            this.isLoaded = true;
+        });
+    }
+    onDelete(item) {
+        swal.fire({
+            title: 'Delete',
+            text: `Are you sure you want to delete?`,
+            showCancelButton: true,
+            reverseButtons: true,
+            icon: 'warning'
+        }).then(rep => {
+            if (rep.value) {
+                this.adminService.deleteMailer(item.id, this.subscriptionId).subscribe(() => {
+                    this.data.custom_emails = this.data.custom_emails.filter(x => x.id !== item.id);
+                    this.data.object_count--;
+                    if (this.data.object_count === 0 && !this.searchText) {
+                        this.data.unfiltered_count = 0;
+                    }
+                    this.toast.success(this.translation.translate('Admin.Mailer.DeletedMessage'));
+                });
+            }
+        });
+    }
+    navigateMailerItems(id) {
+        this.router.navigate([`/admin/mailer/items`], { queryParams: { mailer_id: id } });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerListComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MailerListComponent, selector: "pw-mailer-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\">Mailers</h2>\n      <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n        class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.mailerDetails + 'add']\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Mailer\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-3\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.custom_emails\"\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=\"name\">\n            {{'Label.Subject' | transloco}}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"active\">\n            {{'Label.Body' | transloco}}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"name\">\n            {{'Label.TemplateName' | transloco}}\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=\"Name\">\n           {{item.subject}}\n          </td>\n          <td data-head=\"Body\">\n            {{(item.body|removeHtml: 'quill')|textTruncate: 200}}\n           </td>\n           <td data-head=\"Name\">\n            <span [appDynamicBadge]=\"{ itemsArray: availableMailerTypes, item: item.template_name }\"\n            color=\"cyan\"\n            class=\"badge\"> {{item.template_name}}</span>\n           </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.mailerDetails + 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                (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=\"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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  </div>\n  <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Mailer.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: "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: 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: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i13.TextTruncatePipe, name: "textTruncate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-mailer-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\">Mailers</h2>\n      <button *rbacAllow=\"'SubscriptionSuperAdmin'\"\n        class=\"btn btn-outline-primary btn-sm float-end m-0\"\n        [routerLink]=\"[routers.mailerDetails + 'add']\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Create Mailer\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-3\"\n    [class.hideTable]=\"data.unfiltered_count === 0\">\n    <p-table #tt\n      [value]=\"data.custom_emails\"\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=\"name\">\n            {{'Label.Subject' | transloco}}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"active\">\n            {{'Label.Body' | transloco}}\n          </th>\n          <th scope=\"true\"\n            pSortableColumn=\"name\">\n            {{'Label.TemplateName' | transloco}}\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=\"Name\">\n           {{item.subject}}\n          </td>\n          <td data-head=\"Body\">\n            {{(item.body|removeHtml: 'quill')|textTruncate: 200}}\n           </td>\n           <td data-head=\"Name\">\n            <span [appDynamicBadge]=\"{ itemsArray: availableMailerTypes, item: item.template_name }\"\n            color=\"cyan\"\n            class=\"badge\"> {{item.template_name}}</span>\n           </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[routers.mailerDetails + 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                (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=\"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 *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  </div>\n  <div *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Mailer.NoDataMessage' | transloco\"> </pw-no-data>\n  </div>\n" }]
+        }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
+class MailerDetailsComponent extends AppBaseComponent {
+    constructor(adminService, injector) {
+        super(injector);
+        this.adminService = adminService;
+        this.submitted = false;
+        this.buttonBusy = false;
+        this.routers = ROUTERS;
+        this.isLoading = true;
+        QuillHelper.init();
+        this.editorConfig = QuillHelper.getEditorConfig();
+        this.form = AppAdmin.getMailerForm();
+    }
+    ngOnInit() {
+        console.log('In thismhkj,bknm');
+        this.subscriptionId = PermissionService.selectedSubscription?.id;
+        this.route.params.subscribe(params => {
+            this.id = Number(params['id']);
+            this.getMailerTypes();
+            if (!this.id) {
+                this.isLoading = false;
+            }
+        });
+    }
+    get f() {
+        return this.form.controls;
+    }
+    getMailerDetails() {
+        this.adminService
+            .getMailerById(this.id, this.subscriptionId)
+            .subscribe(response => {
+            this.data = response;
+            const { value } = this.availableMailerTypes.find(mailer => mailer.label === response.template_name);
+            this.form.patchValue({ ...this.data, template_name: value });
+        })
+            .add(() => {
+            this.isLoading = false;
+        });
+    }
+    getMailerTypes() {
+        this.adminService.getMailerTypes(this.subscriptionId).subscribe(response => {
+            this.availableMailerTypes = Object.entries(response.items).map(([key, value]) => ({
+                label: key,
+                value: value
+            }));
+            this.availableMailerTypes.unshift({
+                label: 'Select',
+                value: null
+            });
+            this.id && this.getMailerDetails();
+        });
+    }
+    onSave() {
+        const rawHtml = HelperService.SaveRawHTML();
+        this.form.controls['body'].setValue(rawHtml);
+        const { label: templateName } = this.availableMailerTypes.find(item => item.value === this.form.value.template_name);
+        this.buttonBusy = true;
+        this.submitted = true;
+        const data = {
+            ...this.form.value,
+            template_name: templateName,
+            subscription_id: this.subscriptionId
+        };
+        const sub$ = this.id
+            ? this.adminService.updateMailer(data, this.id)
+            : this.adminService.addMailer(data);
+        sub$.subscribe({
+            next: _ => {
+                this.id
+                    ? this.toast.success(this.translation.translate('Admin.Mailer.UpdatedMessage'))
+                    : this.toast.success(this.translation.translate('Admin.Mailer.AddedMessage'));
+                this.back();
+            }
+        }).add(() => {
+            this.buttonBusy = false;
+            this.submitted = false;
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerDetailsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: MailerDetailsComponent, selector: "pw-mailer-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" [routerLink]=\"[routers.mailerDetails]\" class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Mailer: {{ isLoading ? '' : (data?.id ? \"Edit\" : 'Add New') }}</span>\n        </h3>\n      </div>\n\n    <div class=\"w-100 text-center mt-3\" *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n    </div>\n\n    <div class=\"p-2 mt-3\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n        <div class=\"row\">\n          <!-- Subject Field -->\n         <!-- Subject Field -->\n<div class=\"col-12 col-md-6\">\n  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.Subject' | transloco\"\n    [label]=\"'Label.Subject' | transloco\" class=\"mb-3\" name=\"subject\" [errorMsg]=\"'Admin.Mailer.Validation.Subject' | transloco\">\n    <input type=\"text\" class=\"form-control\" formControlName=\"subject\" [ngClass]=\"{ 'is-invalid': submitted && f['subject'].errors }\" />\n  </pw-input-container>\n</div>\n\n<!-- Body Field -->\n<div class=\"col-12 col-md-6\">\n  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.TemplateName' | transloco\"\n  [label]=\"'Label.TemplateName' | transloco\" class=\"mb-3\" name=\"template_name\" [errorMsg]=\"'Admin.Mailer.Validation.TemplateName' | transloco\">\n              <p-dropdown [options]=\"availableMailerTypes\"\n                formControlName=\"template_name\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['template_name'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n</div>\n<pw-input-container  [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.Body' | transloco\"\n[label]=\"'Label.Body' | transloco\" class=\"mb-3\" name=\"body\" [errorMsg]=\"'Admin.Mailer.Validation.Body' | transloco\">\n<quill-editor [styles]=\"{ height: '450px' }\"\n  class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n  formControlName=\"body\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'quill-container': true  }\">\n</quill-editor>\n</pw-input-container>\n\n          <!-- Form Actions -->\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n</div>", dependencies: [{ kind: "component", type: i6.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { 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: "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.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: "component", type: i7$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+}
+__decorate([
+    ValidateForm('form'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], MailerDetailsComponent.prototype, "onSave", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: MailerDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-mailer-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" [routerLink]=\"[routers.mailerDetails]\" class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Mailer: {{ isLoading ? '' : (data?.id ? \"Edit\" : 'Add New') }}</span>\n        </h3>\n      </div>\n\n    <div class=\"w-100 text-center mt-3\" *ngIf=\"isLoading\">\n      <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n    </div>\n\n    <div class=\"p-2 mt-3\" *ngIf=\"!isLoading\">\n      <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n        <div class=\"row\">\n          <!-- Subject Field -->\n         <!-- Subject Field -->\n<div class=\"col-12 col-md-6\">\n  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.Subject' | transloco\"\n    [label]=\"'Label.Subject' | transloco\" class=\"mb-3\" name=\"subject\" [errorMsg]=\"'Admin.Mailer.Validation.Subject' | transloco\">\n    <input type=\"text\" class=\"form-control\" formControlName=\"subject\" [ngClass]=\"{ 'is-invalid': submitted && f['subject'].errors }\" />\n  </pw-input-container>\n</div>\n\n<!-- Body Field -->\n<div class=\"col-12 col-md-6\">\n  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.TemplateName' | transloco\"\n  [label]=\"'Label.TemplateName' | transloco\" class=\"mb-3\" name=\"template_name\" [errorMsg]=\"'Admin.Mailer.Validation.TemplateName' | transloco\">\n              <p-dropdown [options]=\"availableMailerTypes\"\n                formControlName=\"template_name\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['template_name'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n</div>\n<pw-input-container  [showTooltip]=\"true\" [tooltipText]=\"'Admin.Mailer.Tooltip.Body' | transloco\"\n[label]=\"'Label.Body' | transloco\" class=\"mb-3\" name=\"body\" [errorMsg]=\"'Admin.Mailer.Validation.Body' | transloco\">\n<quill-editor [styles]=\"{ height: '450px' }\"\n  class=\"quillEditor quill-editor\" [modules]=\"editorConfig\"\n  formControlName=\"body\"\n  [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'quill-container': true  }\">\n</quill-editor>\n</pw-input-container>\n\n          <!-- Form Actions -->\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\" [buttonBusy]=\"buttonBusy\" class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</div>\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
 const routes = [
     {
         path: '',
@@ -8251,6 +8455,46 @@ const routes = [
                     }
                 ]
             },
+            {
+                path: 'mailers',
+                data: {
+                    title: 'Mailer',
+                    permission: 'Pages.Admin.Mailer'
+                },
+                children: [
+                    {
+                        path: '',
+                        component: MailerComponent,
+                        children: [
+                            {
+                                path: '',
+                                redirectTo: 'list',
+                                pathMatch: 'full'
+                            },
+                            {
+                                path: 'list',
+                                component: MailerListComponent
+                            }
+                        ]
+                    },
+                    {
+                        path: 'add',
+                        component: MailerDetailsComponent,
+                        data: {
+                            title: 'Mailer',
+                            permission: 'Pages.Admin.Mailer'
+                        }
+                    },
+                    {
+                        path: ':id',
+                        component: MailerDetailsComponent,
+                        data: {
+                            title: 'Mailer',
+                            permission: 'Pages.Admin.Mailer'
+                        }
+                    }
+                ]
+            },
             {
                 path: 'subscriptions',
                 data: {
@@ -8719,6 +8963,9 @@ class AdminModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: AdminModule, declarations: [UserTabComponent,
             SubscriptionComponent,
+            MailerComponent,
+            MailerListComponent,
+            MailerDetailsComponent,
             NewsletterComponent,
             FaqListComponent,
             DomainConfigListComponent,
@@ -8870,6 +9117,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                     declarations: [
                         UserTabComponent,
                         SubscriptionComponent,
+                        MailerComponent,
+                        MailerListComponent,
+                        MailerDetailsComponent,
                         NewsletterComponent,
                         FaqListComponent,
                         DomainConfigListComponent,